Scribd
Importer
29 vues102 pages

Web1 Chap2

Le document présente un cours sur HTML5, détaillant sa structure de base, les balises fondamentales, et l'évolution du langage depuis sa création. Il explique l'importance des balises pour la structuration et la mise en forme des pages web, ainsi que les éléments essentiels comme les titres, paragraphes, listes et liens hypertextes. Enfin, le document souligne l'importance des métadonnées et de la validation des documents HTML pour un bon référencement et une bonne interprétation par les navigateurs.

Transféré par

aminegabsi2020
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
29 vues102 pages

Web1 Chap2

Le document présente un cours sur HTML5, détaillant sa structure de base, les balises fondamentales, et l'évolution du langage depuis sa création. Il explique l'importance des balises pour la structuration et la mise en forme des pages web, ainsi que les éléments essentiels comme les titres, paragraphes, listes et liens hypertextes. Enfin, le document souligne l'importance des métadonnées et de la validation des documents HTML pour un bon référencement et une bonne interprétation par les navigateurs.

Transféré par

aminegabsi2020
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

Cours Programmation Web

Chapitre 2: HTML 5

1
Plan

1 Introduction

2 Document HTML : Structure de base

3 Document HTML : Balises fondamentales

4 Les tableaux

5 Les formulaires

2
Introduction

3
Conclusion perspectives

Conclusion &
HTML = HyperText Markup Language ? perspectives

Langage à balises de description de documents hypertextes

Hyper : Non linéaire, liens Markup : marqué, balisé


entre nœuds
4
Conclusion perspectives

Conclusion &
Qu’est-ce que HTML ? perspectives

Langage de présentation de documents

Utilisé pour construire les pages Web

Navigation hypertexte : ancres, liens

Utilise des balises pour marquer le contenu

Documents exploités par des agents utilisateurs


■ Navigateur pour « visualiser » le résultat
■ Robots des moteurs de recherche pour indexer

5
Conclusion perspectives

Conclusion &
Qu’est-ce que HTML ? perspectives

HTML (HyperText Markup Language) est un langage de


balisage qui permet de structurer le contenu des pages
web dans différents éléments.

C'est le langage de base pour la création d'un site web. En


effet, c'est le seul qui est interprété par un navigateur
Web standard pour produire de l’affichage.

6
Conclusion perspectives

Conclusion &
Evolution du langage HTML perspectives

HTML 1.0 (1991) : Première version créée par Tim Berners-


Lee
HTML 2.0 (1995): Première version standardisée du langage
HTML 3.2 (1997) : introduction de nouvelles balises
d’apparence (font, strike…), balises de script, balises frame
(cadre)...
HTML 4.0 (1998) : Introduction du CSS pour séparer la mise
en forme du contenu
HTML 4.01 (1999) : renforcer le support d’Unicode,
amélioration de l’accessibilité, validation des documents

7
Conclusion perspectives

Conclusion &
Evolution du langage HTML perspectives

HTML 5 (2014)

Balises pour les médias : <video> et <audio>, permettent aux


développeurs d’intégrer facilement des contenus multimédias.

Sémantique améliorée : HTML5 a enrichi le langage avec de


nouvelles balises sémantiques pour structurer le contenu de
manière plus claire et cohérente, telles que <header>, <footer>,
<nav>, <section>, <article> et <aside>.

Balises devenues obsolètes : strike, big , center, font, frame,


frameset…

8
Structurer un document ?

Mettre en forme
?

1- Structurer (HTML)

9
Structurer le document

Titre du document

Titre de niveau 2

Titre de niveau 2

Titre de niveau 3

Paragraphe

Repérer les structures :


🡺 Marquer leur début/fin
🡺 Utilisation de balises

10
Conclusion perspectives

Conclusion &
Appliquer une feuille de style perspectives

Style :
Titre
Police dede
niveau
base 1: 8pt
Titre• Rouge
de niveau 1
• Bleu, majuscules
Paragraphes
• Justifier
Bords haut et bas
ère lettre paragraphe
1Paragraphes
• Gros, gris, italique
Justifier

11
Conclusion perspectives

Conclusion &
Balises (tags, marqueurs) HTML perspectives

Texte entouré par < et > (chevrons)


Balises insensibles à la casse :
○ <BALISE>
○ <balise>
○ <Balise>
Équivalentes
○ <bAlIsE>

Ouvrante : <balise>
Fermante : </balise>
Non visibles dans le rendu du navigateur
Attributs : <balise attr="val">

12
Conclusion perspectives

Conclusion &
Utilisation des balises perspectives

Utilisation CORRECTE
<i>Texte<b>Texte Texte</b></i>

