HTML
HTML, or Hypertext Markup Language, is the computer language used to create webpages for the Internet and the World Wide Web. HTML is relatively simple to learn, which means that almost anyone can create a personal web site, show-casing their hobby, pets, children or whatever.
One of the best ways to learn HTML is to go to a page you like, then view and/or copy that code, and dissect it to look at the parts you would like to use, and then integrate that code into your own web page.
To view the source code of a page while using Netscape, go to View and then Page Source, and then a separate browser page will open giving you all the code for that page. In order to copy that code, you need to select all the pertinent code with your mouse, and then use Ctrl+C, the keyboard command for copy. You can then past the code into Notepad or your HTML editor. Please note that with frames, this will only give you the code for the main frame. To view the code of each individual frame, right click in the frame you want to see, and then choose View Source. To view page source in Internet Explorer, from the Menu go to View and then Source. Mozilla and Netscape 6 view page source in the same manner as earlier versions (4x) of Netscape.
Although WordPad and Notepad can be used to create webpages, I would suggest using a free HTML editor, such as Arachnophilia (http://www.arachnoid.com/arachnophilia/), for editing, since it can greatly assist in troubleshooting, and can reduce the amount of typing you will need to do. Do not use a word processing program such as Word or Word Perfect to create HTML code, this will only lead to headache and heartache.
HTML Basics
HTML code is contained within greater than/less than, or angle, brackets (< >), and the combination of code + brackets is called a tag. HTML code can be written in either upper or lowercase, but the latest conventions prefer using lowercase, since this will not interfere with XML. Every page contains the same basic information and will, when all the details are pared away, look pretty much like this:
<html>
<head>
<title>Web Page Title</title>
</head>
<body background="Money.jpg" bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#800080" alink="#ff0000">
</body>
</html>
The <html></html> tags tell the browser that all the information contained between the opening <html> tag and the closing </html> tag is a web page. The <head></head> tags designate the head section of the document which contains the title information and sometimes other information, such as javascript code, some frame code and the meta tags for search engines. The <title></title> tags give the browser a name for the title bar. (This is the blue bar running across the top of the screen. For this page, the title is "HTML Lesson".) These tags are required for a web page, and all opening and closing tags must be present.
As mentioned, the head section can also provide information for search engines, using the <meta> tag. <meta>, which does not having a closing tag, has several different attributes that are used by search engines to classify web sites. The attribute name="keywords" content=""should contain a concise description of what is discussed on the page, with each heading word separated by a comma. The attribute name="description" content="" gives a description or summary of your page for search engines to use. Each of these attributes belongs in its own meta tag. For example:
<meta name="keywords" content="HTML, Lessons">
<meta name="description" content="HTML Basics for beginners.">
The <body></body> tags format viewable information. The <body> tag has several attributes, which define the elements of the page. The bgcolor attribute determines the color of the background, the text attribute sets the color for the text, while the link, vlink and alink attributes set the color for the various hyperlinks. The link attribute sets the color for a normal hyperlink, vlink designates the color of links to pages that have already been viewed by the visitor, and alink is for active links, or links after they have been clicked, as they are being processed. The colors for these attributes can be set using either the sixteen named colors: white, gray, silver, black, red, green, purple, blue, yellow, maroon, lime, fuchsia, olive, navy, teal, and aqua; or a hexidecimal code (check the list here), placed in quotation marks. Most HTML editors use hexidecimal codes, since this allows for a wider variety of colors within the page and allows for selection using a color chart. (In the above example, #ffffff is white, #000000 is black, #0000ff is blue, #800080 is purple and #ff0000 is red.) Be careful with text and background colors; some color schemes may be attractive, but they make text extremely difficult to read.
Another attribute of the body tag is background. This attribute is used to set up a background image (wallpaper) for the page. Please note that only jpg (Joint Photographic Expert's Group) and gif (Graphics Information File) should be used. Also note that the HTML file and the image file should be located within the same folder, unless the code specifies that the images is in another folder. Be careful when using a background; although any image can be used as a web page background, most images are not suitable for use as such. In general, small, tilable images are best, because they will load quickly onto the page. It is also important to make sure that the background is not an image that detracts from the page. The object of a background is to be just that--in the background. Washed out images in muted colors work best as backgrounds. Even though it is not required, it is a good idea to use a background color in combination with a background. This way, if the image used as the background fails to load, or if the images loads slowly, the scheme of the page is still maintained and text is still legible. White or yellow text against a white background is almost impossible to read.
Hidden Text or Comments
The tags <!-- (left bracket, exclamation point, dash, dash) and --> (dash, dash, right bracket) are used to place comments within the page that are hidden from the viewer. These comments can be placed within the head or the body of the document, although comments in the head of the document are commonly for javascript or frames. Words, lines or paragraphs of text can be placed within the hidden text tags.
<!-- This is how hidden text is added to the code -->
Hidden text is helpful if there are multiple people working on a page, since it can serve as an explanation of what sections of code are supposed to do. It is also used to hide javascript from older browsers that do not read javascript, and hidden text can be used as a marker in the code, making a specific section easier to find.
Breaks and Rules
HTML automatically wraps sentences at the edge of the browser window, and does not normally follow any text formatting; manual breaks must be added to the code. There are two types of breaks: A line break <br>, which is akin to hitting the enter key once at the end of a line, and a paragraph break <p>, which is equivalent to hitting the enter key twice at the end of a line. Neither break has a closing tag. A line break will always add a space, while a paragraph break only places space between two lines of text. If space is needed between images, stick with the line break.
Another element without a closing tag, is the horizontal rule <hr>. This simply inserts a line that runs across the page and separates one section of the page from the following section of the page.
Formatting text
Although the color of the text is set within the head of the document, there is much more that can be done to change the way letters look in a web page. Text formatting within the page is done using the <font></font> tags. The <font> tag is placed at the beginning of the text to be formatted and then the </font> tag is placed at the end of the line of text. The font for an entire page can be set by placing the <font> tag directly beneath the <body> tag and the </font> tag directly above the </body> tag.
There are several attributes of the font tag. The face attribute sets the font face for all text between the tags. A primary and secondary (or even a tertiary) font can be set, which allows you to use a more obscure font, while having a more common font as the secondary or backup font. If the first font does not exist on the viewer's computer, the second font will be used. If that second font also does not exist, then a third font will be attempted. If a web page specifies a font that a user's computer does not have, then the default font, typically Courier is used.
Another font attribute is size, where the size can be set to + or - 1, 2 or the font can be set with a size of 1 through 7. Three (3) is the default font size, so 1 and 2 are smaller than the default size, while 4 through 7 are larger than the default size. The color can be defined, again using either hexadecimal code or a color name, with the color attribute.
<font face="Creepy, Arial" size="5" color="red"> ... </font>
font size="-2" font size="-1" default font size font size="+1" font size="+2"
Font Size One
Font Size Two
Font Size Three
Font Size Four
Font Size Five
Font Size Six
Font Size Seven
Formatting text with styles, such as creating bold, italicized, or underlined text, is easily done with HTML. The tags are:
<b></b> for bold
<i></i> for italic
<u></u> for underline
<s></s> forstrikethrough.
Headings are text that is larger or smaller than normal text, and offset with space preceding and following the heading. Although there are similarities to the headings used in word processing, there are major differences. There are six heading tags:
<h1></h1>, <h2></h2> and <h3></h3> are larger than normal text, <h4></h4> is normal size, and <h5></h5> and <h6></h6> are smaller than normal text.
Heading One
Heading Two
Heading Three
Heading Four
Heading Five
Heading Six
HTML Code Characters
HTML code characters are simply codes for letters that have specific designations within HTML, or for accented and non-keyboard characters. For example, the characters < and > may not show up in a web page, and attempting to use them can cause errors, so HTML character codes must be used. The problem with HTML Character Codes is that they are difficult to remember, so a code list has to be referenced when a character is needed.
Some commonly used character codes are:
| é | or é | for é (such as in the word résumé) |
| < | or < | for < (less than symbol) |
| > | or > | for > (greater than symbol) |
| & | or & | for & (ampersand) |
| # | for # (pound sign) | |
| µ | or µ | for µ (micro sign) |
| ¢ | or | for a space ( ) |
|   | or ¢ | for ¢ (cent sign) |
For a complete list of the HTML Character Codes, see this site and this site.
Hyperlinks
A Hyperlink is simply a word or image in a hypertext document that links to a file, another web page, or a different part of the same page. All links are made in a similar manner. The basic tag is <a href=""></a> or hyperlink reference anchor tag, where the address of the link goes between the quotation marks, and the image or words are the clickable link, and are placed between the tags.
You may also want to place links back to your main page, from your "sub-pages" or internal pages. There are two reasons to do this: first is that if someone links to a page within your web site, you will want visitors to be able to work their way back to your main page, instead of only getting the information from that one internal page. The second reason is that search engines might pick up information from one page within your web site, and again, you will want visitors to be able to get back to your main site. Not that visitors typically will, but it is always good to give them options.
External Links
An external link is the basic link, upon which all other links can be seen as variants. The basic format is simply to tell the browser that when a user clicks upon the hyperlink, the browser should look for the designated address, and then go to that address. The address must go between the quotation marks, and should be the full address, including the http:// part of the address. The easiest way to do this is simply to copy and paste addresses from the browser location bar into the web page. This will ensure not only that the web site is still active, but that a colon or slash is not forgotten. The space between the opening and closing tags can contain either words or an image, which will then become the clickable link.
<a href="http://www.yahoo.com">Search for things on Yahoo</a>
Internal Links
Internal links are set up slightly differently, and require an anchor link <a href="#name"></a> and an anchor target <a name="name"></a>, in separate areas of the page. An internal link would be used in something like an alphabetical listing, where pressing on the hyperlinked "S" would take the browser down to the first name starting with "S" located halfway through the page, where the <a name="name"></a> tag is located. Another use would be to have the target <a name="top"></a> at the top of the page, and throughout the page have hyperlinks that would be <a href="#top">Go to the Top of the Page</a>. The anchor name target does NOT require anything between the opening and closing tags, but the anchor hyperlink reference tag does.
<a href="#top"></a>
This tag is placed throughout the document, and creates a link to the top of the current page.
Example: Top<a name="top"></a>
This tag is placed at the top of the document, and it is for this link that the browser looks.
To access internal links within a separate page, simple create a link to another page and add the internal link to that link. For example:
<a href="page.html#link">Text Here</a>
E-mail Links
When the anchored hyperlink reference tag with the e-mail attribute, <a href="mailto: ">...</a>, is clicked, the browser brings up the default e-mail program, or the e-mail client within the web browser, depending upon the computer. The e-mail address is placed between the mailto: and the closing quotation mark. You can also designate a subject for the e-mail by adding a question mark the word subject and then an equal sign ?subject= directly following your e-mail address.
<a href="mailto:morgaine@homemail.com?subject=I pushed the button">Send mail to Me</a>
Mail can be sent to multiple addresses by adding a comma and the second address following the first (jdoe57@wvu.edu,doejohn@email.com) while a carbon copy can be sent by following the subject with an ampersand then carbon copy and then an equals sign &cc= before the closing quotation. E-mail hyperlink sending mail to two addresses:
<a href="mailto:morgaine@homemail.com,fakeaddress@fakecompany.com?subject=I pushed the button">Send mail to Me</a>
E-mail hyperlink sending carbon-copying the message to an address:
<a href="mailto:morgaine@homemail.com?subject=I pushed the button&cc=fakeaddress@fakecompany.com">Send mail to Me</a>
File Links
A file link allows a viewer to download a file from the web site. It is simply a regular anchored hyperlink reference tag <a href=""></a> where a file name and location are given instead of a web page address. Make sure that the document is located in the same folder as the webpage.
<a href="Word.wpd">Download myWord Perfect document</a>
This link would allow the viewer to download a word perfect document from the web page.
File Organization
If a web site is going to be larger than a single page, you should probably create a folder specifically for your web page files; this will make things much easier in the long run. With multiple pages containing graphics, file organization is extremely important. Different sections of the web site can be saved in different folders, thus reducing the number of files in any directory. Although a web site consisting of only one or two pages may not need this level of organization, if frames are used organization will become necessary, since one page with two frames, requires three separate HTML files, as well as any associated images. Some web authors will place all their images in one folder, but my personal preference is to keep each section or page of the web site in its own folder, so that the files needed for each page are all in one place. To reference a file in sub-folder, name that sub-folder, type a slash, and then name the file being linked to, within that folder.
<a href="Books/Fiction.html"></a>
The previous example references the HTML file "Fiction" that is located within the sub-folder Books.
To access a file that is in the main directory, from a file within a sub-directory, type two periods, a slash, and then the name of the file that is within the main directory.
<a href="../index.html"></a>
This example references the file index.html that is located within the main directory, when the current file is located in a sub-directory, such as Books. These conventions are the same as were used in DOS.
Images
It seems that one of the primary reasons personal web sites are created, is to show-off pictures be they of kids/pets/spouses/gardens/whatever. One of the most important things to remember is that no image should be larger than the size of the screen--and that not all screens are the same size! In other words, it is better to make small images than large ones. The second thing to remember is that if an image is only going to be viewed online, the resolution does not need to be larger than 96 dots per inch (dpi), and 72 dpi is usually sufficient. The larger the image resolution, the larger the file size, and the longer it will take for the page to load. Reducing the resolution of an image will also reduce the size of the image.
Use the image source tag <img src> to insert a picture into the web page. An important attribute of this tag is alt, which gives text-based browsers a description of the image. The main users of such browsers tend to be the visually impaired, so they need a description of each image, in order to appreciate the entire page. There are programs, such as Bobby, that can check your site to make sure it is fully accessible and making complete use of the alt attribute.
The height and width attributes can be set with either percentages, or with the actual numbers of pixels. Telling a browser the image size in pixels speeds the loading of a page, because it allows the browser to designate space for that image, which then allows the browser to continue loading the rest of the page. This can give the viewer text to read, while large images load. The height and width can be found in most photo editing programs, usually under image properties. Be careful when making any changes using these attributes, since changing the height while leaving the width the same can lead to distortion of the image.
The border around an image can be given a specific size in pixels, or the border attribute can be set to zero if no border is desired. The default is for an image to have no border, so the primary reason for using the border attribute is to keep a border from appearing when an image is used as part of a hyperlink.
The horizontal space and vertical space tags designate the space, in pixels, between an image and any surrounding text. Horizontal space, or hspace, is space to the left and the right of an image. Vertical space, or vspace, is the space on the top and the bottom of the image. The space given is the total space, which means that half of the space will go to the left or top of an image, and the other half of the designated space will to to the right or bottom of an image.
<img src ="picture.jpg" height="130" width="140" border="0" hspace="2" vspace="2">
For some further information on working with images in we pages, check here.
This image picture.jpg has a height of 130 pixels, a width of 140 pixels, has no border, and the space horizontally and vertically surrounding the image is two pixels.
Alignment
The <center></center> tag can be used with text as well as with images and other page elements. Placed around the text or object, these tags center that text (or image, or table) in the middle of the page, and will re-center if the browser window is resized.
<center>This text would be centered.</center>
The align="..." attribute can be used within the heading, image and table tags.
When align is used within the heading tags, it places the text contained within the tags to one side of the screen. The options are left, right and center.
Text can also be aligned with the <div align="...">...</div> tag. This allows segments of regular text to be aligned to the right, left or center of the page.
<div align="right">Text between these tags is aligned to the right of the screen.</div>
To wrap text around an image, the align attribute goes within the image tag, and designates the placement of the image. The following tag will align the image to the left of the page and the text will wrap around the right of the image.Used with images the options are left, right and center, as well as top, bottom, and middle. Although left, right and center describe the alignment of the image within the page, top, bottom and middle describe the alignment of the text to the image.
<img src="image.jpg" align="left">
One way to indent text is to use the <blockquote></blockquote> tags. All the text that is contained within the tags, will be indented, much like long quotations in books and magazines are. The blockquote command automatically places space between the preceding text and the quote and the quote and the following text.
Another way to align text is to use the <dd> or indented definition tag. This will indent the first line of text, although subsequent lines will be flush with the margin.
A third way to align text, is to use Pre-formatted text. The pre-formatted text <pre></pre> tag allows for designation of exactly where the spaces and breaks will be, but it uses a monospaced font, usually Courier. Pre-formatted text should be set up in Notepad, or WordPad. The text in the browser will look exactly as the text typed in Notepad or WordPad does. This is not the most attractive way to align text.
Lists
List elements are similar to numbering and bullets in word processing programs. An Ordered List <ol></ol> is simply a numbered list, an Unordered List <ul></ul> is a bulleted list, and a Definition List <dl></dl> has the first line of text indented and all subsequent lines of text normal. The list item <li> tag is for ordered and unordered lists and the indented definition <dd> tag is a subset of the definition list. Neither <li> nor <dd> needs a closing tag.
The setups go as follows:
| Unordered List | Ordered List | Definition List |
| <ul> | <ol> | <dl> |
| </ul> | </ol> | </dl> |
Unordered and ordered lists can be combined within one list:
|
<ol> <li>Football <ul> <li>AFC <li>NFC </ul> <li>Baseball <ul> <li>National League <li>American League </ul> </ol> <p> |
|
Notice that both the ordered and unordered lists have automatic indents, and that the secondary list is indented further than the primary list.
Tables
The use of tables goes far beyond organization of numbers and data in spreadsheet or word processing programs, although they can certainly be used in that manner. Because HTML can be restrictive in the way it aligns items, tables are frequently used to achieve greater flexibility on web page design. Be careful when using tables, to use all opening and closing tags, since forgetting a tag will lead to no table appearing in the browser. If you have errors in a table it is due to tag problems.
The primary elements of a table are the table <table></table> tags, the table row <tr></tr> tags, and the table cell, or table data, <td></td> tags. When setting up a table, the table tags are primary, the row tags are secondary and the data tags are tertiary. All three elements should be used in every table. A simple two row, four cell table would be set up so:
<table border="2">
<tr>
<td>cell 1</td>
<td>cell 2</td>
</tr>
<tr>
<td>cell 3</td>
<td>cell 4</td>
</tr>
</table>
cell 1 cell 2 cell 3 cell 4
Table Attributes
Tables have several attributes that can be modified to change the way a table looks, including making it look nothing like a table. The table border attribute gives border size in pixels, with the typical border size being 1 pixel. Setting border="0" will create a table with no border, which is frequently the setting when creating a table to arrange a page, or part of a page.
Table with border="10" Table with border="0"
cell 1 cell 2 cell 3 cell 4
cell 1 cell 2 cell 3 cell 4
Another common attribute is table width="#", where the width can be set either in pixels or as a percentage. The table width would be set with pixels (width="237") if a table needed to be a specific size, or to be set to the size of an object within that table--for instance if the table was to be no more than the width of an image. Designating table width as a percentage (width="75%") means that a table will always take up 75% of the width of the screen, even if the window is resized.
Different types of table attributes are cellpadding and cellspacing. Cells spacing determines the width of the inner cell walls. Cell padding is the amount of space, in pixels, between the cell contents and the cell walls.
Table with cellpadding="10" Table with cellspacing="10"
cell 1 cell 2 cell 3 cell 4
cell 1 cell 2 cell 3 cell 4
Tables can also use colors and images as their backgrounds, with the same commands as are used within the body elements: bgcolor="..." and background="...". This can be applied to an entire table, a row, or to a single cell, but placing the background attributes within the table, tr or td tags.
To put this all together:
<table border="2" width="75%" cellspacing="5" cellpadding="10">
<tr>
<td background="image.jpg">Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td bgcolor="blue">Cell 3</td>
<td>Cell 4</td>
</tr>
</table>
| Cell 1 | Cell 2 |
| Cell 3 | Cell 4 |
In the above example, the table has a border of 2 and takes of 75% of the width of the screen. Cell 1 has a background image while the background color for cell three is blue. There are 10 pixels of space between the words and the inner walls of the cells, and inner width of the cell walls is 5 pixels.
Row and Column Span
There will be occasion when one cell will need to be twice (or more) as big as another cell, so the colspan and rowspan attributes are used with the <tr> and <td> tags. The rowspan attribute is used to span down multiple rows, while colspan goes across multiple columns. This can be confusing to keep straight, and sometimes requires a diagram of how the final table should look to keep things clear.
A table using rowspan:
|
<table border="2"> <tr> <td rowspan="2">Some of my hobbies include:</td> <td>Reading</td> <td>Sewing</td> </tr> <tr> <td>Baking</td> <td>Gardening</td> </tr> </table> |
|
A table using colspan:
|
<table border="2"> <tr> <td colspan="2">I have two felines that rule my home:</td> </tr> <tr> <td>Kit</td> <td>Kat</td> </tr> </table> |
| ||||
Table Miscellany
Table Captions
Table captions are text that is centered above the table. The table caption tag <caption>...</caption> is placed after the opening table tag and before the first table row tag.
<table border="1">
<caption>Compare</caption>
<tr>
<td>apples
</td>
</tr>
<tr>
<td>oranges
</td>
</tr>
</table>
Table Headers
Table headers are simply headings within tables. The table header <th> tag automatically centers and makes bold, text within that cell. Table headers can be placed at the top of a column or before a row. At the top of a column, the tags are placed between the opening table tag and the first table row tag. A row header is created by placing the table header tag after each table row tag, but before the table data tag. Table headers can also be used with the rowspan and colspan attributes.
|
<table border="2"> <th>My favorite books:</th> <th>My favorite movies:</th> <tr> <td>The Hobbit</td> <td>The Princess Bride</td> </tr> <tr> <td>Patriot Games</td> <td>Lost Boys</td> </tr> </table> |
|
Text within Tables
Regardless of any text formatting within a document, the text within a table is the default font (typically Courier). Changing the way that text looks within a table requires that the font be set within each and every cell of the table. This is time consuming and tedious, but does make a table look better. Also note that unless the size of a table or row or cell is specified, a cell will expand to the width of the text within that cell, which is why it is useful to specify width.
|
<table border="1"> <tr> <td align="center">This is the default font</td> <td align="center"><b>This is a bold font</b></td> </tr> <tr> <td align="center"><font face="Times New Roman"><i>This is Times New Roman, italicized</i></font></td> <td align="center"><font face="Comic Sans MS">This is my favorite font</font></td> </tr> </table> |
|
Images in Tables
Images can be easily inserted into tables, simply placing the image source <img src=""> tag between the table cell <td></td> tags. If text will be in the cell beneath an image, it can be helpful to set the width of the cell to the width of the image, to restrict the size of the text-containing cell.
|
<table width="108" border="1"> <tr><td><img src="crash.gif" width="108" height="90" alt="Crash"> </td></tr> <tr><td>This sums up the way I typically feel about computers. </td></tr> </table> |
|
Wrapping Text Around a Table
Wrapping text around a table allows text to flow around a table in a similar manner to how it wraps around images. The align attribute moves the table to one side and the text flows to the other. The align attribute is contained within the table tag.
<table align=right>...</table>
This code causes the table to shift to the right of the screen and the text will flow along the left of the table. To stop text from flowing around a table, the <br clear=left>, <br clear=right> or <br clear=all> tags are used.
|
Computers can be a blessing. <table width="110" border="1" align=right> <tr><td><img src="crash.gif" width="108" height="90" alt="Crash"> </td></tr> <tr><td>This sums up the way I feel about computers. </td></tr> </table> E-mail is a wonderful way to keep in touch with friends who are far away. Electronic spreadsheets make balancing the checkbook simpler. You can also waste hours of time looking at worthless web sites, or trying to install software or trying to figure out why Windows does not work, or why Word has caused all the text in your document to shift to the right half and inch. For all the ways technology has made our lives easier...Press Three. |
Computers can be a blessing.
|
Adding Space Around a Table (Netscape only)
Netscape allows space to be added around a table, separating it from the surrounding text, using the hspace and vspace commands within the table tag. Hspace adds space in pixels to the right and the left of the table, and Vspace adds space in pixels to the top and bottom of the table.
<table hspace="10" vspace="20">...</table>
This example adds 5 pixels of space to the right of the table and 5 pixels of space to the left of the table with the hspace command, and then 10 pixels of space to the top of the table and 10 pixels of space to the bottom of the table with the vspace command.
NOTE: Internet Explorer will ignore this command completely and run the text right up against the image.
|
Computers can be a blessing. <table width="110" border="1" align="right" hspace="10" vspace="10"> <tr><td><img src="crash.gif" width="108" height="90" alt="Crash"> </td></tr> <tr><td>This sums up the way I feel about computers. </td></tr> </table> E-mail is a wonderful way to keep in touch with friends who are far away. Electronic spreadsheets make balancing the checkbook simpler. You can also waste hours of time looking at worthless web sites, or trying to install software or trying to figure out why Windows does not work, or why Word has caused all the text in your document to shift to the right half and inch. For all the ways technology has made our lives easier...Press Three. |
Computers can be a blessing.
|
Frames
Frames are webpages where multiple pages of code are viewed on a single page, each page in a separate area, or frame, on the screen. A typical page with frames is set up with a little bit of the top, or left side of the page as one frame, and the rest of the page as the second frame. Multiple frames can be used, but it probably would not be a good idea to use more than three frames in a page. Frames can be created vertically or horizontally, depending upon the style of web page desired.
Frames are primarily used to make navigation of a web site easier. Used in this manner, a small frame, usually to the top or the left of the page, will contain links to different areas within a web site or page. This smaller frame will remain unchanged while the larger frame contains the changing information.
Creating a Frameset
The first step in creating a frame is to make the frameset, which is located within its own page. The elements of the frameset are the <frameset rows=""></frameset> or the <frameset cols=""></frameset> tags, which are created in the main page, and provide all the details for the frames.
<frameset rows="..." > or <frameset cols="..." >
The rows attribute sets the height of the frames, in order of top frame to bottom frame, with the height for each frame given as numbers in pixels, and the heights for each frame separated by a comma. The cols attribute sets the width of the columns, in order of left frame to right frame, again with the widths for each frame given in pixels and separated by commas. An asterisk (*) designates that a frame uses the remainder of the window.
<frameset rows="80,*,90 > or <frameset cols="100,*,100">
This web page uses two frames. The upper frame is a navigation bar and the lower frame contains the content. If this page is not within frames, go here.
The frame source tag, <frame src="">, is similar to the image source tag. The frame source tag tells the browser the location of each page and designates which pages go into which frames. The first frame source tag will place the designated page in either the top frame or the left frame, and the amount of space it takes is the first number given in the frameset tag. The remaining tags will fill in from either top to bottom or left to right.
<frame src="frame1.html">
The no frames tags, <noframes></noframes>, provide information or a link to users with browsers that do not support frames. If frames are used, it is a good idea to create a "no frames" version of the page, and within that page include a link to a frameless version of that page.
<noframes> If your browser does not support frames, please go <a href="NoFrame.html">here</a> </noframes>
Even if you do not create a frameless version if your page, you should still create a noframes section, with an explanatory message, telling people to get a new browser.
<frameset rows="70,*,55>
<frame src="frame1.html">
<frame src="frame2.html">
<frame src="frame3.html">
</frameset>
<noframes>
If your browser does not support frames, please go <a href="NoFrame.html">here</a>
</noframes>
In this set up, the top frame, frame1.html, has a height 70 pixels, the bottom frame, frame3.html, has a height of 55 pixels, and the middle frame, frame2.html fills the remaining screen area. The no frames tag contains a link taking users to a frameless version of the page. To make this web page, four different pages needed to be created, frame1.html, frame2.html, frame3.html and the main page where the frameset is located.
Showing/Hiding Scroll Bars and Borders
Sometimes scroll bars and frame borders are unnecessary or can detract from the page. The border="0" attribute in the frameset tag can be used to set up the page without borders. The scroll bars can be hidden using the scrolling="no" attribute within the frame src tag. Be very careful when using the no scroll attribute, because if the frame is not large enough, some users may be unable to view all the information within that frame. An example of a page set without borders and with non-scrolling frames would be:
<frameset rows="70,*,55" border="0">
<frame src="frame1.html" scrolling=no>
<frame src="frame2.html">
<frame src="frame3.html" scrolling=no>
</frameset>
<noframes>
If your browser does not support frames, please go <a href="NoFrame.html">here</a> </noframes>
This page has no borders between the frames, and no scroll bars in the top and bottom frames. The middle frame will still have scroll bars.
For an example of a page with borders between the frames and without scroll bars, look here.
Targeted Links
Targeting Links to Specific Frames
Links can be created in one frame, and targeted to open in another frame, or window. This is probably the most basic target use. A targeted link requires that each frame be given a name in the page that will set up the framesets and that this attribute be located within the frame tag. This is the name that will be referenced by other pages. For example:
<frame src="Frame2.html" name="frame2">
In the page where the links are located, the target attribute is added within the link. This tells the browser where the link should be opened. For example:
<a href ="page.html" target="frame2">
In these examples, the link located in the navigation frame, will open in another frame, one named frame2.html. Be very careful when naming frames, capitalization counts.
External Links within Frames
As a general rule of thumb, only internal links should be opened up within a frame. If links to external sites are opened within your frames, then visitors will be unable to bookmark that site, since the location is your frame, not the new page. External links should be opened either in the same window without frames, or opened in a brand new browser window. This will open a second copy of the browser, so the viewer will have one window open with your site, and a second window open containing the external site.
Targeting Links to a New Window
To open a link in a new browser window, use the attribute target="_blank" within the hyperlink reference anchor tag. This attribute can also be used with ordinary links.
<a href="link" target="_blank"> </a>
This tells the browser to go to open a new window and go to the web page "link".
Try this link targeted to a new window.
Targeting links to same window without frames
To open the link in the same window without frames, the target within the href tag should be _top, again located within the hyperlink reference anchor tag. When this attribute is used, the external page will open in the same window, and all frame will be gone.
<a href="link" target="_top"> </a>
Try this link targeted to the same window, but without frames.
Both types of targeted link can be used within any hyperlink reference anchor tag, they are not limited solely to frames.
Setting default the target
A default target can be set, that will send all links to a specific frame. This is much less work than placing the target attribute within each and every link tag, and is probably more accurate, since there is less chance of making an error when typing the target into each hyperlink reference tag. The default target tag is set in the head of the page. This tells the browser that unless otherwise specified, links should always open in the specified frame.
<html>
<head>
<title>Page Title</title>
<base target="Frame2">
</head>
Targeting Internal Links to Another Frame (or Page)
If frames are going to be used with an index, you may need to target internal links that are in a separate page. The basic link is the same, only the internal link is added within the hyperlink reference anchor tag, after the address of the new page and a pound sign (#).
<a href="page.html#link"></a>
This tells the browser to go to the web page page.html, and within that page look for the named internal link.
When creating an index, it can be helpful to copy and paste the main information, and then edit each link to the correct reference link. For example, you have created the frame links.html, which contains your alphabetical index. The index needs to link to a page such as direct.html, which contains your alphabetical directory of names. The page links.html will need to reference not only the page direct.html but the internal links within direct.html. An example could be:
<a href="direct.html#S">S</a>
This will open the page direct.html and then scroll down to the internal link "S".
| links.html |
<table> <tr> <td> <a href="direct.html#a" >a</a></td> <td> <a href="direct.html#b">b</a></td> <td> <a href="direct.html#c">c</a></td> </tr> </table> |
| direct.html |
<a name="a"></a> <a name="b"></a> <a name="c"></a> |
Notice that the index is in a table, and that the internal links within the page direct.html are linking to empty space.
Troubleshooting
When something isn't working within a page, there are several things to keep in mind. First, when creating a page without an HTML editor, it is very easy to reverse the letters in a tag, to forget a closing tag, to drop a quotation or in some other way create an error within a tag. Check these things first.
Some tips for creating tables: Create the structure of the table first; it is far more difficult to forget a closing row, cell or table tag that way. For more complex tables, draw a picture of how you want the table to look, and then label the cells. Row and column span are tricky to work with in complex tables. Check to make sure there are no extra or empty cells in a table, either can change the way the table looks. If a blank cell is needed within a table, place the character code for a space within that cell.
When working with Frames, be prepared for headaches; the smallest things can keep a table from working. Make sure that capitalization is consistent, especially with targeted links. Use a naming structure that is logical to you. Remember that a frame requires three or four separate web pages, so you may want to name all pages in a similar manner not only to remember what frames go together, but also which pages go in which frame.
If a page works perfectly, but there are problems when the page has been loaded to the site, again, check capitalization, since this can be the most frequent error. If elements of the page seem to be working correctly, try resending the page to the site. Errors in data transmission are possible. Don't forget to use the Reload or Refresh button to make sure that you are not viewing a cached version of your page.
Setting up a web page
If you have an ISP, or Internet Service Provider, check with them to see if you have space available for a web page. Most ISPs provide space for individual (or commercial) web pages with every account. They usually have available anywhere from two to six megs (megabytes) of space, but this will vary from provider to provider. Also, universities may provide web space to their students and employees, so if you are a university student or employee, you can check into that.
Where else?
If you do not have an ISP (Internet Service Provider), places such as Geocities.com, Homestead.com and Angelfire.com, provide free web space. The drawback is that they place advertising upon every page, so the look can be less professional. To get a free web page, simply go to any of those sites, sign up, and follow the directions provided.
This information is also available as a pdf file.
Back to my main page