Le Langage HTML: Etude Des Balises HTML

LE LANGAGE HTML Classe :TCS
ETUDE DES BALISES HTML

Matière : Informatique Prof : Adil Ch.
Introduction :
1. Qu'est-ce que le HTML ?
HTML (HyperText Markup Language) n'est pas un langage de programmation : c'est un langage de
balisage (Description) qui sert à indiquer au navigateur comment structurer les pages web visitées. Il
peut être aussi compliqué ou aussi simple que le développeur web souhaite qu'il soit.
Le HTML se compose d'une série d'éléments avec lesquels vous pouvez encadrer, envelopper
ou baliser différentes parties du contenu pour les faire apparaître ou agir d'une certaine manière.
Des balises encadrantes peuvent transformer une petite partie de contenu en un lien vers une autre
page sur le Web, mettre des mots en italique, etc.
2. La structure générale d’un document HTML5
Pour que le navigateur sache que le codage est du type HTML et qu’il doit traduire ce langage il y a :
<html> ….. </html> : tout ce qui est a l’intérieur des
deux balises est du langage HTML
En première ligne <!DOCTYPE html> indique que c’est le
langage HTML est la version 5 ( HTML5)
<head> … </head> : c’est une partie codage qui ne sera
pas visible dans le navigateur de l’internaute
Les balise <title> … </title> : n’affiche pas un titre dans
la page web mais sur l’onglet du navigateur web.
<body> …. </body> : tout ce qui est a l’intérieur de ces
balises s’affichera dans la page web.
On y retrouve donc un doctype suivi des éléments les plus courants :
<html>, <head>, <title>, <meta>, <link>, <script> et <body>.
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Titre de la page</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
...

...
</body>
</html>
1
 Le doctype
La première ligne d'en-tête a été considérablement simplifiée. On peut maintenant retenir
un doctype par coeur, sans avoir à le copier-coller.
<!doctype html>
Ce doctype allégé a été mûrement testé et réfléchi : il permet toujours - pour les anciens navigateurs -
de rester dans le mode d'interprétation conforme aux standards et d'éviter le mode quirks. On peut
remarquer qu'il n'y a pas d'allusion à un quelconque numéro de version. Son rôle est toujours de
préciser quel est le type de document qui va suivre, afin de permettre au navigateur de savoir quel
langage de la vaste famille SGML il devra interpréter.
 L'élément racine <html>
C'est lui qui va recueillir les deux principaux éléments de la hiérarchie : <head> et <body>.
 L'attribut lang (sur <html>)
On a tendance à l'oublier : l'attribut lang précise la langue utilisée pour le contenu de la page, lorsqu'il
est placé sur la racine <html>.
<html lang="fr">
Une langue bien indiquée sera utile ainsi aux synthèses vocales (pour adopter le bon accent).
 Les fameux <head> et <body>
À ce niveau, le code HTML peut être divisé en deux parties : l'en-tête située entre les
balises <head> et </head>, qui regroupe toutes les méta-informations, c'est-à-dire les données qui ne
sont pas représentées directement à l'écran dans le rendu du document, mais qui lui sont tout de
même liées : le titre dans <title> (extrêmement recommandé), les autres méta-informations variées
(facultatives : mots-clés, description générale de la page) dans zéro ou plusieurs <meta>, et
éventuellement <link>, <script> ou <style>.
2
La deuxième partie comprend le corps à proprement parler, c'est-à-dire <body>. On y retrouvera tout
le reste du contenu HTML, structuré par des balises variées - selon ce que l'on aura à y placer - et dont
l'apparence sera affectée par les styles CSS chargés dans <link> et/ou <style>.
 L'attribut charset (sur <meta>)
Préciser l'encodage des caractères est primordial pour exploiter la bonne page de code et ne pas se
retrouver avec les caractères spéciaux ou accentués. Le choix de l'UTF-8 est désormais préconisé par le
W3C pour tous les protocoles échangeant du texte sur internet (dont HTML).
<meta charset="utf-8">
On retrouvera donc très souvent ce codage de caractères, par contre il faut toujours veiller à ce que
l'éditeur permettant de coder en HTML (que ce soit un IDE tout-en-un ou un simple éditeur de texte)
enregistre le fichier avec le bon encodage, et non en Latin-1 (alias ISO-5589-1) ou ANSI si la
balise <meta> indique UTF-8.
Veillez à toujours placer cette déclaration d'encodage avant toutes les autres balises contenues dans la
section <head>. En effet, celles-ci sont immédiatement concernées, par exemple <title> qui peut déjà
faire appel à des caractères en UTF-8 ; ceci également dans un but de sécuriser l'interprétation des
caractères spéciaux et prévenir les injections de contenu indésirables.
 L'élément <link>
