What Is HTML

HTML LECTURE Multimedia System and Design

Ms. Solane Duque Computer Science Section

What is HTML?

HTML – Hypertext Markup Language is the standard language that is used for writing web pages. It is a set of logical codes (markup) and parentheses that constitute the appearance of a web document and the information it contains.

The formatted hypermedia documents that make up the Web are transmitted across the wires using the one data format that is pretty much standard across all computer models: 7-bit ASCII code, which consists of English Letters, punctuations, and numerals.

The word “markup” is derived from the practice of marking up a typewritten manuscript with handwritten instruction to the typesetter. A “markup language” puts those formatting instructions in plain-text commands called “tags”

Tags are used to denote the various elements in an HTML document. These tags are the instructions that surround any material such as text, images, and links and tell the viewer’s Wed browser how to display them. There are many different forms of tags with many different uses. Some tags may be used for formatting while others may be used for linking to other documents.

There are six important things to know about HTML tags:

1. Tags are always surrounded with angle brackets (less than/greater than characters) for example ; <HTML>

2. Tags are case-insensitive, it doesn’t matter whether you type them in upper or lower case. Fro example: <B> or <b>, the browser doesn’t care. They are equal.

3. Most tags comes in pairs and surround the materials they affect. They work like a light switch: the first tag turns the action on, and the second turns it off. There are however, exceptions in the case of the <P> tag which creates a paragraph – it does not need an “off-switch”

4. The second tag or “off-switch”, always starts with a forward slash. For example, you turn on Bold with <B>, to your text, and turn it off with </B>

5. Thinking of tag-sets as container will help in another way: it will help to remember that tags should always be balanced. In other words, you should keep containers nested within each other, just as you would have to do in the real world. For example:

<Head<Title>Your Text </Head</Title> will not work in HTML

<Head<Title> Your Text </Title> <Head> is the correct format.

6. Many tags have optional attributes and use values to modify the tags behavior. The P> tags ALIGN attribute, for instance, it lets you change the default paragraph alignment (left) to center, as follows: <P ALIGN=CENTER> - this command centers the paragraph following it.

Developing a Web Page

A page is a single HTML document, no matter how long it is, it’s what you find on the other side of the link (or, more precisely, what a server has sent to your local system in response to a request from your browser)

1. Sketch out materials in a “storyboard” fashion.

2. Reduce and reformat non-text media

3. Edit (convert existing text to) HTML-formatted text, adding frequent references to documentation and existing Web pages.

4. Examine the results by dragging the HTML file to a properly set-up Web browser. You will need two windows open on your browser while you’re working: one to hold the reference materials, and another to view your own work.

5. Experiment with different ways to arrange text and graphical elements.

6. Experiment with breaking up the document in different ways. You may want to use a flow chart as a visual aid.

7. Copy the end products to a publicly accessible place, and test each section of the site with two Web browsers.

8. Revisit and revise as desired.

Basic HTML Structure

The minimal web document should always look something like this:

<HTML>

<HEAD>

</HEAD>

<BODY>

…

</BODY>

</HTML>

To start doing your web page, follow the steps below:

1. Click on START button located at the Windows Task Bar

2. Click on PROGRAMS and then click on the directory menu labeled ACCESSORIES

3. Locate and click on the shortcut called NOTEPAD

4. When in the Notepad, type the following:

<HTML>

<HEAD>

<TITLE> My first Web Page </TITLE>

</HEAD>

<BODY> Welcome to my First Web Page. I’m Solane. </BODY>

</HTML>

5. Save the document by following the steps below:

Click on FILE

Select SAVE AS

In the FILE NAME, type DOCUMENT1.HTML

6. View your Web Page by following the steps:

In Netscape Navigator

Click on FILE

Locate and click on OPEN PAGE

In the OPEN PAGE dialog box, click on the CHOOSE FILE button and locate the web document. Ensure that the NAVIGATOR button option is clicked to preview the work in the browser widow.

After choosing the file, click on OPEN.

In Microsoft Internet Explorer

Click on the menu FILE

Locate and click on OPEN

In the OPEN dialog, click on the BROWSE button and locate the web document, click OK.

To make changes on the document, edit the document on the notepad and press [SHIFT] key then on the IE, click REFRESH.

Create new document and type the following save it as DEMO1.HTML. When viewed, you should get the same results as below.

<HTML>

