Utilisation des balises de mises en forme du texte 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

Ingénieur Pédagogique / Enseignant d’informatique et TIC

TRAVAUX PRATIQUES HTML Insertion des paragraphes, des

listes et des puces dans une Page Web

Pré requis : Savoir créer une page web à l’aide du code HTML

http://lihan.blog4ever.com/



INSERTION DES PARAGRAPHESLes 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"

<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’œuvrer efficacement et de manière

efficiente à la consolidation de l’enseignement de l’informatique.

</p>

</body>

</html>

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 »

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 TEXTEOn 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



fichier sous le nom « titre.html »

Etape 2


le 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 LISTESLes 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

Etape 1



fichier sous le nom « liste1.html »

Etape 2


le fichier « liste1.html » et double cliquer sur

l’icone.


LES LISTES SIMPLES NON ORDONNÉESUne 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>.

Syntaxe : <UL>

<LI> élementn°1

<LI> élementn°2

<LI> élementn°3

</UL>

INSERTION DES LISTES

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



l’icone.

Tu obtiendras le résultat suivant :<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

INSERTION DES LISTESLES 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



l’icone.

Tu obtiendras le résultat suivant :<html>

<head>

<title> test </title>

</head>

<body> <OL> <LI> Maroua <LI> Jourdain <LI> Samara <LI> Douala</OL>

</body>

</html>

INSERTION DES LISTESLES 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">

<Html ><Head><Title> page </title></head><Body><OL TYPE="a"> <LI>Maroua <LI> Jourdain <LI> Samara <LI> Douala</OL></Body></Html>

Etape 1




Etape 2



l’icone.


INSERTION DES LISTESLES 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 HansIngénieur pédagogique /

Enseignant d’informatique

Site web: lihan.blog4ever.com

Email: [email protected]@gmail.com


mailto:[email protected]

mailto:[email protected]

http://www.technopedagogue.org/

Internet

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