Dans la majorité des cas, une balise <link> placée dans l'en-tête permet de mettre en relation la page
avec d'autres documents externes. La plupart du temps cela concerne les feuilles de style CSS externes
avec une relation du type stylesheet, mais il est aussi possible de définir d'autres types de
relations (par exemple avec author, icon, prefetch, next, prev, etc).
<link rel="stylesheet" href="style.css">

En HTML5, il n'est plus strictement obligatoire de spécifier l'attribut type.
Pour inclure directement des instructions CSS dans le document HTML sans passer par un fichier
externe, <style> est à votre service. Cependant, il vaut mieux faire confiance à un fichier indépendant :
il n'y aura qu'un seul code à maintenir pour de multiples pages (voire pour tout le site), et la mise en
cache par le navigateur n'en sera que plus efficace.
 L'élément <script>
Cet élément permet d'ajouter des scripts (JavaScript) qui vont s'éxécuter côté client dans le navigateur
dès leur chargement.
<script src="script.js"></script>
En HTML5, il n'est plus obligatoire de spécifier l'attribut type. Celui-ci est de toute manière interprétée
par défaut en text/javascript par tous les navigateurs.
3
LES BALISES HTML
HTML contient environ 140 balises qui fournissent au navigateur des indications sur le sens d'un élément, son
interprétation ou son affichage. Entre autres choses, les balises permettent de fournir des méta-données pour le
document HTML, de mettre en avant certaines phrases, d'ajouter des fichiers multimédias ou de gérer des
formulaires en ligne.
Voici quelques-unes des balises les plus fréquemment utilisées :
1. Balises élémentaires de mise en page

Notez que la syntaxe présentée ici est la syntaxe XHTML.
Balise Indication donnée au navigateur
<p> Début d'un paragraphe.
</p> Fin d'un paragraphe.
<br > Ajout d'un saut de ligne. Un saut de ligne ne peut avoir de contenu, on considère
donc que cette balise est à la fois ouvrante et fermante. Cela se traduit par
l'ajout d'un «/» (slash) la fin de la balise. (la fin est facultative)
<hr > Ajout d'une ligne horizontale de séparation.

Cette balise ne peut avoir de contenu, on considère donc que cette balise est à la
fois ouvrante et fermante. Cela se traduit par l'ajout d'un «/» (slash) la fin de la
balise. (la fin est facultative)
2. Style du texte
<strong> Début d'un texte en gras. La balise <b> donne le même résultat mais elle a été
<b> dépréciée, c'est à dire que son utilisation est déconseillée.
</strong> Fin d'un texte en gras.
<em> Début d'un texte en italique. La balise <i> donne le même résultat mais elle a été
<i> dépréciée, c'est à dire que son utilisation est déconseillée.
</em> Fin d'un texte en italique.
<u> Début d'un texte souligné.
</u> Fin d'un texte souligné.
3. Mettre en forme du texte

a) Les titres
Il est possible de mettre des titres en avant grâce aux balises <h1>, <h2>, <h3>, <h4>, <h5>et <h6>. Chacune
de ces balises correspond à un niveau de titre, allant du titre principal <h1> aux titres secondaires <h2> et en
descendant jusqu'au titres les moins importants <h6> (rarement utilisé, le plus souvent 4 niveaux de titres suffisent
largement pour une même page).

b) Choisir l'alignement du texte
Les balises p, h1, h2(...) supportent un attribut "align" qui permet de modifier l'alignement horizontal du texte. Il peut
prendre les valeurs suivantes :

• left : aligné à gauche (par défaut),
• right : aligné à droite,
• center : centré,
4
• justify : justifié (aligné à droite et à gauche).
Il est à noter que le texte justifié est assez peu utilisé sur le web car son implémentation n'est pas très poussée (les
navigateurs ne gèrent pas les césures de texte !).
Différents exemples :
<h2>Titre aligné à gauche</h2>

