The Anatomy of a Web Page at Ricci Street's Gizmos, Inc. Toolkit: PC Workshop

When you view the source code of a web page, you view it in a text editor because it is a simple ASCII text file. All the intelligence is in the browser, which knows how to interpret the tags.

As you can see on Webmonkey's Cheatsheet, there are only a couple dozen tags. At How Stuff Works, Marshall Brain's Basic HTML Formatting Tags takes the same short list, groups the tags differently, and adds comments. While I agree with most of them, I think he left out some things you might need to know, which I've put on this page.

For those of you who learn by doing, which includes everyone I know, you might want to practice some coding at Project Cool or try the similar Webtop service at How Stuff Works' Try it!

You can also use a text editor and browser on your own computer as on the Getting Started page. For a complete, comprehensive list of tags and attributes, nothing beats the HTML Compendium.

Remember that this hand-coding is a relatively painful process that will last only a short time but return many benefits later. I especially recommend not using FrontPage or a similar editor until you can better read and write HTML on your own.

To learn how to read HTML, you need to be able to view the source code of a web page.

option 1: pull down the View menu and select Source
option 2: right click in an open area (neither text nor graphics) and select View Source

You also might want to review other basic skills and what do to if the View Source option isn't available when you right click.

If you encounter a tag or attribute not explained here, please let me know and I'll add it.

Mechanical attributes of a web page

optimized for one version of one browser only <----> optimized for multiple browsers

What's on the page?

doc type

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">

This tag is not necessary now, but it will be more important in the near future, so you should get used to what it does for you. It declares the kind of document that follows and the standards it conforms to. FrontPage may add this tag automatically.

head tags

Let's take a look at the page's HTML code, tag by tag. First, we'll look at what's between the head tags <head> and </head>.

title

The title appears in the very top bar of the browser. This title for your page is different from the file name, which will end in .htm or .html. It is also different from the largest heading, which will probably appear to the viewer as the "title" of the page and should be enclosed in a pair of h1 tags.

The title of the page you're viewing now is The Anatomy of a Web Page on Ricci Street's Gizmos, Inc: Toolkit. In the HTML code, this instruction to the browser appears between the head tags:

As you can see in the browser's Address (Microsoft) or Location (Netscape) box, the file name of the page you're now viewing is webpageanatomy.htm.

Choose the title of your page carefully. The title is listed in bookmarks, search engines, favorites, and when you use the Save As .. function in Microsoft's browser. Other webmasters who link to the page may use the title as the text of their link. The title figures importantly when a search engine is weighing the relevance of your page against a searcher's keywords. Remember, a visitor could bookmark any page on your web, so give all pages useful and accurate titles.

Does each individual page's title clearly indicate that it belongs to your web?
Does the title appropriately reflect the contents of each page?
Does the title stand alone, that is, does it makes sense if it is taken out of context?

meta

These optional tags appear between the head tags of a document. Each has a name attribute and a content attribute. You can see three meta tags by viewing the source of any Ricci Street page. I use the author tag for my name. I have recently tried to remember to put my email address there, too. Some web makers add a copyright notice here, too.

The content of the description meta tag will appear in a search engine's results, usually right after the content of the title tag.

The content of the keyword meta tag is what the search engine databases will use to help determine the relevance of your page to someone's search. Think of the keywords as handles by which a searcher can grab your page.

If you want the search engines to interpret these meta tags appropriately, use the names exactly as I have them here. The content, however, is up to you. The search engines are adjusting their ranking criteria constantly. Here's what Fredrick Marckini had to say to WebReference.com about search engine positioning in the summer of 2001: part I | part II.

Most corporate Web sites, marketing departments, and designers are unaware of the fact that they have a problem. Their multi-million dollar Web site investments are dead on arrival at the search engines. They've built aesthetically beautiful Web sites that won't attract visitors because they can't be found in the search engines.

A good example is EduKids. It's a Buffalo area day-care provider. If you use EduKids or EduKids Buffalo as search terms at Google, you'll get lots of stuff about the company but not the corporate web site. When you finally do find the corporate site at

http://www.edukidsinc.com/

