Lesson 2: Essential Tags
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.
At the completion of this exercise:
- you will have learned the basic tags required for all XHTML documents.
- 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.
- 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
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<title>Web Portfolio of
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.
- 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.
- 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:
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.
Copyright © 2005-2008 by University of Washington.
Permission is granted to use these materials in whole or in part for
educational, noncommercial purposes provided the source is acknowledged.
This product was created with support from the National
Institute on Disability and
Rehabilitation Research of the U.S. Department of Education (grant
#H133D010306), and is maintained with support from
the National Science Foundation (grant #CNS-0540615). The contents do not
necessarily represent the policies of the U.S. federal government, and you
should not assume their endorsement.