Chapter W5: HTML Editing

Some elementary HTML pages

Now, that we have a minimal know-how about the HTML Language we can write (or create) some HTML pages.

Example: An HTML Page to check stocks.

For example, suppose that you like to check daily the stocks for RHAT (RedHat), Caldera (CALD), Apple Computer Inc (APPL), Microsoft Corporation Inc (MSFT), Sun MicroSystem (SUNM) and IBM (IBM).

Step 1: Create the table

You need to create a table that contains ... six cells; one for each chart to check.

Therefore you run the Communicator and then File -> New -> .Blank Page. Then you choose Insert -> Table

Choose 4 rows and 2 columns

... and you will get this page.

Step 2: Add the links

Now, you may go to finance.yahoo.com, find the NASDAQ symbols and click on locate the chart.


Locate the remote page with the chart	Now, locate the page with the image.
Now, we go to the first cell and ...	load the remote image.

Step 3: Test

Check the result!

Example 2

This is another simple example to create a main page in three steps using a table:


Choose, File -> New -> Blank Page ... and fix the background color	... then create a table with 2 columns and 1 row. Fix also a background color in the left cell.

Complete the links on the left and the images on the right. Complete the page.

Using Frames

From browsers 3.0 series the frame concept was born and start to be used.

The frame is an HTML file that call others HTML files. You can fix a size and a position for each frame. The best mode to learn this is test yourself.

We will explain here only two examples for frames:

A frame that present two HTML files inside the browser. The left file can resized.
A frame that present three

Example 3

In frames, generally you are forced to edit HTML files.

<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<META NAME="GENERATOR" CONTENT="Mozilla/4.03 [en] (X11; I; Linux 2.0.29 i586) [Netscape]">
</HEAD>
<FRAMESET COLS="40%,60%">
<BODY TEXT="#000080" BGCOLOR="#FFFFFF" LINK="#0000EE" VLINK="#551A8B" ALINK="#FF0000">

<NOFRAMES>
Indice
  
</BODY>
</NOFRAMES>
<FRAME SRC=base/index_base.html NAME=actual>
<FRAME SRC=base/intro_base.html NAME=main>
</FRAMESET>
</HTML>

In the previous example we "split" the screen in 40% and 60% and assign a name and a file to each frame.

The frame on the right is called: "actual" and we assign it the space to the file "base/index_base.html"

The frame on the left is called: "main" and we assign it the space to the file "base/intro_base.html"

Example 4

Now, we will produce a more complex frame. Just the frame used in the Fast Training Linux Course. This is more complex like a frame

This is the main frame

<HTML>
<HEAD>
<TITLE>FTLinuxCourse - English Version</TITLE>
</HEAD>
<FRAMESET ROWS="98,*">
<FRAME SRC="header.html" NORESIZE SCROLLING="no" MARGINWIDTH="1" MARGINHEIGHT="5">

<FRAMESET ROWS="*">
 <FRAME SRC="base.html" NAME=bottom NORESIZE MARGINWIDTH="12" scrolling="auto" MARGINHEIGHT="12" NORESIZE>
 </FRAMESET>
</FRAMESET>

<BODY BGCOLOR="#FFFFFF">
</BODY>
</HTML>

This is the base frame
<HTML>
<HEAD>
 <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
 <META NAME="GENERATOR" CONTENT="Mozilla/4.03 [en] (X11; I; Linux 2.0.29 i586) [Netscape]">
</HEAD>
<FRAMESET COLS="40%,60%">
<BODY TEXT="#000080" BGCOLOR="#FFFFFF" LINK="#0000EE" VLINK="#551A8B" ALINK="#FF0000">

<NOFRAMES>
Indice
  
</BODY>
</NOFRAMES>
<FRAME SRC=base/index_base.html NAME=actual>
<FRAME SRC=base/intro_base.html NAME=main>
</FRAMESET>
</HTML>

In other words, there are a frame inside another. The first frame call "header.html" and "base.html". "base" is a frame in the bottom part. Is very important to note the names assigned to the frame components: actual, name and others.

The index.html, covers the header and then the 98% is available for "base.html".

For additional examples may be consulted on FTContribs/Files/HTML

Using Maps

Example 5

Here we will present two examples for maps

