indiWiz.com - WDD - HTML

Subhash's HTML Primer 2

< With XHTML & XML References >

After all the theory of HTML Primer 1, it is now time to go practical! Open your text editor, create a new document with the content given below, and save it as "first.html":

<html>
<head>
<title>My Page!</title>
</head>
<body>
Hello World!
</body>
</html>

(Note: All HTML documents need to be saved with the extension ".html" or ".htm".)

Now go the folder where you saved this file and click to open it. It should open in your web browser. In my Netscape6.x browser the page looked like this:

Netscape's Rendering of Page

Notice the message "My Page!" being displayed in the title bar. That is what the <title> tag does. The tag, within the <body> is the paragraph tag. Now make some changes to this file. Change the paragraph thus:

Hello
World!

Save the file and refresh your browser (Usually View>Refresh). You will notice no change in the browser rendering of your page. That is because HTML treats every kind of space - line feeds, tabs, newlines, multiple spaces - as single space. If you do want to print "World!" in the next line, you have to make use of the tag:

Hello World!

The tag creates a line break. So far our has been present without much formatting. Some of the formatting tags:

...: Italic Text
...: Bold Text
...: Strong Text
...: Empahsized Text
...: Underlined Text
<strike>...</strike>: ~~Strike-through~~ Text
...: ^Superscript Text
...: _Subscript Text

Suppose you want to display "Hello" in bold and "World!" in italics, the tag would be modified as:

Hello World!

You can check out other formatting tags in similar fashion. Shouldn't we now move on to Paragraph formatting options? Suppose you want to center the above paragraph, you would modify the code to:

Hello World!

The align attribute also takes the following valid values:

left
right
justify

Enough of ! Our document has been without a heading for quite some time. Shouldn't we add one? Heading tags are defined from <h1> to <h6>. <h1> creates the biggest looking heading and <h6> the smallest. Most of 's attributes and sub-tags (, , etc.) work with <h#> tags too. For our example, we will create a <h3> with centered alignment:

<h3 align="center">My First HTML</h3>

This should look as:

My First HTML

One last tag which I must cover in this primer is the <pre> tag. In some cases you may want to retain the text formatting, as you have typed, of part of your text. You put that part of the text within this tag. The text is displayed as it has been formatted.

Using "HTMLTry!"

So far in this tutorial we have been asking you to try out your HTML tags in your local disk. Once you master that(?), for checking how your page displays when you use a particular tag, you can use HTMLTry!. Just click on the HTMLTry! button on the top of this document.

Subhash's HTML Primer 2

< With XHTML & XML References >

My First HTML

Using "HTMLTry!"

User Comments