Utilisation INCORRECTE
<i>Texte<b>Texte Texte</i></b>

Jamais de chevauchement

13
Conclusion perspectives

Conclusion &
Qu’est-ce que HTML ? perspectives

Les attributs:
• Les attributs permettent d'apporter certaines
précisions à des balises.

• La syntaxe utilisée est la


suivante:<balise attribut1="valeur1" attribut2="valeur2"
attribut3="valeur3">exemple d’attributs</balise>
• Exemple: <link rel="stylesheet" href="[Link]"/>

14
Document HTML : Structure de base

15
Conclusion perspectives

Conclusion &
Document HTML perspectives

Document texte .htm ou .html


Structure de base :
1. Information sur la version de HTML utilisée
2. En-tête déclaratif
3. Corps, contenu du document
1 <!DOCTYPE html>
<html>
<head>
2 <title>Ma première page Web</title>
</head>
<body>
3 Salut !
</body>
</html>

16
Conclusion perspectives

Conclusion &
Document HTML perspectives

Document texte .htm ou .html


Structure de base :
1. Information sur la version de HTML utilisée
2. En-tête déclaratif
3. Corps, contenu du document
1
<!DOCTYPE html>
. <html>
2 <head>
.
<title>Ma première page Web</title>
</head>
3 <body>
. Salut !
</body>
</html>

17
Conclusion perspectives

Conclusion &
Structure d’un document HTML: DOCTYPE perspectives

Tout document Html doit commencer par un doctype.


Html5 propose un doctype unique et simplifié.
<!DOCTYPE html>

Pour se rendre compte de la simplification, il suffit de le


comparer avec un doctype du Html 4.0.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"
"[Link]

Le doctype, aussi appelé DTD (Document Type Definition)


sert à indiquer au navigateur à quelles règles d’écriture
obéit le code source de la page HTML.

18
Structure d’un document HTML: HTML

Le document HTML
○ Une page HTML comporte comme dans l'ensemble des
langages de programmation, une indication d'ouverture et
une autre de fermeture
■ La balise <HTML> marque le début du document
■ La balise </HTML> marque la fin de ce document.

<HTML>
...
Diverses commandes HTML
...
</HTML>

19
Document HTML

Document texte .htm ou .html


Structure de base :
1. Information sur la version de HTML utilisée
[Link]-tête déclaratif
3. Corps, contenu du document
1 <!DOCTYPE html>
<html>
<head>
2 <title>Ma première page Web</title>
</head>
<body>
3 Salut !
</body>
</html>

20
Structure et contenu de l’en-tête

L’en-tête d’un document HTML permet de regrouper des


informations indispensables pour le référencement de la page

Utilisé par les moteurs de recherche afin de déterminer les


caractéristiques du document en vue de l'indexation du site
dans leur base de données.
■ Exemples : le titre, les mots clés, l'auteur, …
■ La balise <head> marque le début de l'entête.
■ La balise </head> marque la fin de de l'entête.

21
Structure et contenu de l’en-tête

Le titre d'un document

○ L'en-tête doit contenir un seul titre, clair et précis.

○ Le titre de la page ne sert pas seulement à être affiché


dans le navigateur, mais aussi à être utilisé par les
moteurs de recherche pour leurs investigations.

○ Il convient de choisir son titre avec soins et surtout


d'éviter de l'omettre étant donné son importance dans
le référencement auprès des outils de recherche.
■ La balise <title> marque le début du titre.
■ La balise </title> marque la fin de du titre.

22
Structure et contenu de l’en-tête

Méta données :
○ Permettent de mettre directement à la disposition des
moteurs de recherche des informations relatives à un
site.

<meta name="nom" content="valeur">


<meta name="Author" content="J. Cutrona">
<meta name="keywords" content="cours, HTML">
<meta name="copyright" content="2005 IUT Reims">

23
Structure et contenu de l’en-tête

Les documents liés : l’élément <link />


▪ Il définit la relation entre le document courant et une
ressource externe.
▪ Cette relation est déterminée par les attributs rel, type,
href, hreflang, media et sizes.
▪ L’attribut rel indique le nom de la relation à établir avec
le fichier externe. Exemples:
rel="shortcut icon" ou "icon" pour faire référence à
une icône
rel="help" si le fichier est la page d’aide.
▪ L’attribut href contient l’adresse relative ou absolue de
la ressource externe associée. exemples :
Pour lier une feuille de style : <link rel="stylesheet"
href="[Link]"/>
24
Validation des documents HTML

La page est toujours affichée même s’il y a des erreurs de


