The anatomy of a web page
Roll over each each item below to read the <title> tag that describes it more.
- doctype
- html
- head
- title
- meta
- link to external style sheets and scripts
- internal styles and scripts
- close the head section
- body
- headlines
- paragraphs
- embedded images, movies, audio files
- lists
- tables
- hyperlinks and anchors
- image maps
- links to external scripts
- close the body section
- head
- close the document
How to markup a simple .xhtml page
Type the lines of code below in a text editor like NotePad, TextEdit, or SimpleText.
Line 1: Define the version of markup language you’ll be using in the page with:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Line 2: Define your File Type with:
<html xmlns="http://www.w3.org/1999/xhtml">
Line 3: Begin the Header with:
<head>
Line 4: Add the Title of the page so it doesn’t say "untitled" in the browser title bar:
<title>Soandso's Table of Contents</title>
Line 5: Add the first of several Meta tags. This one isn’t required, but tells browsers what character set you’re using.
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> or <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
Line 6: Link to a style sheet that has the color scheme, fonts, and layout styles you prefer. Start with this one:
<link href="http://oregonstate.edu/instruct/cs295/media/article.css" rel="stylesheet" type="text/css" />
Line 7: End the Header section with:
</head>
Line 8: Begin the Body section.
<body>
Line 9: Begin and end a Headline with:
<h1>Table of Contents for [myname]</h1>
Line 10: Begin and end a Subhead with:
<h2>List of Classes</h2>
Line 11: Begin and end Paragraphs with:
<p>Click each item listed below to view it.</p>
Now what?
- Save the file as .htm or .html in a directory/folder on your hard drive.
- Open the file in a browser like FireFox, Explorer, Safari, or Netscape.
- Review how it looks and make corrections.
- Transfer/copy the file to the web server (ONID’s public_html directory).
- ftp://ftp.onid.orst
- View the live web file on the Internet at your ONID web address.
- http://oregonstate.edu/~onidID/page.htm
Line 12: Begin and end a list of Navigational Links:
<ul> <li><a href="cs195/index.htm">CS 195</a></li> <li><a href="art300/index.htm">ART 300</a></li> </ul>
Line 13: Begin and end text that links to an Email Message Window, with:
<p>This site © <a href="mailto:soandso@onid.orst.edu">Soandso</a> 2004</p>
Line 14: End the Body with:
</body>
Line 15: End the File with:
</html>