and do a view source, you'll see why. Except for the title tag, the word "Edukids" doesn't appear anywhere as text. There are no meta tags, no H tags, no P tags that have the word. In the browser, you'll see that every "EduKids" is an image, and there are no alt attributes to the img tags. In addition, the site uses frames, so all the uses of the word "EduKids" appears in the framed pages, which the search engine spiders don't follow.

Thus, the EduKids site does almost everything wrong (the title tag is ok) and as a result is almost inaccessible via Google. That's a marketing disaster and I'll bet anything that the site was done by very expensive people from the print world who don't quite "get it".

link

The link tag will let you link to another file. I use it on every Ricci Street page to link to the common style sheet.

You can give it any title you want. The href is the path to the file. Leave the rel and type attributes exactly as they are here.

style

Instead of linking to the style sheet, I could embed the style instructions in every page between style tags in the head.

The advantage to linking is that I can use the same sheet for many pages and, conversely, change only that one sheet to change all the pages linking to it.

Using both is just fine. In fact, you can also put style instructions into the body of a web page as you go along. If they contradict, the browser will give them this priority:

1) inline, that is, within the body
2) in the head, between a pair of style tags
3) in a linked style sheet

That's why they're called cascading style sheets and why the text file has a .css extension. Learn more.

script

Just as there are three levels for style information, so there are three levels for scripts. You might see a .vbs for Visual Basic script, but almost all are JavaScript.

1) inline, that is, a bit of JavaScript can be inserted into a tag
2) in the head, between a pair of script tags
3) in a linked separate .js file.

These are client-side scripts, which means they are either embedded into the HTML file (2 and 3) or separate files downloaded to the user's computer along with the HTML file. Go to Start | Find | Files or Folders and search for files named *.js in your C: drive. You're likely to find dozens if not hundreds.

There are also server-side scripts, which means they stay on the server and never get downloaded to the browser's cache. They are often tucked away backstage where the browser can't get to them. Typically, they are in a special directory called a cgi-bin, which stands for Common Gateway Interface - binary. These text files will have a .pl or .cgi extension but probably be written in PERL (Practical Extraction and Report Language). Examples on Ricci Street include the Ground Zero Bistro discussion forum and the In the Loop polls.

comments

You can put comments into your HTML to tell yourself, your colleagues, or your successors what you had in mind -- or tell them anything else that's on your mind.

They are often used in templates to remind content providers where to cut and paste. You can add an amount of content, thousands and thousands of words if you want to. The browser will ignore everything between these tags.

body tags

body

The pair of body tags <body> and </body> enclose everything not in the head, that is, everything that will be displayed by the browser. As the HTML Compendium explains,

The <body> tag defines the "canvas" of the page. This is the place, on the reader's screen, where all text and graphics appear.

A lot of attributes that go with this tag let you do useful things like play music with your page (bgsound=) or load large images you'll use on other pages. You can put JavaScript in here. Many of the attributes are handled better with the style tag or style sheets. Ricci Street pages have a body tag like this:

The background attribute loads what appears as a thin colored strip running down the left margin of each page. In fact, this is a very short (3 pixels) and very wide (1188 pixels) image that gets tiled. Because of its width, there's no horizontal tiling, only vertical, which creates the impression of a strip.

In case that file, gibgfade.gif, doesn't come in, the bgcolor attribute will provide a solid light brown background without the strip. The link and vlink (visited link) attributes' colors are specified by the style sheet. Should it not work, the links will be the colors I want.

The margin settings are to make the design of Ricci Street look more or less ok in Netscape's version 4 browsers, which would automatically offset everything without these zero-margin instructions.

headings

The idea here is that you will use h1 for more important information, h2 for next-most-important, and on down. If you find yourself using the whole range down to h6, you probably have a page that is way too complex. Think about chunking it into smaller pages.

paragraphs

For those of you old enough to remember typewriters, the p tag double-spaces and the br tag single-spaces.

Another way of saying that: the tag will tuck the next line underneath. It does not have a pair, that is, an ending or closing tag. The tag will skip a line. Put a closing or ending p tag, , where you want the paragraph to end and a new p tag to begin the next paragraph.

The tag has will left-justify the text by default. If you use the align attribute, or , you can right-justify the text or center it.

Note: Marshall Brain's Basic HTML Formatting Tags lists the p tag as unpaired. This is a very bad idea. Always put a closing or ending p tag, .