<img src="../../img/worldmap.gif" width="713" height="366" usemap="#Map2" border="0"><map name="Map2"><area shape="poly" coords="340,51,332,64,342,69,350,72,359,65,359,61,357,55,349,48" href="UK.html" target="United Kingdom"><area shape="poly" coords="339,83,351,84,357,89,358,95,355,100,349,100,343,99,337,98" href="Spain.html" target="España"><area shape="poly" coords="571,230,585,221,598,212,606,207,612,195,618,180,664,192,663,213,687,240,687,267,667,285,648,295,613,289,578,274,556,263" href="Australia.html" target="Australia"><area shape="poly" coords="347,72,353,85,360,90,366,84,366,75,359,69" href="France.html" target="France"><area shape="poly" coords="368,83,374,80,384,84,396,91,399,99,397,105,381,102,373,96,368,93,367,87" href="Italia.html" target="Italia"><area shape="poly" coords="360,64,372,61,377,64,381,71,381,78,373,82,361,69,358,69,367,82,366,75" href="Germany.html" target="Deutschland"><area shape="poly" coords="481,123,483,108,494,109,501,108,519,117,526,125,530,134,528,143,522,169,504,169,488,145" href="India.html" target="India"><area shape="poly" coords="98,45,136,26,188,30,206,18,268,10,259,42,265,77,217,98,204,111,170,119,135,99,136,106" href="USA.html"><area shape="poly" coords="135,107,171,121,173,137,171,149,159,145,135,119" href="Mexico.html"></map><map name="Map"><area shape="poly" coords="396,19" href="../Continent/Europe/index.html"><area shape="poly" coords="259,3" href="USA.html" target="USA and Mexico"><area shape="poly" coords="152,121" href="Brazil.html" target="South America"><area shape="poly" coords="92,55,97,65,100,85,107,96,116,108,127,111,140,114,155,112,170,109,177,107,182,73,193,60,199,46,234,29,251,29,250,22,254,8,239,5,198,7,169,8,139,12,124,12,109,13,97,17,86,22,78,26,47,44,43,49" href="USA.html" target="North America"></map>

Maps are for images (not for map images) !

<center><img SRC="FTLinuxCourse/img/ftlc_complete.gif" BORDER=0 usemap="#Map" height=216 width=847>
<img SRC="FTLinuxCourse/img/goldbar.gif" height=3 width=243><map name="Map"><area shape="rect" coords="195,60,320,196" href="FTLinuxCourse/en/index.html"><area shape="rect" coords="341,60,438,180" href="FTLinuxCourse/en/indexw.html"><area shape="rect" coords="452,63,550,185" href="FTLinuxCourse/en/indexx.html"><area shape="rect" coords="555,60,658,195" href="FTLinuxCourse/en/indexp.html"><area shape="rect" coords="667,60,744,191" href="FTLinuxCourse/en/indexn.html"><area shape="rect" coords="750,61,846,185" href="FTLinuxCourse/en/indexs.html"><area shape="rect" coords="1,50,168,185" href="http://www.FTLinuxCourse.com/"></map>
<a href="http://www.FTLinuxCourse.com/Author.html">Author
</a>| <a href="http://www.FTLinuxCourse.com/FTLC_Complete/FTLinuxCourse/en/ITheProject.html">The
Project</a> | <a href="FTLinuxCourse/sitemap_FTLC.html">Browse the CD</a> 
| <a href="http://www.FTLinuxCourse.com/license.html">License</a>
| <a href="FTLinuxCourse/UserGuide.html">UserGuide</a>
| <a href="http://www.futuretg.com/Store/pages/Erh70c.html">Pre-Order</a>
<img SRC="FTLinuxCourse/img/goldbar.gif" height=3 width=243></center>

To edit and create HTML maps we advice to use a program like Macromedia DreamWeaver. If you want to use Linux you can download "mapedit" from Boutell.com.

Exercises

Write an html page that present the Stocks chart for your favorite companies.
Create the Macromedia.com frame set

Tests

What is an HTML tag ?
List three tags into an HTML file.
What is a link ?
Is possible to have a link in a specific color?
What is a target ?
Is possible to have the "Helvetica" font in HTML pages? The "Times" font?
What is the HTML syntax to obtain a sentence in BOLD ?
How is possible to obtain the text in "turquoise" color ?
What color format is adopted in HTML language ?
What is the better mode to insert the "alpha" greek character inside ?
What is a frame?
What is an HTML Map?

Read the answers to the exercises.

Check the Interactive Exam Cram WebMaster:

Internet Resources for this Chapter.

Local Netscape HTML Tag Reference (Mirror)

http://developer.netscape.com/