syntaxe. Chaque Navigateur a des règles spécifiques pour
interpréter les balises erronée Mais le résultat est
imprévisible C’est la bonne pratique de vous assurer que
vos pages sont en HTML légales.

25
Document HTML : Les balises fondamentales

26
Utilisation et utilité des balises dans <body>

Initialement : mise en page du document


○ Police, couleur, taille, alignement du texte, …

Maintenant : structuration logique du document


○ Titres de différents niveaux
○ Paragraphes, citation, …
○ Listes
○ Tableaux, …

Si le document est correctement structuré, chaque


élément structurel pourra être mis en forme via une
feuille de style CSS

27
Le texte

Les titres
Code Description Exemple

<H1> Premier titre </H1> Titre 1


Premier titre
<H2>Second titre</H2> Titre 2
Deuxième titre
<H3>Troisième titre</H3> Titre 3
Troisième titre
<H4>Quatrième titre</H4> Titre 4 Quatrième titre

<H5>Cinquième titre</H5> Titre 5 Cinquième titre

<H6>Sixième titre</H6> Titre 6 Sixième titre

28
Mise en page Structuration

Titres (6 niveaux de hiérarchie)


○ <h1> … </h1>
○ <h2> … </h2>
○ <h3> … </h3>
○ <h4> … </h4>
○ <h5> … </h5>
○ <h6> … </h6>

29
Le texte

Les paragraphes
○ Une balise permet de formater un texte brut en paragraphe.
● La balise <p> marque le début du paragraphe.
● La balise </p> marque la fin du paragraphe.

<HTML>
<HEAD>
</HEAD>
<BODY>
<H1 ALIGN="Alignement">Titre</H1>
<p>Paragraphe</p>
...
Diverses commandes HTML
</BODY>
</HTML>

30
Mise en page Structuration

Les séparateurs horizontaux : Le trait horizontal peut se


révéler fort utile pour définir un changement dans le
contenu. La balise <hr> réalise cette fonction.
Exemple :
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Html5</title>
<meta charset="iso-8859-1">
</head>
<body>
Chapitre 1
<hr>
Chapitre 2
</body>
</html>

31
Mise en page Mise en évidence

