Quickly learn HTML

The World Wide Web (WWW or Web) uses the HTML language. This language was invented by Tim Berners-Lee during his stay at CERN. HTML (HyperText Markup Language) is a set of style prescriptions notified by tags of the form .... . You always need a beginning tag , and a ending one . Between and the order defined by "tag" is applied.

Assuming you know how to use either Netscape or Internet Explorer, and that you have surfed already on the web, finding interesting information, you will soon certainly want to compose your own pages.

The easiest way to do it is to start from pre-existing pages and to modify them a bit, looking at the modifications and progress from there by a trial and error method. For instance, you could edit the source of this page by "view source" in your Netscape browser, copy and paste it in an ASCII format in whatever text editor you want to use (Notepad, Wordpad, Word ...).

However some basics on the most commonly used syntaxes would greatly help you starting.

Content

Minimal HTML document
Size Headers
Styles and colors
Special characters
Paragraphs, end of lines
Lists
Horizontal Rules
Images
Tables
Meta Tags
Java Scripts
Advertise
Some HTML Guides

Minimal HTML document

The whole HTML document is placed between the tags
<HTML>........</HTML>

It is composed of a header <HEAD>........</HEAD> and a body <BODY>........</BODY>.

The header contains generally the page title (not visible on the screen when browsing, but useful for searching motors):

<HEAD><TITLE>My first HTML document</TITLE></HEAD>

and the body has all the informations you want to place on your document. We generally use the body tag to also indicate the document background:

<BODY background="../../images/fond1.jpg">

Here, "../../images/background.gif" locates the actual file (an image in gif or jpg format) to be used as a background.

Back to Contents

Size Header

It is always possible to change character sizes in a relative way in a HTML document:

<H1>Size Header of size 1</H1>

Size Header of size 1

<H2>Size Header of size 2</H2>

Size Header of size 2

.................
.................
.................

<H6>Size Header of size 6</H6>

Size Header of size 6

Styles and Colors

<B> ... </B> Writes in Bold

<I> ... </I> Writes in Italic

<SUB> ... </SUB> Writes in _Subscript

<SUP> ... </SUP> Writes in ^Superscript

<FONT COLOR="000080"> ... </FONT> Changes into a specific Color

. Colors are coded in RedGreenBlue digits, with two digits for each color in a hexadecimal base. For instance:

<FONT COLOR="ff0000"> ... </FONT> is Red
<FONT COLOR="00ff00"> ... </FONT> is Green
<FONT COLOR="0000ff"> ... </FONT> is Blue
<Back to Contents>

Special Characters

