Institut Supérieur des Arts de MultiMédia
Concepts et outils pour le web
TP 2
Mise en forme HTML
1ère année CM
Plan
Titres et paragraphes
Placement des objets
Les images
Les listes
2
Titres et paragraphes (1/4)
• Les paragraphes : la balise p
• La balise p sert à créer un paragraphe
• Il est isolé, par défaut, du reste du texte,
• Le texte va automatiquement à la ligne à la fin du paragraphe
• Exemple
<body>
<p>Voici un paragraphe.</p>
<p>En voici un deuxième.</p>
</body>
• Ce qui donne
Voici un paragraphe.
En voici un deuxième.
3
Titres et paragraphes (2/4)
• Le retour à la ligne : la balise br
• Pour placer un retour à la ligne au sein d’un paragraphe, on utilise la balise
break <br>.
• Il s’agit d’un retour à la ligne et pas d’un saut de ligne.
• Pour définir un espace vertical entre 2 paragraphes, il faut avoir recours au
CSS.
• La ligne de séparation : la balise hr
• Il est possible de mettre une ligne de séparation entre 2 paragraphes avec
la balise horizontal ruler <hr/>
• Les titres : la balise h
• Les titres et sous titres sont indiqués de la balise h1 à la balise h6 (heading :
6 niveaux de titres sont possibles)
• Le niveau 1 est le niveau le plus haut dans la hiérarchie du document, suivi
du niveau 2, …
4
Titres et paragraphes (3/4)
• Exemple
5
Titres et paragraphes (4/4)
• Ce qui donne le résultat suivant :
• NB :
• Il convient de respecter l’ordre
hiérarchique des titres : un titre de
niveau 2 sera toujours situé sous un titre
de niveau 1, un titre de niveau 3 sous un
titre de niveau 2 …
• Il ne faut pas choisir un titre pour son
rendu (taille,…)mais pour son
importance dans la hiérarchie
• On ne mettra pas un titre principal dans
une balise h2
• La taille, couleur, police seront
modifiables par les styles CSS
6
Mise en forme du texte
• On peut également modifier
• La taille de la police <font size="taille">…</font> : la taille normale est 3,
+1 la taille augmente de 1, -2 la taille est diminuée de 2
• La nature de la police : <font face="nom de la police">…</font>
• On peut combiner les 2 :
<font size="12" face="Times New Roman">…</font>
7
Placement des objets
• Par défaut, les objets (images, texte,…) sont alignés à gauche, à moins que
le réglage du navigateur ou la feuille de style décide autrement.
• Il est possible de entrer les objets avec la balise
<center>…</center>
• Pour aligner à droite, il faut utiliser la balise
<div align=‘’right’’> … </div>
• Le texte peut être justifié avec la balise
<div align=‘’justify’’> … </div>
• On peut indiquer l’alignement à l’intérieur de la balise de description, par
exemple :
• Pour centrer un paragraphe : <p align=‘’center>…</p>
• Pour centrer une image : <img src=‘’…’’align=‘’center’’/>
8
Les images
• Une image est insérée avec la balise img en spécifiant l’attribut src
(source) le chemin de l’image à inclure (sous la forme d’un chemin local ou
URL) et avec l’attribut alt l’éventuel texte de remplacement de l’image :
• L’attribut title :
• Il est possible d’attribuer un titre à chaque image. Les navigateurs affichent cette
information dans une info bulle.
• Image contenant des liens :
• Une image elle-même peut être à l’intérieur d’une balise <a> …</a> : on peut alors
cliquer sur le lien pour accéder à la ressource désignée :
9
Les listes (1/4)
• Les listes permettent d’ordonner une énumération
• Il existe trois types de listes :
• Une liste sans ordre précis ‘non ordonnée)
• Une liste tenant compte de l’ordre (ordonnée)
• Une liste de termes et descriptions (définitions)
• Liste non numérotée :
• Les listes non numérotées sont introduites par la balise u1 (unordred list)
et chaque élément de la liste par li (List item)
• Les balises fermantes pour les élément Li ne sont pas obligatoires.
• Cela donne :
10
Les listes (2/4)
• Les listes numérotées :
• Les listes numérotées fonctionnent sur le même principe que les listes non
numérotées. On utilise la balise o1 (ordred list)
• Exemple 1 :
• Cela donne :
11
Les listes (3/4)
• Exemple 2 :
• Ce code donne :
12
Les listes (4/4)
• Les listes de description
• Les listes de description dl (definition list) n’utilisent pas la balise li
mais les sépare en 2 parties : le terme, introduit par dt (definition term) et
sa description introduite par dd (definition description).
• Ce code donne :
13