<HEAD>

</HEAD>

<BODY> This is a demo page.

<H1> Header 1 </H1>

<H2> Header 2 </H2>

<H3> Header 3 </H3>

<H4> Header 4 </H4>

<H5> Header 5 </H5>

<H6> Header 6 </H6>

</BODY>

</HTML>

Minimal HTML Reference

Name / Tag or Tag Pair / Effect

Structural Tags

HTML Document
Document Header
Document Title
Document Body

Text Formatting Tags

Top-level heading
Second-level heading
Third-level heading
Citation
Strong Emphasis
Block Quote
Preformatted / <HTML>…</HTML>
<HEADER> … </HEADER>
<TITLE> … </TITLE>
<BODY> … </BODY>
<H1>…</H1>
<H2>…</H2>
<H3>…</H3>
<CITE> … </CITE>
<STRONG> … ,</STRONG>
<BLOCKQUOTE> … </BLOCKQUOTE>
<PRE> … </PRE> / Declares that this is a Web Document
Undisplayed information about the document
Title of the document; shown by the browser above or below the main display
All displayed portions of the document must appear inside these tags.
Formats the text as a chapter title, in large bold text with space around it.
Formats text as a sub-chapter title, with slightly smaller type and spaces than H1
Formats text as section title, in bold with a little space around it.
Formats text as a book title or foreign word, usually italicized.
Formats text as being very important, usually bold-faced.
Formats text as a self-contained bunch of text, usually with extra space on all sides
Leaves the text with line breaks, blank lines, and extra spaces intact; usually with a mono spaced font, such as courier.

Text Separation

Paragraph Break
Line Break
Horizontal Rule / <P>
<BR>
<HR> / Separate one paragraph from another; usually inserts a double-space
Breaks a line at the given point
Inserts some space and a horizontal line, nicely breaking up the page

Lists

Unordered List
Ordered List
List Item
Definition List
Defined Term
Defined Definition(!) / <U> <LI> … </UL>
<OL> <LI> … </OL>
<LI> …
<DL> <DT> … <DD> … </DL>
<DT>…
<DD> … / Sets up a list of items that aren’t considered to be in any particular order; usually solid bullets are inserted at the beginning of each item in the list.
Sets up a list of items that are considered to have a natural ordering; usually numbers are inserted at the beginning of each item in the list
Marks the beginning of a new item in the list; if it’s a numbered list, a new number is generated; it it’s a bulleted list, you get a new bullet; you can include paragraph breaks, formatting instructions, and even sublists inside a list item.
A list of pairs of items
Marks the beginning of the first part of a “definition” pair; for example, a term that will be explained or the name of a person; usually left justified.
Marks the beginning of the last part of a “definition” pair; for example, the explanation of a term or a description of a person; usually indented.
Hyperlinks and Embedded Graphics
Link
Embedded Image / <A HREF+”…”> … </A>
<IMG SRC=”…”> / Marks the enclosed text as a link to the URL pointed to by the HREF attribute; usually color codes or underlines the linking text
Inserts the contents of the graphics file pointed to by the SRC attribute

Paragraphs

Create and save DEMO2.HTML with the following contents. When viewed, you should get something like the figure below.

<HTML>

<HEAD>

</HEAD>

<BODY>

<P> Welcome to the World of HTML </P>

<P> This is the First Paragraph </P>

<P> While this is the Second Paragraph </P>

<P Align = Center > This demonstrates the Align = Center </P>

<P Align = Right > And this demonstrates the Align = Right </P>

</BODY>

</HTML>

Line Breaks

Type the following codes and save it as DEMO3.HTML.

<HTML>

<HEAD>

</HEAD>

<BODY>

<P> Welcome to the World of HTML

<BR> This demonstrates the Line Breaks </BR>

<BR Clear = Right> And this demonstrates the BR Clear = Right </P>

</BODY>

</HTML>

Horizontal Rule

Type the codes below and save it as DEMO4.HTML.

<HTML>

<HEAD>

<BODY>

<H1> This is Header 1 with normal line break </H1>

<HR>

<H2> This is Header 2 with Center line break </H2>

<H3> This is Header 3 with red line break </H3>

<H4> this is Header 4, noshade line break </H4>

<H5> This is Header 5 with size (30) line Break </H5>

<H6> and this is Header 6 with width (200) line breaks </H6>

</BODY>

<HTML>