Cours d’informatique – Classes de Première AC et D

Leçon 8: Quelques balises pour la mise en forme d’un texte.

O.P.O : A la fin de cette leçon l’élève devra être capable de :

 Utiliser les balises de division de texte (<Hn>, <BR>, <P>, <HR>, <PRE>)
 Utiliser les attributs de balises (size, width, align, left, center)
 Utiliser les balises de listes (<LI>,<UL>,<OL>) ; ( Imbriquer les listes ; )
 Changer la couleur du texte d’un document html ;
 Insérer une balise appropriée aux caractères spéciaux.

I- Utilisation de quelques balises pour l’écriture du texte : (<Hn>, <BR>, <P>, <HR>,
<PRE>)
- <center> texte à centre </center> : nous permet de centrer un texte.
- <P> donne un changement de paragraphe
- <br> donne un simple changement de ligne
NB : les commandes <P> et <BR> n'ont pas à être fermées. Vous pouvez utiliser plusieurs
commandes <BR> ou <P> répétitivement pour augmenter l'espacement.
- <b></b>donne un texte en gras: texte en gras
- <strong></strong>donne un texte en gras également: texte en gras
- <Hn> Permettant d’affecter la taille de son contenu (n allant de 1 à 6). 1 pour les plus gros et 6 pour
les plus petits. </Hn>

Pour créer des lignes en HTML, la commande de base est: <HR>donne:

Pour faire varier la largeur de la ligne, on utilise le code suivant: <HR WIDTH=75%>. Cela donne
une ligne de 75% de la largeur de l'écran (selon la largeur de la fenêtre choisie par l'usager).

Les lignes peuvent aussi être alignées à gauche à droite ou centrées. Les commandes suivantes
<HR ALIGN=left> ou <HR ALIGN=right> ou <HR ALIGN=center>

- <EM></EM> ; <I></I> ; <CITE></CITE> : donnent un texte en Italique

- Les annotations <pre></pre> obligent le navigateur à afficher un texte préformaté. Le navigateur
respecte alors les fins de ligne (retours de chariot).
a) Augmentation ou réduction de la taille des caractères
- <FONT SIZE="+2"> texte à agrandir</FONT> donne un accroissement de la grosseur affichée
du texte de 2unités:
- <FONT SIZE="-2"></FONT> donne une réduction de la grosseur affichée du texte de 2 unités:
(plus petit de 2 unités).

- <STRIKE></STRIKE> permet de rayer un texte

- La commande <SUB></SUB> permet d'utiliser les indices dans des formules comme
dans l'exemple qui suit: H2O.
- La commande <SUP></SUP> permet d'utiliser les exposants dans des formules
comme dans l'exemple qui suit: E=mc2
. - <BLINK> </BLINK> permet de faire clignoter le texte.

II- Manipulation des listes.

III- Les listes descriptives :
Ici on utilise la balise <DL> pour l’ouverture de la liste,
Page 1 sur 4
 Cours d’informatique – Classes de Première AC et D

<DT> pour le nouveau terme de définition, <DD> pour la description de l’élément et </DL> pour
la fermeture de la liste.
Exemple : Résultat
<DL>
<LH>Terminale
<DT>Tle A
<DD>Allemand & Espagnol
<DT>Tle C
<DD> Mathématique
<DT>Tle D
<DD> Science
</DL>

IV- Les listes non numérotées : Ici on utilise la balise <UL> pour l’ouverture
de la liste, <LH> Pour le nom de la liste, <LI> pour matérialiser l’élément de la lite
et </UL> pour la fermeture de la liste.
Exemple : Résultat
<UL>
<LH> Terminale
<LI> Tle A
<LI> Tle C
<LI> Tle D
</UL>

V- Les listes numérotées ou ordonnées : Ici on utilise la balise <OL> pour

l’ouverture de la liste, <LH> Pour le nom de la liste, <LI> pour matérialiser
l’élément de la liste et </OL> pour la fermeture de la liste.
Exemple : Résultat
<OL>
<LH> Terminale
<LI> Tle A
<LI> Tle C
<LI> Tle D
</OL>

VI- Changer la couleur du texte.

Pour changer la couleur du texte à un endroit précis dans une page, on peut maintenant utiliser
la commande <FONT COLOR=#FFFFFF>.

NB : Les codes de couleurs correspondent au système RGB (Red Green Blue) ou

RVB (Rouge Vert Bleu) décrit en utilisant la séquence # suivie des six codes.
Ainsi les codes suivants donnent:
#FFFFFF = blanc #000000 = noir
#FFFF00 = jaune #FF00FF = magenta

