Chapter W5: HTML Editing

*"When I behold, upon the night's starred face,*
      *Huge cloudy symbols of a high romance."*
      *-- Keats (1795-1821), Sonnet When I Have Fears*
Goals for this chapter: Minimal HTML files What is an HTML Tag ? Writing HTML pages with Netscape Communicator Fonts Colors Links Targets Frames Tables The International Character Set Matematical symbols in HTML Elementary HTML pages	rpm packages covered in this chapter: httpd (apache) netscape (netscape)

In this chapter we will cover the elementary notions about the HTML language. At first we will present and explain these topics. Then, we will show how to obtain the results with Netscape Communicator. We will continue to introduce new HTML concepts and explain how to obtain until chapter 8, where we will cover Web site design techniques.

From Chapter 9 until 14 we will cover Advanced WebMaster programming techniques likes: Layers, Javascript, PERL, MySQL and PHP. The rest of training from Chapter 15 until Chapter 20, covers Web-server installation, DNS, Security and similar topics.

The HTML, HyperText Markup Language was created by Bernard in the RFC in 1995. The sense is very easy: you have "something" that is linked to a new "something" and located in a remote place (on the Web). This link followed by another link ... and another built the Web . In Chapter 1, we introduce the "http" HyperText Transfer protocol that in Internet, that is the more used attribute for links on the WorldWideWeb.

The following are valid links:

Link	HTML Code
This is a link to FTLinuxCourse	<a ref="http://www.FTLinuxCourse.com/"> This is a link to FTLinuxCourse</a>
(Image with link)	<a ref="http://www.FTLinuxCourse.com/"> <img src="image.gif" width="50" height="50" border="0">
(Map - Click on the center)	<img src="eclipse.gif" width="50" height="50" usemap="#Map" border="0"><map name="Map"><area shape="circle" coords="26,25,6" href="http://www.FTLinuxCourse.com/"></map>
	<form method="post" action="Store/bin/x.cgi/user/m/default"> <input type="text" name="textfield" value="Click here"> </form>
	<form method="POST"> <select name="menuform" onChange="location.href=this.form.menuform.options[this.form.menuform.selectedIndex].value"> <option>Please Select:</option> <option>____________________________</option> <option value="http://www.FTLinuxCourse.com/">--> FTLinuxCourse</option> </select> </form>

Note that we use the correct form to place a link with the final slash, "/". Thus, the link like "http://www.FTLinuxCourse.com" will works but is not correct. The link "http://www.FTLinuxCourse.com/", including the terminal slash ("/"), is correct.

Now, we present a table with some different sites on the Web.

All these websites uses HTML pages including PERL scripts for e-commerce as well as JavaScript or PHP. This training will cover all these techniques starting from this chapter for HTML.

A minimal HTML file.

Like we observe in the previous html code, we have the HTML attribute is enclosed between quotes "<" and ">", and the code is opened with an <attribute> and closed by </attribute>. Now we will show what is the minimal skeleton for an HTML file.

We may have:

Click here to evaluate the code <!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<body>
Hello
</body>
</html>

or including a "head",

Click here to evaluate the code <!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="GENERATOR" content="Mozilla/4.76 [en] (X11; U; Linux 2.4.3 i686) [Netscape]">
</head>
<body>
Hello
</body>
</html>

Each HTML file have the following structure:

This is the minimal structure.

What is an HTML Tag ?

An HTML Tag is a "word" that identifies a document as an HTML document.

For example, if a TEXT file have the words:

<HTML>
<BODY>
Hello!
</BODY>
</HTML>

This file is an HTML file.

Other tags are for example:

The link: <a ref="http://www.FTLinuxCourse.com/"> This is a link to FTLinuxCourse</a>
The font:
The style:
etc.

All these "standard" nomeclature had been created by the World Wide Web Consortium: http://www.w3.org/

Writing HTML pages with Netscape Communicator

In the previous sections we list some examples about HTML Tags and HTML code. The best mode to learn something is to experiment yourself.

Now, we will explain all these topics and show how to create some elementary HTML pages with Netscape Communicator.

HTML Language is simple however to develop also elementary HTML pages, is "better" to use a HTML Editor. In Linux, the Netsscape Communicator continues to be the better choice. Generally, in non-Linux systems like Mac or MS Windows, Macromedia
DreamWeaver are the better products available.

IBM release sometime ago its WebSphere for Linux, to offers a valid Linux alternative.

Fonts

The HTML Language like a Word Processor, support fonts. A Word Processor supports thousands of fonts. A browser instead supports only some types, for example:

<li>Default</li>
<li><font face="Arial, Helvetica, sans-serif" size="1">Arial, Helvetica, sans-serif </font></li>
<li><font face="Times New Roman, Times, serif" size="+2">Times New Roman, Times, serif</font></li>
<li><font face="Courier New, Courier, mono">Courier new, Courier, mono</font></li>
<li><font face="Georgia, Times New Roman, Times, serif">Georgia,Times New Roman, Times, serif</font></li>
<li><font face="Verdana, Arial, Helvetica, sans-serif" size="+3">Verdana, Arial, Helvetica, sans-serif</font></li>
Default