To change normal text to bold: 
To change normal text to italics: 
To change the font size: 
To change the font color:

Note that these tags are for changing, not setting. To set a document's usual (called "normal") text style and font size and color, I recommend style sheets. You would only use the tags shown here sparingly within a page for an occasional change.

space breaks

You can use <hr>, another unpaired tag which stands for horizontal rule, for a horizontal line. Here's the default, two pixels high, light gray, stretching across the whole screen.

Here's one that's a pixel high, black, and centered across 60% of the screen. The tag's attributes change the defaults slightly to <hr width="60%" size="1">.

Here's one that's ten pixels high, blue, and centered across 10% of the screen: <hr width="10%" size="10" color="#0000FF">

images

The image tag, <img> as the above, is one of the few without a pair. Learn more.

To make an image "hot", enclose it in an a pair of a tags. An example is the

throughout Ricci Street. The href to #top could go to any partial or complete URL.

The height and width let the browser leave appropriate space so that the page doesn't shift around as the images come in.

How do I add text NEXT to a picture on a web page?

Align it. Here's a sample image tag with the align attribute:

<img src="images/mrr15.gif" align="left">

or you can have align="right".

Then the trick is where you insert the image. Try inserting it in front of the first word in the text. Then try between the first two sentences. Then somewhere in the middle. Then at the very end of the text.

Another trick is hspace and vspace, for horizontal space and vertical space. For example:

hspace="25"

will put a 25-pixel wide blank space on both sides of the image, creating a visual padding between the image and the text.

I tried to put the photo in a "frame"

Use tables. Make a two-celled table. Put the text in one and the image in the other. Then adjust the table widths and spacing and padding to get the relative positioning you want.

tables

Don't try to code these by hand in a text editor. They're too complex, especially when you start to nest whole tables within single cells of other tables. For example, at the top of most Ricci Street pages, the navigation area is within a table with attributes:

The border attribute takes a pixel value that will put a border that wide around the whole table. Cell spacing goes between cells. Cell padding goes between the cell wall and the text or image.

The best way to learn is to play with table attributes. Open FrontPage, then open a page you've already started or start a new page.

Click on the Insert Table icon along the top -- it looks like a grid. Make a large table by pulling the cursor down and to the right. When you let up, a table with that many cells should appear on the page.

Go to your HTML view and study it.

Back in normal view, right-click in the table. Note the table properties and the cell properties. Explore every option of those two dialog boxes.

After a while, go farther down the page, make another table and make a mess there, too. Finally, put the cursor inside a table cell and go back up to the Insert Table icon. Insert a new table within a cell of the previous table. This is called "nesting" the tables.

When you're done, go to Webmonkey in your browser -- Microsoft's Internet Explorer 5 -- and click the Edit with Front Page icon on the browser's toolbar. That should open the page in FrontPage. You should recognize from the dotted lines that the page is held still horizontally by nested tables. Take the content out of the table cells and you'll probably end up with something that looks like your earlier experiments.

Hints

Put some text into the table because some options won't work without text to affect.

Check Preview view frequently to see how it will look. Especially if you set the table border to 0, the Preview view will look very different from the Normal view.

Check the HTML view frequently to see how your decisions have affected the code.

forms

I use forms throughout Ricci Street. You probably already filled out one about your basic skillset at the Gizmos, Inc., Lab. If you do a view source and scroll down about a fifth of the way, you'll see the form and input tags I've included below:

The form tag above uses the standard fmail Perl script used by better web sites worldwide. For your forms, don't change anything in the form tag except the value of the name attribute. Every form on a page must have a unique name.

The script needs three other inputs from you. Don't change the type or name attributes or their values. Change only the values (in blue) of the three value attributes.

