TRAVAUX PRATIQUES HTML 
Insertion des paragraphes, des listes 
et des puces dans une Page Web 
Objectifs Pédagogiques 
 I...
INSERTION DES PARAGRAPHES 
Les paragraphes sont insérés dans un document html à l’aide des balises<p> et </p> on peut 
ins...
INSERTION DES TITRES D’UN TEXTE 
On distingue au total six niveaux de titre et elles sont toutes différentes par leur tail...
INSERTION DES LISTES 
Les listes permettent d'énumérer des éléments en les numérotant ou non. Les listes sont 
pratiques d...
INSERTION DES LISTES 
LES LISTES SIMPLES NON ORDONNÉES (suite et fin) 
Par défaut, les puces d'une liste non ordonnée sont...
INSERTION DES LISTES 
LES LISTES SIMPLES NON ORDONNÉES 
Une liste doit être encadrée par les balises <OL> et </OL> et chaq...
INSERTION DES LISTES 
LES LISTES SIMPLES NON ORDONNÉES (suite et fin) 
Une liste doit être encadrée par les balises <OL> e...
INSERTION DES LISTES 
LES LISTES DE DÉFINITION 
Les listes de définition sont utilisées lorsqu’on veut afficher des mots e...
Fin de la Leçon 
Merci 
Auteur: M. LIHAN LI NDJOM Hans 
Ingénieur pédagogique / Enseignant d’informatique 
Site web: lihan...
Prochain SlideShare
Chargement dans…5
×

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

395 vues

Publié le

TP sur l'utilisation des balises d'insertion des paragraphes, des titres, des listes dans le code HTML d'une page web.

Publié dans : Internet
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
395
Sur SlideShare
0
Issues des intégrations
0
Intégrations
4
Actions
Partages
0
Téléchargements
8
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

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

  1. 1. 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
  2. 2. 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
  3. 3. 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 Ouvrir l’éditeur de texte, saisir le code HTML ci dessous et enregistrer dans un dossier le fichier sous le nom « titre.html » Etape 2 Se rendre dans le dossier où a été enregistré le fichier « titre.html » et double cliquer sur l’icone. Tu obtiendras le résultat suivant : <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>
  4. 4. 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 Ouvrir l’éditeur de texte, saisir le code HTML ci dessous et enregistrer dans un dossier le fichier sous le nom « liste1.html » Etape 2 Se rendre dans le dossier où a été enregistré le fichier « liste1.html » et double cliquer sur l’icone. Tu obtiendras le résultat suivant : Syntaxe : <UL> <LI> élementn°1 <LI> élementn°2 <LI> élementn°3 </UL>
  5. 5. 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 Ouvrir l’éditeur de texte, saisir le code HTML ci dessous et enregistrer dans un dossier le fichier sous le nom « liste2.html » Etape 2 Se rendre dans le dossier où a été enregistré le fichier « liste2.html » et double cliquer sur 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
  6. 6. INSERTION DES LISTES 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 Ouvrir l’éditeur de texte, saisir le code HTML ci dessous et enregistrer dans un dossier le fichier sous le nom « liste3.html » Etape 2 Se rendre dans le dossier où a été enregistré le fichier « liste3.html » et double cliquer sur 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>
  7. 7. INSERTION DES LISTES 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 Ouvrir l’éditeur de texte, saisir le code HTML ci dessous et enregistrer dans un dossier le fichier sous le nom « liste3.html » <Html > <Head> <Title> page </title> </head> <Body> <OL TYPE="a"> <LI>Maroua <LI> Jourdain <LI> Samara <LI> Douala </OL> </Body> </Html> Etape 2 Se rendre dans le dossier où a été enregistré le fichier « liste3.html » et double cliquer sur l’icone. Tu obtiendras le résultat suivant :
  8. 8. INSERTION DES LISTES 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> <dd> Définition du mot_2 </dd> <dt> mot_3 </dt> <dd> Définition du mot_3 </dd> …………………….. </Dl> Code HTML visible sur l’éditeur de texte Page web visible sur le navigateur
  9. 9. 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

×