"Khar Shian Campus: Advanced HTML"
1—Introduction
This advanced course is the second stage of the Shadow Academy’s HTML training. The course expands on the areas covered within the Basic training and covers areas such as Frames and Meta.
1.A—Frames
The primary focus will be upon regular frames rather than floating frames since the majority of browsers have difficulty utilizing floating frames in the correct manner.
1.B—Meta
Meta is used by search engines in order to locate your page among the many on the web. Meta lists valuable information including author, update dates, and other valuable information like keywords and site descriptions.
2—Tables
In the HTML Basics course you learned about the tags used in HTML tables. The following tags allow you to add additional detail to your table.
First of these is the <caption> tag, allowing you to add a caption and align it to your table.
Example:
<caption align=bottom>
Table 1 – Structure of CEK
</caption>
Other useful tags include the <thead>, <tfoot> and <tbody> tags. These tags enable you to maintain a single table across many pages. They can also be aligned as the coder would like within his/her html document. The example following uses the <thead> tag.
<thead align=left> … rows that comprise the header … </thead>
Next are the <colgroup> and <col> tags. The <colgroup> tag groups a set of columns so that properties may be assigned to all columns in the group rather than to each one individually. In other words, everything in that group will be bold, underlined, or in italics, or share any other features. .
Example:
<colgroup span=3 align=”center” valign=”top”>
</colgroup>
In the above example, the next 3 columns are all centered and start their content at the top.
Note: The <col> tag can be used between the <colgroup> and <colgroup> tags to refine column properties. Here is an example of the <col> tag in use.
<col width=6 align=left>
First of these is the <caption> tag, allowing you to add a caption and align it to your table.
Example:
<caption align=bottom>
Table 1 – Structure of CEK
</caption>
Other useful tags include the <thead>, <tfoot> and <tbody> tags. These tags enable you to maintain a single table across many pages. They can also be aligned as the coder would like within his/her html document. The example following uses the <thead> tag.
<thead align=left> … rows that comprise the header … </thead>
Next are the <colgroup> and <col> tags. The <colgroup> tag groups a set of columns so that properties may be assigned to all columns in the group rather than to each one individually. In other words, everything in that group will be bold, underlined, or in italics, or share any other features. .
Example:
<colgroup span=3 align=”center” valign=”top”>
</colgroup>
In the above example, the next 3 columns are all centered and start their content at the top.
Note: The <col> tag can be used between the <colgroup> and <colgroup> tags to refine column properties. Here is an example of the <col> tag in use.
<col width=6 align=left>
3—The MAP Tag
The next tag you will learn is the tag. The <map>tag expands on your images. It contains HTML tags that define the clickable regions of an imagemap. To have parts of the images serve as link, you need to specify the coordinates within the image which are supposed to do so. Depending on the shape of the link, you will need different numbers of coordinates, i.e. 4 for a rectangle and circle, and as many as your polygon has corners. The more coordinates you use, the more careful you have to be not to mess them up, as you might get funny shapes or have a not working link.
</map name="map_name">
… definitions go here …
</map>
The name attribute gives the map information a unique name so it can be referenced by the usemap attribute in the <img> tag that places the imagemap graphics (covered in the Basics course).
Example:
<map name=navigation>
<area shape=”rect” coords=”23, 47, 58, 68” href=”search.html”>
<!-- Here you define the top left and bottom right corner -->
<area shape=”circle” coords=”120, 246, 60” href=”about.html”>
<!-- For circles, you give the center and radius -->
…
</map>
(BTW: The above tags beginning with <!-- and ending with --> are HTML comments. You can insert them into your source code to remind yourself of something, but the user browsing the page won't see them).
With the imagemap data defined by the map named navigation, you would reference the map in an <img> tag as follows:
<img src=navigation.gif” usemap=”#navigation”>
Alternatively, if the map is stored in a file different from the document’s html file, you would reference it this way:
<img src=”navigation.gif” usemap=”maps.html#navigation”>
The <area> tag used in the above examples defines the special regions within your imagemap. When used, the named map is used by the usemap attribute of the <img> tag.
The tag can take on a number of attributes of which shape is the primary one. The shapes used are as follows:
<map name=”main”>
<area shape=”poly” coords=”35, 80, 168, 99, 92, 145” href=”profile.html”>
</map name="map_name">
… definitions go here …
</map>
The name attribute gives the map information a unique name so it can be referenced by the usemap attribute in the <img> tag that places the imagemap graphics (covered in the Basics course).
Example:
<map name=navigation>
<area shape=”rect” coords=”23, 47, 58, 68” href=”search.html”>
<!-- Here you define the top left and bottom right corner -->
<area shape=”circle” coords=”120, 246, 60” href=”about.html”>
<!-- For circles, you give the center and radius -->
…
</map>
(BTW: The above tags beginning with <!-- and ending with --> are HTML comments. You can insert them into your source code to remind yourself of something, but the user browsing the page won't see them).
With the imagemap data defined by the map named navigation, you would reference the map in an <img> tag as follows:
<img src=navigation.gif” usemap=”#navigation”>
Alternatively, if the map is stored in a file different from the document’s html file, you would reference it this way:
<img src=”navigation.gif” usemap=”maps.html#navigation”>
The <area> tag used in the above examples defines the special regions within your imagemap. When used, the named map is used by the usemap attribute of the <img> tag.
The tag can take on a number of attributes of which shape is the primary one. The shapes used are as follows:
- Rect for rectangles
- Circle for circles
- Poly for polygons
- … and default for any point on the image not part of another targeted region.
<map name=”main”>
<area shape=”poly” coords=”35, 80, 168, 99, 92, 145” href=”profile.html”>
4—Frames
Frames refers to the framed layouts where the browser window is broken into multiple regions, each of which is a separate frame. Each frame can contain a distinct HTML document, enabling you to display several documents at once, rather than just one. When creating a frame page, you should replace the <body> tags with
<frameset cols="*">. This divides the browser and may look something like this;
<frameset cols=0,*,*,*,*,*>
…
Example:
<frameset rows=”30%, 70%">
…
</frameset>
The example shows you that you want two horizontal frames, (hence the rows) the upper taking up 30% of the browser window and the lower taking up 70%. Another way of doing this is by adding a “*” rather than a final percentage number. The “*” tell the browser to distribute what is left to the last frame. (It is possible to use any number of frames)
Once your frameset is in place you are ready to use the <frame> tag. This tag is only valid between the frameset tags. (Note: You can also use the noframes tag for those browsers unable to recognize frames. These tags should be inserted after the frameset tags and should contain the no frames content between them. They are especially useful if you want your site to be correctly indexed by search engines - place some important keywords there.).
Example 1:
<frameset cols=0,* *">
<frame src="leftframe.html" noresize name="left" frameborder=0>
<frame src="rightframe.html" noresize name="right" frameborder=0>
</frameset>
Example 2:
<noframes>
… non-frames content goes here…
</noframes>
It is possible to name each frame in order to target it from links. This is often used when one frame provides a menu for the main window, allowing easier site navigation.
To do this, amend your <frame> tag to include a name=”frame name here”. This will lock a name to that particular frame to allow you to target it.
You can also add the noresize option into your tag, which will lock the size of your frame so the viewers cannot resize it. This is helpful to keep the formatting of pages, especially when you use frames for the menu.
As mentioned earlier, frames are best used as a menu to allow visitors to navigate your site more easily. Once you have named a frame, it can be targeted by other windows.
This is done through using the target command in your link tags.
For example:
Somewhere you defined:
<frame src="main.html" name="display"> (The target window)
Then you can later use:
<a href="links.html" target="display"> (Targets only windows named “display”, i.e. the target window above)
Once you have used targeting commands a few times it will become second nature! Below is an example of targeting in action…
< html><--! This would be your index.html page -->
<frameset cols=0,* *”>
<frame src="menu.html" name="menu" noresize=on> <--! This is your menu -->
<frame src="main.html" name=”display” noresize=on> <--! This is the page that will change when you click on a link -->
</frameset>
</html>
<html><--! This is your menu.html page-->
<body>
<a href="main.html" target="display">Home</a><br>
<a href="profile.html" target=”display”>About Me</a>
</body>
</html>
Notice the targets? Those will always target that page you named as your display page. That means the links will always open up to that window when targeted to do so.
<frameset cols=0,*,*,*,*,*>
…
Example:
<frameset rows=”30%, 70%">
…
</frameset>
The example shows you that you want two horizontal frames, (hence the rows) the upper taking up 30% of the browser window and the lower taking up 70%. Another way of doing this is by adding a “*” rather than a final percentage number. The “*” tell the browser to distribute what is left to the last frame. (It is possible to use any number of frames)
Once your frameset is in place you are ready to use the <frame> tag. This tag is only valid between the frameset tags. (Note: You can also use the noframes tag for those browsers unable to recognize frames. These tags should be inserted after the frameset tags and should contain the no frames content between them. They are especially useful if you want your site to be correctly indexed by search engines - place some important keywords there.).
Example 1:
<frameset cols=0,* *">
<frame src="leftframe.html" noresize name="left" frameborder=0>
<frame src="rightframe.html" noresize name="right" frameborder=0>
</frameset>
Example 2:
<noframes>
… non-frames content goes here…
</noframes>
It is possible to name each frame in order to target it from links. This is often used when one frame provides a menu for the main window, allowing easier site navigation.
To do this, amend your <frame> tag to include a name=”frame name here”. This will lock a name to that particular frame to allow you to target it.
You can also add the noresize option into your tag, which will lock the size of your frame so the viewers cannot resize it. This is helpful to keep the formatting of pages, especially when you use frames for the menu.
As mentioned earlier, frames are best used as a menu to allow visitors to navigate your site more easily. Once you have named a frame, it can be targeted by other windows.
This is done through using the target command in your link tags.
For example:
Somewhere you defined:
<frame src="main.html" name="display"> (The target window)
Then you can later use:
<a href="links.html" target="display"> (Targets only windows named “display”, i.e. the target window above)
Once you have used targeting commands a few times it will become second nature! Below is an example of targeting in action…
< html><--! This would be your index.html page -->
<frameset cols=0,* *”>
<frame src="menu.html" name="menu" noresize=on> <--! This is your menu -->
<frame src="main.html" name=”display” noresize=on> <--! This is the page that will change when you click on a link -->
</frameset>
</html>
<html><--! This is your menu.html page-->
<body>
<a href="main.html" target="display">Home</a><br>
<a href="profile.html" target=”display”>About Me</a>
</body>
</html>
Notice the targets? Those will always target that page you named as your display page. That means the links will always open up to that window when targeted to do so.
5—Iframes
Now for a few words on iframes. Iframes are described as “frames you can place like images” – thus giving you additional control over placement. For example, the Independence Games 2004 site (a temporary website for a Brotherhood wide competition) was coded using iframes. However, iframes are not intuitive to use and also may be displayed very differently between browser types and versions.
6—Meta
The final lesson in this course covers the tag. This tag defines your site’s meta-information including keywords, expiration date, author, page generation software used, and many other document specific items. This is useful if you want search engines to find your page. It also supports the notion of client pull – a dynamic document technique in which the browser loads a new document after a specified delay. This might be used, for example, to display a fancy image on index1.html and then redirect the viewer to the main index. Do not overuse client pulls though, or your visitors might get annoyed with the page.
Meta can take the following attributes: HTTP-Equiv, Name, Scheme, and Content.
Example:
<head>
<!-- The first <meta> tag instructs the browser to load a new page after 5 seconds -->
<meta http-equiv=”refresh” content=”5; url=http://www.myserver.com/index2.html”>
<!—The remaining tags specify author and keyword information for search engines -->
<meta name=”author” content=”Mune Metsukai”>
<meta name=”keywords” content=”Dark Brotherhood, Star Wars, Shadow Academy, html advanced course”>
…
</head>
In the above example, a search engine would display your site upon someone searching for the DB, SW, the SA and/or the HTML advanced course. There is no limit to the terms you can include, however, to get specific results in search engines, it is recommended to stay specific as to target the right spectrum of users. That brings you to the end of the Advanced HTML course. Good luck with the exam!
Meta can take the following attributes: HTTP-Equiv, Name, Scheme, and Content.
Example:
<head>
<!-- The first <meta> tag instructs the browser to load a new page after 5 seconds -->
<meta http-equiv=”refresh” content=”5; url=http://www.myserver.com/index2.html”>
<!—The remaining tags specify author and keyword information for search engines -->
<meta name=”author” content=”Mune Metsukai”>
<meta name=”keywords” content=”Dark Brotherhood, Star Wars, Shadow Academy, html advanced course”>
…
</head>
In the above example, a search engine would display your site upon someone searching for the DB, SW, the SA and/or the HTML advanced course. There is no limit to the terms you can include, however, to get specific results in search engines, it is recommended to stay specific as to target the right spectrum of users. That brings you to the end of the Advanced HTML course. Good luck with the exam!
Take the Test: HERE