FaxInfo - L'Informatique au Lycée!

CHAPITRE 2:Programmation de pages  web statiques  HTML

Leçon 8 et 9: Manipulation des balises et utilisation des attributs

L’élève à la fin de cette leçon devrait être capable de :

• Définir la notion de balise, d’attribut
• Manipuler une balise.
• Insérer les attributs des balises. Introduction

Introduction

Le langage HTML permet de décrire le contenu d'un document html (web). Il utilise des éléments particuliers à savoir des balises qui rendent possible la mise en forme des documents HTML mais également l’insertion des images, la création des liens pour atteindre d’autres pages web.

La présente leçon sera centrée sur les balises et leur utilisation.

        I. DÉFINITION DE LA NOTION DE BALISE ET D’ATTRIBUTS

Une balise est un élément de texte (un nom) encadrée par le caractère inférieur (<) et le caractère supérieur (>). On les appelle encore marqueur ou Tag.

Exemple : Quelques balises…

<B>cette balise met un caractère ou une chaine de caractère en gras

<P>cette balise permet d’aller à la ligne pour créer un nouveau paragraphe

<U>cette balise permet de souligner

Remarque:

Les balises saisies en lettres majuscules ou minuscules produisent le même résultat. On dit que les balises ne sont pas sensibles à la casse.

Les balises HTML fonctionnent par paire afin d'agir sur les éléments qu’elles encadrent. on les appelle également  conteneurs. La première est appelée« balise d'ouverture » (parfois  balise ouvrante) et la seconde « balise de fermeture» (ou fermante). La balise

Fermante est précédé par un slash(/).

Exemple : les balises doubles ou conteneurs

<u>bonjour </u> produit le résultat suivant :bonjour

<u>étant la balise d'ouverture et </u>est celle de fermeture

Toutefois certaines balises HTML(balises simples) ne fonctionnent pas en paire et s’appliquent sans la balise fermante.

La balise <br>qui permet d’imposer un retour à la ligne.

La balise <img>qui permet d’insérer une image dans la page web.

Plusieurs balises HTML peuvent être appliquées sur un élément. De ce fait, elles doivent être imbriquées de manière hiérarchique afin de permettre le cumul de leurs propriétés. Le chevauchement des balises n’est pas autorisé. Le principe d’imbrication des balises est le suivant :

Si nous appliquons plusieurs balises à un texte parexemple, la  1ère balise ouverte  est ladernière à être fermée,la  seconde balise ouverte  est  l'avant dernière à être fermée, la dernière balise ouverte est la première balise à être fermée.

Exemple : imbrication des balises

<i><u><b>Bonjour </b></u></i>ce code html produit le résultat suivant: Bonjour

Par contre le code ci-dessous :

<i><u><b>Bonjour  </i></b></u>n’apporte aucune modification car les balises ont été mal imbriquées.

Un  attribut  est un  élément présent au sein de la balise ouvrante, permettant de définir des propriétés supplémentaires.

Les attributs sont saisis à l’intérieur de la balise d’ouverture. On peut insérer plusieurs attributs dans une balise, on dit qu’elle est extensible.

De manière générale, la syntaxe pour insérer un attribut dans une balise est donnée par :

<Nom_de_la balise  Nom_attribut=" valeur_attribut">Exemple : Insertion d’un attribut au sein d’une balise

<fontcolor= "blue"> bonjour </font> ce code HTML produit le résultat suivant : bonjour

      II.  Utilisation des balises et des attributs

Le langage HTML repose essentiellement sur les balises. Pour visualiser l’effet d’une balise dans une page web, il est nécessaire de la saisir correctement.

Il existe une très grande variété de balises HTML. Intéressons-nous à quelques-unes.

1. CRÉATION D’UN NOUVEAU PARAGRAPHE :

Les balises  <P>et  </P>permettent  d’aller à chaque fois à la ligne afin de créer un nouveau paragraphe.

On peut aussi centrer le paragraphe au milieu, à droite, ou à gauche grâce à l'attribut ALIGN.

Exemple : création de paragraphes alignés.

<p align="left">bienvenue à Garoua.</p>ce code html crée un paragraphe aligné à gauche

<p align="center">bienvenue à Bertoua.</p>ce code html crée un paragraphe centré.

<p align="right">bienvenue à Sangmélima.</p>ce code html crée un paragraphe aligné à droite.

La balise <HR>permet de créer une ligne séparatrice dans une page.il s’agit d’une balise simple. Plusieurs attributs suivants peuvent s’appliquer au sein de cette balise :

  SIZE: précise la taille voulue. Il prend des valeurs numériques et s’exprime en pourcentage(%) ou en pixel (px).

  WIDTH: spécifie la largeur voulue. Il prend des valeurs numériques et s’exprime en  pourcentage(%) ou en pixel (px).

  COLOR: précise la couleur choisie. Pour appliquer une couleur on peut simplement la nommer ( blue, green,red, pink….) ou alors donner son code hexadécimal ( FF0000 pour la couleur rouge, FFFF00 pour le jaune...).

  L’attribut ALIGN s’applique également à cette balise pour définir l’alignement du trait.

  La balise <BR>permet de créer un saut de ligne. Il s’agit aussi d’une balise simple.

