Le langage HTML

Le langage HTML

12 / 58

Le langage HTML

Structure GØnØrale

Les balises HTML

Les listes

Les tableaux et les formulaires

1 Le langage HTML

2 Structure GØnØrale

3 Les balises HTML

4 Les listes

5 Les tableaux et les formulaires

B.SALEM Y.

Le langage HTML

13 / 58

Le langage HTML

Structure GØnØrale

Les balises HTML

Les listes

Les tableaux et les formulaires

Mise en forme

Les Titres

<hn> </hn> avec n = 1 .. 6.

B.SALEM Y.

Le langage HTML

14 / 58

Le langage HTML

Structure GØnØrale

Les balises HTML

Les listes

Les tableaux et les formulaires

Mise en forme

Les paragraphes

<p> </p>

Mise en forme de texte

B.SALEM Y.

Le langage HTML

15 / 58

Le langage HTML

Structure GØnØrale

Les balises HTML

Les listes

Les tableaux et les formulaires

Mise en forme

Mise en forme de texte

<font ...> Mon texte </font>

Les attributs :

• size : DØ(cid:28)nir la taille du texte (par dØfaut 3) :

En absolu de 1 (cid:224) 7 Ou en relatif de -2 (cid:224) +4

• color : DØ(cid:28)nir la couleur du texte

• face : DØ(cid:28)nir la police du texte

Exemple :

<font size="5" color="blue" face="verdana"> Mon texte

</font>

B.SALEM Y.

Le langage HTML

16 / 58

Le langage HTML

Structure GØnØrale

Les balises HTML

Les listes

Les tableaux et les formulaires

Insertion d’image

Les types d’image supportØs sont : PNG - JPG - GIF - BMP

<img ... />

Les attributs :

• src : La source de l’image (chemin reseignant

l’emplacment de l’image : absolu ou relatif)

• alt : Texte s’a(cid:30)chant (cid:224) la place de l’image au cas oø

elle n’est pas disponible

• width : DØ(cid:28)nir la largeur de l’image

• height : DØ(cid:28)nir l’hauteur de l’image

• border : DØ(cid:28)nir l’Øpaisseur d’une bordure appliquØe (cid:224)

l’image

B.SALEM Y.

Le langage HTML

17 / 58

Le langage HTML

Structure GØnØrale

Les balises HTML

Les listes

Les tableaux et les formulaires

Insertion d’image

Exemple :

<img src="images/photo.png" alt="Erreur lecture Image"

width="100px" height="100px"/>

B.SALEM Y.

Le langage HTML

18 / 58

Le langage HTML

Structure GØnØrale

Les balises HTML

Les listes

Les tableaux et les formulaires

Liens Hypertextes

CrØer un lien :

Les attributs :

<a ...>...</a>

Les types :

• href : Adresse de destination

• title : Texte descriptif donnant des renseignements

sur la page cible

• Lien externe : renvoie vers une nouvelle page

• Lien interne : renvoie vers un emplacement dans la

page

B.SALEM Y.

Le langage HTML

19 / 58

Le langage HTML

Structure GØnØrale

Les balises HTML

Les listes

Les tableaux et les formulaires

Liens Hypertextes

Les liens internes => ancres

Les ancres internes :

<a href="#MotClef">...</a>

Exemple :

<a href="#titre">Lien vers Mon Titre</a>

<h3 id="titre">Mon Titre</h3>

<a href="#page">Lien vers Mon Titre</a>

<a name="page" href="mapage.html">Ma Page</a>

B.SALEM Y.

Le langage HTML

20 / 58

Le langage HTML

Structure GØnØrale

Les balises HTML

Les listes

Les tableaux et les formulaires

Liens Hypertextes

Les ancres externes :

<a href="adresse-page#MotClef">...</a>

Exemple :

<a href="mapage.html#titre">Lien vers Mon Titre</a>

<h3 id="titre">Mon Titre</h3>