(I apologize for any confusion over the use of the word value in two ways here, but I didn't make this up. I'm telling you the way it is, and indeed it is confusing. The information in blue is called the attribute's value throughout HTML yet there are attributes named value. So yes, the value attribute can have a value. Sorry.)

The first one will say where you want to form results emailed. If you want the results to go to more than one mailbox, just put a comma and then next email address. You can put as many as you want.

The email results will come from NoNameGiven@RicciStreet.net. If you want to know the user's name and email, ask for it. The subject line of that email will be the value you give to this input tag. Here's it's student skills.

Finally, it's very helpful to have something unambiguous happen after the user successfully sends in a form. This script will display whatever page you put the URL for here. I have special thank-you pages for just that purpose, and I recommend you do the same.

The above three values are necessary for the script to work at all. Two others are optional:

username = specifies the remote users email address for replies
realname = specifies the remote users real identity

They would not be type="hidden". They would be exposed, type="text" for the user to type in his/her name and email address. For example:

So you've decided it's time to interact with your users. You're tired of this one-way street � you talking, them listening. You want to actually hear what your readers have to say. In order to do this, you'll need to provide a way for people to enter information. Therefore, you're going to need an HTML form.

links

links to objects

You can make a link to any file you want to. However, the browser will display only text files and image files in the standard compressed formats of .gif and .jpg.

For audio files, such as .wav, .mp3 and .au, for video files such as .mpg and .avi, and for proprietary files, such as Microsoft's .doc or Adobe's .pdf, you'll need some help. The browser can't display them and you need a plug-in or stand-alone player such as Acrobat reader or Word.

lists

The ul and li tags are useful if they produce a look you want. Otherwise, you're out of luck. In FrontPage, you can pull down the Format menu and change the bullet and numbering styles.

What I end up doing is making my own lists with the bullet I made. You can get thousands free for the downloading at clipart sites like IconBazaar.

frames

Don't use them. I could make an exception for a quick, last-minute presentation of disparate web pages if only you will do the clicking. For anyone else, frames violate the mental models users rely on.

I find Jakob Nielsen's Why Frames Suck Alertbox column for December 1996 very persuasive.

Frames complicate ...

printing in some browsers

bookmarking

how other sites link to interior pages.

copying and pasting interior URLs from the browser to an e-mail program, etc.

the experience for users entering your site through interior pages

how search engines catalog interior pages

viewing space. Information in a frame gets obscured at some resolutions or window sizes or in certain browser types.

scrolling. You have to click into a frame to scroll it with a mouse wheel.

Basic skills

Open two browsers and a text editor

step 1: on the desktop, click on the blue e icon for IE (Microsoft's Internet Explorer)

step 2: click on the N icon for NN (Netscape's Navigator)

step 3: choose Start | Programs | Accessories | Notepad

step 4: grab an edge or corner and resize so all three are visible

Copy and paste text from browser to text editor

step 1: in browser window, highlight text - hold down left mouse button and drag

step 2: copy text to clipboard - CTRL-C (hold down CTRL key and press C)

step 3: switch to text editor

step 4: paste text - CTRL-V (hold down CTRL key and press V)

Save file in text editor to PC's desktop

step 1: in your text editor, click File then Save as ...

step 2: in the dialog box, pull down the Save in: list and select Desktop at the top

step 3: in Save as type: make sure it says All Files(*.*)

step 4: in File name: type in the filename and extension that you want

step 5: click Save or press Return

Tip | To show file extensions, right-click on My Computer and select Explore. In Windows Explorer, select View | Folder Options | View. Make sure that Show all files is selected and that Hide file extensions for known file types is not selected.

Save image from web page to PC's desktop

step 1: hover the cursor over an image and right click

step 2: select Save Picture As .. (IE) or Save Image As .. (NN)

step 3: go to step 2 under Save file above

Check out your web page while you make and edit it

If you did it successfully, you'll see on your desktop that the file has the Microsoft or Netscape icon above the file name. Learn more about saving to the desktop.

step 2: Open either browser (regardless of the icon) and drag this icon onto the browser's display area.

It should look exactly the same. Before, the Address (Microsoft) or Location (Netscape) box read:

step 3: Make changes to filename.htm in the text editor.

step 4: Save filename.htm, making sure you save it to the desktop so that it replaces the previous one.

step 5: Select Refresh or Reload from the browser's toolbar. The changed page should display.





Showroom information design	Playroom interactivity design	Research Lab usability design
Workbench web design applications	Kiln digital development process	Toolkit digital technology guide


search \| sitemap \| help
Ricci Green \| Digital Wares \| Gizmos, Inc. CyberSea Inn \| Port 80

modified: February 10, 2003 by Douglas Anderson http://RicciStreet.net/gizmos/toolkit/webmaking/webpageanatomy.htm

The Anatomy of a Web Page

The PC Workshop