Utilisation des balises de mises en forme du texte dans une page web

TRAVAUX PRATIQUES HTML
Insertion des paragraphes, des listes
et des puces dans une Page Web
Objectifs Pédagogiques
 Insérer un paragraphe
 Effectuer un saut de ligne
 Insérer un titre
 Insérer les listes et les puces
Préparé par
LIHAN LI NDJOM Hans
Pré requis : Savoir créer une page web à l’aide du
code HTML
Ingénieur Pédagogique / Enseignant d’informatique et TIC

INSERTION DES PARAGRAPHES
Les paragraphes sont insérés dans un document html à l’aide des balises<p> et </p> on peut
insérer autant de paragraphes que l’on souhaite dans un même document html.
•<p> signifie "Début du paragraphe"
•</p> signifie "Fin du paragraphe"
Etape 1
Ouvrir l’éditeur de texte, saisir le code HTML ci
dessous et enregistrer dans un dossier le fichier
sous le nom « paragraphe.html »
<html>
<head>
<title> Bienvenue sur mon site !</title>
</head>
<body>
<p>
L’Association des Techno-Pédagogues des Ecoles Normales
Supérieures du Cameroun en abrégée « ATPENSC » est une
association laïque, apolitique, et à but non lucratif.
</p>
<p>
Il s’agit d’un collectif d’enseignants d’informatique, « techno-pédagogues
», issus des différentes écoles normales supérieures
du Cameroun, désireux d’oeuvrer efficacement et de manière
efficiente à la consolidation de l’enseignement de l’informatique.
</p>
</body>
</html>
Etape 2
Se rendre dans le dossier où a été enregistré le
fichier « paragraphe.html » et double cliquer sur
l’icone.
Tu obtiendras le résultat suivant :
NB : Dans la rédaction d’un texte, il peut arriver que l’on souhaite
passer à la ligne, ceci se réalise à l’aide de la balise <br>. Il est
souhaitable de placer cette balise entre les paragraphes

INSERTION DES TITRES D’UN TEXTE
On distingue au total six niveaux de titre et elles sont toutes différentes par leur taille. les
titres sont reconnus par les balise suivantes : <h1></h1>,<h2></h2>, <h3></h3>, <h4></h4>,<h5></h5>
et <h6></h6>.
Etape 1
sous le nom « titre.html »
Etape 2
fichier « titre.html » et double cliquer sur l’icone.
<html>
<head>
<title> Bienvenue sur mon site !</title>
</head>
<body>
<h1>Titre super important</h1>
<h2>Titre important</h2>
<h3>Titre un peu moins important (sous-titre)</h3>
<h4>Titre pas trop important</h4>
<h5>Titre pas important</h5>
<h6>Titre vraiment pas important du tout</h6>
</body>
</html>

INSERTION DES LISTES
Les listes permettent d'énumérer des éléments en les numérotant ou non. Les listes sont
pratiques dans le cadre de sommaires. Il existe 3 types de listes à puces : Les listes non
ordonnées, Les listes ordonnées
et Les listes de définitions
LES LISTES SIMPLES NON ORDONNÉES
Une liste doit être encadrée par les balises <UL> et </UL> et chaque élément de la liste doit être
introduit par la balise <LI>.
Etape 1
sous le nom « liste1.html »
Etape 2
fichier « liste1.html » et double cliquer sur l’icone.
Syntaxe :
<UL>
<LI> élementn°1
<LI> élementn°2
<LI> élementn°3
</UL>

LES LISTES SIMPLES NON ORDONNÉES (suite et fin)
Par défaut, les puces d'une liste non ordonnée sont des disques pleins. On peut les modifier
dans la balise <UL> avec l'attribut TYPE qui peut prendre les valeurs :
 square (carré plein) exemple : <UL TYPE="square ’’>
 circle (cercle) exemple : <UL TYPE="circle ’’ >
 disc (rond plein). exemple : <UL TYPE="disc ‘’ >
Etape 1
Etape 2
<html>
<head>
<title> test </title>
</head>
<body>
<UL TYPE="circle">
<LI> Vert
<LI> Rouge
<LI> Jeune
</UL>
</body>
</html>
La puce apparait sous forme de cercle

LES LISTES SIMPLES NON ORDONNÉES
Une liste doit être encadrée par les balises <OL> et </OL> et chaque élément de la liste doit
être introduit par la balise <LI>.
Syntaxe :
<OL>
<LI> élementn°1
<LI> élementn°2
<LI> élementn°3
</OL>
Etape 1
Etape 2
<html>
<head>
<title> test </title>
</head>
<body>
<OL>
<LI> Maroua
<LI> Jourdain
<LI> Samara
<LI> Douala
</OL>
</body>
</html>

LES LISTES SIMPLES NON ORDONNÉES (suite et fin)
Une liste doit être encadrée par les balises <OL> et </OL> et chaque élément de la liste doit
être introduit par la balise <LI>.
Valeur Description Exemple
1 chiffres arables <OL TYPE="1">
I Chiffres romains <OL TYPE="I">
i Chiffres romains minuscules <OL TYPE="i">
A Lettres de l’alphabet <OL TYPE="A">
a Lettres minuscules de l’alphabet <OL TYPE="a">
Etape 1
<Html >
<Head>
<Title> page </title>
</head>
<Body>
<OL TYPE="a">
<LI>Maroua
<LI> Jourdain
<LI> Samara
<LI> Douala
</OL>
</Body>
</Html>
Etape 2

LES LISTES DE DÉFINITION
Les listes de définition sont utilisées lorsqu’on veut afficher des mots et leurs définitions.
Pour indiquer le début et la fin de la liste on utilise les balises <DL>...</DL> (Définition List).
Les mots se trouvent entre <dt></dt>, et les définitions entre <dd></dd>. D’où la syntaxe
suivante :
Syntaxe
<Dl>
<dt> mot_1 </dt>
<dd> Définition du mot_1 </dd>
<dt> mot_2 </dt>
<dt> mot_3 </dt>
……………………..
</Dl>
Code HTML visible sur l’éditeur de texte
Page web visible sur le navigateur

Fin de la Leçon
Merci
Auteur: M. LIHAN LI NDJOM Hans
Ingénieur pédagogique / Enseignant d’informatique
Site web: lihan.blog4ever.com
Email: lihan_hans@yahoo.fr
lihanhans@gmail.com

Utilisation des balises de mises en forme du texte dans une page web

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (20)

Utilisation des balises de mises en forme du texte dans une page web