<h3 align="right">Titre aligné à droite</h3>
<p align="center">Paragraphe centré</p>
Ce qui donne dans le navigateur, le résultat suivant :
Titre aligné à gauche
Titre aligné à droite
Paragraphe centré
c) Modifier la police de caractère

Il est possible de modifier la police de caractère d'un texte avec la balise <font>.
Utiliser <font> Mon texte </font> seul n'aura aucun effet : ce sont les attributs de cette balise qui sont
intéressants :
• l'attribut size permet de préciser la taille du texte allant de "1", le plus petit à "7" le plus grand.
• l'attribut face permet de préciser la police utilisée, par exemple "verdana", "times", etc..
• l'attribut color permet de préciser la couleur du texte, par exemple "red".
Cliquez-ici pour en savoir plus sur les couleurs en HTML.
Exemple, si vous saisissez ceci entre les balises <body> et </body> :
<p>Mon texte <font size="3" face="georgia" color="red">en plus gros, en rouge et en georgia ici</font>.</p>
Vous aurez dans votre navigateur :

Mon texte en plus gros, en rouge et en georgia ici.
d) Autres balises de mise en forme

Il existe d'autres balises de mise en forme en voici 3 exemples qui peuvent s'avérer utiles.
• La balise <blockquote> généralement utilisée pour des citations. Elle se comporte comme un paragraphe
avec un décalage horizontal en plus.
• La balise <sup> pour mettre un mot en exposant
• La balise <sub> pour mettre un mot en indice
Exemple, si vous saisissez ceci entre les balises <body> et </body> :
<p>Les balises indices et exposants sont souvent utilisées avec des nombres : 9<sup>3</sup> ou 9<sub>3</sub>
.</p>
<blockquote>Notez la différence d'espacements entre un blockquote et un paragraphe.</blockquote>
<p>Autre paragraphe.</p>
Vous aurez dans votre navigateur :

Les balises indices et exposants sont souvent utilisées avec des nombres : 93 ou 93.
Notez la différence d'espacements entre un blockquote et un paragraphe.
5
<font> Début d'un texte mis en forme. Cette balise propose les attributs suivants :
size="Val", Val étant un nombre de 1 à 7. Précise la taille du texte.
face="Val", Val étant le nom d'une police. Précise la police de caractère.
color="Val", Val étant une indication de couleur. Précise la couleur du texte.
</font> Fin d'un texte mis en forme.
<blockquote> Début d'une citation
</blockquote> Fin d'une citation.
<sup> Début d'un texte en exposant. Exemple : texte normal texte en exposant
</sup> Fin d'un texte en exposant.
<sub> Début d'un texte en indice. Exemple : texte normal texte en indice
</sub> Fin d'un texte en indice.

