UNIT 2 > MODULE 2

Lesson 2: Essential Tags

Overview

There are some basic tags you must add to every HTML document you create. In the prevoius unit, you create a new file called index.htm. In the current lesson you will add a few basic required tags to this file, thereby beginning the construction of your portfolio. These basic tags provide a skeleton for any web page.

Learner Outcomes

At the completion of this exercise:

Activities

  1. Open a simple text editor program such as Notepad and navigate to the "portfolio" folder you created in the Pre-coding lesson. Open the "index.htm" file.
  2. Type the following in order to create the basic HTML structure of a web page. Note that you'll personalize the highlighted text contained in the title tags.

    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">

    <html>

    <head>

    <title>Web Portfolio of (Your Name)</title>

    </head>

    <body>

    </body>

    </html>

    You may find it easier to read if you add extra blank lines as you see in the example above. Also, indenting content that is inside of other content helps you to see the relationship between all their parts of the page.

    Remember: Extra spaces and blank lines will be ignored when the HTML is displayed by a browser.

    Let's now examine each of these tags:

    • The first line is called the XML declaration which states what version of XML is in use, and what character encoding system is used for displaying all fonts. This line is only used for XHTML documents, not HTML.
    • The second line is the DOCTYPE. It specifies the version of HTML you are using. In this case, we are using a "strict" interpretation of XHTML 1.0. A common mistake among web developers is neglecting to include a DOCTYPE statement. Browsers will display a page differently depending on which version of HTML the page was designed in. Without a DOCTYPE statement, browsers have to guess, and sometimes they get it wrong.
    • <html> is typed before all the text in the document. This marks the beginning of the html document.
    • <head> Web pages are divided into two main sections: the head and the body. The head provides information about the document, including the author, description, keywords, title, and other information. In our "bare bones" document the only content in the head section of our web page is the title.
    • </head> This marks the closing of the head section.
    • <title> You must give your document a title. This title doesn't actually appear within the web page, but appears in the title bar of the browser window. This is also the title of the page that will be displayed by default in search engine results or in user's Favorites.
    • </title> closes the title tag.
    • <body> The body section contains the contents of your document.
    • </body> closes the body tag.
    • </html> ends the html document.
  3. Save the index.htm file. Now open this index.htm file in your browser. You will notice that the screen is blank. This is because you don't have any content yet in your body section. However, you should see your title displayed in browser's title bar, usually across the top of the browser window.
  4. Return to the text editor and the index.htm file. Now you'll make three other pages for your website. To save time copy the code from index.htm and paste to the new pages. Each time change the title to reflect the content of the new page. Then save each new file in your root folder with the following file names:
    • unit4.htm
    • unit5.htm
    • unit6.htm

Resources/Online Documents

All done?

For each page of your site, is the appropriate title displayed in the browser's title bar? After you have saved all your changes to index.htm and the other pages, keep your browser and text editor open to the index.htm file. Show your instructor your results before starting Lesson 3.