Cours Initiation HTML (F. Priam - F. Thiberville

UF Informatique Initiation au HTML page 1
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).
Balises et attributs peuvent être écrits indifféremment en majuscules ou en minuscules.
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  est du commentaire (non affiché dans la page Web).
Exemple :

Structure générale d'une page HTML

<!DOCTYPE HTML PUBLIC "version HTML"> facultatif mais très conseillé
<HTML>
<HEAD> facultatif mais conseillé car il permet
… de séparer la structure du document de
… son contenu
…
<TITLE> Ceci est le titre du document </TITLE> obligatoire …
…
</HEAD>
<BODY>
… Contenu de la page Web
…
</BODY>
</HTML>
FP - 10/03/04 ENITA Bordeaux - Département Entreprise et Systèmes

Le paragraphe <HEAD> … </HEAD>

Il contient des informations relatives au document, notamment sur les scripts et les feuilles de style. Ces
informations ne sont pas affichées par les navigateurs.
Il est facultatif mais très conseillé.
Quelques balises qui peuvent y être intégrées :

<SCRIPT> Contient le code du programme qui sera appelé dans une balise de <BODY>
<STYLE> Définit les styles de présentation associée à des balises
<TITLE> C'est le titre du document affiché dans la barre de titre du navigateur. Il est nécessaire au
référencement par les robots d'indexation.
Le paragraphe <BODY> … </BODY>

Cette balise est optionnelle en HTML 4, mais très conseillée.
Ses attributs principaux

<BODY BGCOLOR=…> Couleur de fond de page
<BODY BACKGROUND=…> Image de fond
<BODY TEXT=…> Couleur par défaut du texte
<BODY LINK=…> Couleur par défaut des liens
<BODY ALINK=…> Couleur par défaut des liens actifs
<BODY VLINK=…> Couleur par défaut des liens visités
<BODY TOPMARGIN=…> Nombre de pixels entre le haut de la fenêtre et la première ligne affichée
(Internet Explorer 4)
Ses éléments
Ses divers éléments sont décrits dans les chapitres suivants.
Écrire une page Web avec un éditeur de texte
Avec un éditeur de texte

Les retours ligne, les tabulations et la succession de plusieurs espaces ne sont pas interprétés par les navigateurs.
Ainsi, pour une meilleure lisibilité du code, il est très conseillé d'indenter les balises.
Exemple :
<HTML><HEAD><TITLE>Titre de la page</TITLE></HEAD><BODY>Mon texte</BODY></HTML>
est interprété de la même manière par les navigateurs s'il est écrit comme suit, dans un fichier texte.
<HTML>
<HEAD>
<TITLE>
Titre de la page
</TITLE>
</HEAD>
<BODY>
Mon texte
</BODY>
<HTML>

Les éléments de mises en forme de la

page Web
Ils sont dans le paragraphe <BODY> … </BODY>.
Les sauts de lignes et les espacements entre les mots
Sauts de ligne et filets horizontaux

Les navigateurs n'interprètent pas les retours à la ligne pourtant visibles à la lecture du code. Ce sont des balises
particulières qui permettent l'affichage de sauts de ligne dans une page Web.
<P> … </P> Sépare ce paragraphe du précédent et du suivant par au moins une ligne
vide. </P> est optionnel
Attribut usuel : <P ALIGN=…>
<BR> Provoque un retour à la ligne
<HR> Sur une nouvelle ligne, affiche une ligne séparatrice grisée
Attributs usuels: ALIGN=…, NOSHADE, SIZE=…, WIDTH=…>
Autres balises <BLOCKQUOTE>, <PRE>, <OL>, <UL>, …
La chaîne de caractère affiche un espace sur la page Web

Exemple : <I> Texte </I> affiche 4 espaces avant le mot Texte
Conseil : dès que possible, utiliser les "Autres balises" au lieu des
Mise en forme des caractères
<I> … </I> Texte Italique

<B> … </B> Texte Gras
<U> … </U> Texte Souligné
<S> … </S> ou Texte Barré
<STRIKE> … </STRIKE>
<SUB> … </SUB> Texte mis en Indice
<SUP> … </SUP> Texte en Exposant
<BIG> … </BIG> Texte écrit Plus gros d'une unité
<SMALL> … </SMALL> Texte écrit Plus petit d'une unité
<FONT> … </FONT> Taille et police choisie pour le texte qui suit
Attributs principaux : COLOR=…, FACE=…, SIZE=…, WEIGHT=…
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 :
Mise en forme des paragraphes (Blocs)
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
Les balises associées à un tableau