4. LES LISTES
Introduction
Les listes d'items sont énormément utilisées sur le web au même titre que dans les documents électroniques ou
manuscrits. Ils permettent d'énumérer des items en les numérotant ou non. Les listes sont pratiques dans le cadre de
sommaires.
• Liste simple non ordonnée (Unordered List)
Une liste doit être encadrée par le conteneur UL et chaque item doit être introduit par la balise LI. Le conteneur
provoque une tabulation.
Syntaxe : Exemple :
<UL>
<LI>Rouge • Rouge
<LI>Vert • Vert
<LI>Bleu • Bleu
</UL>
Type de puce
Par défaut, les puces d'une liste non ordonnée sont des disques pleins. On peut les modifier avec
l'attribut TYPE qui peux prendre les valeurs : square(carré plein), circle (cercle), disc (rond plein).
Syntaxe : Exemple :
<UL TYPE="square">
<LI>Rouge ▪ Rouge
<LI>Vert ▪ Vert
<LI>Bleu ▪ Bleu
</UL>
Syntaxe : Exemple :
<UL TYPE="circle">
<LI>Rouge o Rouge
<LI>Vert o Vert
<LI>Bleu o Bleu
</UL>
6
• Liste ordonnée (Ordered List)
Une liste ordonnée doit être encadrée par le conteneur OL et chaque item doit être introduit par la balise LI.
Syntaxe : Exemple :
<OL>
<LI>Rouge 1. Rouge
<LI>Vert 2. Vert
<LI>Bleu 3. Bleu
</OL>
Type de numérotation
La numérotation d'une liste ordonnée est par défaut les chiffres arables. On peut en changer avec
l'attribut TYPE qui peut prendre les valeurs suivantes :
Valeur Description
1 chiffres arables
I chiffres romains
i chiffres romains minuscules
A lettres de l'alphabet
a lettres minuscules de l'alphabet
Syntaxe : Exemple :
<OL TYPE="I">
<LI>Rouge I. Rouge
<LI>Vert II. Vert
<LI>Bleu III. Bleu
</OL>
Syntaxe : Exemple :
<OL TYPE="i">
<LI>Rouge i. Rouge
<LI>Vert ii. Vert
<LI>Bleu iii. Bleu
</OL>
Syntaxe : Exemple :
<OL TYPE="A">
<LI>Rouge A. Rouge
<LI>Vert B. Vert
<LI>Bleu C. Bleu
</OL>
Syntaxe : Exemple :
<OL TYPE="a">
<LI>Rouge a. Rouge
<LI>Vert b. Vert
<LI>Bleu c. Bleu
</OL>
Début de la numérotation
7
La numérotation d'une liste ordonnée commence par défaut par le premier élément du type de la numérotation
choisie. Mais on peut contraindre la numérotation à commander au nième élément grâce à l'attribut START.
Syntaxe : Exemple :
<OL START="8">
<LI>Rouge 8. Rouge
<LI>Vert 9. Vert
<LI>Bleu 10. Bleu
</OL>
Attention ! La valeur de START doit être numérique (les chiffres romains ne sont pas interprétés).
Syntaxe : Exemple :
<OL TYPE="I" START="8">
<LI>Rouge VIII. Rouge
<LI>Vert IX. Vert
<LI>Bleu X. Bleu
</OL>
Exemple :
Syntaxe :
<OL>
Les couleurs primaires
<LH> Les couleurs primaires
<LI>Rouge
1. Rouge
<LI>Vert
2. Vert
<LI>Bleu
</OL> 3. Bleu
Liste de termes avec définitions

Une telle liste est encadrée par le conteneur DL et contient une liste de termes spécifiés par la balise DT. Un
terme ayant lui-même une liste de définitions chacune introduite par la balise DD.
Syntaxe : Exemple :
<DL>
<DT> Etoile
Etoile
<DD>définition n°1
Objet céleste étudié par les astrophysiciens.
Danseur confirmé d'un ballet.
<DT> Liste
Liste
</DL> Ensemble d'éléments.
Liste non ordonnée avec puces personnalisées

Il est possible de remplacer la balise LI d'une liste non ordonnée par une image afin de personaliser la liste afin
de lui donner un style plus coloré... Ne pas oublier d'ajouter une balise de saut de ligne BR.
Syntaxe : Exemple :
<UL>
<IMG SRC="images/puce.gif">Rouge<BR> Rouge
<IMG SRC="images/puce.gif">Vert<BR>
<IMG SRC="images/puce.gif">Bleu<BR> Vert
</UL>
Bleu
Listes imbriquées
8
Il est possible d'imbriquer les listes entre elles afin d'avoir des listes de listes... pour créer, par exemple des
menus détaillés.
Code : Exemple :
<OL type="I">
<LI>Liste d'items</LI> I. Liste d'items
<OL type="1"> 1. Liste ordonnée
<LI>Liste ordonnée</LI> 2. Type de numérotation
<LI>Type de numérotation</LI> 3. Début de numérotation
<LI>Début de numérotation</LI> II. Liens hyper-texte
</OL> 1.La balise de base
<LI>Liens hyper-texte</LI> 2.Les liens internes
<OL type="1"> 3.Les info-bulles
<LI>La balise de base </LI> 4.Les e-mail
<LI>Les liens internes </LI> 5.Les autres protocols
<LI>Les info-bulles </LI> • FTP
<LI>Les e-mail </LI> • Wais
<LI>Les autres protocols </LI> • Telnet
<UL type="disc">
<LI>FTP</LI>
<LI>Wais</LI>
<LI>Telnet</LI>
</UL>
<LI>Les cadres </LI>
</OL>
</OL>
5. Les tableaux html

