Anatomy of a Web Page
Web pages are written in HyperText Markup Language commonly
referred to as html. This language tells the browser how to display the page
on the screen.
This page describes the basic anatomy of a Web page.
The Skeleton:
Artists note: This drawing is meant to
illustrate
the "bare bones"
structure of a html document.
<html>
This tag tells the browser that it is loading a html document. It is preceded by a DOCTYPE statement that tells the browser what version of html the document is written in. This DOCTYPE is automatically inserted by most modern html editors.
<head>....</head>
The <head> tags contain information about the page including
the <title>,<meta> tag and stylesheet information as described
below.
<head>
<title>This is a Web page</title> - If no title is entered, it
will default to "Untitled"
<meta name="author" content="HTML MAN">
<meta name="keywords" content="html, stick people, skeletons">
<meta name="description" content="This page describes the
"bare bones" structure of a Web page.">
<link href="authoring.css" rel="stylesheet" type="text/css">
</head>
Tips:
- The "<title>" tag is what is what is used by search engines to link to your page. If left blank, it will default to "Untitled."
- <meta> tags are also used by search engines to describe your page and to classify it according to it's content
- <stylesheets> are recommended to assist in separating the design of the page from the content of the page. See CSS How To for additional information.
<body>....<body>
The <body> tag contains basic information that the browser uses to display the page. The "guts" or content of the Web page goes In between the opening <body> tag and the closing </body> tag. Listed below are some of the most common types of content used.
Text - Text can be displayed in various sizes. There are six sizes of heading text, paragraph text as well as bold and italic text attributes.
Tables - Tables are used to display tabular data. They shouldn't be
used for controlling the design of the site. That can be done through stylesheets.
A table that displays tabular data can be seen below.
| Day of Week | Event |
|---|---|
| Friday | Basketball game 2:30 p.m. |
Lists - There are two types of lists, bulleted and numbered. Examples can be seen below:
<ul>
<li>Unordered list item</li>
</ul>
which displays
- Unordered list item
<ol>
<li>Numbered list item</li>
</ol>
which displays
- Numbered list item
Images
- Images used on the Web are normally in .gif or .jpg format. Software such as Adobe Photoshop and Paint Shop Pro can be used to create .gif images or crop and edit photographs for use as .jpg images.
- You must specify an alternative text description (alt="this is an image"). This is required in order to make your Web page accessible.
- Specify the width and height of the image. This helps speed up the page load time.
- Always crop the image to be the size you want to display in the browser. Do not size the image simply by telling the browser to make it 300 pixels wide and 150 pixels tall.
Links - Links connect one Web page to another. The Internet is one big collection of links.
<a href="/directory/pagename.html">This is a link within
the same site</a>
<a href="http://www.offsitelink.com">This is an off-site
link</a>
Tips:
- If you fail to specify a bgcolor, your page might display with a dull gray background.
- Do not use too many different fonts. It can make the page look cluttered and hard to follow.
- If you can't see the information you put into a table, it could be because you failed to include a closing </table> tag.
- Lists can be useful in organizing the text on a page. People reading text on a Web page frequently scan and look for bullet points.
- Images increase the time it takes for a page to load. Limit the number of images on one page and try to keep individual images to about 30K in size.
- If you have off-site links in your Web page, it is your responsibility to ensure that they continue to function. It is also are recommended that you include the statement, "Washburn University doesn't endorse external links."
</html>
This closing tag tells the browser that this is the end of this page.
Final Tip
- Run your page through a validator such as http://validator.w3.org and correct any errors it identifies to make sure your html code is valid.
Questions or comments about this site may be addressed to Eileen Brouddus, University Webmaster.