Four ASCII characters do have a special meaning in HTML (<, >, " and &). We then use a sequence beginning by & to represent them. So do we for characters with accents. The degree sign (°) is very special (°), as is the TradeMark ™ (), but curiously the ľ do not need any sequence.

Special Characters
á	á	â	â	à	à	ä	ä	ã	ã	å	å
Á	Á	Â	Â	À	À	Ä	Ä	Ã	Ã	Å	Å
(Most of these combinations are available also for e, i, o, u, y, E, I, O, U, Y )

ç	ç	Ç	Ç	ñ	ñ	Ñ	Ñ	©	©	®	®
°	°	<	<	>	>	"	"	&	&		™

Some browsers directly implement these special characters: HTML Pro.

For a more detailed list:

Martin Ramsh - iso8859 - 1 table
ASCII - ISO 8859-1 (Latin-1) with HTML 3.0 Entities Table.

<Back to Contents

Paragraphs, end of lines

To jump one lign <P>, we change of paragraph

To jump a lign

change paragraph

To go to the next ligne <BR>, we place a <BR>

Go to the next lign
by placing a <BR>

Lists

An Unordered list
<UL>
   <LI>Hydrogen
   <LI>Helium
   <LI>Lithium
</UL>

gives:

An Unordered List:

Hydrogen
Helium
Lithium

A more complex unordered list
<UL>
   <LI>Alcalines
      <UL>
         <LI>Lithium
         <LI>Sodium
      </UL>
   <LI>Alcaline-Earth
      <UL>
         <LI>Beryllium
         <LI>Magnesium
      </UL>
</UL>

gives:

A more complex unordered list:

Alcalines

Lithium
Sodium

Alcaline-Earth

Beryllium
Magnesium

An Ordered List
<OL>
   <LI>Methane
   <LI>Ethane
   <LI>Propane
   <LI>Butane
</OL>

gives:

An Ordered List

Methane
Ethane
Propane
Butane

A Definition List
<DL>
<DT>Alcalines
   <DD>Lithium
   <DD>Sodium
   <DD>Potassium
<DT>Halogens
   <DD>Fluorine
   <DD>Chlorine
   <DD>Bromine
</DL>

gives:

A Definition List

Alcalines: Lithium; Sodium; Potassium
Halogens: Fluorine; Chlorine; Bromine

Horizontal Rules

<HR size=1 noshade align=left width=50%>

<HR size=3 align=left width=60%>

<HR size=4 align=left width=70%>

<HR size=5 align=left width=80%>

Images

To insert an image we use:

<IMG src="../../logos/logo_crismat.gif" hspace=5>
By default, the bottom of the image is aligned with the beginning of the text.
A 5 pixels horizontal space is placed around the image.

By default, the bottom of the image is aligned with the beginning of the text. A 5 pixels horizontal space is placed around the image.

<IMG src="../../images/polefig.jpg" hspace=5 align=top>

The top of the image is aligned with the beginning of the text. A 5 pixels horizontal space is placed around the image.

The top of the image is aligned with the beginning of the text. A 5 pixels horizontal space is placed around the image.

<IMG src="../../images/diffract.gif" hspace=5 align=middle>

Text is aligned at half-height of the image. A 5 pixels horizontal space is placed around the image.

Text is aligned at half-height of the image. A 5 pixels horizontal space is placed around the image.

<IMG src="../../images/fezrb.jpg" hspace=5 align=left>
When text is having several lines, it is nicer to have it all on the side of the image. It is then necessary to had a break command: 'clear="all"'.
<BR clear="all">

When text is having several ligns, it is nicer to have it all on the side of the image. It is then necessary to had a break command: 'clear="all"'.

Tables

Tables are ideal to solve alignment problems (text and images).
They are defined by the tags <table>.....</table>

Each row is defined by the tags <tr>.....</tr>, each column by <td>.....</td>

<table border=5 cellspacing=5 cellpadding=3>
<tr>
<td><IMG src="../../images/reflecti.gif" width="400"></td>
<td align=center>This text is<BR>easily aligned<BR> with adjacent<BR>images</td>
<td><IMG src="../../images/thinfilm.jpg" width="200"></td>
</tr>
</table>

This text is
easily aligned
with adjacent
images

It is possible to remove cells border (border="0") and to center the table in the window (<center>)

<center>
<table border=0 cellpadding=10>
<tr>
<td><IMG src="../../images/esr.jpg"></td>
<td align=center>This text is<BR>easily aligned<BR>with adjacent<BR>images</td>
<td><IMG src="../../images/nmr.gif"></td>
</tr>
</table>
</center>

This text is
easily aligned
with adjacent
images

The tables tags and attributes are numerous, for more consult:

Meta Tags

The META Tags are placed in the Header of a HTML document. They serve the automatic communication with robots, search tools, indexers ...
They are composed of a "name" which defines the action type, and a "content" for this action:

<META NAME="robots" content="all">
Simple mechanism to indicate to visiting web robots if a page should be indexed, or links on the page should be followed. The content of the robots META tag contains directives separated by commas. The default directives are "index" and "follow". The "index" directive specifies if an indexing robot should index the page, while the "follow" indicates the robot if it has to follow the links of the current page. The values "all" and "none" set all directives on and off respectively.
Examples:
<META NAME="robots" content="index,follow">
<META NAME="robots" content="noindex,follow">

Other META instructions:
<META NAME="author" content="Daniel Chateigner"> <META NAME="description" CONTENT="In this page I am describing my activities ..."> <META NAME="keywords" CONTENT="keyword1,keyword2,keyword3 ..."> <meta http-equiv="Content-Language" content="english"> <meta name="Reply-to" content="daniel.chateigner@univ-lemans.fr"> <meta name="Identifier-URL" content="http://lpec.univ-lemans.fr/enseig/html"> <meta name="Copyright" content="daniel chateigner, 1998-"> <meta name="Revisit-after" content="30 days"> <Back to Contents>

Java Script

Provided you know the Java Script programming, you can place some codes directly in the web pages. This script is declared by the <SCRIPT LANGUAGE="JavaScript" ALT="java animation"> tag in the Header of the page. For instance:
<SCRIPT LANGUAGE="JavaScript" ALT="java animation"> function scrollit_r2l(seed) {var m1 = " Happy New Year !!! "; var msg=m1; var out = " "; var c = 1; if (seed > 100) { ... </SCRIPT> <Back to Contents>

Advertising

You have now finished your page, and decide to make it known to other surfers. You need to advertise it. You then could go to any searching tools like www.yahoo.com, www;hotbot.com ... and reference it. There are now searching motors of motors, which take the charge of advertising for you in many motors at once. One you should not skip is the Web Gratuit !!!
<Back to Contents>

Other HTML guides

To go further you could consult::