a. Présentation des balises
La balise <table> permet de créer un tableau. Il faudra utiliser la balise <tr> pour créer une nouvelle ligne dans le
tableau. Entre les balises <tr> et </tr> nous mettrons nos cellules grâce aux balises <td>. Entre les
balises <td> et </td> nous mettrons le contenu de la case (texte, image...).
La balise <td> peut être remplacée par <th> si la case est un intitulé de colonne.
<table> Début d'un tableau. Cette balise propose les attributs suivants :
width="Val", Val étant un entier ou un pourcentage. Précise la largeur du
tableau
cellpadding="Val", Val étant un entier. Précise l'espacement entre le texte
d'une cellule et le bord de la cellule
cellspacing="Val", Val étant un entier. Précise l'espacement entre 2 cellules
border="Val", Val étant un entier. Précise la largeur du trait des bords des
cellules
</table> Fin d'un tableau.
<tr> Début d'une ligne du tableau [tr => table row].
</tr> Fin d'une ligne du tableau.
<td> Début d'une cellule (ou case) du tableau [td => table data]. Cette balise
propose les attributs suivants :
width="Val", Val étant un entier ou un pourcentage. Précise la largeur de la
cellule
align="Val", Val pouvant être left (gauche), right (droite), center (centré)
oujustify (justifié). Précise l'alignement horizontal du texte.
valign="Val", Val pouvant être top (haut), bottom (bas), ou middle (milieu).
Précise l'alignement vertical du texte.
</td> Fin d'une cellule (ou case) du tableau.
9
<th> Début d'une cellule d'intitulé (entête, généralement utilisée pour la première
ligne) du tableau [th => table header]. Cette balise propose les mêmes
attributs que la balise td (cf ci-dessus).
</th> Fin d'une cellule d'intitulé du tableau.
Exemple :
<table border="1" cellpadding="10" cellspacing="1" width="100%">

<tr>
<th width="20%" align="center">Prénom</th>
<th width="20%" align="center">Nom</th>
<th width="60%" align="left">Profession</th>
</tr>
<tr>
<td align="center" valign="top">Mike</td>
<td align="center" valign="top">Stuntman</td>
<td align="left" valign="top">
Cascadeur<br />Acteur<br />Pilote.
</td>
</tr>
<tr>
<td align="center" valign="top">Mister</td>
<td align="center" valign="top">Pink</td>
<td align="left" valign="top">Gangster</td>
</tr>
</table>
6. Les images
a. Préparer ses images
Il est important de garder à l'esprit que les pages que nous mettons sur Internet sont vues à distance par nos visiteurs.
Leurs navigateurs téléchargent un à un tous les fichiers composants notre page. Des fichiers images trop
volumineux ralentissent les temps de chargement de notre site Web ce qui peut décourager les visiteurs.
Par conséquent, avant de mettre une photo en ligne, nous veillerons à l'enregistrer dans l'un des 3 formats
d'optimisations suivants :
• Jpeg (fichiers en .jpg) généralement utilisé pour des photos ou des images avec des dégradés de couleurs
• Gif (fichiers en .gif) généralement utilisé pour des illustrations avec des aplats de couleurs.
• Png (fichiers en .png) généralement utilisé pour des images avec des ombres sur fond transparent
b. La balise <img>
Nous pouvons ajouter des images grâce à la balise «img». Comme les balises «hr» et «br», elle ne peut avoir aucun
contenu. Nous l'écrirons donc :
<img >
La balise img s'utilise avec les attributs suivants :

• l'attribut src (obligatoire) précise le chemin vers le fichier image à afficher. Si l'image est dans le même répertoire
que le fichier HTML qui l'appelle, le nom du fichier du fichier suffira.
• l'attribut alt (obligatoire) permet de préciser un texte alternatif qui s'affichera si l'image ne peut s'afficher.
10
• l'attribut border permet de spécifier la largeur de la bordure de l'image (de 0 à n)
• les attributs width et height permettent de spécifier respectivement la largeur et la hauteur de l'image. Si ces
attributs ne sont pas renseignés, le navigateur calculera lui-même la taille des images. Cependant, cela peut ralentir
l'affichage de la page.
Exemple d'insertion d'une image. Dans cet exemple l'image "sueur.gif" est placée dans un répertoire "cours" lui même
placé dans le répertoire "i" :
<img src="i/cours/sueur.gif" width="270" height="295" alt="Illustration des problèmes de

