Le langage HTML (HyperText Makeup Language, langage de création
hypertexte) est le langage utilisé pour créér des pages WEB.
Il permet de décrire la page, les images présentes dessus, le
comportement des objets, des liens ,etc... Il peut être un peu déconcertant,
mais souvent on peut s'en passer, en utilisant un éditeur HTML.
Une page WEB est contenue dans un fichier HTML, d'extension .htm
ou .html, qui est en fait un fichier texte. Vous pouvez le
visualiser sous forme HTML en choissant "Visualiser le
source" dans votre navigateur.
Vous remarquez tout de suite que le texte de la page est bien
present, mais qu'il y a une quantité de signes "<>".
En HTML, ces signes encadrent des balises. Une balise HTML
est une commande, un ordre donné au navigateur. Ce peut etre un
retour chariot, un lien, une insertion d'image, etc...
Une page HTML doit obligatoirement commencer par la balise <HTML> et finir par la balise </HTML>. Le signe / indique une balise de fin. Toute la page HTML doit donc etre incluse entre les deux balises <HTML> et </HTML>.
Au début de la page HTML se trouve l'en-tête. Dans celui-ci
on va déclarer :
- le titre de la page, qui apparaîtra dans la barre de titre du
navigateur
- une description de la page, des mots-clés
- etc...
L'en-tete est inclus entre les balises <HEAD> et </HEAD>.
Le titre de la page est inclus entre les balises <TITLE> et
</TITLE>.
Regardez les en-tetes de vos pages HTML preferees. Vous trouverez
d'autres balises mais pour l'instant, seules celles-ci sont
utlies.
Apres l'en-tete, on passe au corps de la page, c'est a
dire son contenu proprement dit. Celui-ci est contenu entre les
balises <BODY> et </BODY>.
Dans la balise BODY vous pouvez aussi déclarer l'apparence de
votre page, comme ceci :
<BODY BGCOLOR="#FFFFFF" TEXT="#000000"
LINK="#0000FF" BACKGROUND="bois.jpg">
BGCOLOR permet de fixer la couleur du fond. Par défaut, c'est
gris.
TEXT permet de fixer la couleur du texte (noir par défaut) et
LINK celle des liens (bleue par défaut).
BACKGROUND permet de donner un fichier image comme fond d'écran.
Le format peut être GIF ou JPEG.
Les couleurs sont indiquées entre guillemets, en format
hexadecimal.
Vous pouvez, comme dans un traitement de texte,
mettre en forme le texte de vos pages. Les balises suivantes vous
le permettent :
Gras : tout le texte entre <b> et </b> (ou
bold et /bold) est en gras.
Italique : tout le texte entre <i> et </i>.
Centré : entre les balises <center> et </center>.
Saut de ligne : la balise <br>.
Saut de paragraphe : la balise <p>.
Les tailles : entre <h1> et </h1> pour le + gros,
entre <h7> et </h7> pour le plus petit.
La balise FONT est tres importante : elle joue sur la police de
caracteres utilisee :
Entre <FONT FACE="Comic sans MS" COLOR="#FF0000">
et </FONT> tout le texte sera en Comic sans MS
de couleur rouge vif : Comme
ceci !
Le plus important de l'HTML est la possibilité de faire des
liens. On utilise pour cela la balise <a> et </a>. Le
lien est défini entre les deux. On peut :
faire un lien vers un autre fichier du meme serveur : <a href="page1.htm">
, </a>
faire un lien vers une adresse internet : <a href="http://www.yahoo.com/"> , </a>
faire un lien vers une adresse EMAIL : <a href="mailto:alexsoft@le-village.com">, </a>
faire un lien vers un fichier local : <a href="file:///c:\windows\lisezmoi.txt">, </a>
faire un lien vers un signet : <a href="#signet1">, </a>
faire un lien vers un signet dans une autre page : <a href="page1.htm#signet"> , </a>
Pour faire un signet, il faut employer la balise <A NAME> comme ceci : <A NAME="signet">
Regardez bien comment sont faits les liens dans toutes vos pages
WEB préférées.
L'objet le plus simple a inserer est une image. Elle doit etre
au format GIF ou JPEG. La balise est IMG. On peut l'utiliser
comme suit :
<IMG SRC="image.jpg">
SRC indique le fichier image. Elle peut se trouver dans un autre
répertoire (IMG SRC="images/img1.gif") voire sur un
autre serveur (IMG SRC="http://www.usenet.fr/biblio/chien.jpg")
On peut à la suite de SRC utiliser d'autres attributs (proprietes)
de l'image. Par BORDER on regle la taille de sa bordure (si un
lien est placé sur l'image) :<IMG SRC="img.gif"
BORDER=0>
Avec ALT on choisit un texte de remplacement à l'image, si elle
n'est pas trouvée ou non chargée : <IMG SRC="img.gif"
ALT="Image n°1">
Un tableau permet d'accroitre la lisibilité de vos pages. Il se trouve entre les balises table et /table.
Dans la balise table vous indiquez la taille de la bordure :< TABLE BORDER=3>
Vous pouvez indiquer la taille du tableau en pixels : <TABLE
WIDTH=620> ou en pourcentage <TABLE WIDTH="100%">
de la page.
Vous avez également la possibilité d'indiquer le nombre de
cellules par ligne : <TABLE CELLPADDING=5>
La balise tr vous permet de creer une nouvelle ligne du tableau. Vous indiquez dans cette balise l'alignement de cette ligne : <TR VALIGN="vtop" >aligne le texte de la ligne vers le haut.
La balise td définit la cellule. Vous indiquez la largeur de celle ci : <TD WIDTH="50%">
Voici un tableau exemple : regardez le source HTML
Première cellule | Cellule n°2 : taille différente ! et ça marche |
||
On peut mettre plusieurs lignes par cellule. |
OK ! | yes | et voila |
Tableau inutile mais qui est |
fini ! |
Vous avez bien compris ???