B.SALEM Y.

Le langage HTML

21 / 58

Le langage HTML

Structure GØnØrale

Les balises HTML

Les listes

Les tableaux et les formulaires

Liens Hypertextes

Lien vers une adresse e-mail :

<a href="mailto :[email protected]">Ecrivez-moi</a>

Lien vers plusieurs adresse e-mail :

<a href="mailto :[email protected] ;

[email protected]">Ecrivez-moi</a>

B.SALEM Y.

Le langage HTML

22 / 58

Le langage HTML

Structure GØnØrale

Les balises HTML

Les listes

Les tableaux et les formulaires

Liens Hypertextes

Lien vers une adresse e-mail avec sujet par dØfaut :

<a href="mailto :[email protected] ?subject=Sujet du

mail">Ecrivez-moi</a>

Lien vers une adresse e-mail avec sujet et un corps par dØfaut :

<a href="mailto :[email protected] ?subject=Sujet du

mail&body=Corps du mail">Ecrivez-moi</a>

B.SALEM Y.

Le langage HTML

23 / 58

Le langage HTML

Structure GØnØrale

Les balises HTML

Les listes

Les tableaux et les formulaires

1 Le langage HTML

2 Structure GØnØrale

3 Les balises HTML

4 Les listes

5 Les tableaux et les formulaires

B.SALEM Y.

Le langage HTML

24 / 58

Le langage HTML

Structure GØnØrale

Les balises HTML

Les listes

Les tableaux et les formulaires

Deux types :

Liste non ordonnØe - liste (cid:224) puces

<ul>...</ul>

Liste ordonnØe - numØtotØe

<ol>...</ol>

DØ(cid:28)nir les ØlØments d’une liste :

<li>...</li>

B.SALEM Y.

Le langage HTML

25 / 58

Le langage HTML

Structure GØnØrale

Les balises HTML

Les listes

Les tableaux et les formulaires

Les listes non ordonnØe

<ul>...</ul>

Attribut :

• type : Type des puces utilisØes

• disc : cercle rempli
• circle : cercle vide
• square : carrØ

B.SALEM Y.

Le langage HTML

26 / 58

Le langage HTML

Structure GØnØrale

Les balises HTML

Les listes

Les tableaux et les formulaires

Les listes non ordonnØe

Exemples :

B.SALEM Y.

Le langage HTML

27 / 58

Le langage HTML

Structure GØnØrale

Les balises HTML

Les listes

Les tableaux et les formulaires

Les listes ordonnØe

Attribut :

Exemples :

<ol>...</ol>

• type : Type de numØrotation utilisØe (1 - I - i - A - a)
• start : SpØci(cid:28)er un nuØmro de dØpart

B.SALEM Y.

Le langage HTML

28 / 58

Le langage HTML

Structure GØnØrale

Les balises HTML

Les listes

Les tableaux et les formulaires

Les listes imbriquØes

B.SALEM Y.

Le langage HTML

29 / 58

Le langage HTML

Structure GØnØrale

Les balises HTML

Les listes

Les tableaux et les formulaires

Exercice

EnoncØ

Soit le code HTML suivant :

Identi(cid:28)er les di(cid:27)Ørentes erreurs survenues sur ce code et corriger les.

B.SALEM Y.

Le langage HTML

30 / 58

Le langage HTML

Structure GØnØrale

Les balises HTML

Les listes

Les tableaux et les formulaires

Exercice

CorrigØ

B.SALEM Y.

Le langage HTML

31 / 58

Le langage HTML

Structure GØnØrale

Les balises HTML

Les listes

Les tableaux et les formulaires

Exercice

CorrigØ

B.SALEM Y.

Le langage HTML

32 / 58

Le langage HTML

Structure GØnØrale

Les balises HTML

Les listes

Les tableaux et les formulaires

1 Le langage HTML

2 Structure GØnØrale