suddation" border="0">
<img > Insertion d'une image. Cette balise propose les attributs suivants :
src="Val", Val le chemin complet vers l'image
alt="Val", Val étant un texte qui remplace l'image si elle ne peut s'afficher.
border="Val", Val étant un entier. Précise la taille de la bordure de l'image.
width="Val", Val étant un entier. Précise la largeur de l'image.
height="Val", Val étant un entier. Précise la hauteur de l'image.
7. Les liens hypertextes

La balise <a>
Une des principales originalité du Web, est la possibilité de passer d'une page à une autre, ou d'un site à un autre, en
cliquant sur des liens.
Ceci est rendu possible en HTML par l'utilisation de la balise «a» et de son attribut href.
Exemple d'utilisation:
<a href="page2.html">Cliquez ici pour afficher une autre page</a>
Dans votre navigateur vous verrez :

Cliquez ici pour afficher une autre page
On place donc entre les balises <a> et </a> le texte qui sera cliquable.
On précise le chemin de la page à accéder avec l'attribut href (comme hypertexte référence). Notez bien que :
• le nom de la page dans l'attribut href doit être en tout point identique au nom du fichier HTML appelé.
N'oubliez pas de préciser l'extension (.html) et de respecter la casse des caractères (majuscules / minuscules).
• le nom du fichier ne doit comprendre aucun caractère spéciaux autre que les tirets (pas d'espace, pas
d'accents, etc...). Evitez également les minuscules pour s'éviter des erreurs. Par exemple, si votre page
s'appelle, "historique de l'année.html", renommer la en "historique-annee.html".
• si la page n'est pas situé dans le même réperoire que la page qui l'appelle, il faut préciser le chemin pour y
accéder. Par exemple, si la est dans un sous-dossier "pages", nous l'appellerons ainsi :
src="pages/page2.html".
En résumé
<a> Début d'un lien hypertexte. Cette balise propose les attributs suivants :
href="Val", Val le chemin complet vers la page à afficher
target="_blank", permet l'ouverture du lien dans une nouvelle fenêtre.
</a> Fin d'un lien hypertexte.
11
8. Les formulaires
Un formulaire HTML ou XHTML permet de saisir et de transmettre des informations. Un formulaire est déclaré grâce à
la balise <form> dont on précisera généralement 3 attributs :

• name, le nom que l'on souhaite donner au formulaire
• action, le chemin vers la page ou les données du formulaire seront envoyées. Généralement, il s'agira d'une page
dite "dynamique" (en .php ou .asp par exemple), c'est à dire une page qui peut interagir avec le serveur pour
sauvegarder les données dans une base, les envoyer par mail, ou réaliser tout autre traitement.
• method, la méthode d'envoi des données qui est soit "POST", soit "GET" (voir plus bas)
Exemple d'ouverture et fermeture d'un formulaire
<form name="mon-formulaire1" action="page-envoi.html" method="get">

...
</form>
i. Méthode GET ou POST ?

Un formulaire peut envoyer les informations d'une page à une autre de deux manières différentes :
• En GET, les données du formulaire seront transmises via l'URL de la page. On verra alors des variables s'ajouter à
la fin de l'URL dans la barre d'adresse.
• En POST, les données du formulaire seront transmises via l'entête de la page WEB. Les variables seront alors
invisibles pour l'utilisateur.
Si j'envoie avec mon formulaire une variable nom qui serait égale à Gandhi sur la page page-envoi.html avec la
méthode GET :
http://www.example.com/page-envoi.html?nom=Gandhi
Si j'envoie avec mon formulaire une variable nom qui serait égale à Gandhi sur la page page-envoi.html avec la
méthode POST, l'URL n'est pas modifiée :
http://www.example.com/page-envoi.html
ii. Les différents champs de saisie avec <input />

On va ensuite insérer différents types de champs de saisies entre les balises <form> et </form>.
 Pour un champs texte simple
Nous allons utiliser la balise <input /> en précisant l'attribut type="text".
L'attribut name permet de spécifier le nom de la variable qui sera envoyé.
L'attribut value permet de spécifier une valeur par défaut, c'est à dire que le champs sera affiché pré-rempli.
Exemple :
Veuillez saisir votre prénom :<br />

<input type="text" name="prenom" value="" />
Ce qui donne dans le navigateur :

Veuillez saisir votre prénom :
 Pour un champs de mot de passe
Un champs de mot de passe se comporte comme un champs texte simple à la différence que les caractères qu'on y
saisi sont masqués.
12
Nous allons utiliser la balise <input> en précisant l'attribut type="password".
L'attribut value permet de spécifier une valeur par défaut, c'est à dire que le champs sera affiché prérempli.
Exemple :
Votre mot de passe :<br>

<input type="password" name="motdepasse" value="blabla">
Votre mot de passe :

Veuillez saisir votre prénom :
******
 Pour une case à cocher
Nous allons utiliser la balise <input> en précisant l'attribut type="checkbox".
L'attribut value permet de spécifier la valeur qui sera envoyée si la case est cochée
Exemple :
Quel type de prestation recherchez-vous ?<br>

<input type="checkbox" name="interet" value="loc"> Location de mobilier
<input type="checkbox" name="interet" value="achat"> Achat de mobilier

Quel type de prestation recherchez-vous ?
Location de mobilier Achat de mobilier
Nous pouvons afficher une case pré-cochée en précisant l'attribut checked="checked" :
<input type="checkbox" name="conditions" value="ok" checked="checked"> J'accepte les conditions.
J'accepte les conditions.
 Pour un bouton d'option ou «bouton radio»
Nous allons utiliser la balise <input> en précisant l'attribut type="radio".
L'attribut value permet de spécifier la valeur qui sera envoyée si l'option est sélectionnée
Les boutons radio se distingue des cases à cocher :

• Visuellement, par leur forme ronde
• Ergonomiquement, par une différence de comportement. Les boutons radios n'autorisent qu'un seul choix là ou
les checkbox permettent de cocher plusieurs cases.
Exemple :
Civilité :<br>
<input type="radio" name="civi" value="Mme"> Madame
13
<input type="radio" name="civi" value="Mlle"> Mademoiselle
<input type="radio" name="civi" value="Mr"> Monsieur

Civilité :
Madame Mademoiselle Monsieur
Nous pouvons afficher un bouton radio pré-coché en précisant l'attribut checked="checked" :
Civilité :<br>
<input type="radio" name="civi2" value="Mme"> Madame
<input type="radio" name="civi2" value="Mlle"> Mademoiselle
<input type="radio" name="civi2" value="Mr" checked="checked"> Monsieur

Civilité :
Madame Mademoiselle Monsieur
 Pour un bouton d'envoi
Nous allons utiliser la balise <input> en précisant l'attribut type="submit".
L'attribut value permet de spécifier le texte qui sera affiché sur le bouton.
Lors du clique sur ce bouton, les données du formulaires seront envoyées à la page précisée par l'attribut action du
formulaire.
Exemple :
<input type="submit" value="Envoyer">

Envoyer
 Pour un bouton d'annulation ou «reset»
Nous allons utiliser la balise <input> en précisant l'attribut type="reset".
Lors du clique sur ce bouton, les données saisies par l'utilisateur seront effacées.
Exemple :
<input type="reset" value="Annuler">

Annuler
 Pour un bouton simple
Nous allons utiliser la balise <input> en précisant l'attribut type="button".
14
Lors du clique sur ce bouton, aucune action ne sera effectuée. On verra ultérieurement que l'on pourra lui attribuer une
action avec une commande java script.
Exemple :
<input type="button" value="Mon bouton">

Annuler
iii. D'autres champs de saisie

Nous avons vu ci-dessus que la plupart de champs de formulaire s'écrivent avec la balise <input />.
Cependant, certains champs de saisie utilisent des balises spécifiques.

 Pour un champs texte sur plusieurs lignes ou «zone de texte»
Nous allons utiliser les balises <textarea> et </textarea> .
L'attribut rows permet de préciser le nombre de lignes de la zone de texte. Plus le chiffre sera grand, plus notre
textarea sera long.
L'attribut cols permet de préciser le nombre de caractère par ligne de la zone de texte. Plus le chiffre sera grand, plus
notre textarea sera large.
Le texte placé entre les balises <textarea> et </textarea> permet de spécifier une valeur par défaut, c'est à dire
que le champs sera affiché prérempli.
Exemple :
Votre message :<br>

<textarea name="le-message" rows="6" cols="40">Vous pouvez saisir ici un
message.</textarea>
Ce qui donne dans le navigateur une zone de texte de 6 lignes de 40 caractères :

Votre message :
 Pour un champs de sélection
Les champs select permettent de proposer une liste déroulante de choix.
Nous allons utiliser les balises <select> et </select> .

Exemple :
Vous êtes :<br>

<select name="profil">
15
...
</select>
Entre ces balises <select> et </select>, nous allons placer autant de couple <option> et</option> que nous avons
de choix.
Pour chaque balise <option>, nous précisons le nom de la variable qui sera envoyé avec l'attribut value. Nous
précisons également le texte qui sera affiché pour l'utilisateur en le plaçant entre les balises <option> et </option>.
Exemple :
Vous êtes :<br>

<option value="parti">Un particulier</option>
<option value="profe">Un professionnel</option>
<option value="insti">Un institutionnel</option>
</select>
Ce qui donne dans le navigateur une champs de sélection avec 3 choix :

Vous êtes :
Nous pouvons afficher le champs select avec une option présélectionnée selected="selected" :
<option value="parti">Un particulier</option>
<option value="profe" selected="selected">Un professionnel</option>
<option value="insti">Un institutionnel</option>
</select>

Un professionnel
16

Le Langage HTML: Etude Des Balises HTML

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Le Langage HTML: Etude Des Balises HTML

Transféré par

Droits d'auteur :

Formats disponibles

LE LANGAGE HTML Classe :TCS

ETUDE DES BALISES HTML

 L'élément racine <html>

 L'attribut lang (sur <html>)

 Les fameux <head> et <body>

 L'attribut charset (sur <meta>)

<link rel="stylesheet" href="style.css">

1. Balises élémentaires de mise en page

Balise Indication donnée au navigateur

<p> Début d'un paragraphe.

</p> Fin d'un paragraphe.

<hr > Ajout d'une ligne horizontale de séparation.

</strong> Fin d'un texte en gras.

</em> Fin d'un texte en italique.

<u> Début d'un texte souligné.

</u> Fin d'un texte souligné.

3. Mettre en forme du texte

largement pour une même page).