Arial, Helvetica, sans-serif

Times New Roman, Times, serif

Courier new, Courier, mono

Georgia,Times New Roman, Times, serif

Verdana, Arial, Helvetica, sans-serif

Is possible also to fix a size for each font.

In Netscape Communicator the "Formatting Bar" is the following:

Using this bar you can

Is also possible to have different Paragraph Styles:

<h1> Heading 1</h1>

<h2> Heading 2</h2>

<h3> Heading 3</h3>

<h4> Heading 4</h4>

<h5> Heading 5</h5>

<h6> Heading 6</h6>

Normal

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Of course we can fix, also the elementary:

<b>Bold</b>
<br><i>Italic</i>
<br><u>Underline</u> (not all browsers suppor this setting)
<br><blink>Blink </blink>(not all browsers support this setting. Explorer does not support it) Bold
Italic
Underline (not all browsers suppor this setting)
Blink (not all browsers support this setting. Explorer does not support it)

Colors

The HTML language supports colors in the RGB (Red-Green-Blue) palette. This offers upto 752 colors that you can check in the file: "rgb.txt" present in the X Window file hierarchy.

Is possible to assign colors to text,links, and inside tables or cell tables (see Tables below)

<font color="#3366FF">text</font>
<font color="#003333"><a href="http://www.FTLinuxCourse.com/">links</a></font>

text
links

Links

The HTML Link, is the most important concept present in the Web.

Links can moves the browse content (the page) to any other location:

On the web:

To a HTTP remote server: <a href="http://www.futuretg.com">http://www.futuretg.com</a>
To a specific page (main page) <a href="http://www.futuretg.com/FTOSX/index.html">http://www.futuretg.com/FTOSX/index.html</a>
To a specific page (no main page ) <a href="http://www.futuretg.com/FTOSX/Development/step_9.html">http://www.futuretg.com/FTOSX/index.html</a>
To a FTP remote server: <a href="ftp://ftp.futuretg.com">ftp://ftp.futuretg.com</a>
To open a telnet session on a remote server: <a href="telnet://locis.loc.gov">telnet://locis.loc.gov</a>
To send an email: <a href="mailto:info@futuretg.com">info@futuretg.com</a>

On the local filesystem: <a href="/root">file:/root/</a></li>
On a mounted media: <a href="/mnt/cdrom">file:/mnt/cdrom/</a></li>

On the Web:

http://www.futuretg.com

In the HTML philosophy the following links are equivalent:

http://www.futuretg.com
http://www.futuretg.com/
http://www.futuretg.com/index.html (or index.htm is present)

In other words the file: "index.html" is the HTML file that represent the main page in the

Targets

Inside an HTML file is possible to insert a target .

A target inside the HTML file fix a specific position to reach (the target).

For example if we have a link like:

http://www.FTLinuxCourse.com/FTLC_Complete/FTLinuxCourse/en/base/chap1_6.html#Exercises

This means that inside the file chap1_6.html in the server http://www.FTLinuxCourse.com/ that respond to the directory FTLC_Complete/FTLinuxCourse/en/base/ there are a target called "Exercises"

In Netscape Communicator the Target is present in the "Composition Bar".

We need simply to select the text where to apply the target.

When locally or remotely we try to reach this page we will obtain that the browser stops directly in this position.

If the target contains spaces or simply the target is not present in the page, the browser present the page from the beginning.

Tables

Table with a single background color.

Cell with background image

Cell with Text in the TOP

Cell A1	Cell A2
Cell B1	Cell B2

Cell with different color

This properties may be created with Netscape Communicator: Insert -> Table


This is the mask for Table properties: Width Height Border Alignment	This is the mask for Row properties, alignment inside a row.	This is the mask for cell properties. Choose the cell and then choose this mask.

The International Character Set

Non English languages like Spanish, French or Italian ... or German includes accents and special characters. Of course there are also other langauges like: Chinese, Japanese or Cyrillic that includes other more different characters.

The HTML supports all these formats for example the page: http://www.FTLinuxCourse.com/SystemRequirements.html, includes the System Requirements in French, German, Spanish, Italian, English and Japanese.

The HTML Language offers the possibility to display any international phonetic character as well as normal special characters like Copyright, Trademark, plus and minus, as well as arithmetic operators like division, multiplication and others.

Check the following table:

Character	Decimal	Entity
©	©	©
±	±	±
é	é	é
é	é	é
ñ	ñ	ñ
ü	ü	ü

To obtain these characters, HTML offers a double choice:

The numeric, like ü
The phonetic choice like: é

In other words, you need to write: "&" + "the letter" + "special phonetic char" + ";".

Matematical symbols in HTML

There are different modes to present and insert mathematical symbols inside