Styles logiques
○ <strong> : le texte a une importance particulière.
Cela se traduit généralement par un affichage en gras.
○ <em> : (pour emphase) utilisés afin de marquer un
texte sur lequel on veut insister.
○ <small> : représenter des commentaires ou des textes
à écrire en petits caractères (des termes d'un contrat,
des mentions relatives au droit d'auteur, etc.)
○ <mark> : L'élément HTML représente un texte
marqué ou surligné à cause de sa pertinence dans le
contexte.
○ <i> représente un morceau de texte qui se différencie
du texte principal. Cela peut par exemple être le cas
pour des termes techniques, des phrases dans une
langue étrangère…

32
Mise en page Mise en évidence

Styles logiques
○ <s> : Barré - L'élément HTML permet d'afficher du texte
qui est barré car il n'est plus pertinent ou car il est obsolète.
○ <b> : L'élément permet d'attirer l'attention du lecteur sur
le contenu d'un élément sans que ce contenu revêt une
importance particulière.
○ <u> : L'élément HTML permet d'afficher un fragment de
texte qui est annoté avec des éléments non textuels. Par
défaut, le contenu de l'élément est souligné. Cela pourra par
exemple être le cas pour marquer un texte comme étant un
nom propre chinois, ou pour marquer un texte qui a été mal
orthographié

33
Blockquote

○ <blockquote> ( bloc de citation) Pour une longue


citation venant d'une source externe, l'adresse de la source
peut-être indiquée dans l'attribut "cite". Le texte est
généralement affiché avec une indentation.
○ <cite> Cet élément doit inclure le titre de l'œuvre.

34
Les commentaires

Ces commentaires ne seront ni visibles sur le navigateur ni


interprétés par celui-ci. Ils vous serviront uniquement à vous
repérer sur votre code.

<!–- Voici un commentaire HTML -->

<!–-
Voici un commentaire HTML qui
peut se placer sur plusieurs lignes
-->

35
Liste de définitions

<!DOCTYPE html>
<html lang="fr">
<head>
<title>Html5</title>
<meta charset="iso-8859-1">
</head>
<body>
<p>Balises de listes disponibles :</p>
<dl>
<dt>ol</dt>
<dd>Liste ordonnée</dd>
<dt>ul</dt>
<dd>Liste non-ordonnée</dd>
<dt>dl</dt>
<dd>Liste de définition</dd>
</dl>
</body>
</html>

36
Liste numérotée

Liste : <ol> … </ol>


Élément : <li> … [</li>]
L’attribut type définit le type de liste:

37
Liste non numérotée

Liste : <ul> … </ul>


Élément : <li> … [</li>]
Liste des courses :
<ul>
<li>Beurre</li>
<li>Sucre</li>
<li>Farine</li>
<li>Oeufs
<li>Confiture
</ul>

▪ Le symbole de la balle ronde est le marqueur par défaut des


éléments de la liste.
▪ Pour modifier le type de liste on utilise la propriété css list-
style-type <ul style="list-style-type:square;"> 38
Les liens

39
L’insertion d’un lien hypertexte

Les liens constituent l’essence du langage Html et des


pages Web. La richesse de la fonction hypertexte
permet de tisser cette toile gigantesque qu’est le Web.
Balise: <a> … </a>
Syntaxe

<a href="destination_du_lien">Texte de lien</a>

40
Les liens hypertexte: destination

La destination du lien peut être :

Un endroit de la page en cours.


Une autre page du site.
Un endroit dans une autre page du site.
Une page d’un autre site situé sur le Web.
Une adresse électronique.
Un fichier à télécharger

41
Les attributs de la balise <a>

Attribut Description
href définit l’adresse (url) de la cible du lien.-
hreflang Précise la langue du document cible si celleci est différente
de celle du document de départ.
ping Nouveau en Html5. L’attribut ping peut contenir une liste
d’adresses url (séparées par un espace) qui recevront une
notification lorsque l’utilisateur suit le lien.
target Spécifie au navigateur la façon d’afficher la cible du lien.
target="_blank« , target=« _self"
type Indique au navigateur le type MIME de la cible si celui ci
n’est pas un document Html5, par exemple un fichier son
ou
une image ( audio, image/gif,text/html,...)
rel Nouveau en Html5. Spécifie la relation entre le document
de départ et le fichier cible du lien (author, help,
Attributs
external…).disparus avec HTML4
charset, coords, name, rev et shape.

42
Un lien vers une autre page de son site

Deux pages situées dans un même dossier

page1 page2
page1 page2

<a href="[Link]">Lien vers page 2</a>

43
Un lien vers une autre page de son site
2
Deux pages situées dans
des dossiers différents

page1 page2
[Link]

3
dossier1 dossier2

1 <a href="dossier1/[Link]">Texte du lien </a>

2 <a href="../dossier2/[Link]">Texte du lien</a>

3 <a href="../[Link]">Texte du lien</a>

44
Un lien vers une autre page de son site

45
Le lien à l’intérieur d’une page: les ancres

Pour pouvoir mener l’utilisateur à un endroit précis du


document on utilise la technique des ancres (anchor) ou
des signets.
<!-- La déclaration de l’ancre-->
<a id="nom de l’ancre">text 1</a>

Créer le lien vers l’ancre (même page)

<!-- Le lien vers l’ancre: même page-->


<a href="#nom de l’ancre">Lien vers text 1</a>

Créer le lien vers l’ancre (page différente)


<!-- Le lien vers l’ancre: page différente-->
<a href=« [Link]#mon_ancre">Aller vers
l'ancre</a>

46
Autres…

Une infobulle sur un lien


permet de proposer une infobulle explicative au survol du
lien par le curseur de la souris.

<!DOCTYPE html>
<html lang="fr">
<head>
<title>Html5</title>
<meta charset="iso-8859-1">
</head>
<body>
<a href="[Link]" title="Lien vers le chapitre 2">Suite</a>
</body>
</html>

47
Autres…

Un lien pour envoyer un e-mail

<a href="[Link]

Un lien pour télécharger un


fichier
<a href="[Link]">Version PDF</a>

48
Résumé

Les liens permettent de changer de page et sont, par


défaut, écrits en bleu et soulignés.

Pour insérer un lien, on utilise la balise <a> avec


l'attribut href pour indiquer l'adresse de la page cible.

On peut faire un lien vers une autre page de son site


simplement en écrivant le nom du fichier : <a
href="[Link]">.

Les liens permettent aussi d'amener vers d'autres endroits


sur la même page. Il faut créer une ancre avec l'attribut id
pour « marquer » un endroit dans la page, puis faire un
lien vers l'ancre comme ceci : <a href="#ancre">.

49
Les images

50
Les formats d’images

▪ Un guide à propos des formats d'image pris en


charge par les navigateurs web est disponible sur
[Guide des types et formats de fichiers d'images | MDN ([Link]))]
▪ Les formats moins récents comme PNG, JPEG, GIF
possèdent de moins bonnes performances que des
formats comme WebP et AVIF mais bénéficient
d'une compatibilité navigateur plus large.

51
Les formats d’images

Il existe des banques d’images pour télécharger des


photos, des musiques et des vidéos libres de droits.
Certains sites sont gratuits, d’autres exigent un
abonnement ou un paiement...

52
L’insertion d’une image: Exemple

<!DOCTYPE html>
<html lang="fr">
<head>…</head>
<body>
<img src="[Link]" width="120"
height="120" alt="Globe terrestre">
</body>
</html>

53
L’insertion d’une image: Syntaxe

L’insertion d’une image est obtenue par la balise :


<img>
Syntaxe
<img src="adresse du fichier image" alt="description de l’ image" >

Balise orpheline
Les attributs src et alt sont tous deux nécessaires pour
que le code soit pleinement valide.
Les règles d’adressage sont identiques à celles abordées
dans la partie des « liens »
54
Les attributs de la balise <img>

Attribut Description
height
width
Alt=« test associé » cela signifie « texte alternatif » c'est-à-dire un court
texte qui décrit ce que contient l'image. Ce texte sera
affiché à la place de l'image si celle-ci ne peut pas
être téléchargée (cela arrive), ou dans les navigateurs
de personnes handicapées (non-voyants). Cela aide
aussi les robots des moteurs de recherche pour les
recherches d'images.
title infobulle

Align, border, hspace, vspace

55
L’insertion d’un lien sur une image

Les liens à partir d’une image se réalisent simplement


en entourant celle ci par la balise de lien <a> … </a>.

<a href="url"><img src="adresse du fichier image"></a>

Certains navigateurs entourent cette image d’une bordure


(inesthétique) pour signaler le lien.
Pour enlever cette bordure il suffit d’ajouter à la balise
<img> la déclaration style="border: none;".

56
Les figures

Si une image illustre le texte (et n'est pas seulement


décorative), il est conseillé de la placer au sein d'une balise
<figure>.
Les figures peuvent être de différents types :
images ;
codes source ;
citations ;
etc.

<figure>
<img src="[Link]" alt="" />
<figcaption>Légende associée</figcaption>
</figure>

57
L’élément audio

• Permet d'incorporer du contenu audio, comme de la


musique et d'autres sons, dans des documents HTML.
• Exemple de balisage : <audio src="sample.mp3"
controls="controls"> </audio>

58
L’élément video

• Permet d'incorporer des vidéos dans des documents HTML.


• Exemple de balisage : <video src="intro.mp4"
width="400" height="300"></video>

Les attributs
• poster : Affiche un fichier image statique avant le
chargement de la vidéo
• autoplay : Démarre automatiquement la lecture de la
vidéo après le chargement de la page
• controls : Affiche un ensemble de contrôles utilisés pour
lire, mettre en pause ou arrêter la vidéo et régler le volume
• loop : Répète la vidéo
59
Les balises génériques

60
Les éléments sémantiques

61
Nouvelles balises sémantiques

▪ L'un des principaux buts de HTML est de structurer


du texte et lui donner du sens (ce que l'on appelle
la sémantique)

▪ Pendant des années, la structuration des


documents HTML se basait sur l’élément div

▪ De nouvelles balises sémantiques HTML5 rendent


le développement de pages web et d’applications
plus facile.

62
Nouvelles balises sémantiques

▪ Plusieurs balises ont été introduites avec HTML5


pour délimiter les différentes zones qui constituent
la page web :

63
Nouvelles balises sémantiques

64
Nouvelles balises sémantiques

▪ L'en-tête <header>:
La plupart des sites web possèdent en général un en-
tête, appelé header en anglais. On y trouve le plus
souvent un logo, une bannière, le slogan de votre site.
▪ Le pied de page <footer> :
A l'inverse de l'en-tête, le pied de page se trouve en
général tout en bas du document. On y trouve des
informations comme des liens de contact, le nom de
l'auteur, les mentions légales, etc.
▪ Principaux liens de navigation <nav>
La balise doit regrouper tous les principaux liens de
navigation du site. Il remplace alors la balise div. On y
place par exemple le menu principal du site.
65
Nouvelles balises sémantiques

▪ Le corps de la page <section>


Le corps de la page La balise sert à regrouper des
contenus en fonction de leur thématique. Elle englobe
généralement une portion du contenu au centre de la
page.
▪ Informations complémentaires <aside>
Regroupe du contenu supplémentaire ou annexe,
comme la bibliographie d'un article par exemple. Il peut
également être utilisé pour créer une barre latérale.
▪ <article>
Permet de définir un article/post/commentaire ou tout
autre contenu important de la page.

66
Exercice : Découpage

67
Les tableaux

68
table

▪ <table></table> : C'est cette balise qui permet


d'indiquer le début et la fin d'un tableau.

▪ <tr> </tr> : indique le début et la fin d'une ligne du


tableau

▪ <td> </td> : indique le début et la fin du contenu d'une


cellule.

▪ En HTML, un tableau se construit ligne par ligne. Dans


chaque ligne (<tr>), on indique le contenu des
différentes cellules (<td>).

69
table

▪ Par exemple, si je veux faire un tableau à trois lignes,


avec trois cellules par ligne (donc trois colonnes), je
devrai taper ceci :

70
table

▪ La balise <table>doit obligatoirement être fermée.


▪ En cas d’oubli de la balise de fermeture </table>, le
tableau risque de ne pas s’afficher ou ne pas s’afficher
correctement.
▪ Le Html 4.0 proposait les attributs width, border,
cellpadding, cellspacing, frame et rules. Tous ces
attributs ont disparu en Html5 et doivent être pris en
charge par des feuilles de style CSS.
▪ Les balises <tr>et <td>suivent le mouvement avec la
disparition des attributs align et valign.

71
Attribut summary

▪ L’attribut summary de la balise <table> permet de


fournir un résumé du tableau.
▪ Ce résumé n’apparaîtra en aucune façon dans la
présentation visuelle de la page.
▪ Celui-ci n’est pris en charge que par les synthèses
vocales avant l’exploration des données par les
personnes visuellement déficientes.
▪ Notons qu’en Html5, l’attribut summary est le seul et
unique attribut de la balise <table> et qu'il n’a aucune
action visuelle.

72
Les cellules d'en-tête

▪ Les cellules d'en-tête


La ligne d'en-tête se crée avec un <tr> comme on l'a fait
jusqu'ici, mais les cellules qu'elle contient sont, cette
fois, encadrées par des balises <th> et non pas <td> !
Remarque : Dans les navigateurs visuels, le contenu de la
balise <th> apparaît en gras et en centré.

73
Fusion des cellules

Fusion de cellules:
■ Il est possible de fusionner horizontalement ou
verticalement des cellules.
■ Pour fusionner les colonnes, le Html5 dispose de l’attribut de
cellule colspan="x" où x correspond au nombre de colonnes
que l’on souhaite fusionner horizontalement.
<td colspan="3" style="text-align: center;">Titre du tableau</td>

74
Fusion des cellules

Fusion des lignes:


■ Pour fusionner des lignes, le Html5 dispose de
l’attribut de cellule rowspan="x" où x correspond au
nombre de lignes que l’on souhaite fusionner
verticalement.
<td rowspan="2">1</td>

75
Légende du tableau

■ La balise <caption>permet d’associer un titre ou une


légende au tableau. Elle doit être placée juste après la
balise ouvrante <table>et ne peut apparaître qu’une
fois dans le tableau.
Par défaut, la plupart des navigateurs affichent le contenu
de la balise <caption>de façon centrée au-dessus du
tableau.

76
Groupement de colonnes

■ La balise <colgroup>est utilisée pour grouper des colonnes


en vue d’appliquer une mise en forme à l’ensemble des
balises du groupe en utilisant une feuille de style CSS.
■ L’attribut span="x" détermine le nombre de colonnes ainsi
groupées.
■ Par défaut, la valeur de x est 1. Cet attribut span est le seul
attribut de la balise <colgroup>.
■ La balise <colgroup> se positionne juste après la balise
<table>(ou juste après la balise <caption>si celle-ci est
utilisée) et avant toute balise <tr>ou <td>.

77
Groupement de colonnes

■ <col> définit une colonne appartenant à un tableau


■ L'attribut span n'est pas autorisé dans colgroup s'il y a un
ou plusieurs éléments <col> dans le <colgroup>.

78
Structuration

■ Le Html5 prévoit des balises pour structurer de façon


logique le contenu d’un tableau.
■ Ces balises sont :
■ <thead> pour regrouper les informations concernant
l’entête du tableau comme par exemple le titre et
l’intitulé des colonnes.
■ <tbody> pour le corps du tableau, soit l’ensemble des
données de celui ci.
■ <tfoot> pour le contenu de bas de page comme par
exemple des remarques ou une légende. Il permet aussi
de définir un ensemble de lignes qui résument les colonnes
d'un tableau.
79
Structuration

80
Les formulaires

81
Les formulaires

▪ Les formulaires HTML permettent de collecter des


informations auprès des utilisateurs. Ils sont essentiels
pour des actions telles que l'inscription à un service,
l’authentification, la soumission de commentaires, et
plus encore.

82
Structure de base

▪ La balise <form> contient tous les éléments du


formulaire.
▪ Les attributs usuels de la balise <form>sont :
name, action et method
▪ L'attribut Name pour attribuer un nom au
formulaire
▪ L'attribut action spécifie où les données seront
envoyées: URL de traitement des données.
<form action="[Link]" method="GET" name="auth_form" >
<!--Champs ici-->
</form>C

83
Structure de base

▪ L’attribut method : GET ou POST


▪ GET et POST sont des méthodes d'accès définies dans
le protocole HTTP.
▪ Le choix de la méthode dépend de la façon dont les
données sont reçues, de la taille et la nature des
données.
▪ Avec la méthode GET, les données du formulaire seront
encodées dans une URL et ne peuvent excéder 255
caractères.
▪ La méthode POST envoie un en-tête et un corps de
message au serveur. Cette méthode n’a pas de limite de
taille (offre plus de sécurité et convient aux données
sensibles).

84
Les éléments d’un formulaire

Les éléments de formulaires sont répartis en 3 classes :


■ Input

Champs de saisie de texte et différents types de boutons

■ Select

Listes (menus déroulants et ascenseurs)

■ Textarea

Zone de saisie de texte libre

85
Les types d’input

La balise <input> est utilisée pour créer des champs de


saisie dans un formulaire HTML. Elle est polyvalente et
propose différents types pour capturer une variété de
données. Le type d'élément dont il s'agit sera précisé en
utilisant l'attribut TYPE:
■ text : Champ de texte simple pour une seule ligne.

■ password : Champ masqué pour entrer un mot de


passe.

■ email : Champ pour saisir une adresse email ; inclut


une validation de base pour les formats d'adresse.

86
Les types d’input

■ number : Champ pour un nombre.

■ date : Champ pour sélectionner


une date via un calendrier
intégré.

■ time : Champ pour saisir


une heure spécifique

■datetime-local : Champ
pour une date et une heure .

87
Les formulaires

■ month : Champ pour


sélectionner un mois
et une année.

■ week : Champ pour


sélectionner une semaine
de l’année.
■ color : Ouvre une palette
de couleurs pour sélectionner
une couleur.
■ range : Curseur pour sélectionner une valeur dans une
plage définie (attributs : min, max, step).
88
Les formulaires

■ file : Champ pour télécharger


un fichier depuis l'ordinateur.
■ hidden : Champ invisible pour l'utilisateur mais il sera
envoyé avec le formulaire.
■ checkbox : Case à cocher pour une sélection binaire
(vrai/faux).

<input type="checkbox" name="choix" value="option1"> Option 1


<input type="checkbox" name="choix" value="option2"> Option 2
<input type="checkbox" name="choix" value="option3"> Option 3

89
Les formulaires

■ radio : Bouton radio pour des choix exclusifs au sein


d’un même groupe.

<input type="radio" name="paiement" value="carte"> Carte de crédit


<input type="radio" name="paiement" value="paypal"> PayPal

■ submit : Bouton pour soumettre le formulaire.


■ reset : Bouton pour réinitialiser tous les champs du
formulaire.

<input type="submit" value="Valider">


<input type="reset" value="Annuler">

90
L'élément input avec datalist

La balise <datalist> est utilisée pour offrir une liste de


suggestions pré-définies pour un champ <input>. Elle est
souvent associée à un <input type="text"> pour guider
l’utilisateur dans sa sélection, sans le limiter.
Comment ça fonctionne :
1. Un <input> est lié à un <datalist> en utilisant l’attribut
list.
2. À chaque option dans la liste correspond une balise
<option> à l'intérieur du <datalist>.
3. Lorsque l’utilisateur clique sur l’input ou commence à
taper, une liste déroulante s’affiche avec les suggestions
possibles.
91
L'élément input avec datalist

▪ Exemple

<datalist id="countries">
<option value="Tunisie"></option>
<option value="France"></option>
<option value="Canada"></option>
<option value="États-Unis"></option>
</datalist>

92
L'élément input : les attributs

■ name : Définit un nom unique pour cet élément. Cet attribut est utilisé
pour collecter le contenu de la ligne de texte lors de la soumission du
formulaire.

■ size : Définit le nombre de caractères visibles de la ligne de texte et, par


conséquent, la largeur de la zone de texte. La valeur par défaut de size
est de 20.
■ maxlength : Détermine le nombre maximal de caractères que
l’utilisateur peut encoder dans la ligne de texte.

■ value : Définit la valeur par défaut de la ligne de texte. Celle-ci apparaît


dans la ligne de texte au chargement de la page.
■ readonly : Indique que la valeur attribuée par défaut à la ligne de texte
ne pourra être modifiée par l’utilisateur.
■ placeholder : Permet d’afficher une suggestion de saisie qui apparaît en
grisé dans le champ de formulaire au chargement de la page. Ce texte
disparaît dès que l’utilisateur donne le focus à l’élément concerné.

93
L'élément input : les attributs

■ autofocus : Donne le focus à l’élément lors du


chargement de la page.
■ required : Rend l’encodage de l’élément obligatoire par
l’utilisateur pour la soumission et le traitement du
formulaire.
■ pattern : Définit l’expression régulière JavaScript qui est
utilisée pour la validation de l’encodage.

<input type="text" id="empID" name="EmployeeID" required


pattern="[A-Z]{2}[0-9]{4}" title="ID d'employé commençant par
deux lettres majuscules suivies de quatre chiffres">

94
L’élément textarea

Dans certaines situations, il faut prévoir plus d’espace à


l’utilisateur pour s’exprimer. C’est le cas, par exemple des
commentaires, des descriptions ou des messages.
On utilise alors <textarea> qui est employée pour créer un
champ de texte multi-lignes.

<p>Commentaire : </p>
<textarea id="commentaire" name="commentaire" rows="4" cols="30"></textarea>

95
L’élément textarea : les attributs

■ rows : Définit le nombre de lignes visibles dans la zone de


texte.
■ cols : Définit la largeur de la zone de texte en nombre de
caractères.
■ placeholder : Affiche un texte d’exemple dans la zone de
texte, qui disparaît lorsque l’utilisateur commence à écrire.
■ maxlength : Limite le nombre de caractères que l’utilisateur
peut entrer.
■ autofocus : Place le curseur dans la zone de texte dès que la
page se charge.
■ readonly : Rend la zone de texte non modifiable, utile pour
afficher des informations sans permettre d'édition.

96
L’élément select

▪ La liste déroulante propose différentes options à


l’utilisateur.

▪ La balise <select>...</select>indique au navigateur


l’usage d’une liste déroulante.

▪ Les éléments de la liste sont introduits par les balises


<option>...</option>
<select>
<option value="1">Internet Explorer</option>
<option value="2">Firefox</option>
<option value="3">Safari</option>
<option value="4">Opera</option>
<option value="5">Google chrome</option>
</select>
97
L’élément select : les attributs

■ name : Associe un nom au <select> pour être transmis


au serveur lors de la soumission du formulaire.
■ id : Un identifiant unique, souvent utilisé pour lier le
<select> à un label.
■ multiple : Permet de sélectionner plusieurs options en
ajoutant multiple sans valeur.
■ size : Définit le nombre d’options visibles sans dérouler
la liste (utile avec multiple).
■ autofocus : Met automatiquement le focus sur le
<select> dès que la page est chargée, facilitant la
navigation pour l’utilisateur.

98
L’élément select : les attributs

Les attributs de la balise <option>


■ selected : Indique qu'une option est sélectionnée par défaut
lorsque la page se charge.
■ value : Associe une valeur spécifique à chaque option pour
être envoyée au serveur lors de la soumission du formulaire.

<select id="fruits" name="fruits" multiple size="3">


<option value="pomme">Pomme</option>
<option value="orange" selected>Orange</option>
<option value="banane">Banane</option>
</select>

99
Etiquetage des champs de formulaires

Objectif : La balise <label> associe une étiquette descriptive


aux champs de formulaire, améliorant ainsi la
compréhension et l'accessibilité.
Importance :
■ Facilite l’interaction : Un clic sur le label place le focus
sur le champ associé.
■ Clarté : L’utilisateur comprend immédiatement la
fonction de chaque champ.
■ Améliore l'accessibilité : Les technologies d’assistance
peuvent lire les labels, aidant les utilisateurs ayant des
limitations visuelles.

100
Etiquetage des champs de formulaires

Étapes pour associer un <label> à un champ de formulaire


avec l'attribut for :
1. Créer le champ de formulaire et lui attribuer un id.
2. Créer la balise <label> et ajouter for
3. Associer for avec id

<label for="nom">Nom :</label>


<input type="text" id="nom" name="nom">

101
Organisation des éléments de formulaires

■ Dans le cas de formulaires longs et complexes, il est


parfois utile de regrouper graphiquement certains
éléments pour organiser la page de façon logique.
■ Les balises <fieldset>et <legend>permettent d’améliorer
sensiblement l’ergonomie des formulaires.
■ La balise <fieldset> … </fieldset> englobe les champs de
formulaires que vous déterminez. Ces champs sont
alors visualisés à l’écran par une bordure.
■ La balise <legend> … </legend>, qui se place
directement derrière la balise <fieldset>, ajoute une
légende qui vient s’insérer dans la bordure dessinée par
le <fieldset>.

102

Vous aimerez peut-être aussi