HTML Structure

Here, the general structure of HTML pages is addressed. All web pages basically work the same, and these structural building blocks are integral to the creation of any page. Make sure to thoroughly review this tutorial, or nothing else will work.

Explanation of structure

All web pages are built in the same way, whether they are automatically generated or hand crafted. They have common starting points and ending points (which may or may not be expressly defined, but exist nonetheless), and the content can all be re-arranged based on a few powerful commands. And while some of these tags are always going to be used (most notably the HTML and Body tags), still others may or may not, just however the author wants to go with it.

General HTML tag structure

All web pages have an HTML tag at the beginning <html> (while not absolutely necessary, there aught to be a closing tag </html> at the end as well).

The HTML tag is usually followed by a header tag (<head>...<head>), which contains such goodies as title tags (<title>...</title>; the page title in the blue bar at the top of the browser) and meta tags (<meta>...</meta>; used to provide extraneous info for search engines and can contain dynamic properties). Meta tags can have several attributes, but only one attribute can be used per each Meta. Commonly used meta tags are listed below:

     <meta name="keywords" content="HTML,html,tutorials,web,site,website,web pages"> (gives search engines something to catalog)
     <meta name="description" content="This site is an HTML tutorial for starting web page authors"> (gives search engines something to reference)
     <meta name="Generator" content="Notepad"> (advertise your favorite HTML editor :p)
     <meta http-equiv="refresh" content="5; url=http://www.yahoo.com/"> (makes a new page load automatically in five seconds!)

The Body tag (<body>...</body>), which contains many of the overriding attributes for the page as well as introduce the main displayable material for the browser, must go right after the Header tag. The Body tag has many attributes associated with it. They include "background" (which takes a URL to an image as an argument and uses the referenced image as the page background), "bgcolor" (which accepts either a color name {"blue"} or hexadecimal color code {"#0000ff"} and makes the background that color; unless there is a background image specified, in which case the image is placed over the background color), "text" (takes a color name or hex code and uses that as the standard color for the document text), "link" (same as "text", but specifically colors links), "vlink" (same as "link", but colors only the links that have been previously clicked on), "alink" (same as "link", but only colors the link during the click).

One of the greatest traits of the internet is the hyperlink reference. Commonly referred to as just link, it seems that many people take this little function for granted, as without it the web couldn't work. It is created in HTML by using the Anchor tag (<a>...<a>) with the "href" attribute set to the url of the page to request after a click. It's this way that links are denoted in HTML: <a href="http://www.google.com">Google</a> creates a link to the Google search engine. The way that urls are entered as arguments can vary using what is called relative reference and absolute reference. Relative reference means that the url's location is relative to that of the current page, whereas the absolute reference works regardless of the current pages position. For example, the index page for this site can be called upon by putting in <a href="./index.html"> rather than <a href="http://www.allspark.com/html/index.html"> because the current page is in the same server directory (or folder). However, if this page was in one directory or folder below the index page, it'd have to be <a href="../index.html"> or the absolute reference would be used. The advantage of relative urls is that within the sites domain, it works better in case the site is ever relocated; none of the links will have to be changed if the folder structure is the same. However, if all the site links are absolute, they will all have to be editted to reflect the change. But, absolute links will always work, and relative urls can be a major pain in the ass to make them work. A rule of thumb is to use relative links on pages within the site and absolute for all pages outside the site. There is another thing to consider with anchor tags used as links, but they are in reference to framed pages, so that'll be discussed in that section.

Division elements (<div>...</div>) can be used in the same way as a paragraph in text formatting, but can be used for a variety of cool things, mostly in the area of DHTML and XML. It's main use is for horizontal alignment; <div align="center" /> most notably (which does the exact same thing as <center>...</center>) Other text dividers include the break command (<br />, which has an attribute that allows for the alignment of the text block or image to be cleared; <br clear="all" /> ) and the horizontal rule (<hr />, which draws a line across the screen; also has a width attribute as well). Another structural tag dealing with content is the Heading tags (<h1>...<h1>; the number 1 can be replaced with any number between 1-6; the bigger the number, the less important the text and the smaller it is).

Frames and HTML

Another structural element is the frame tag. Frames aren't quite like the other tags in this section, but they fit in this category better than any other. A frame is actually used to divide a browser window amongst multiple pages. They are especially useful with web sites that have a number of pages within and need a navigation bar to help the user make their way through the site.

To use frames effectively, there must be at least three pages made. Let's use the earlier example of a site needing a navigation frame: the first page is the content window, where the user will view the "meat" of the site; the second is the navigation frame, consisting of links to various pages within the site; the third is a page that contains the frame commands. What the third page actually does is create a page that sticks the other two together in whatever layout the author desires. This third page will look different from the regular HTML document, as it doesn't typically have a <body ...> tag in it.

The page will start out with <html>, as usual. However, from there, it looks different. The next tag will be the <frameset cols="X" rows="Y" border="Z">...<frameset> This tag with its attributes sets up the framework for the framed page. If you want your framed page to look like this:

then the code will look like this: <frameset rows="100, *" border="1 ">...<frameset>. Notice that there is no "cols" attribute there; you can only define columns or rows at a time. Also notice that the "rows" attribute has two arguments: "100" and "*". This means that there will be two rows and that one of them has a defined height of 100 pixels. The "*" is a wildcard that means that the bottom row can be sized to take up the remaining window space. There can be more than two rows placed in the framed page if desired, but the "rows" attribute can only have one wildcard: "100,*,50". Conversely, if the author wanted to have columns like this:

then the "cols" attribute would be used instead of the "rows" attrib. However, aside from that, it is set up the same way. The "border" attribute can be set to 0 or above and dictates the width of the frame borders. If set to "0", no borders will appear between the content and navigation pages. As can be told in the above two tables, there is an obvious border; with the "border" attrib set to "0", it'll look something like this:

.

The next tag is the <frame name="name of window" src=page url reference scrolling="yes or no" framespacing="X" resize/noresize> tag. It actually dictates what goes into the row or column defined by the <frameset ...> tag. The "name" attribute gives that particular window a name for links to reference (explained two paragraphs down) and is very important. The "src" attrib takes the url for the page that is to appear in the frame window. When the "scrolling" attribute is set to "no", no scrollbars appear in that frame window (desirable for a concise navigation frame, for example); otherwise, they do. "Framespacing" means that there is an invisible border surrounding the frame window that keeps the page from being flush against the "walls" of the frame page; think of it as a bumper between the borders of the frame. The "resize/noresize" attribute either allows or prevents users from changing the frame pages dimensions, just choose which one to place in there.

In the place of <frame ...> tags, however, one can place more <frameset ...> tags if desired. This would be done in order to attain a frame page that resembles this:

All that is required is that the page be set up like
<frameset cols="100,*" ...>
   <frame name="A" ...>
   <frameset row="50,50" ...>
      <frame name="B" ...>
      <frame name="C" ...>
   </frameset>
</frameset>

The last big element in a frames page is the <noframes>...</noframes> tag. Yes, there are people out there still having to use browsers that don't support frames. While tempting to just forget about that tiny percentage, netiquette demands that something be done for those using primitive browsing technologies. Inside the <noframes> tag, put in any information that would help the downtrodden web surfer figure out what happened. What I've done in the past is offer a link and/or a redirect to the main content page. This is also why there are still sites out there that have basic navigation functionality on the main window pages, in order to accomodate the less high tech surfer. Treat the <noframes> tag like a body tag; all other regular HTML tags will work inside that window. In fact, a <body> tag can precede the <noframes> tag in order that the no frames browsers will have a more typical looking alternative.

The beauty of a framed page is that the navigation page can stay on the screen while the other page can be swapped out depending on the link that is selected on the navigation side. However, this won't happen unless the links are situated properly. By default, links update the window they are in; so if you try to get away with just a barebones link in the navigation window, the linked page will load where the navigation frame is. You want it to go to the content window! The way to do that is with the anchor tag's "target="name of target"" attribute. The target name is that name which you gave the frame window about 3 paragraphs up.

Document structure tags and usage

code looks like this page looks like this

<html>
<head>
<title>sample page</title>
<meta name="keywords" content="tutorial,HTML">
</head>>
<body bgcolor="maroon" text="white" link="yellow">
<p />I don't like HTML.<br /><br />

Why don't you?<br /><br />

I just don't know anything about it!<br /><br />

Go <a href=http://www.allspark.com/html/>here</a> to learn about it!
</body>
</html> I don't like HTML.

Why don't you?

I just don't know anything about it!

Go here to learn about it!

Wrapup

All web pages have common structure elements, and they are integral to having a site work properly.
<html> should start every HTML document; at least before the <body ...> tag.
<head> contains the <title>title of page</title> and <meta ...> tags.
<body ...> contains all the viewable content of the site and its various attributes help dictate what the rest of the page will look like.
<a ...> tags are some of the most useful, as they are primarily used to create links to other pages either within the same site or outside it.
<div ...> tags are coming into their own as style sheets become more prevalent, but their actual use content wise is pretty low. They are mainly used to replace the old <center> tag.
<hX> tags are used to create header/titles. X may be any number between 1 and 6, and the larger the number the smaller the text size.
Frames, while different from the other tags covered here, is still a structural construct. While the framed pages require the use of the <frameset ...>, <frame ...>, and <noframe> tags, they combine to create a great effect.

code looks like this	page looks like this
<html> <head> <title>sample page</title> <meta name="keywords" content="tutorial,HTML"> </head>> <body bgcolor="maroon" text="white" link="yellow"> <p />I don't like HTML.<br /><br /> Why don't you?<br /><br /> I just don't know anything about it!<br /><br /> Go <a href=http://www.allspark.com/html/>here</a> to learn about it! </body> </html>	I don't like HTML. Why don't you? I just don't know anything about it! Go here to learn about it!