VII- Balises approprié aux caractères spéciaux.

Certains caractères ont une signification spécifique dans HTML. Pour les utiliser comme tels dans une
page, il faut utiliser les commandes alternatives pour les afficher correctement à l'écran. Ces commandes
sont:
Page 2 sur 4
 Cours d’informatique – Classes de Première AC et D

&lt; pour: < ; &gt; pour: > ; &amp; pour: & ; &quot; pour: "

Leçon 10 : Les Formulaires

Introduction
Avec les formulaires, le langage Html vous ouvre la porte de l'interactivité. Votre interlocuteur pourra
remplir un champ de saisie de texte ou d'autres objets interactifs comme des cases à cocher. Ces données
seront transmises au serveur, par exemple à votre adresse électronique (Mail).
O.P.O : A la fin de cette leçon l’apprenant devra être capable de :
 D’utiliser l’objet formulaire ainsi que les éléments d’un formulaire.
I. Déclaration d'un formulaire
Un formulaire est l'élément Html déclaré par les balises <FORM> </FORM> et Ceci se fait dans le
corps d’un document HTML (<body> et </body>). Un formulaire contient un ou plusieurs éléments que
nous appellerons des contrôles (widgets). Ces contrôles sont notés par exemple par la balise <INPUT
TYPE= ...>.

II. Insertion des éléments dans un formulaire

i. Zone de texte (text)

L'objet text est une zone de texte d’une ligne. Elle sert le plus souvent à la lecture des éléments au
clavier.
Syntaxe : Nom : <input type="text" name = "nom" value= "">

Résultat :

ii. Les boutons radio

Les boutons radio sont utilisés pour noter un choix, et seulement un seul, parmi un ensemble
de propositions.

Propriété Description
Name indique le nom du contrôle. Tous les boutons portent le même nom.
value indique la valeur de l'élément radio.

Syntaxe et Exemple :
<input type="radio" name="tle" value="1">Terminale A4<br> Résultat
<input type="radio" name=" tle " value="2"> Terminale C<br>
<input type="radio" name=" tle " value="3"> Terminale D<br>

iii. Les boutons case à cocher (checkbox)

Les boutons case à cocher sont utilisés pour noter un ou plusieurs choix (pour rappel avec les boutons
radio un seul choix) parmi un ensemble de propositions. A part cela, sa syntaxe et son usage est tout à
fait semblable aux boutons radio sauf en ce qui concerne l'attribut name.

Page 3 sur 4
 Cours d’informatique – Classes de Première AC et D

Propriété Description
Name indique le nom du contrôle. Toutes les cases à cocher portent un nom différent.
value indique la valeur de l'élément radio.

Syntaxe et Exemple Résultat

<input type="checkbox" name="tlea" value="1">Terminale A4<br>
<input type=" checkbox " name=" tled " value="2"> Terminale C<br>
<input type=" checkbox " name=" tlec " value="3"> Terminale D<br>

iv. Liste de sélection

Le contrôle liste de sélection vous permet de proposer diverses options sous la forme
d'une liste déroulante dans laquelle l'utilisateur peut cliquer pour faire son choix. Ce choix reste alors
affiché.
La boite de la liste est crée par la balise <SELECT> et les éléments de la liste par un ou plusieurs tags
<OPTION>. La balise </SELECT> termine la liste.

Syntaxe et Exemple Résultat

<select name="tle">
<option value="1">Terminale A4
<option value="2">Terminale C
<option value="3">Terminale D
</select>

v. Le contrôle reset
Le contrôle Reset permet d'annuler les modifications apportées aux contrôles d'un formulaire et
de restaurer les valeurs par défaut.
Syntaxe et Exemple
Résultat
<input type="reset" name="ok" value ="Annuler">
Où value donne le texte du bouton.
vi. Le contrôle submit
Le contrôle a la tâche spécifique de transmettre toutes les informations contenues dans le formulaire
à l'URL désignée dans l'attribut ACTION du tag <FORM>.
Syntaxe et Exemple
Résultat
<input type="submit" name="yes" value ="Valider">
Où value donne le texte du bouton.

III. TP
Crée un formulaire HTML qui récupère les informations : Matricule : un champ texte
 Nom : un champ texte
 Prénom : un champ texte
 Sexe (M/F) : Bouton radio
 Classe (6ème, 5ème … Tle) : une liste
 Série (A4-Esp, A4-All, C, D) : une liste

Page 4 sur 4