ORGANIZING A PAGE

There are tags that allow you to organize how the web page looks. Lists that automatically keep track of the order of items listed. Tables to allow exact organization of a page contents. Frames to allow more than one page to display in the body at the same time. I-rames, a slight variation on frames.

Lists

Lists are a quick, easy way to present a series of items. They can be bulleted (unordered) or numbered/alphabetic (ordered). Lists can be nested, creating the familiar outline form. HTML will automatically keep track of numbering and indentation with the various list tags.

Unordered list
<ul> </ul> Attribute: type (circle, disc, square; default = disc)
Ordered list
<ol> </ol> Attributes: type (a, A, i, I, 1; default = 1), start
List items for both types:
<li> </li>

Tables

Any tag that can be used for text editing or file placement on a web page can be done within a cell or row of a table. Tables can be a very effective way to organize text and images. Below are the various tags and attributes.

<table> </table> Attributes: align, bgcolor, border, cellpadding, cellspacing, height, width

<caption attribute(s)> </caption> Attributes: align (bottom, top; top default), For Explorer use valign for bottom, align = right, left, center

<tr> </tr> Attributes: align, valign, bgcolor

<th> </th> and <td> </td> Attributes: align, valign, background, bgcolor, height, width, colspan, rowspan

<thead> </thead> and <tbody> </tbody> can be used to group rows, similar to how groups codes for web page. A table can have more than one tbody set.

Frames

Frames are complicated and can be prone to glitches when viewed by different browsers. A website that uses frames requires multiple files just to display what appears to be the home page. One file creates the actual frames structure. Each window/frame must have a separate web page file.

<frameset attribute(s) = " "> </frameset> defines the structure; attributes cols, rows, border, bordercolor

<frame attribute(s) = " " /> defines each element/frame content; attributes src, name, marginheight, marginwidth, scrolling(yes,no,auto)
name attribute is for use of targetting a link to a particular frame, just as <a name> was used with creating hper links that jump to a defined spot. The particular frame is named, and the link code in a different frame can 'target' that name and open the page in a different window. Example code: <frame name = "articles" /> as the changing frame and in the web page displayed in the frame holding the list of articles to display <a href = "art1.html" target = "articles">Display first article</a>

<noframe> </noframe> code to use if browser cannot display frames

Floating Frames
<iframe attributes> Attributes: name, src, width, height, frameborder (= 0 or 1), marginwidth, marginheight, scrolling
Links targetted to name of the iframe will display within the floating frame.

HTML Forms creation

Return to main page