prendre les valeurs suivantes :

<h2>Titre aligné à gauche</h2>

Ce qui donne dans le navigateur, le résultat suivant :

Titre aligné à gauche

Titre aligné à droite

c) Modifier la police de caractère

Exemple, si vous saisissez ceci entre les balises <body> et </body> :

Vous aurez dans votre navigateur :

d) Autres balises de mise en forme

Vous aurez dans votre navigateur :

</font> Fin d'un texte mis en forme.

<blockquote> Début d'une citation

</blockquote> Fin d'une citation.

</sup> Fin d'un texte en exposant.

</sub> Fin d'un texte en indice.

Liste de termes avec définitions

Liste non ordonnée avec puces personnalisées

5. Les tableaux html

balises <td> et </td> nous mettrons le contenu de la case (texte, image...).

Balise Indication donnée au navigateur

</table> Fin d'un tableau.

<tr> Début d'une ligne du tableau [tr => table row].

</tr> Fin d'une ligne du tableau.

</td> Fin d'une cellule (ou case) du tableau.

</th> Fin d'une cellule d'intitulé du tableau.

<table border="1" cellpadding="10" cellspacing="1" width="100%">

contenu. Nous l'écrirons donc :

La balise img s'utilise avec les attributs suivants :

placé dans le répertoire "i" :

<img src="i/cours/sueur.gif" width="270" height="295" alt="Illustration des problèmes de

7. Les liens hypertextes

cliquant sur des liens.

<a href="page2.html">Cliquez ici pour afficher une autre page</a>

Dans votre navigateur vous verrez :

</a> Fin d'un lien hypertexte.

la balise <form> dont on précisera généralement 3 attributs :

<form name="mon-formulaire1" action="page-envoi.html" method="get">

i. Méthode GET ou POST ?

méthode POST, l'URL n'est pas modifiée :

ii. Les différents champs de saisie avec <input />

Nous allons utiliser la balise <input /> en précisant l'attribut type="text".

L'attribut name permet de spécifier le nom de la variable qui sera envoyé.

Veuillez saisir votre prénom :<br />

Ce qui donne dans le navigateur :

 Pour un champs de mot de passe