HTML tags
I have learnt to use the HTML (HyperText Markup Language) by sheer chance: I had installed HotDog 3.0, a shareware I had found in a CD-ROM. Actually, that version of HotDog could only translate in HTML when you format a text, insert a picture or a table; the real interest is that you see immediately the tags corresponding to the effect you applied. But as I used to try matching the tags with the effects, I learnt them!
Those who have already built Windows help files (HLP) will understand that the HTML is an RTF (Rich Text Format) file for web pages, and a web browser is the same than Winhelp. And those who trust in word processors (like Word) to build RTF files will trust in software like HotDog or... Word.
If you ignore what a tag means, it is simply a text code put between the signs < and > that tells the browser to change text attributes (color, size, weight...), to insert a picture or a table, or to put hypertext links, which will transform your page in an interactive and dynamic document. In fact, almost all the formatting, ornaments or links on a web page are realized thanks to HTML codes or tags.
To see an example of a tag, just display the source of the web page you are seeing (View menu; then Source of the page, or equivalent) and you'll notice some text in labels put between < and >. Therefore, you'll see in the first line <html> and right after it, <head>. Those two tags tell the web browser that it will find HTML code, and that the page begins with a heading.
In fact, nearly all the formatting must have a closing tag, unless, the browser won't stop applying the formatting. That's why you'll notice some lines below head>, that's to show the browser the end of the web page heading, but the tag html> come only at the end of the page. A code is therefore stopped by adding a slash / to the same label.
Actually, the HTML is most based around such tags and you'll find it very easy, and I will answer yes. So it seems totally inconceivable to call it a "language" and we must not speak about "programming in HTML" :-), since the only similarity between the HTML and other programming languages is syntactic rigor and patience if you type out your own HTML code. Rigor is needed so that the final code will be compatible with most web browsers; they will really react differently to -little- syntax errors that you will have introduced in your pages.
Now, do you need to learn the HTML tags? Any software editor will of course answer no. But judge yourself: I had discovered Microsoft Publisher 97 and I wanted to build my first web site in 1997. I had begun it with HotDog (with which I could see the HTML code, as I told above) and I continued it on Publisher that unfortunately did not allow me to see the source of the pages! It was only a WYSIWYG (What You See Is What You Get) software. To check my HTML code, I had to open my web site in a browser and then view the source; it was very annoying... But what irritated me is discovering that Publisher used to put too many tags and to create -hidden- tables when unnecessary. And actually, each time I used an HTML editor (Microsoft FrontPage, Netscape Composer, Microsoft Word etc), I ran into the same problem: the created HTML files grew perceptibly while I only added a few text lines. I decide then to type out my web site (and the present one too) using my fingers and Notepad, the modest Windows text editor, and even the Dos one, Edit.exe! Moreover, Publisher -and its fellow-HTML editors- used to insert its signature, and I couldn't stand it :-)! From then, I build my pages exclusively using Notepad and I encourage you to do so, but you may use before helpful software, which are better when free (freeware) or for limited use (shareware). You may also try HTML functions of recent word processors or other office software, which will translate easily your documents into web pages.
If you do want to use such software, I suggest particularly HotDog from Sausage Software, which is an always improving shareware, and FrontPage from Microsoft, whose the Express version is part of the free Internet Explorer 4.0 and Windows 98. But no software will offer all HTML functions, just try for instance to make my home page using FrontPage Express!
Introduction
I suggest you to examine here the HTML tags, for which I provide some examples... when the tag is worth it! Some tags are really useless or are simply ignored by some web browsers.
For complete official tag definitions, please consult the web site of the organization that updates HTML functions, the W3C (World Wide Web Consortium).
Besides, I have changed my approach in this page new version. In the last one, I presented the tags in alphabetical order, and I admit it is not the best way to learn them. This time, I presented the tags in their order of appearance in the web pages, or in their importance order.
Finally, don't forget that tags may be written equally in small or capital letters. And I would like you remember that in order to make your HTML compatible with most browsers, notably widely used Netscape Navigator, you must be scrupulous about the opening and closing tags order. So if you open a <x> and then a <y> tags -that do not exist, you must close the second tag before the first one as if you wrote mathematical equations using brackets, so you write: y>x>.
Now I can only wish you good luck. E-mail me for further information!
<html> ... html>: Global tags. All HTML files must begin with <html> and end with html>. Between those two tags, two blocks form any HTML file: the heading and the body.
HTML files look like the following:
<html>
<head>
...
head>
<body>
...
body>
html>
B. Body | C. Colors
The heading of an HTML file is put between the labels <head> and head>. It may contain many other tags, from which only one is required:
- <title> ... title>
This required tag defines the title that appears in the web browser title bar. For instance the current page has the following title: Abdelaziz: Using HTML. To make that, I wrote this tag: <title>Abdelaziz: Using HTMLtitle>.
- <meta http-equiv | name = ... content = ... >
The meta tags are optional, they provide additional information that may be required by HTTP servers (which connect you to the Internet) and the clients (your web browser). This information is used for the web site identifying, indexing and cataloging by search engines notably.
A meta tag is always followed by one of http-equiv or name parameters, and then by content parameter.
- http-equiv
Particularly used to specify the browser (client) that the page contents are both text and HTML code and that the character set is ISO-8859-1. The tag looks like the following:
<meta http-equiv = "Content-Type" content = "text/html ; charset = ISO-8859-1" >.
- name
Used to define many information, mainly that useful for search engines, e.g. the web site author, its description and keywords etc. Here are three examples:
<meta name = "author" content = "My Name, My Forename" >
<meta name = "description" content = "My own universe" >
<meta name = "keywords" content = "Me, Universe, World, person" >.
For further information on meta tags, please consult Search Engine Watch. You may as well view the source of the web pages you find in first places in search engines ;-).
- <base href = ... >
The base tag defines the basic web address or URL for all the links on your page, it has only one parameter that is required: href. Therefore, if anybody saves your page from the web on its hard disk, his browser will try to connect to display the correct web page whenever he uses a link. It's interesting since the user always sees the latest version of the pages. But the tag is also useful to find the web address if it has been lost. Example: <base href = http://www.my_server.com>.
For all the heading tags, please link to W3C web site.
A typical heading would be:
<head>
<base href = http://www.my_server.com>
<meta http-equiv = "Content-Type" content = "text/html ; charset = ISO-8859-1" >
<meta name = "author" content = "My Name, My Forename" >
<meta name = "description" content = "My own universe" >
<meta name = "keywords" content = "Me, Universe, World, person" >
<title>My titletitle>
head>
A. Heading | C. Colors
The body of HTML files contains all that is visible on the browser: text, pictures, links etc and it is put between <body> and body>.
2. Titles | 3. Paragraphs | 4. Text | 5. Fonts | 6. Links | 7. Tables | 8. Pictures | 9. Mapped pictures | 10. Lists | 11. Miscellaneous
- Body attributes: <body ... >
The beginning tag has itself six parameters that are all optional. Unless those parameters are defined, the browser default ones will be used.
- background
This parameter defines the page background picture, its value is the picture's absolute or relative path. Example: background = MyPictures/Background.gif.
- bgcolor
This parameter defines the page background color, its value must be a color. Example: bgcolor = #00FFFF for a clear blue background.
- text
This parameter defines the text color, its value must be a color. Example: text = #000000 for a black-colored text, like on the current page.
- link
This parameter defines the color of the text or the pictures borders that represent links when they are not visited yet, its value must be a color. Example: link = #0000FF for blue-colored links, like on the current page.
- vlink
This parameter defines the color of the text or the pictures borders that represent links when they are already visited, its value must be a color. Example: vlink = #00A0FF for pale-blue-colored visited links, like on the current page.
- alink
This parameter defines the color of the text or the pictures borders that represent links while they are activated, its value must be a color. Example: alink = #FF0000 for red-colored activated links, like on the current page.
Warning: Unless the browser displays the background picture specified in background and bgcolor is defined, none of the parameters text, link, vlink and alink will be considered by the browser.
Here is an typical example of what could be the body tag:
<body background = MyPictures/Background.gif text = #FFFFFF link = #0000FF vlink = #00A0FF >
1. Body | 3. Paragraphs | 4. Text | 5. Fonts | 6. Links | 7. Tables | 8. Pictures | 9. Mapped pictures | 10. Lists | 11. Miscellaneous
- Title attributes: <Hn [ align = left | center | right | justify] > ... Hn>
Those are defined styles of titles with line-breaking. n takes a value from 1 to 6, 1 being the value that gives the highest-level title. Example:
<H1>Title 1H1>
<H2>Title 2H2> gives:
Title 1
Title 2
The align parameter is optional and accepts one of the four values left, center, right and justify to align the title respectively to the left, the center, the right or to justify it to the two margins. The default value is left.
Example: <H6 align = center>Centered H6H6> gives:
Centered H6
1. Body | 2. Titles | 4. Text | 5. Fonts | 6. Links | 7. Tables | 8. Pictures | 9. Mapped pictures | 10. Lists | 11. Miscellaneous
- Paragraph attributes
- <p [ align = left | center | right | justify] > ... p>
Introduces a new paragraph with a line-feeding, provided that text follows the tag. Actually, if you type two <p> tags one after the other, the browser will consider there is only one. Example: <p>New paragraphp> gives New paragraph.
Notices:
- The align parameter is the same than the <Hn> one.
- In order to separate two paragraphs by more space than that produced by a simple <p>, there are two solutions: Put as many breaks <br> as needed, or put as many <p> tags, each of which followed by the non-breaking space like the following:
<p>
<p>New paragraph after two paragraph breaks.
Which gives:
New paragraph after two paragraph breaks.
- If two paragraphs follow each other, it is optional to end the first one with p>.
- <br>
Introduces a break in the line, since the breaks made in the text with the keyboard will be ignored by your browser, except in a preformatted text. You just have to insert <br> in order to obtain
a break.
- <nobr> ... nobr>
Prevents the browser from breaking the lines when the text between the two tags is larger than the window. Use it with care!
- <center> ... center>
Centers the text after breaking the current line. <center>Centered text with a breakcenter> gives Centered text with a break.
1. Body | 2. Titles | 3. Paragraphs | 5. Fonts | 6. Links | 7. Tables | 8. Pictures | 9. Mapped pictures | 10. Lists | 11. Miscellaneous
Text attributes
Keep in mind that, except in a preformatted text, many spaces will be displayed by the browser as one space only, unless you use the non-breaking spaces.
- <b> ... b>
Displays the text between the labels in bold: <b>Bold textb> gives Bold text.
- <i> ... i>
Displays the text between the labels in italics: <i>Italic texti> gives Italic text.
- <u> ... u>
Underlines the texte between the labels: <u>Underlined textu> gives Underlined text.
- <s> ... s>
Strikes through the text between the labels: <s>Text struck throughs> gives
Text struck through.
- <sup> ... sup>
Displays the text between the labels as an exponent: <sup>Exponentsup> gives Exponent.
- <sub> ... sub>
Displays the text between the labels as an index: <sub>Indexsub> gives Index.
- <pre> ... pre>
Displays the text between the labels in preformatted characters in a new paragraph. Therefore, the breaks made with the keyboard in HTML code and the followed spaces will be dispayed "as is" fixed-width characters: <pre>Preformatted text with
a keyboard-made break and ma n y spaces.pre> gives Preformatted text with
a keyboard-made break and ma n y spaces.
1. Body | 2. Titles | 3. Paragraphs | 4. Text | 6. Links | 7. Tables | 8. Pictures | 9. Mapped pictures | 10. Lists | 11. Miscellaneous
Font attributes: <font ... > ... font>
This tag has three optional parameters that are applied to the text between the two labels:
- face
This parameter defines the text font and accepts many values. Those values must be conventional names of fonts and not their filenames. If the browser refuses the first value (a font non installed on the client machine for instance), it will use the next value. If none of them is valid, the browser will display the text in its default parameters. Example: <font face = Arial,Times>Text in Arial or Times fontfacefont> gives Text in Arial or Times fontface.
- size
This parameter defines the relative or absolute size of text. The value is a number that represents the size. To choose a size relative to the current one, you must add a + or - sign before the value. Example: <font size = 2>Size 2, <font size = +1>Size +1, <font size = -2>Size -2font>font>font> gives
Size 2, Size +1, Size -2.
- color
This parameter defines the text color, its value must be a color. Example: <font color = #0000FF>Blue-colored textfont> gives Blue-colored text.
Notice: The three parameters may be combined. Example: <font face = Arial,Times color = #0000FF>Blue-colored text in Arial or Times fontfacefont> gives Blue-colored text in Arial or Times fontface.
1. Body | 2. Titles | 3. Paragraphs | 4. Text | 5. Fonts | 7. Tables | 8. Pictures | 9. Mapped pictures | 10. Lists | 11. Miscellaneous
Hypertext links: <a ... > ... a>
The <a> tag, that stands for anchor, is the base for hyperlinks. Its allows you to define text as a hypertext link or as the link destination. It has many parameters but I present you only three, from which either href or name is required.
- href
This parameter defines text as a hypertext link. When the visitor clicks this link, he can access to the address specified in href value. This address may be a part of the same web page, another page on the same machine or another machine of a computers network.
To attribute a value to href, you must learn about URL (Uniform Resource Locator) that is an address constituted by many elements.
- Protocol
It is the type of the machine or the network that hosts the hypertext link destination. The most used protocols are http:// and ftp://.
In general, you don't use the protocol in href unless the link destination uses a different protocol or machine. In this case, the address is called absolute path.
- Host
It is the name of the machine that hosts the hypertext link destination. Every host has an extension like the most-common .com.
In general, you don't use the host in href unless the link destination uses a different machine. Anyway, when you specify the host, you must specify the protocol. In this case, the address is called absolute path.
- Path
The path is the absolute ou relative file-tree that is necessary to find the hypertext link destination in the machine.
When you need to access to web pages on the same machine, you have to go up or down the file-tree. In this case, you needn't use the protocol nor the host and the address is called relative path.
To go down the file-tree, you must add a slash / after each directory. To go up the file-tree, you must use ../.
The path must be written exactly as it is defined on the host. If it contains capital letters, you must not write them in lower case.
- File
It's the hypertext link destination. Files must be written exactly as it is defined on the host. If it contains capital letters, you must not write them in lower case.
- Target
It's a specific place in the file that is the hypertext link destination. The target is the last part of an URL, it is preceded by a # sign. It's defined in the destination file using the name parameter.
Examples:
- http://www.my_server.com/Archives1999/Archives_March.htm#Information is an URL which the protocol is http://, the host is my_server.com, the path is /Archives1999/, the file is Archives_March.htm and the target is #Information. Whenever both the protocol and the host are present in an URL, it is called an absolute URL, because the address is complete and all its parts are defined.
- ../Archives1998/Archives_January.htm is an URL which the path is ../Archives1998/ and the file is Archives_January.htm. It indicates to the browser a web page (Archives_January.htm) that is in a directory (Archives1998) in the same file-tree level than the directory (Archives1999) containing the present page (Archives_March.htm). Such an URL is called relative because the address is incomplete and only parts that are different from the present address ones are defined.
Therefore <a href = index.html >Home pagea> gives Home page.
Other link types:
- mailto: ...
This link allows the E-mail program to open in order to write a message. Apart from the E-mail addresses To, Carbon Copy and Blind Carbon Copy, you can also specify many of the message elements, like its Subject and its Body, by using ? sign for the first element and & sign for the others.
Therefore <a href = "mailto:abdelaziz.bennouna@techno.net.ma?subject=Your Subject&cc = address@none.com&body = Your Message Body">E-mail me!a> gives E-mail me!.
- Downloading links
To download a file instead of opening it in the web browser, you should use the ftp:// protocol (File Transfer Protocol). However, if the file is an executable (.exe extension) or a zip archive (.zip extension), you may use http:// protocol. In all cases, if an ftp server is available, you'd better use the ftp:// protocol for all downloading links.
Examples:
- <a href = ftp://ftp.my_server.com/Archives/Sample.doc>Download a sample documenta> allows you to download a Word document.
- <a href = http://www.my_server.com/Archives/Sample.zip>Download a sample archivea> allows you to download a zip archive.
- Advanced JavaScript links
Aside from files, you can define as the hypertext link destination a script written in JavaScript for instance, or a light program called applet and written in Java for instance. However, not all browsers can execute those applets. For further information on the use of JavaScript and EmmaScript, please go to the excellent Dominique Liard website.
- name
This parameter defines the target of a hypertext link inside this link's destination file. Therefore <a name = Target>This is a targeta> allows you to use #Target in the href parameter of an <a> tag, like this: <a href = TargetFile.htm#Target>Go to the targeta>.
Notice: The two parameters may be combined in one tag if you want to define both a link and a target. Therefore <a name = Target1>a><a href = #Target2>Target 1, click to go to the target 2a> is the same than <a href = #Target2 name = Target1>Target 1, click to go to the target 2a>.
- target
This parameter allows you to specify the window or the frame in which the web browser will open the hypertext link destination. For instance, <a href = index.html target = newwin>Home page in a new windowa> gives Home page in a new window. Instead of newwin, you can give the window or the frame name. For further information, please go to the W3C web site.
1. Body | 2. Titles | 3. Paragraphs | 4. Text | 5. Fonts | 6. Links | 8. Pictures | 9. Mapped pictures | 10. Lists | 11. Miscellaneous
Tables: <table ... > ... table>
A typical table looks like this:
<table ... >
<caption ... > ... caption>
<tr ... >
<th ... > ... th>
<td ... > ... td>
tr>
<tr ... >
<td ... > ... td>
<td ... > ... td>
tr>
table>
- Table attributes: <table ... >
The <table> tag lets you add tables to your web pages. It has five parameters that are all optional.
- bgcolor
This parameter defines the table background color, its value must be a color. Example: bgcolor = #FFFF00 for a yellow background. The color can be changed later.
- border
This parameter defines the table border thickness, its value must be a number (in dots) that can be equal to zero for a table without a border. Example: border = 1 for the thinnest border. The default value is 0.
- width
This parameter defines the table width, its value must be a number in dots or in percentage. Example: width = 50% for a table width equal to half the browser window width. The default table width is the one that is strictly necessary to display its data.
- cellspacing
This parameter defines the space between the table cells, its value must be a number. Example: cellspacing = 3. The default cell spacing value is 2 dots.
- cellpadding
This parameter defines the space between the cells contents and their border, its value must be a number. Example: cellpadding = 2. The default cell padding value is 1 dot.
- Caption: <caption [ align = top | bottom ] >
Inserts a caption below or above the table according to the value of the align parameter, which is optional. The default value is top. The caption is centered horizontally to the table.
- Rows: <tr [align=left|center|right] [valign=top|middle|bottom|baseline] [bgcolor=...] >
Adds a row to the table. The tag accepts three optional parameters that are applied to the whole row unless a cell specifies the opposite. The baseline value may be given to the valign parameter in order that cells contents (text, pictures etc) will be vertically aligned to the same base line. The default values are left and middle.
- Heading cells: <th [align=left|center|right] [valign=top|middle|bottom|baseline] [colspan=...] [rowspan=...] [nowrap] [bgcolor=...] [width=...] [height=...]>
Adds a heading cell whose the contents will be displayed in bold (if it is text) and centered by default. The heading cells appear generally in the first column and the first row. The <th> tag has eight parameters that are all optional.
- colspan
This parameter allows you to merge cells on two columns or more. Its value must be number greater than 1, which is the default value. However, the table must contain enough columns to span them.
- rowspan
This parameter allows you to merge cells on two rows or more. Its value must be number greater than 1, which is the default value. However, the table must contain enough rows to span them.
- nowrap
This parameter prevents the cell contents from being broken. The cell will therefore be as large as necessary, even if the table width exceeds the page one. Use it with care!
- Cells: <td [align=left|center|right] [valign=top|middle|bottom|baseline] [colspan=...] [rowspan=...] [nowrap] [bgcolor=...] [width=...] [height=...]>
Adds a normal cell. Its parameters are the same than heading cells one.
Here is a table example:
<table bgcolor=#FFFF00 border=3 width=90%>
<caption>My table captioncaption>
<tr>
<th colspan = 2>Merged heading cellth>
<td>First column and first row celltd>
tr>
<tr valign = bottom>
<td height = 50><b>50b> dots cell (and therefore row) heighttd>
<td align = center>Centered celltd>
<td align = right>Right-aligned celltd>
tr>
table>
And the result is:
My table caption
| Merged heading cell
| First column and first row cell
|
|---|
| 50 dots cell (and therefore row) height
| Centered cell
| Right-aligned cell
|
Notice: In Netscape Navigator, the font attributes of table cells text are the default ones. So if you want them to be different from the default settings, you must define them in every cell using the <font ... > tag.
1. Body | 2. Titles | 3. Paragraphs | 4. Text | 5. Fonts | 6. Links | 7. Tables | 9. Mapped pictures | 10. Lists | 11. Miscellaneous
Pictures: <img ... >
This tag allows you to add pictures to your web pages. It has a great number of attributes, many of them being useful, but only one being required.
- src
This required parameter specifies the picture path, which is defined like links.
The web browsers are generally compatible with only two picture formats: GIF and JPEG.
- GIF :
Graphics Interchange Format, from CompuServe. This format has a .gif extension and is suitable for pictures with a small number of colors (up to 256), especially those created with a graphics software, and it is the only one that accepts animated pictures and interlaced ones. The web browser displays the latter blurred at the beginning; and after loading the whole web page, it displays them correctly.
- JPEG :
Joint Photographic Experts Group. This format has a .jpg extension and is suitable for pictures with a large number of continuous shades (up to 16.7 million), especially photographs.
- lowsrc
This parameter lets the browser display a preliminary picture that has a lower resolution that the one in src parameter. This parameter, too, accepts both picture formats GIF and JPEG. After loading the whole web page, the browser will display the picture sepcified in the src parameter.
- width
This parameter allows you to specify the width on which the picture will be displayed. If it is different from the actual width, the browser will adapt it. The parameter value must be a number in dots, and the default value is the actual width.
- height
This parameter allows you to specify the height on which the picture will be displayed. If it is different from the actual height, the browser will adapt it. The parameter value must be a number in dots, and the default value is the actual height.
Notice: It is important to specify the picture's width and height even if they are equal to the actual ones. Therefore, the browser won't have to ask the host for the picture dimensions, and it will be loaded faster.
- alt
This parameter makes the browser display an alternative text instead of the picture. Its value must be a string of characters. If the web browser doesn't automatically load the pictures (little bandwidth for instance) or if it can't display them (ancient computer for instance), it is important to specify this parameter so that the user will know what the picture means.
- border
This parameter defines the picture border thickness. Its value must be a number in dots. This border looks like text, that's to say that its default color is the text color defined in the <body ... > tag, and that its color is the links one if the picture is a link. The default value is 0 unless the picture is a link, the value is then 1.
- hspace
This parameter defines the horizontal space between the picture and the text on its right and its left. Its value must be a number in dots and the default value is 0.
- vspace
This parameter defines the vertical space between the picture and the text below and above it. Its value must be a number in dots and the default value is 0.
- align = left | right | top | texttop | middle | absmiddle | baseline | bottom | absbottom
This parameter allows you to align the pictures to all imaginable ways.
- left
Aligns the picture in the page left margin and displays the text on its right on as many lines as necessary, like a floating picture.
- right
Aligns the picture in the page right margin and displays the text on its left on as many lines as necessary, like a floating picture.
- top
Aligns the picture's top border with the line's highest element (text or other) one.
- texttop
Aligns the picture's top border with the line's highest text one.
- middle
Aligns the picture's middle with the base line.
- absmiddle
Aligns the picture's middle with the middle line.
- baseline
Aligns the picture's bottom border with the middle line.
- bottom
Aligns the picture's bottom border with the base line.
- absbottom
Aligns the picture's bottom border with the line one.
- name
This parameter defines a unique name for the picture, as it may be used in a script.
- ismap
This parameter identifies the picture as a mapped one, which contains many hypertext areas that lead each to a different link. In parrallel, you must define the picture mapping using the <map> tag or a CGI (Common Gateway Interface) script.
In the case the mapping is defined using the <map> tag, you must also use te following parameter :
- usemap = ...
Gives the name of the picture mapping.
Example:
<a href=/><img src=Miscellaneous/Geocities.gif width=88 height=31 hspace=5 vspace=5 alt="Geocities" >a>
gives 
1. Body | 2. Titles | 3. Paragraphs | 4. Text | 5. Fonts | 6. Links | 7. Tables | 8. Pictures | 10. Lists | 11. Miscellaneous
Mapped pictures: <map>
Those pictures allows every area of them to lead to a particular link. A typical mapping looks like this:
<map name = ...>
<area ... >
<area ... >
map>
- name
Defines the mapping name that will be used in the usemap attribute of the <img> tag.
- Area attributes: <area ... >
- shape = rect | circle | poly
This parameter defines the shape of the area that will be associated with a link: rectangular, circular or polygonal. This parameter determines the way the area coordinates are defined. The default value is rect, but unless the coordinates define a real rectangle, Netscape Navigator for instance won't consider the area.
- coords = ...
This parameter defines the area coordinates. There are three different cases.
- shape = rect
In this case, you must give the coordinates of both diagonally opposite vertices of the rectangle, beginning with the left-most vertex and giving first the x-coordinate. For an ABCD rectangle whose vertices are A(0,0), B(10,0), C(10,20), D(0,20), you must type coords="0,0,10,20".
- shape = circle
In this case, you must give the circle center coordinates and its radius value. For a C circle whose center is O(30,20) and radius is R=10, you must type coords="30,20,10".
- shape = poly
In this case, you must give the coordinates of all the polygon vertices, beginning with the left-most vertex and giving first the x-coordinate, you must also give again the coordinates of the left-most vertex after giving all the others. For a ABC triangle whose vertices are A(0,0), B(10,30), C(5,20), you must type coords="0,0,10,30,5,20,0,0".
- href = ...
This parameter defines the link that is the area destination, which is defined like links.
Example:
<map name=MappedPict>
<area coords="0,0,10,20" href=RectLink.htm >
<area shape=circle coords="50,20,10" href=CircleLink.htm >
map>
<img src=Picture.gif border=0 width=100 height=100 ismap usemap=#MappedPict>
1. Body | 2. Titles | 3. Paragraphs | 4. Text | 5. Fonts | 6. Links | 7. Tables | 8. Pictures | 9. Mapped pictures | 11. Miscellaneous
Lists: <ol> and <ul>
Lists let you present information with an automatic left margin and numbering (<ol>) or bullets (<ul>).
- type
This optional attribute is available for both ordered and unordered lists. It allows you to define the number or the bullet type that preceeds every list item.
Ordered lists accept the following types: 1 (default value: 1,2,3 etc), a (a,b,c etc), A (A,B,C etc), I (I,II,III etc) and i (i,ii,iii etc). If you specify a letter different from a and A as the value, the browser will display the list numbers as default.
Unordered lists accept the following types: disc, circle and square. If the list is of first level, the default value is disc, and if it is of third level or more, the default value is square.
- start
Available only for ordered lists, this optional attribute lets you specify the number from which the list will begin. Is value is always a number, whatever value the type attribute has. The default value is 1.
To add an item to an ordered or an unordered list, you must put it after a <li> tag.
Example:
<ol type=i start=3>
<li>Ordered list first item, numbered <b>iiib>
<li>This is an unordered list displayed in italic:
<i><ul type=disc>
<li>Unordered list first item
<li>Unordered list last item
ul>i>
<li>Ordered list last item
ol>
gives:
- Ordered list first item, numbered iii
- This is an unordered list displayed in italic:
- Unordered list first item
- Unordered list last item
- Ordered list last item
1. Body | 2. Titles | 3. Paragraphs | 4. Text | 5. Fonts | 6. Links | 7. Tables | 8. Pictures | 9. Mapped pictures | 10. Lists
Miscellaneous
- <! -- ... -->
Allows you to add a comment which the web browser will ignore when loading the page. The comments may be placed even in the middle of a line.
<hr ... >
Puts a horizontal line in the page. This tag has four parameters that are all optional.
- size = ...
This parameter defines the line thickness. Its value must be a number and the default value is 2.
- width = ...
This parameter defines the line width. Its value must be a percentage (preferable) or a number and the default value is 100%.
- align = left | center | right
This parameter defines the line alignement. Its default value is center.
- noshade
Specifies that the line is non-shaded.
Example: <hr size=3 width=10% noshade> gives:
Non-breaking space. It means that the browser will display as many spaces as them. See also preformatted text.
1. Body | 2. Titles | 3. Paragraphs | 4. Text | 5. Fonts | 6. Links | 7. Tables | 8. Pictures | 9. Mapped pictures | 10. Lists | 11. Miscellaneous
A. Heading | B. Body
Colors in HTML files are normally given in RGB (Red Green Blue) format. It's a string of characters formed by three hexadecimal numbers that represent each the "weight" of every color.
Hexadecimal numbers are a practical way to write common numbers. Actually, the hexadecimal figures include not only figures from 0 to 9, but also letters A to F, which are therefore equal to numbers 10 to 15. So a hexadecimal ten is in fact equal to 16, and that is the origin of the word "hexadecimal".
Knowing that, numbers from 0 to 9 are equal in decimal and hexadecimal systems. But FF is equal to decimal 255, and it's the maximal value of a color weight for instance.
So the colors in hexadecimal vary between 000000, which is black (no color) and FFFFFF, which is white (full colors).
In the same way, red is FF0000, green is 00FF00 and blue is 0000FF. Complementary colors are yellow: FFFF00, fuchsia: FF00FF and cyan : 00FFFF.
Instead of giving you all common colors in the hexadecimal system, I suggest you to discover them yourself by using for instance the <font> tag with the color parameter. It's indeed preferable because the colors displayed by the browsers are'nt always the ones you expected (and that you obtain indeed in any graphics software).
Finally, for those who are a bit lazy, keep in mind that Microsoft Internet Explorer and latest versions of Netscape Navigator accept, instead of the color hexadecimal code, the simple name of the color! For instance red stands for FF0000 and you can type <font color=red>. The color names available this way are theorically limited to the sixteen basic colors, but I noticed in fact any color that has a name is accepted.
A. Heading | B. Body | C. Colors
For further information or for any suggestions, E-mail me
Abdelaziz: Take a minute to know me!
About Morocco: Discover Morocco, the country that has so many faces that you will always be discovering it... And take note of the hottest news from a hot country.
Computers and Hi-Tech: The latest news and the best stuff in the everyday-changing world of computers, hi-tech and the Internet, weekly updated by Abdelaziz.
Contents: Abdelaziz's homesite contents.
Cars, cars...: This huge gallery offers you the car picture you've always been looking for. So take a look! Also links to manufacturers websites and the latest automotive news brought to you by Abdelaziz.
The ENSEM page: Know more about my school, the "Ecole Nationale Supérieure d'Electricité et de Mécanique".
Some literature: If you are a French literature reader, you must get in because I am too.
Vote for me: Vote for Abdelaziz's homesite in the web sites Top50, Jan Peterson Web Top50, and help it rise...
Abdelaziz's newsletter: Get the latest issue of my weekly newsletter. Subscribe FREELY to it and get the latest news in the fields you are interested in directly in your mailbox!
My links: Make a tour in Abdelaziz's best Internet addresses and links review.
French version: This page in French...
E-mail me: Just send me a mail to ask me about anything...
Home page: Abdelaziz's site home page.
Best experienced with
This page was last updated on Thursday March 25 1999 at 13:25 GMT