3 Les balises HTML

4 Les listes

5 Les tableaux et les formulaires

B.SALEM Y.

Le langage HTML

33 / 58

Le langage HTML

Structure GØnØrale

Les balises HTML

Les listes

Les tableaux et les formulaires

Les tableaux

CrØation de tableau :

<table>...</table>

En HTML, le contenu d’un tableau est gØnØrØ ligne par ligne. Pour

crØer un tableau en HTML :

• CrØer des lignes par <tr></tr>

• CrØer des celles dans les lignes par <td></td>

• Ajouter les contenus des cellules dans la balise

<td></td>

B.SALEM Y.

Le langage HTML

34 / 58

Le langage HTML

Structure GØnØrale

Les balises HTML

Les listes

Les tableaux et les formulaires

Les tableaux

CrØation de tableau :

Attributs :

<table>...</table>

• border : spØci(cid:28)er l’Øpaisseur de la bordure du tableau

• cellspacing : SpØci(cid:28)er l’espacement entre les cellules

• cellpadding : SpØci(cid:28)er l’espacement entre le bord et

le contenu des cellules

B.SALEM Y.

Le langage HTML

35 / 58

Le langage HTML

Structure GØnØrale

Les balises HTML

Les listes

Les tableaux et les formulaires

Les tableaux

Exemple :

B.SALEM Y.

Le langage HTML

36 / 58

Le langage HTML

Structure GØnØrale

Les balises HTML

Les listes

Les tableaux et les formulaires

Les tableaux

Ajouter un titre (cid:224) un tableau :

<caption>...</caption>

Emplacement : Directement aprŁs l’ouverture de la table.

Attribut :

• align : Emplacement dØsirØ du titre du tableau.

Valeurs possibles : top - bottom - left - right.

Exemple :

B.SALEM Y.

Le langage HTML

37 / 58

Le langage HTML

Structure GØnØrale

Les balises HTML

Les listes

Les tableaux et les formulaires

Les tableaux

La ligne d’en-tŒte d’un tableau :

Pour la premiŁre ligne du tableau, on remplace les cellules <td>

par <th>

Exemple :

B.SALEM Y.

Le langage HTML

38 / 58

Le langage HTML

Structure GØnØrale

Les balises HTML

Les listes

Les tableaux et les formulaires

Les tableaux

La fusion de cellules dans un tableau.

La fusion s’opŁre sur les cellules d’un tableau => application sur

les ØlØments <td>.

Deux type de fusion :

• Fusion horizentale : Fusion de colonnes => attribut

colspan de la balise <td>

• Fusion verticale : Fusion de lignes => attribut

rowspan de la balise <td>

Remarque :

La somme des colspan de chaque ligne doit Œtre identique (cid:224) toutes

les autres lignes.

La somme des rowspan de chaque colonne doit Œtre identique (cid:224)

toutes les autres colonnes.

B.SALEM Y.

Le langage HTML

39 / 58

Le langage HTML

Structure GØnØrale

Les balises HTML

Les listes

Les tableaux et les formulaires

Les tableaux

Exemples :

B.SALEM Y.

Le langage HTML

40 / 58

Le langage HTML

Structure GØnØrale

Les balises HTML

Les listes

Les tableaux et les formulaires

Exercice

EnoncØe

Ecrire le code HTML permettant de decrire le tableau ci-dessus.

B.SALEM Y.

Le langage HTML

41 / 58

Le langage HTML

Structure GØnØrale

Les balises HTML

Les listes

Les tableaux et les formulaires

Exercice

CorrigØ

B.SALEM Y.

Le langage HTML

42 / 58

Le langage HTML

Structure GØnØrale

Les balises HTML

Les listes

Les tableaux et les formulaires

Les Formulaires

CrØation de formulaire :

<form>...</form>

Attributs :

Exemple :

• action : spØci(cid:28)er la page de destination du formulaire

(adresse ou chemin de la page)

