The first tag in any HTML file is the <HTML> tag. This tells web browsers that the document is an HTML file.
The second tag is a <HEAD> tag. Information between the HEAD tags doesn't appear in the browser window, but is still important. It is called meta information. The most important meta information in the HEAD tag is the <TITLE> tag. All HTML documents must have a title. Generally, the title should reflect the contents of the page (like a book's title reflects the contents of the book), so you will be changing this title to better describe whatever sort of web page you are creating. The document title will appear in the title bar (the bar at the top of your browser window). Look up at the top of your browser window right now. It says "basic html tags". The title text doesn't show up in the main browser window (where the text you are now reading is located).
The true content of your web page starts after the HTML, HEAD and TITLE tags. It is contained inside the <BODY> </BODY> tags.
So the basic skeleton of every web page looks like this (the tags will always appear in this order) and you will have one only of each of these tags on your web page):
Notice that all the tags have these < > around them? These brackets tell the browser that the text inside the brackets is to be read as an HTML command. Look at <HTML> and </HTML>. Do you see the difference? The first one, <HTML>, has no / (forward slash). It is the opening tag. The second one, </HTML>, has a / (this is called a forward slash). It is the closing tag. You need to be very careful about closing your HTML tags.
There are very few HTML tags that don't require a closing tag, so be sure you get into the habit of closing your tags.
Now we are ready to start creating the true content of the web page by putting information between the <BODY></BODY> tags. Generally, the first line of an HTML page will be a HEADING tag. If you think about a HEADING as part of an outline of a document, the first HEADING (<H1></H1>) tag is roman numeral one, a second level heading (<H2></H2>) would be roman numeral two, and so on. In most cases, the first heading on a web page will be the same as, or similar to, the document title to let people know right off what the page is about.
<H1> is the largest size heading, which you would normally use at the start of a document. <H6> is the smallest, with <H2> to <H5> of varying sizes in between them.
This text is an example of an H1 heading
here is the HTML for this: <H1>This text is an example of an H1 heading</H1>
This text is an example of an H6 heading
here is the HTML for this: <H6>This text is an example of an H6 heading</H6>
Always remember to CLOSE your HTML tags!
When we talk about style elements in HTML, we mean tags that affect the appearance of the text on a page. That can mean how the text is spaced, and also how the text looks.
Page formatting tags:
These tags affect how the text is spaced on a page:
The spaces between this line and the line above and below are examples of paragraph tags.
Text style tags:
Text style tags affect the appearance of text on a page. You already know about text style tags as you use them all the time in word processors like MS Word. When you select text and click on the B button in MS Word your text turns bold, right? HTML works the same way, but we need to use HTML tags to tell the browser what text style to use.
The two most useful text style tags are:
Remember: you have to CLOSE the text style tags just like you have to close heading tags.
Now let's start the actual building of a web page.
To begin your page:
TIP: If you are comfortable copying and pasting, you can copy and paste the tags into Notepad. To copy and paste on a PC:
To copy and paste on a Mac:
Note on using TextEdit (Mac OS X users): Before you start creating your HTML page using TextEdit, change the preferences by going to the TextEdit menu and selecting Preferences. Under New Document Attributes, check Make Plain Text and Wrap Text. Under Saving, uncheck the Append ".txt" extension to plain text files button. Then click the red button in the upper left corner of the Preferences window to save these changes. If you don't do this it will make your page RTF (Rich Text Format) which will destroy all your HTML coding.
A note about copying and pasting: the tags may not be aligned to the left of the Notepad window after you paste them in. While this won't affect the HTML, it may be confusing for you visually, so feel free to clean up the tags and line them up to the left in your Notepad window.
Next: Saving Your Work