A web page in 15 lines or less

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
  • 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?

  1. Save the file as .htm or .html in a directory/folder on your hard drive.
  2. Open the file in a browser like FireFox, Explorer, Safari, or Netscape.
  3. Review how it looks and make corrections.
  4. Transfer/copy the file to the web server (ONID’s public_html directory).
    • ftp://ftp.onid.orst
  5. 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 &copy; <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>