• method : spØci(cid:28)er la mØthode d’envoie :
• GET : les argument passent par l’URL.
• POST : les arguments passent d’une maniŁre

transparente.

B.SALEM Y.

Le langage HTML

43 / 58

Le langage HTML

Structure GØnØrale

Les balises HTML

Les listes

Les tableaux et les formulaires

Les Formulaires

La balise

<(cid:28)eldset>...</(cid:28)eldset>

Permet de regrouper les Ølements d’un formulaire en une zone.

La balise

<legend>...</legend>

Permet de dØ(cid:28)nir une Øtiquette (cid:224) cette zone

B.SALEM Y.

Le langage HTML

44 / 58

Le langage HTML

Structure GØnØrale

Les balises HTML

Les listes

Les tableaux et les formulaires

Les Formulaires

Exemple :

B.SALEM Y.

Le langage HTML

45 / 58

Le langage HTML

Structure GØnØrale

Les balises HTML

Les listes

Les tableaux et les formulaires

Les Formulaires

Les champs de texte mono-ligne

Deux types : texte - mot de passe - cachØ

<input>

Attributs :

• type : prØciser le type ("text" - "password" -

"hidden")

• name : nom du champ permettant de retrouver la

valeur lors de l’envoie du formulaire

• value : attribuer une valeur par dØfaut au champ
• size : spØci(cid:28)er la taille du champ en nombre de

caractŁre

• maxlenght : sert (cid:224) limiter le nombre de caractŁres

possibles

• readonly : verrouiller le champ
• disabled : dØsactiver le champ

Le langage HTML

B.SALEM Y.

46 / 58

Le langage HTML

Structure GØnØrale

Les balises HTML

Les listes

Les tableaux et les formulaires

Les Formulaires

Les champs de texte multi-ligne

<textarea></textarea>

Attributs :

• rows : contient le nombre de lignes

• cols : contient le nombre de colonnes

• name : nom du champ permettant de retrouver la

valeur lors de l’envoie du formulaire

• readonly : verrouiller le champ

• disabled : dØsactiver le champ

B.SALEM Y.

Le langage HTML

47 / 58

Le langage HTML

Structure GØnØrale

Les balises HTML

Les listes

Les tableaux et les formulaires

Les Formulaires

Les champs de (cid:28)chiers

Permettre (cid:224) l’internaute, d’envoyer des (cid:28)chiers par l’intermØdiaire

du formulaire.

<input type="(cid:28)le">

• L’attribut "size" a(cid:27)ecte la taille du champ dans

lequel sera Øcrit le nom du (cid:28)chier..

Remarque :

Pour que le champ soit opØrationnel, il faut impØrativement

renseigner l(cid:146)attribut "enctype" de la balise <form> (cid:224)

"multipart/form-data".

Exemple :

B.SALEM Y.

Le langage HTML

48 / 58

Le langage HTML

Structure GØnØrale

Les balises HTML

Les listes

Les tableaux et les formulaires

Les Formulaires

Les boutons radios

Permettre (cid:224) l’utilisateur (cid:224) sØlectionner un choix et un seul parmi

une liste de proposition.

<input type="radio">...

• Un mŒme nom doit Œtre attribuer (cid:224) un groupe de

proposition par l’attribut "name".

• La valeur de l’attribut "value" va Œtre transmise au

serveur en fonction du bouton choisi.

• L’attribut "checked" permet de forcer un bouton (cid:224)

Œtre cochØ par dØfaut.

Exemple :

B.SALEM Y.

Le langage HTML

49 / 58

Le langage HTML

Structure GØnØrale

Les balises HTML

Les listes

Les tableaux et les formulaires

Les Formulaires

Les cases (cid:224) cocher

Permettre (cid:224) l’utilisateur (cid:224) sØlectionner un ou plusieurs choix parmi

une liste de proposition.

<input type="checkbox">...

Remarque :