Exemple : création des sauts de ligne

Demain<br>il<br>fera <br>beau <br>temps

<BLOCKQUOTE>permet de décaler un texte. Elle s’applique à tout le texte quand on ne fermepas le code avec </BLOCKQUOTE>.

Les balises offrent la possibilité de créer plusieurs types de listes :

Les Listes de définition (cas du dictionnaire) à l’aide des balises suivantes:

DL(description List) pour annoncer la création d’une liste descriptive

DT(description terme) pour préciser le mot qu’on souhaite décrire

DD(description data) pour donner la description du mot choisi

Exemple : création des sauts de ligne

Exemple : création d’une liste descriptive.

<DL>

<DT>fr<DD>français

<DT>ang<DD>anglais

</DL>

 Une liste numérotéeà l’aide des balises suivantes :

OL(Ordonnate List) pour annoncer la création d’une liste ordonnée

LI(Line Item) permet de créer dans la liste une ligne.

Le caractère de numérotation peut être changé grâce l’attribut typequi prend comme valeur des chiffres, des lettres…

L’attribut Startquant à lui permet d’indiquer à partir d’où on débute la numérotation.

Exemple : création d’une liste numérotée ou ordonnée.

<OL >

<LI>français</LI>

<LI>anglais  </LI>

<LI>maths</LI>

</OL>

  Une liste non numérotéeà l’aide des balises suivantes :

UL(Unordonnate List) pour annoncer la création d’une liste ordonnée

LI (Line Item) permet de créer dans la liste une ligne.

Exemple : création d’une liste non numérotée ou à puces.

<UL>

<LI > français </LI>

<LI > anglais</LI>

<LI > maths </LI>

</UL>

Le caractère de numérotation peut être changé grâce l’attribut typequi permet comme puce des carrés (square), des cercles (circle) ou alors des disques (disc).

Exemple : modification des puces.

<UL>

<LI type= disc > français </LI>

<LI type=circle> anglais </LI>

<LI type= square >maths</LI>

</UL>

Remarque:

Si un attribut est inséré dans la balise d’ouverture (OL ou UL), elle s’applique à toutes les lignes de la balise.

Pour centrer un texte ou une image, il suffit de placer l’élément entre les deux balises <CENTER>et </CENTER>.

  Les balises <PRE>et </PRE>permettent d’écrire en pré formaté c'est à dire quesi on saute une ligne dans l’éditeur de texte, la ligne est sautée aussi dans le navigateur Web.

  Les balises <B>et </B>permettent d’écrire un texte en gras.

  Les balises <I>et </I>permettent d’écrire un texte en italique.

  Les balises <SMALL>et </SMALL>permettent d’écrire un texte avec une police plus petite.

  Les balises <BIG>et </BIG>permettent d’écrire un texte avec une police plus grande.

  Les balises <SUP>et </SUP>permettent d’écrire en exposant

  Les balises <SUB>et </SUB>permettent d’écrire en indice.

  Les balises <Q>et </Q>encadrent le texte par des guillemets.

  Les balises <U>et </U>permettent de souligner le texte.

  Les balises <S>et </S>permettent de barrer le texte.

  Les balises  <H1>,  <H2>…<H6>permettent de définir le niveau de titre à appliquer à un texte.

H1 est le niveau de titre le plus grand et H6 étantle plus petit niveau.

La balise <font>permet de :

  Changer la police à travers l’attribut face.

  Changer la taille à travers l’attribut size.

  Changer la couleur à travers l’attribut color.

Exemple : Modification de la police d’un texte

<FONT FACE="Arial" COLOR="BLUE"

SIZE="20">Bonjour </FONT>

Il est possible de personnaliser le corps d’un document html en utilisant certains attributs notamment :

background afin de changer l'image de fond.

bgcolorafin de changer la couleur de fond.

textafin de changer la couleur de tout le texte.

RQ :Quand vous écrirez les balises de votre page Html, il faudra garder à l'esprit :

qu'une balise marque une action pour le navigateur (ce qu'il doit faire...).

que les attributs précisent les modalités de cette action (comment il doit le faire...).

que toutes les balises ne sont pas fermantes (<BR>, <IMG>, etc.)

Exercices :

Définir balise, attribut

2.  Quelle est la syntaxe qui permet d’appliquer un attribut ?

3.  Quelle différence y a-t-il entre une balise simple et une balise double ?

4.  Donner la syntaxe qui permet de :

a-  Créer une liste numérotée ; liste non numérotée ; liste descriptive.

b-  Insérer une image ; un lien.

Afin de primer les meilleurs élèves de votre classe, votre professeur vous demande lui établir la liste des 10 premiers élèves de la classe.

En vous basant sur votre leçon les balises, établissez une liste dont la position occupée par chaque élève correspondra à son rang.

Conclusion

Une balise marque une action pour le navigateur (ce qu'il doit faire...) ;les attributs quant à eux précisent les modalités de cette action (comment il doit le faire...). Toutes les balises ne sont pas fermantes (<BR>, <IMG>, etc.)DE