Vous êtes sur la page 1sur 15

Chapitre 2 :

Production électronique avancée

Partie II :
Pages web statiques
I- Introduction au langage HTML
 Les pages web visualisées dans un navigateur Internet sont
écrites avec un langage nommé HTML (Hyper Text Markup
Language).
 Le langage HTML est composé d’un ensemble de balises
(tags).
 Une balise est un élément spécial qui indique une action
concernant la mise en page, la mise en forme, etc…
Activité 1 :
Activité 1 page 52 - Activité 2 page 53
Constatation :
Le langage HTML est un langage ………..…par
Interprété le……….…
Navigateur exp : Internet
explorer.
Les balises du langage HTML sont inclues entre les signes …et…
< >
Les balises du langage HTML ne sont pas sensible à la casse, elles peuvent
êtres :……………ou.……………ou……………………………
Majuscule Minuscule Majuscule et Minuscule
Il existe quatre catégories de balise :
Des balises composées d’une partie………… Ouvrante <Body> et une partie
Fermante
…..…...</BODY>
Des balises composées d’une seule partie Ouvrante
……………: <BR>
Des balises composées d’une parie ouvrante et une partie fermente avec des
propriétés < FONT SIZE= "5" COLOR= "bleue " >…………………</FONT>
Des balises composées d’une partie ouvrante avec des propriétés
<IMG SRC= "image1.Jpeg" WIDTH="80" HEIGHT="78">
II- Structure d’un document HTML
HTML
HEAD
TITLE
Entête du Titre du
document HTML document
/TITLE
/HEAD
BODY
Corps du
document HTML /BODY
/HTML
III- Les balises du langage HTML :
1) Les textes et les paragraphes :
Activité 2 : Activité 3 page 54
Balise Rôle
<!--…-->
Commentaire
<B>…</B>
Gras
<I>…</I>
Italique
<U>…</U>
Souligné
<FONT>…</FONT>
Mise en forme de caractères
<SUP>…</SUP>
Exposant
<SUB>…</SUB>
Indice
<BR> A la ligne
<HR>
Ligne horizontale
<CENTER>…</CENTER>
Centrage
<DIV>…</DIV>
Alignement d’un élément
<P>…</P> Nouveau paragraphe
2) Les titres :
Balise Rôle

<H[n]>…</H[n]> Définir un titre avec une taille qui décroit


du niveau 1 au niveau 6
3) Les images :
Balise Rôle
<IMG SRC="…" L’adresse de l’image
WIDTH="…" Largeur de l’image en pixel
HEIGHT="…" Hauteurde l’image en pixel
BORDER="…" Largeur de la bordure autour de l’image
ALIGN="…" Alignement de l’image
ALT="…" > Info bulle de l’image

Balise Rôle
<BODY BACKGROUND="…" > Mettre une image comme
arrière plan
4) Les listes :
Balise Rôle
<UL type="square">
<LI>élément de liste</LI>

</UL>
<LI>élément de liste</LI>
Liste à puces
<OL type="I">
<LI>élément de liste</LI>

</OL>
<LI>élément de liste</LI> Liste numérotés
<DL>
<DT>expression à définir</DT>
<DD>définition de
l'expression</DD>
</DL>
Liste de définition
5) Les tableaux :
Balise Rôle

<TABLE>…</TABLE>
Définition d’un tableau
<TR>…</TR>
Définition d’une ligne
<TD>…</TD>
Définition d’une cellule
Attributs de la balise <table>
Balise Rôle
CELLSPACING=10 (pixels) Espace entre les cellules
CELLPADDING =10 (pixels) Marge intérieur des cellules
BORDER= "0","1","2" Epaisseur de bordure
WIDTH=…% Largeur du tableau
HEIGHT=…% Hauteur du tableau
ALIGN= "left","right", "center" Alignement du tableau
BGCOLOR="blue","red","yellow" Couleur d’arrière plan du tableau

Attributs des balises <tr> et <td>


Balise Rôle
ALIGN="left","right", "center" Alignement horizontale du contenu des cellules
VALIGN="bottom","top", "middle"
Alignement verticale du contenu des cellules
Largeur d’une cellule
WIDTH=…%
Hauteur d’une cellule
HEIGHT=….% Couleur d’arrière plan d’une cellule
BGCOLOR=…. Fusionner les cellules horizontalement
ROWSPAN=2,3,… Fusionner les cellules verticalement
COLSPAN=2,3,…
6. Les Liens hypertextes :
a) Lien externe :

Balise Rôle
<a href="adresse ">…</a>
Lien hypertexte externe vers adresse

b) Lien interne
Balise Rôle
<a name="*****">…</a> Création d’un signet

<a href="#*****">…</a> Lien hypertexte interne vers le signet


7) La création de formulaires HTML
a) Les balises du formulaire

Syntaxe : <FORM name="..."action="nom fichier.extension" method="GET/POST">...</FORM>


Attribut Rôle
name Nom du formulaire
action
Indiquer une action
method Spécifier la méthode d’envoie de données au serveur
b) Les types de formulaires
8- Les cadres (Frames) :
Balise Fonction Attributs Rôle
<FRAMESET cols="colonnes" Cols Définir des
rows="lignes">…</ FRAMESET > Définir des colonnes
cadres Rows Définir des
Lignes
(horizontale)
<FRAME SRC=" adresse page" SRC Adresse d’un
Définir un
NAME="nom"> fichier
cadre
NAME Nom du
cadre

Remarque :
<FRAMESET>…</ FRAMESET >
Remplace
<Body>…</Body>