Si on dØsigne un groupe de cases (cid:224) cocher par le mŒme nom, seule

la derniŁre case cochØe sera envoyØe au serveur. Pour remØdier (cid:224)

ceci, il su(cid:30)t de rajouter des crochets ouvrant et fermant au nom du

groupe.

Exemple :

B.SALEM Y.

Le langage HTML

50 / 58

Le langage HTML

Structure GØnØrale

Les balises HTML

Les listes

Les tableaux et les formulaires

Les Formulaires

Les boutons

Quatre types de boutons :

• Le bouton simple - Le bouton d’envoi
• Le bouton image - Le bouton e(cid:27)acer

<input type="button">

ou

<button type="button">...</button>

Attribut

Exemple :

• onclick : SpØci(cid:28)er l’action (cid:224) exØcuter lors du click

sur le bouton

B.SALEM Y.

Le langage HTML

51 / 58

Le langage HTML

Structure GØnØrale

Les balises HTML

Les listes

Les tableaux et les formulaires

Les Formulaires

Le bouton d’envoie : permettre de valider le formulaire.

• L’attribut "type" doit Œtre spØci(cid:28)er (cid:224) "submit" dans

les deux balises.

Le bouton image : un bouton personnalisØ permettant de valider

le formulaire.

• L’attribut "type" de la balise <input> doit Œtre

spØci(cid:28)er (cid:224) "image".

• L’attribut "src" permet de spØci(cid:28)er le chemin de

l’image.

Ce bouton ne peut pas Œtre gØrØ par la balise <button>

B.SALEM Y.

Le langage HTML

52 / 58

Le langage HTML

Structure GØnØrale

Les balises HTML

Les listes

Les tableaux et les formulaires

Les Formulaires

Le bouton e(cid:27)acer : sert (cid:224) rØinitialiser toutes les valeurs du

formulaire.

• L’attribut "type" doit Œtre spØci(cid:28)er (cid:224) "reset" dans

les deux balises.

B.SALEM Y.

Le langage HTML

53 / 58

Le langage HTML

Structure GØnØrale

Les balises HTML

Les listes

Les tableaux et les formulaires

Les Formulaires

Les listes dØroulantes

Permettre (cid:224) l’utilisateur (cid:224) sØlectionner un choix et un seul parmi

une liste de proposition.

On distingue deux types de listes :

• les listes normales,
• les listes dØroulantes.

<select>...</select>

Les choix sont spØci(cid:28)Øs par la balise

<option>...</option>

Attributs de <option> :

• value : spØci(cid:28)er la valeur (cid:224) envoyer au serveur
• selected : suggØrer une valeur par dØfaut

B.SALEM Y.

Le langage HTML

54 / 58

Le langage HTML

Structure GØnØrale

Les balises HTML

Les listes

Les tableaux et les formulaires

Les Formulaires

=> Par dØfaut une liste est dØroulante.

Attribut de <select>

• name : spØci(cid:28)er le nom de la liste

• size : permet de rendre la liste non dØroulante en

spØci(cid:28)ant le nombre d’ØlØments apparant.

• multiple : autoriser la selection de plusieurs choix.

=> le choix multiple ne se fait que pour les listes non normales

(non dØroulante).

B.SALEM Y.

Le langage HTML

55 / 58

Le langage HTML

Structure GØnØrale

Les balises HTML

Les listes

Les tableaux et les formulaires

Les Formulaires

Exemple :

B.SALEM Y.

Le langage HTML

56 / 58

Le langage HTML

Structure GØnØrale

Les balises HTML

Les listes

Les tableaux et les formulaires

Exercice

EnoncØe

B.SALEM Y.

Le langage HTML

57 / 58

Le langage HTML

Structure GØnØrale

Les balises HTML

Les listes

Les tableaux et les formulaires

Exercice

CorrigØ

B.SALEM Y.

Le langage HTML

58 / 58