Cette page se veut une aide pour ceux qui veulent s'initier aux outils HTML, elle n'est donc pas exhaustive, vous y trouverez les principales commandes et quelques astuces.

Le HTML (Hypertext Markup Language) est le langage utilisé pour construire des documents hypertextes pouvant être visualisés sur le Web. Un document HTML peut incorporer du texte, des images, de l'animation et du son.

Le langage HTML fonctionne selon le principe suivant : des commandes HTML entourent des blocs de texte dans un document pour décrire l'apparence de celui-ci. Lorsqu'un navigateur traite le document en question, il formate le texte suivant la signification des commandes HTML.
Lorsqu'un navigateur traite le document en question, il formate le texte suivant la signification des commandes HTML.

Il y a donc des commandes qui indiquent qu'il s'agit d'un titre, d'une liste d'éléments ou d'un simple paragraphe. Il est également possible d'inclure des objets de nature autre que du texte, tels des images, de l'animation et du son.

Un document HTML peut être créé à l'aide d'un simple éditeur de texte ou encore en employant un éditeur spécialisé qui vous offre une gamme complète d'outils, vous rendant ainsi la tâche beaucoup plus facile.

 

REGLES DE BASE POUR L'ECRITURE EN LANGAGE HTML

 

Un document html "standard" doit impérativement commencer par <HTML> et finir par </HTML>.

Les commandes HTML ont une marque de début et une marque de fin. Certaines marques de fin sont facultatives.

Les commandes HTML utilisent les caractères < et > comme délimiteurs.

Les commandes HTML peuvent être écrites en minuscules ou en majuscules.

Tout ce qui n'est pas compris entre "<" et ">" est tout simplement considéré comme du texte à afficher.

 

STRUCTURE D'UN DOCUMENT HTML

 

<HTML> <HTML/> : Commandes de début et de fin de document

<HEAD> </HEAD> : Informations non affichées concernant le document (Date et auteur par exemple)

<TITLE> </TITLE> : Titre du document. Cette information apparaît dans la barre de titre du client WWW.

<BODY> </BODY> : Corps du document. Toutes les informations affichées par le client WWW y sont contenues.

 

Exemple d'une structure de document HTML :

<HTML>
<HEAD>
<TITLE>Exemple de structure de document HTML</TITLE>
</HEAD>
<BODY>
Le document HTML
</BODY>
</HTML>

TITRE DE LA PAGE

 

Ce texte apparaîtra dans la barre de titre du navigateur lorsqu'un utilisateur l'affichera sur son écran.

Exemple : pour cette page il s'agit de Guide HTML.

<HEAD><TITLE>Guide HTML</TITLE>
</HEAD>

BODY

 

 

 Mise en forme de paragraphes

 

 

 

 Lien vers une page en local

 

Lien vers un site extérieur

 

Exemple : Pour aller sur le site Netscape

<A HREF="http://www.netscape.com/index.html">Allez chercher Communicator</A>

Lien vers un e-mail

 

Exemple : Pour m'envoyer un courrier électronique

<A HREF="[email protected]">Ecrivez-moi</A>

 

 

<TABLE WIDTH=50%><TR><TD><IMGSRC="tv.gif"></TD><TD>Bienvenue</TD></TR>
</TABLE></CENTER>

 

 

Bienvenue

 

<TABLE BORDER COLS=2 WIDTH="100%" >
<TR>
<TD>
<CENTER><IMG SRC="tv.gif" HEIGHT=39 WIDTH=50></CENTER>
<TD>
<CENTER>Bienvenue</CENTER>
</TD>
</TR>
</TABLE>

 

A l'intérieur d'une cellule (entre <TD> et </TD>) tout est bien sûr possible, comme mettre plusieurs lignes de texte (avec <BR>, <P> ou autre), changer la couleur des caractères, celle du fond de la cellule, de mettre des liens, des images, d'autres tables, etc...

<td bgcolor="#8080C0"> : mettre un fond de couleur

<table width="50%"> : Occupation en % de la page

<table border="1"> Taille des bords (0=pas de bords).

 

Il est aussi possible de définir le nombre de rangées et de colonnes d'une table et d'attribuer à une cellule plusieurs rangées (rowspan="") ou colonnes (colspan=""), ou les deux.

CADRES

 

 

Il est possible de scinder verticalement ou horizontalement une fenêtre en 2 ou plusieurs parties.

Dans chacune de ces parties viendra s'insérer un fichier html.

Par exemple la page actuelle est séparé en 2 cadres verticaux, celui de gauche comprend l'index et celui de droite le guide HTML.

 

Création d'un fichier Cadre

 

<HTML>
<HEAD>
<TITLE>Cadre</TITLE>
</HEAD>

<FRAMESET cols="20%",80%>
<NOFRAMES>
<BODY>
</BODY>
</NOFRAMES>

<FRAME SRC ="fichier1.htm">
<FRAME SRC ="fichier2.htm">
</FRAMESET>
</HTML>

 

L'attribut COLS peut être remplacé par ROWS pour avoir une séparation horizontale. La valeur attribuée correspond à la taille du cadre par rapport à la largeur de la page.

 

<FRAME SRC="fichier.htm"> permet d'insérer un fichier dans les cadres créés précédement.

Attribuer un nom à un cadre

 

Pour pouvoir faire des liens d'un cadre vers un autre, il faut leur donner des noms. Il est conseillé d'attrbuer un nom significatif (haut, bas, gauche, droite...).

<FRAME SRC="fichier.htm" NAME="droite">

Liens entre cadres

 

Par défaut un navigateur ouvrira la page correspondant au lien dans la même fenêtre que celle du lien.

Pour forcer cette commande il faut utiliser l'attribut TARGET dans le tag du lien.

Exemple : <A HREF="fichier.htm" TARGET="droite">

TARGET indique le nom du cadre cible où devra s'afficher le fichier html.

_blank : ouvre une nouvelle fenêtre pour afficher la page

_self : affiche dans la même fenêtre (par défaut)

_parent : affiche dans le cadre supérieur.

ASTUCES

 

 

Afficher un message d'alerte

 

Pour afficher un message d'alerte en cliquant sur l'image qui sert de lien.

 

Exemple :

<A HREF ="fichier.htm" TARGET=""
ONCLICK="window.alert"('Encore un peu de patience!')">
<IMG SRC="image.gif" BORDER=0 ALIGN= middle START="fileopen">
</A>

 

 

 

 

 

 

� SOS INFORMATIQUE 1998