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:
- <P> </P> - Paragraph. Inserts an empty line (it's like double-spacing in word processing).
The spaces between this line and the line above and below are examples of paragraph tags.
- <HR> - Horizontal line. Useful for breaking up sections of your page. Creates a shadowed line across the page. The shadowed line you see below this text is an example of the <HR> tag. The <HR> tag is one of those exceptions I mentioned, and doesn't need a closing tag.
- <BR> - Line break. Doesn't insert a space between lines, just forces a break between lines of text. TIP: if you want to create blank lines on your page, use multiple <BR> tags, not the <P> tag as the browser only sees the first <P> tag and ignores the others but sees and creates a line break for all <BR> tags.
The space (or lack of it, actually) between this line and the line above it is an example of a line break. The <BR> tag doesn't need a closing tag.
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:
- <B> ... </B> - Bold
<B>Example of bold text tag.</B>
- <I> ... </I> - Italics
<I>Example of italicized text tag at work.</I>
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:
- Open Notepad (it is usually found from the Start button, under Programs in the Accessories folder). Mac users: open TextEdit or SimpleText.
- Create your "template" (basic page) which must contain the tags we discussed at the beginning of this section by typing the following HTML tags that make up the structure of every web page.
- <TITLE> XYZ Library </TITLE>
- <H1>XYZ Library</H1>
The actual content of your page will go between the opening and closing BODY tags. Everything before the <BODY> is information that describes your document to web browser and server software. It doesn't appear in the browser window.
TIP: If you are comfortable copying and pasting, you can copy and paste the tags into Notepad. To copy and paste on a PC:
- Take your mouse and place your cursor at the beginning of the text, click the left mouse button then pull your mouse over the text. This highlights the text.
- Release the left mouse button.
- With the cursor over the highlighted text, right click the mouse for options, and select Copy or use the keyboard shortcut CTRL+C to copy the selected text.
- Go to your open Notepad window and make sure your cursor is in the Notepad window.
- Right-click your mouse again and select Paste or use the keyboard shortcut CTRL+V to paste the copied text.
- The text you copied will be pasted into the Notepad window.
To copy and paste on a Mac:
- Take your mouse and place your cursor at the beginning of the text, click and hold the mouse button then pull your mouse over the text. This highlights the text.
- With the cursor over the highlighted text, press the Control key and click and hold the mouse down on the highlighted text and select Copy from the menu or use the keyboard shortcut Apple+C to copy the selected text.
- Go to your TextEdit or SimpleText window and click inside it so your cursor is in the right place.
- Control-click your mouse again and select Paste or use the keyboard shortcut Apple+V to paste the copied text.
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