<TABLE> </TABLE> Création d'un tableau
<TR> … </TR> Ligne de tableau (sous-élément de <TABLE> )
<TD> … </TD> Cellule d'un tableau (sous-élément de <TABLE> et <TR>)
L'attribut COLSPAN=nombre permet de fusionner des cellules.
<TH> … </TH> Entête de tableau : ils sont affichés avec des caractères différents de ceux
des autres lignes (sous-élément de <TABLE> ET <TR>)

Exemple de tableau
Code de la page Web Affichage de la page Web
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
</TR>
<TR>
Ligne 2 Colonne1 Ligne 2 Colonne2
</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, …
Exemples de codes pour les hyperliens


Accès au site de l'<A HREF="http://www.enitab.fr/">ENITA</A>


<A HREF="mailto:webmaster@enitab.fr">Courrier au Webmaster</A>
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 :

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.

<A NAME="sommaire">Sommaire de la page</A>

<A HREF="#sommaire">Retour Sommaire</A>

<A HREF="..\ecole.htm#sommaire">Retour Sommaire</A>

Les images
Les images fixes ou animées

Cet élément indique la position d'une image fixe ou animée, voire une vidéo. Pour une image, il s'agit d'un
fichier .GIF ou .JPG. Il faut faire tenir compte de la taille de l'image qui va influencer le temps de
téléchargement de la page Web. Une image animée est gérée par HTML de la même manière qu'une image fixe.
<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
Les attributs relatifs à la mise en forme

Valeurs possibles Rôles
ALIGN= LEFT ou RIGHT ou CENTER ou Alignement du texte par rapport à une fenêtre ou aux
JUSTIFY cellules d'un tableau
HEIGHT= Nombre de pixels Détermine la hauteur d'une image, d'une cellule, …
WIDTH= Nombre de pixels Détermine la largeur d'une image, d'une cellule, …
HSPACE= Nombre de pixels Espace horizontal entre 2 éléments
VSPACE= Nombre de pixels Espace vertical entre 2 éléments
ALT= Texte Chaîne qui s'affiche à l'emplacement d'un élément
lorsque le navigateur est incapable d'afficher.celui-ci.
SRC= emplacement et nom d'un fichier détermine le nom des fichiers image, son, …, du code
source à exécuter,…
BORDER= Nombre en pixels Epaisseur de l'encadrement d'un tableau, d'une image, …
TITLE= Texte Info-bulle associée à l'élément
Les attributs communs à presque toutes les balises

TITLE= Texte Info-bulle associée à l'élément
ID= Texte Associe un identifiant unique à l'élément en vue de
l'utilisation par des feuilles de style ou des scripts.
CLASS= Texte associe une classe à un élément en vue de l'utilisation par
des feuilles de style ????
STYLE= Texte associe un style local (par opposition au style défini dans
une feuille de style) ????

Cours Initiation HTML (F. Priam - F. Thiberville

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Cours Initiation HTML (F. Priam - F. Thiberville

Transféré par

Droits d'auteur :

Formats disponibles

UF Informatique Initiation au HTML page 1

Balises et attributs peuvent être écrits indifféremment en majuscules ou en minuscules.

Structure générale d'une page HTML

FP - 10/03/04 ENITA Bordeaux - Département Entreprise et Systèmes

Le paragraphe <HEAD> … </HEAD>

Quelques balises qui peuvent y être intégrées :

Le paragraphe <BODY> … </BODY>

Ses attributs principaux

Écrire une page Web avec un éditeur de texte

Avec un éditeur de texte

FP - 10/03/04 ENITA Bordeaux - Département Entreprise et Systèmes

Les éléments de mises en forme de la

Les sauts de lignes et les espacements entre les mots

Sauts de ligne et filets horizontaux

La chaîne de caractère &nbsp; affiche un espace sur la page Web

Mise en forme des caractères

<I> … </I> Texte Italique

Mise en forme des paragraphes (Blocs)

FP - 10/03/04 ENITA Bordeaux - Département Entreprise et Systèmes

Les balises associées à un tableau

FP - 10/03/04 ENITA Bordeaux - Département Entreprise et Systèmes

Exemples de codes pour les hyperliens

FP - 10/03/04 ENITA Bordeaux - Département Entreprise et Systèmes

Les images fixes ou animées

FP - 10/03/04 ENITA Bordeaux - Département Entreprise et Systèmes

Les attributs relatifs à la mise en forme

Les attributs communs à presque toutes les balises

FP - 10/03/04 ENITA Bordeaux - Département Entreprise et Systèmes

Vous aimerez peut-être aussi

La chaîne de caractère affiche un espace sur la page Web