Beruflich Dokumente
Kultur Dokumente
HTML : Généralités
Introduction
C’est un langage structuré utilisé pour la production de pages Web.
Il est interprété par le navigateur de l’internaute.
Balises et Attributs
Le langage HTML est constitué de mots-clés (des balises) qui peuvent être complétés par des attributs.
L'ensemble "Balises + attributs éventuels" est encadré de signes < et > qui symbolisent le début et la fin de la
commande. Tout ce qui est en dehors des symboles < et > est du texte qui sera affiché sur la page Web. Lorsque
plusieurs attributs sont définis pour la même balise, ils sont séparés par un espace.
Exemple :
<H1 ALIGN=CENTER> Exemple de titre </H1>
Balise <H1> suivie de l'attribut ALIGN (alignement du texte).
En général, les balises vont par paires : une balise de début et une balise de fin. La balise de fin se distingue de
celle de début par le caractère /
Exemple :
<H1> début de balise </H1> fin de balise
Les Commentaires
Tout texte écrit entre les symboles <!-- et --> est du commentaire (non affiché dans la page Web).
Exemple :
<!-- Ceci est du commentaire -->
<BODY>
… Contenu de la page Web
…
</BODY>
</HTML>
Ses éléments
Ses divers éléments sont décrits dans les chapitres suivants.
Conseil : dès que possible, utiliser les "Autres balises" au lieu des
Les balises suivantes concernant également les caractères, correspondent plus à un style d'écriture. Leur
utilisation est conseillée avec l'emploi des feuilles de styles.
Exemple :
Les titres
<H1> … </H1> Mise en forme qui définit des niveaux de titre d'un document. Plus le
<H2> … </H2> numéro du niveau est élevé, plus la taille des caractères est petite.
<H3> … </H3> Une ligne blanche est insérée avant et après ces balises.
<H4> … </H4> Attribut usuel : <Hx ALIGN=Right ou Left ou Center>
<H5> … </H5>
<H6> … </H6>
Les listes
La balises <OL>, <UL>, <DL> déterminent 3 type des listes (ordonnée, non ordonnée et définition de liste).
Associée à ces balises, une autre balise <LI> … </LI> précise quels sont les différents éléments de la liste.
<OL> <LI> … </LI> … </OL> Liste ordonnée : les éléments de la liste sont numérotés et décalés vers la
droite
<UL> <LI> … </LI> … </UL> Liste non ordonnée : les éléments de la liste sont décalés vers la droite et
précédés d'une puce (la balise <UL> est à préférer à <MENU> et <DIR>)
<DL> <LI> … </LI> … </DL> Définition de liste : les éléments de la liste, non décalé, sont précédés
d'une puce
Une liste peut être incluse dans une autre liste. A chaque fois qu'un type de liste est défini dans un autre type de
liste, les sous-éléments sont à nouveau décalés vers la droite.
Exemple :
Code de la page Web Affichage de la page Web
Texte 1
<OL> Texte 1
<LI> texte Niveau 1
<OL> 1. texte Niveau 1
<LI> Texte Niveau 1.1 </LI> 1. Texte Niveau 1.1
<LI> Texte Niveau 1.2 </LI> 2. Texte Niveau 1.2
</OL>
</LI> 2. texte Niveau 2
<LI> texte Niveau 2
</LI> Texte 3
</OL>
Texte 3
Les tableaux
Outre la possibilité de représenter les données en lignes et colonnes avec bordure ou sans bordure, les tableaux
permettent aussi de forcer la mise en forme d'un texte.
<TABLE> <TD> <TR>…<TR> Une série de balises imbriquées les unes dans les autres permettent de
</TD> … </TABLE> constituer un tableau
Texte 1 Texte 1
<TABLE BORDER=1 BGCOLOR=yellow>
<TR>
<TH> Nom Colonne 1 </TH>
Nom Colonne 1 Nom Colonne 2
<TH> Nom Colonne 2 </TH>
</TR>
<TR>
<TD> Ligne 1 Colonne 1 </TD>
Ligne 1 Colonne1 Ligne 1 Colonne2
<TD> Ligne 1 Colonne 2 </TD>
</TR>
<TR>
<TD> Ligne 2 Colonne 1 </TD>
Ligne 2 Colonne1 Ligne 2 Colonne2
<TD> Ligne 2 Colonne 2 </TD>
</TR>
</TABLE>
Texte 3
Texte 3
Les hyperliens
Les balises concernant les liens sont très importantes puisque c'est grâce à elles que la navigation est possible
entre paragraphes d'une même page, entre pages, entre sites différents, entre applications différentes, …
Quand un lien est activé dans une page Web, ce lien est en général, souligné et affiché d'une autre couleur
(précisée dans le navigateur par l'internaute ou dans la balise <BODY>) et le curseur de la souris se transforme
en une main.
Lorsque le lien a été visité, il apparaît encore d'une autre couleur.
<A HREF=…> … </A> La balise <A> comporte obligatoirement l'attribut HREF. C'est lui qui
indique le lien avec une autre page, un autre site, …
Dans une page Web, tout élément peut être "cliquable" si l'on prend soin de le définir entre les deux balises <A
HREF=…> … </A>. Exemple avec une image :
<!-- Lien vers une adresse mail en cliquant sur une image -->
Courrier au Webmaster <A HREF="mailto:webmaster@enitab.fr"><IMG SRC="mail.gif"></A>
Le langage HTML permet de marquer un élément de la page (signet) afin de pouvoir y faire référence par un lien
de la même page ou par un lien d'une autre page. L'élément de référence est défini par l'attribut NAME.
<!-- Déclaration d'un signet dans une page Web (exemple : "ecole.htm") -->
<A NAME="sommaire">Sommaire de la page</A>
<!-- Lien interne vers le signet précédent (même page Web "ecole.htm") -->
<A HREF="#sommaire">Retour Sommaire</A>
<!-- Lien externe vers le signet précédent (à partir d'autre page Web) -->
<A HREF="..\ecole.htm#sommaire">Retour Sommaire</A>
Les images
<IMG SRC= …> … </IMG> Définit l'image dont le nom de fichier est donné suite à l'attribut SRC.
Attributs principaux : ALT= (conseillé), ALIGN, BORDER, WIDTH,
HEIGHT
Les formulaires
<FORM> … </FORM> Description du formulaire. Il va contenir des zones de texte, des listes, des
boutons
<INPUT>
<TEXTAREA> … </TEXTAREA> Zone d'entrée de texte multiligne (mémo)
Attributs principaux :
WRAP=SOFT (retour ligne automatique en fin de ligne), ALIGN=…,
BGCOLOR=…, ROWS=…, COLS=…
<SELECT> … </SELECT> Définit une liste de valeurs fixes (<OPTION>) dans laquelle l'utilisateur
fera sa sélection.
<OPTION> … </OPTION> Sous-ensemble de <SELECT> qui liste les valeurs possibles.
<BUTTON> … </BUTTON>
Exemple de liste de valeurs
<SELECT NAME="liste">
<OPTION>1ère option
<OPTION>2ème option
</SELECT>
Les attributs