Elements of a Web Page

Creating a Web Page using HyperText Mark-up Language (HTML) is actually very simple. HTML uses tags that browsers (e.g., Netscape and Internet Explorer) can interpret. The tags tell the browser how to display the page. Tags are invisible to the viewer of the page.

Each tag begins with a less-than sign (<) and ends with a greater-than sign (>), e.g., <tag>. The < and > symbols are known as "wickets." Tags usually come in pairs: there is a beginning tag (<tag>) and an ending tag (</tag>). The ending tag is just like the beginning tag, except that it has a forward slash (/) following the less-than sign. (Next week we will go over the rules for XHTML - the latest version of HTML. It's not very different from HTML 4.0.)

The first tag in any html document is always <html>.
The next tag you will type is <head>. It tells the browser that the head section is beginning. The browser uses information in this section to identify your web page.
The title of the page, which appears on the title bar in the browser window, is entered in the head section. There is a beginning title tag, the title and an ending title tag:
<title>My Web Page</title>.
To end the head section, type </head>.
The next tag you will type is <body>. It tells the browser that the body section is beginning.
Text that appears on the web page is entered in the body section. The text does not have to have any tags around it. Tags are used to format the text. For example, to make the text bold, use the beginning bold tag at the beginning of the text, and use the ending bold tag at the end: Hello World. (The bold tag used to be "". The "" tag is deprecated. See the note below about deprecated tags.)
At the end of the body section, you need a closing body tag: </body>.
The last tag in any html document is always </html>.
Enter the code below in Notepad and save it as hello.html. Open it in a browser and check for errors.

Show your code and web page to your instructor for teacher check!

An example of HTML code:
<html>
<head>
<title>My Web Page</title>
</head>
<body>
Hello World
</body>
</html>

This Week's Tags - Learn These!
Beginning Tag	Ending Tag	Purpose
<html>	</html>	Tells the browser to begin/end interpreting html text. The <html> tag is the first tag. The </html> tag is the very last tag.
<head>	</head>	Tells the browser the heading section is beginning/ending. The <head> tag is the first tag in the heading section. The </head> tag is the last tag in the heading section.
<title>	</title>	Sets the title for the page. The format is <title>Title</title>. The title appears in the browser's title bar.
<body>	</body>	Tells the browser the body section is beginning/ending. The <body> tag is the first tag in the body section. The </body> tag is the last tag in the body section and the next to the last tag in the HTML code.
<b>	</b>	Makes text between the beginning and ending tags bold. The format is <b>Hello World</b>. The <b> tag is deprecated, which means that it will not be supported in future versions of HTML.
<em>	</em>	The emphasis tag makes text between the beginning and ending tags italic. The format is <em>Hello World</em>. The <em> tag replaces the <i> tag.
<i>	</i>	Makes text between the beginning and ending tags italic. The format is <i>Hello World</i>. The <i> tag is also deprecated.
<strong>	</strong>	Makes text between the beginning and ending tags bold in most browsers. The format is <strong>Hello World</strong>. The <strong> tag replaces the <b> tag.
<u>	</u>	Makes text between the beginning and ending tags underlined. The format is <u>Hello World</u>. The <u> tag is also deprecated! You will need to learn cascading style sheets to replace it. We'll get to this - much later!

You can use multiple formatting tags on the same text: Hello World produces Hello World. When you use multiple tags, it is important to keep them in order by adding pairs of tags to the inside/outside of the text block. This is known as FILO - First In Last Out. Back to the Week 1 Schedule