Le langage HTML 2

Enseignante: LYNDA FARZA

Académie Militaire
PLAN
Presentation
1 Click générale
to add title in here

2 Structure de base et mise en forme

3 Les liens hypertextes, les listes

4 Les tableaux et images

5 Balises de contenu embarqué

6 Click
Les formulaires
to add title in
7 Les balises de structure 2
Présentation générale

3
 Qu’est ce que HTML ?
Introduction

 HTML (HyperText MarkUp Language) est un langage de balisage (à

balise) utilisé pour définir des documents hypertextes (texte enrichi de
liens, dits hypertextes vers d’autres documents) pouvant être visualisés sur
le Web
 Document hypertexte
 Document de texte : phrase, paragraphe, titre, …
 Hyperliens : passer d’un document à un autre
 Document hypermédia
 document hypertexte + objets multimédias
 HTML n’est pas un langage de programmation, c'est un langage de
description d’un contenu, composé d’un ensemble de balises qui
seront interprétées par les navigateurs 4
 Navigateur web
Introduction

 Un navigateur (browser ou butineur ) est un logiciel qui permet

de lire un code HTML et d’afficher un résultat visuel à l'écran
 Il existe de nombreux navigateurs différents
 Google Chrome : le navigateur de Google, simple d'emploi et très
rapide, compatibilité : Windows, Mac et Linux
 Mozilla Firefox : le navigateur de la fondation Mozilla, célèbre et
réputé, compatibilité : Windows, Mac et Linux
 Internet Explorer : le navigateur de Microsoft, qui équipe tous les
PC Windows, compatibilité : Windows
 Safari : le navigateur d'Apple, qui équipe tous les Mac,
compatibilité : Windows et Mac
 Opera : compatibilité : Windows, Mac et Linux
5
 Outils associés
Introduction

 Il existe de nombreux outils pour créer des pages HTML

 éditeur de texte tel que NotePad
 éditeur HTML tel que NotePad ++ (avec auto-complétion et
coloration syntaxique du code)
 logiciel de type WYSYWYG (What You See Is What You Get-Ce
Que Vous Voyez Est Ce Que Vous Obtenez) tels que Dreamweaver,
Nvu; le code HTML est généré automatiquement par ces outils
 EDI (environnement de développement intégré) tels que
Dreamweaver, Aptana studio, Komodo, Blue Griffon, etc.
 Un document HTML est sauvegardé sous forme d’un fichier
d’extension .html or .htm
6
 Versions successives de HTML
Introduction

 Le langage HTML a successivement évolué comme suit

 1991 : HTML 1.0
 1994 : HTML 2.0 (insertion d'images, de tableaux, de listes et de formulaires)
 1996 : HTML 3.2 (liens sur image, applet Java, ...)
 1998 : HTML 4.01 (cadres, feuilles de style, intégration d'éléments multimédias)
 2000 : XHTML 1.0 (eXtensible HyperText Markup Language)
 2001 : XHTML 1.1
 2006 : XHTML 2.0 (évolution de XHTML 1 abandonnée en 2009)
 2009 : HTML 5 (nouvelles fonctionnalités) évolution de HTML 4, 1er draft en
2009, version officielle otocbre 2014, le W3C recommande l’utilisation de HTML 5)
 2014: octobre 2014 publication du standard HTML 5 : certains
navigateurs sont partiellement compatibles avec cette version
7
 HTML 5

 HTML 5 est le nouveau standard HTML (dernière version du

langage, octobre 2014)
 Résultat de la coopération entre le W3C (World Wide Web Consortium),
organisme de normalisation) et WHATWG (Web Hypertext Application
Technology Working Group)
 Aucun navigateur ne respecte totalement la norme W3C
 HTML5 : fond du document (contenu) : permet de gérer et
d’organiser le contenu d’une page web
 CSS3 : forme du document : permet de gérer l’apparence de la page
web (mise en page et la présentation)
 JavaScript : dynamisme du document
8
Structure de base et mise en forme
du texte

9
 Les balises
Introduction

 Les balises sont les éléments du langage qui permettent

de marquer le contenu
 Elles structurent le contenu de la page (texte, images, etc.)
 Chaque balise a un rôle et donne du sens au contenu présenté
 Une balise (en anglais tag) est un mot clé entouré par des chevrons <>
 Une balise a un nom : mabalise
 La plupart des balises commencent par une balise ouvrante, puis
du contenu et finissent par une balise fermante
 <mabalise>texte doté des propriétés de la balise</mabalise>
 le contenu est doté des propriétés de la balise

10
 Les balises
Introduction

Certaines balises bien particulières n’ont pas besoin d’être fermées,

on les dit auto-fermantes, elles n’ont ni contenu ni balise fermante
 Elles servent le plus souvent à insérer un élément à un endroit
précis (par exemple une image) (< mabalise /> slash / )
Un couple de balises ouvrante/fermante peut contenir d’autres
(couples de) balises
 Il faut respecter une logique d’imbrication

Remarque : On peut afficher le code source de n'importe quelle

page web en faisant un clic droit puis en sélectionnant Afficher le
code source de la page
11
 Les attributs des balises
Introduction

 Certaines balises peuvent être complétées par des attributs précisant

certains paramètres (l'adresse des liens, source d'une image à afficher,
etc.) qui permettent de donner des informations supplémentaires
 Un attribut a un nom et une valeur et s’utilise avec une balise
 <mabalise monattribut="lavaleur">
 Une balise ouvrante contient parfois un ou plusieurs attributs
 Les valeurs des attributs sont contenues entre guillemets simples,
doubles ou aucun guillemet 
 Certains attributs sont obligatoires pour certaines balises
 Le langage HTML est insensible à la casse
Par convention, les balises et leurs attributs sont écrits en minuscules et les
valeurs sont encadrées par des guillemets : recommandé 12
 Introduction
Structure de base d'une page HTML

<!DOCTYPE html> <!-- La mention du DOCTYPE, spécifie au navigateur le type du document

: ceci est un document HTML5 (quelle version HTML est utilisée sur la page?)-->
<html lang="fr"> <!-- Permet de spécifier la langue de traitement du document -
Indexation dans la bonne langue par les moteurs de recherche-->
<head><!-- L'en-tête du document contient les informations sur le document
principalement destinées au navigateur et aux moteurs de recherche -->
<title> Titre de la page qui s'affiche dans la barre
de titre du navigateur</title>
<meta charset="UTF-8"> <!-- permet de donner des informations sur le codage
des caractères (encodage du document: charset="utf-8" : affiche presque tous les
symboles de toutes les langues), HTML5 -->
</head>
<body> <!-- Le corps du document: le contenu -->
<p>Contenu de la page</p>
<!– Un commentaire invisible-->
</body>
</html>
13
Structure de base d'une page HTML5

Appel des feuilles de style CSS

Lien vers les fichiers JavaScript

14
Casse, balise fermante et auto-fermante

 Le HTML5 est insensible à la casse

 Majuscules, minuscules importent peu, pas plus que les balises
fermantes ou auto-fermantes
 Par convention, les balises et leurs attributs sont écrits en
minuscules et les valeurs sont encadrées par des guillemets :
recommandé
 Rappel des bonnes pratiques
 utiliser les minuscules
 utiliser les guillemets
 indentation du code
 [utiliser les balises auto-fermantes] 15
Introduction
Espaces

 Dans l’éditeur, on peut saisir des tabulations , des espacements

multiples et des retours à la ligne mais ils seront ignorés par le
navigateur
 Cas particulier : l'espace seul  reproduit tel quel
 Il faut utiliser la séquence &nbsp; pour insérer un espace
 Les tabulations sont transformées en espaces
 Plusieurs espaces successifs sont regroupés en un seul
 Les sauts de lignes sont ignorés

16
 Titres et sous-titres
Introduction

 Il s'agit ici des titres qui s'afficheront dans la page web: ce sont les
en-têtes de sections ou paragraphes
 Il existe six niveaux de titres d'importance décroissante (du plus grand
au plus petit en taille), un nouveau niveau provoque un passage à la
ligne, les éléments de titre étant des éléments de bloc
<h1>Titre de niveau 1</h1> : pour les gros titres du document
<h2>Titre de niveau 2</h2> : pour les sections du document
<h3>Titre de niveau 3</h3> : pour les sous-sections du document et ainsi de suite
<h4>Titre de niveau 4</h4>
<h5>Titre de niveau 5</h5>
<h6>Titre de niveau 6</h6>
 Remarque: il ne faut pas la confondre à la balise <title>, cette dernière affiche
le titre de la page dans la barre de titre du navigateur 17
Introduction
Mise en forme au niveau paragraphe et phrase

 <p> : pour organiser son texte en paragraphe (avec saut de ligne)

 <br /> : retour à la ligne sans espace
 <pre> : texte préformaté, tout est reproduit tel quel
 <center> </center>: pour centrer le texte
 <hr> : pour tracer un trait de séparation horizontal
 <sup>,<sub> pour faire d’un élément textuel un exposant ou un indice
 <mark> permet d’attirer l’attention sur une partie du texte en le
surlignant
 <strong> permet de mettre en valeur du texte (en gras par défaut)
<em> permet d’insister sur une partie du texte (en italique par défaut)
<small> permet d’ajouter un commentaire comme un copyright, etc.
<blockquote> : citation (indentation) est suivie d'un retour à la ligne
18
Introduction
Exemples

19
Les liens hypertextes, Les listes

20
Lien hypertexte: lien externe
Introduction

 Un lien hypertexte est un élément cliquable qui renvoie vers une

autre page du site, vers un autre site, des fichiers (image, .PDF, etc.)
 la balise <a> permet d’établir des liens hypertextes
 un lien est composé principalement d’une URL cible (cible du lien) et
d’un libellé (le texte cliquable souvent souligné en bleu)
 Syntaxe : <a href = "urlCible"> Le libellé</a>
 Liens absolus
 Un lien absolu indique l'adresse complète de la cible; il est
généralement utilisé pour afficher une page d'un autre site
 Liens relatifs
 Un lien relatif indique l'adresse du fichier par rapport à la page
courante; il est vivement conseillé de l'utiliser
21
Lien hypertexte: exemple
Introduction

22
 Lien hypertexte: lien externe
Introduction

 Si les deux pages sont situées dans un même dossier

 <a href="page2.html">: on dit que c'est un lien relatif car relatif au site et
dossier dans lequel ils se trouvent
Si les deux pages (page1.html et page2.html) sont situées dans des
dossiers différents : on ajoute le nom du dossier pour descendre
(mondossier/mapage.html) et ../ pour remonter au dossier parent (../index.html)
 page2.html se trouve dans un sous-dossier appelé contenu
<a href="contenu/page2.html">
 page2.html se trouve dans un dossier parent
<a href=" ../page2.html">: on dit que c'est un lien relatif
 Lien externe au site
<a href="http:/www.autre.fr/suite.Html">lien html</a>
 Remarque : l'attribut title permet d’afficher une info-bulle d'aide au survol et
l’attribut target="_blank" permet d’ouvrir un lien dans un nouveau onglet 23
 Lien hypertexte : lien interne
Introduction

 Tout lien permettant de pointer vers un endroit précis de la même

page
 la création d’un lien interne se fait en deux étapes
 création d’une ancre (définition de la cible) : l’endroit où le lien
interne doit pointer, en utilisant la balise <a>
 <a id= "nom_ancre_d’arrivee">texte</a>
 création du lien interne, en utilisant la balise <a> avec l'attribut href
 <a href = "# nom_ancre_d’arrivee"> texte de la zone
cliquable </a>
 lien vers une ancre située dans une autre page
 faire un lien qui ouvre une nouvelle page et qui amène directement
à une ancre située plus bas sur cette page
 <a href="url_arrivée#nom_ancre_arrivee>texte</a>
24
Lien hypertexte
Introduction

<a href="http://www.google.fr">lien externe</a>

 <a href="vide.html">page locale</a>

 <a href="#Ancre">ancre interne (ou externe)</a>

 <a href="../shower.zip">fichier à télécharger</a>

 <a href="mailto:al.capone@gmail.com">courriel</a>

25
 Les listes
Introduction

Il existe plusieurs types de listes en HTML

 liste non ordonnée (unordered list, avec des puces devant
chaque élément de la liste)
 la balise ul permet de définir une liste non ordonnée
 <ul></ul> délimite toute la liste
 <li></li> permet de créer un élément de la liste
 la balise <li> effectue le retour à la ligne
 liste ordonnée (ordered list , avec des numéros croissants avant
chaque élément)
 la balise ol permet de définir une liste à numéros
 chaque élément de liste se place dans une balise <li>
On peut mélanger <ul> et <ol> à condition de les fermer
correctement 26
Les tableaux et images

27
 Les tableaux
Introduction

Un tableau (<table> ) sert à organiser des informations structurées

sous forme tabulaire, il se compose de lignes (<tr>) organisées elles-
mêmes en cellules ( <td>)
 définition d'un tableau : <table> </table>
 définition d’un titre du tableau (la balise se place au début du tableau)
: <caption> </caption>
 définition d'une ligne : <tr> </tr> (table row)
 définition d'une cellule d'en-tête (gras et centré, utilisé pour le titre
d’une colonne ou le titre d’une ligne du tableau) : <th> </th> (table
header)
 définition d'une cellule d’une ligne: <td> </td> (table data)

28
Exemple
Introduction

29
 Fusion de cellules
Introduction

 Il est possible de fusionner des cellules avec les attributs rowspan

et/ou colspan, dans td ou th
 Fusion de colonnes : l’attribut colspan permet d’indiquer sur combien
de colonnes s'étend la cellule  la fusion s’effectue horizontalement
 Fusion de lignes : l’attribut rowspan permet d’indiquer sur combien
de lignes s'étend la cellule  la fusion s’effectue verticalement (cellule sur
plusieurs lignes)

30
Forme du tableau
Introduction
légende

cellule d'entête

ligne cellule de donnée

cellules multi-colonnes
et multi-lignes

31
 Diviser un tableau
Introduction

 On peut diviser les gros tableaux en trois parties

 en-tête du tableau (en haut) : entre <thead> et </thead>
 corps (c’est-à-dire les lignes du tableau) : entre <tbody> et </tbody>
 pied du tableau (en bas) : entre <tfoot> et </tfoot>
 On remet dans tfoot les cellules d'en-tête
Les éléments <thead> et <tfoot> permettent de répéter l’élément
dans les tableaux sur plusieurs pages
 On a les balises suivantes
1. <thead></thead>
2. <tfoot> </tfoot>
3. <tbody> </tbody>

32
 Les images
Introduction

 Formats reconnus : GIF (pour les images animées), JPEG (pour les
photos), PNG (pour les illustrations)
 Pour afficher une image on utilise la balise img (pas de retour à la ligne)
<img src= "CheminImageàAfficher" alt="description" />
 L'attribut src (obligatoire) permet de spécifier l’emplacement du
fichier image
 L’attribut alt est facultatif permet d’afficher un texte alternatif à
l’image lorsque l’image, pour différentes raisons, n'apparaît pas
 L'attribut title permet d'afficher une infobulle au survol de l'image
 Les attributs width et height peuvent être ajoutés pour donner une
taille à l’image
33
 Les images
Introduction

 Les attributs optionnels

 L’attribut width permet de spécifier la largeur de l'image en px
 L'attribut height permet de spécifier la hauteur de l'image en px
 Il faut toujours éviter de les utiliser pour redimensionner l'image
Mieux vaut utiliser un logiciel de dessin pour modifier la taille de
l'image source
 L'attribut border permet de régler l'épaisseur du trait entourant
l'image, en pixels
 Les attributs hspace et vspace permettent de déterminer les
espaces, en pixels, entre l'image et le texte autour

34
Balises de contenu embarqué

35
Les nouvelles balises

 On appelle contenu embarqué un fichier que la page HTML

va afficher
 Les balises de contenu embarqué permettent d'afficher
notamment des images ou de la vidéo ainsi que de jouer du son
 Une des grandes nouveautés de HTML 5 est la prise en charge,
sans plugins, de la lecture des flux audio et vidéo
 Les nouvelles balises <audio> et <video> permettent de lire un
fichier audio ou vidéo directement dans le navigateur

36
Syntaxe minimale

 Syntaxe minimale pour la lecture d’un fichier vidéo

<video src="video.mp4" controls ></video>

 Syntaxe minimale pour la lecture d’un fichier audio

audio src="audio.mp3" controls></audio>
<audio

 Syntaxe minimale pour l’inclusion d’une image (Rappel)

<img src="image.png" alt="Une image !">

 L’attribut src définit l’url du fichier vidéo (resp. son,

resp.image)
37
 La balise <video>

 Utilisation plus complète de la balise <video> avec la taille

(width,height), l’image d’intro (poster), les différentes sources
(source), afin de s’assurer qu’une majorité de navigateurs va être
capable d’en lire une sans problème, et le texte alternatif
<video width="360" height="240" poster="image.jpg" controls>
<source src="video.mp4" type="video/mp4" />
<source src="video.ogv" type="video/ogg" />
<source src="video.webm" type="video/webm" />
l'alternative à la vidéo : un lien de téléchargement, un
message : votre navigateur ne supporte pas la balise, etc.
</video>

38
 Les attributs

Attribut Description
source utilisé pour spécifier plusieurs sources vidéos, c’est au navigateur
de choisir le format pris en compte
width /height définit la largeur/hauteur de la vidéo
controls booléen qui permet d’afficher les contrôles visuels du lecteur vidéo
(lecture, arrêt, avancement et volume)
autoplay permet la lecture automatique du fichier vidéo
loop permet de jouer en boucle le fichier vidéo
preload permet de télécharger le fichier vidéo au chargement de la page,
par défaut valeur none, valeur auto pour chargement automatique
poster permet d’afficher une image en attendant le téléchargement de la
vidéo 39
 Les formats pris en charge

 Les formats supportés sont MPEG-4, OGG /Theora et WebM

 Il est recommandé de mettre le plus de format possible pour une
meilleure compatibilité avec les navigateurs
 Les types de conteneur de fichier vidéos suivants peuvent être
utilisés

 Plusieurs logiciels permettent de générer les fichiers .mp4,

.webm et .ogg tel que Miro Video Converter
40
Remarques

 Habituellement, le navigateur va utiliser le premier format

qu’il reconnaît (dans ce cas, le navigateur vérifie si le format MP4
est pris en charge, sinon, il va vérifier pour le format OGG, et ainsi de
suite)
 Il est impossible d’intégrer une vidéo youtube, vimeo ou
dailymotion dans une page web avec la balise < <video>, il faut
utiliser la balise <iframe> pour pouvoir intégrer la vidéo
<iframe width="560" height="315" src="https://www.youtube
.com/embed/ZH1XOsv8Oyo"frameborder="0" allowfullscreen>
</iframe>

41
La balise <audio>

 La balise <audio> est utilisée pour ajouter du son et de la musique

à une page web
<audio controls>
<source src="audio.ogg" type="audio/ogg" />
<source src="audio.mp3" type="audio/mpeg" />
Votre navigateur ne prend pas en charge les formats
audio proposés.
</audio>

 Elle permet de gérer plusieurs sources pour répondre à l’incompatibilité des

navigateurs; L’attribut source est utilisé pour spécifier plusieurs fichiers
audio, ainsi les fichiers sont lisibles par tous les navigateurs récents
 Les différents formats sont essayés dans l'ordre descendant, jusqu'au
premier format pris en charge par le navigateur 42
 Les attributs

Attribut Description
source utilisé pour spécifier plusieurs sources audio, c’est au
navigateur de choisir le format pris en compte
controls booléen qui permet d’afficher les contrôles visuels du lecteur
audio (lecture, arrêt, avancement et volume)
autoplay permet la lecture automatique du fichier audio
loop permet de jouer en boucle le fichier son
preload permet de télécharger le fichier audio au chargement de la
page, par défaut valeur none, valeur auto pour chargement
automatique

43
 Les formats pris en charge

 Ogg/Vorbis : format libre et performant (extension .ogg, qualité

supérieure au format MP3)
 MP3 : compression avec perte de qualité sonore significative
mais acceptable pour l’oreille humaine l'un des plus compatibles
(tous les appareils savent lire des MP3, extension .mp3)
 AAC : le format Advanced Audio Coding est plus performant en
compression que MP3 utilisé majoritairement par Apple (extension
.m4a)
 WAV : à éviter car le fichier est très volumineux car format non
compressé (extension .wav)
 Aucun navigateur ne gère tous ces formats à la fois, retenez
surtout la compatibilité pour les MP3 et OGG 44
 La balise <figure>

 La balise <figure> est utilisée pour regrouper des éléments comme des
images et des vidéos
 La balise <figcaption>, est utilisée avec la balise <figure> permet de
rajouter une légende aux éléments regroupés
<figure>
<img width="200" src="images/horse.jpg" alt = "Un cheval"/>
<figcaption> Cliquez pour entendre le son du cheval!
<audio controls>
<source src="audios/horse.ogg" type="audio/ogg" />
<source src="audios/horse.mp3" type="audio/mp3" />
ne prend pas en charge les formats audio proposés
</audio>
</figcaption>
45
</figure>
Les formulaires

46
 Les formulaires
Introduction
 Un formulaire est un ensemble de composants (appelés contrôles ou
champs) qui permettent à l'utilisateur (le client) d'entrer des données,
d'exprimer des choix puis d'émettre ces données vers un serveur
 Exemples typiques d’utilisation de formulaire: login, formulaire de
contact, etc.

cases à cocher (checkbox) boutons radio

47
 Les balises d’un formulaire
Déclaration
Introduction
 La balise <form> délimite le contenu du formulaire
 Attributs principaux ( <form action=… method=… name=…>
 name : nom attribué au formulaire
 action : définit le script à exécuter lorsque l’utilisateur validera le
formulaire : url vers laquelle envoyer les données saisies (mailto :
ou adresse d’une page php qui va traiter les données)
 method: définit la méthode utilisée pour envoyer les données
<html >
<body >
<form method=" " action="script.php" name="formulaire">
URL du script où les données du formulaire
</form> doivent être soumis pour traitement
</body > get les données envoyées seront visibles dans l’URL
</html> post les données seront cachées  à privilégier 48
 Contenu d’un formulaire
Introduction

<html >
<body >
<form action="script.php">
<fieldset> Permet de regrouper des champs de formulaire
ayant une sémantique proche (avec une bordure)
<legend></legend> Permet d’ajouter un titre au groupe de champs
<p>
Entoure
chaque
champ du
</p> formulaire

</fieldset>
</form>
pas de champs de formulaire "en vrac"
</body >
</html>
49
 Les balises
La balise <input>
Introduction
 L’attribut type permet de préciser le type du champ à utiliser et name permet de
spécifier un nom au champ pour qu’on puisse récupérer sa valeur
TYPE SYNTAXE
text <input type=text name="nom champ" size="nb.car." maxlength="nb.max.car."
value="val.prédéf."> : value pour donner la valeur originale
password <input type=password name="nom champ" size="nb.car."
maxength="nb.max.car." value="val.prédéf.">
checkbox <input type=
type=checkbox name="nom
="nom champ" value="valeur retournée" {{checked}> }>
checked rend la case cochée initialement. la paire nom/valeur envoyée si la case
est cochée
radio <input type=radio name="nom champ" value="valeur retournée" {checked}> :
tous les boutons doivent avoir le même name. un bouton et un seul peut être
pressé.
submit <input type=submit value="nom bouton" > : value pour changer le titre du bouton
reset <input type=reset value="nom bouton"> : value pour changer le titre du bouton
50
 La baliseettextarea
Introduction
Balises attributs
 Chaque champ du formulaire (autre qu’un bouton d’envoi) doit posséder
une étiquette (balise <label> … </label> pour nommer un champ)
 La balise label comporte un attribut for qui doit prendre pour valeur la
valeur de l’attribut id du champ auquel est associé le label
 L'attribut title permet d’associer une info-bulle à un champ
 L'attribut value (autre que textearea) donne une valeur par défaut au champ
 L'attribut required permet de rendre obligatoire la saisie d’un champ
 L'attribut placeholder permet de donner une indication de ce que devrait
contenir un champ input : s’efface dés que l’utilisateur active le champ
 L'attribut tabindex="num" permet de définir l'ordre de sélection des
champs d'un formulaire lorsque l'on utilise la touche tab
 <p> <label for="nom">Quel est votre nom ?</label>
<input type="text" name="nom" id="nom" tabindex="1" />
</p> 51
 Les
Casebalises
à cocher
Introduction
 Une case (une option; un input)
 On peut pré-cocher avec checked="checked"
 Plusieurs cases à cocher, toutes peuvent être cochées
 Les cases à cocher peuvent avoir un attribut name distincts, ou identique
 <label>Vos Options :</label>
<input type="checkbox" id="mus" name="option" value="Musique">
<label for ="mus">Musique</label>
<input type="checkbox" id="des" name="option" value="Dessin">
<label for ="des">Dessin</label>

52
 Les balises
Bouton d’option
Introduction
 Une case (une option; un input)
 On peut pré-cocher avec checked="checked"
 Un seul choix possible parmi tous les boutons d’option
 La valeur (value) est importante : c’est elle qui est renvoyée au serveur
 Pour que le navigateur comprenne que des éléments forment un groupe, il
faut leur donner le même attribut name
 <label>Donnez votre deuxième langue :</label>
<input type="radio" id="fr" name="langue"
="langue" value="Français">
<label for ="fr">Français</label>
<input type="radio" id="an" name="langue" value="Anglais">
<label for ="an">Anglais</label>

53
 Les balises
Balises textarea et select
Introduction
 La balise <textarea>
< </textarea> permet de créer une zone de texte
de plusieurs lignes (multiligne)
 l’attribut rows permet d’indiquer le nombre de lignes
 l’attribut cols permet d’indiquer le nombre de colonnes
 l’attribut readonly permet de préciser que la zone est en lecture seule
<label for="adresse">Quelle est votre adresse?</label>
<textarea name="adresse" Cols="25" Rows="3" id="adresse">
</textarea>
 La balise <select> </select> permet de créer une liste de choix ou
d'options parmi lesquelles l'utilisateur doit opérer un choix (unique ou
multiple), chaque élément est décrit par la balise <option>

54
 La balise
Types textarea
de listes
Introduction
 listes déroulantes
<select name = "nom champ" size="nb.articles">
<option selected> article_menu
………..
</select>
 listes à ascenseur
Physique
<select name = "nom champ" size="nb.articles" multiple> Informatique
Philosophie
<option> article_liste Mathématiques
Langues
………….. SVT
Histoire
</select> EPS

-- l’attribut permet de sélectionner plusieurs éléments de la liste

55
La balise button

 La balise <button> définit un bouton cliquable, syntaxe différente

de la balise input (balise non auto-fermante)
 À l'intérieur d'une balise <button> nous pouvons mettre des
contenus, comme du texte ou des images : c'est la principale
différence entre cette balise et les boutons créés avec la balise
<input>
 Le comportement du bouton lorsqu'il est activé est contrôlé par
l'attribut type (sumbit, reset, button)
 button : bouton cliquable (utilisable en JavaScript)
 reset : remettre à zéro le formulaire
 submit : envoyer le formulaire
56
 Les balisestypes de champs
Nouveaux
Introduction
 Nouveaux attributs type de la balise <input/> 99.999.999
 Téléphone : type="tel" foulen@tunis.tn
 Email : type="email" permet de définir un champ texte pour
http://www.monsite.tn
lequel le navigateur vérifie automatiquement que la valeur saisie
est un e-mail valide Html5

 URL : type="url" permet de définir un champ texte pour

lequel le navigateur vérifie que la valeur saisie est une adresse web
valide
 Champ de recherche : type="search" permet d’ajouter un
champ de recherche pour les blogs par exemple
 Sélecteur de couleur : type="color" permet d'afficher une
palette de couleur afin de choisir graphiquement un code couleur

57
 99.999.999

Les balisestypes de champs

Nouveaux
Introduction foulen@tunis.tn

http://www.monsite.tn
 Nouveaux attributs type de la balise <input/> Html5
Nombre : type="number" permet d’ajouter un champ
numérique
 Intervalle : type="range" permet de sélectionner un nombre
avec un curseur
 Date : type="date" permet de sélectionner le jour, le mois
et la date
Il existe d'autres types de champs semblables à date :
datetime (date et heure), month (mois), week
(le numéro de la semaine) et time (heure et minutes)

58
Autres attributs

 L’attribut disabled="disabled" peut-être utilisé pour désactiver

un champ (on peut aussi juste mettre disabled en attribut)
 Ex. désactiver le champ d’envoi jusqu’à ce que toutes les données soient
remplies
 L'attribut autofocus permet de placer automatiquement le curseur
sur le champ du formulaire en question (pour activer un champ, dès que
le visiteur chargera la page, le curseur se placera dans ce champ)
 L'attribut autocomplete permet de compléter automatiquement
des champs basées sur l’historique de saisie
 L'attribut pattern permet de définir une expression régulière qui
sera utilisée pour déterminer si la saisie est conforme au format
attendu : saisies autorisées dans un champ 59
 pattern="[A-F][0-9]{5}" :
ce champ attend une valeur
Quelques expressions régulières numérique d'au moins 5
chiffres précédés d'une
lettre majuscule comprise
entre A et F
1. [.....] : Intervalle de valeurs autorisées
2. [^......] : Intervalle de valeurs non autorisées
3. [a-z] : Une seule lettre minuscule comprise entre a et z
4. [A-Z] : Une seule lettre majuscule comprise entre A et Z
5. [a-z]* : Zéro ou plusieurs lettres minuscules
6. [A-Z]+ : Une ou plusieurs lettres majuscules
7. [a-z]{8} : Exactement 8 lettres minuscules : un nombre limité de caractères
8. [a-zA-Z]{5, 8} : Entre 5 et 8 lettres (majuscules ou minuscules)
9. [a-zA-Z]{5,} : Au minimum 5 lettres (majuscules ou minuscules)
10. [^A-Z] : Aucune lettre majuscule
11. \d : Un chiffre quelconque
12. . : N’importe quel caractère
13. \. : Le point - 14. \- : Le – (tiret du 6) - 15. (a|b) : Le a ou le b
16. (ab) : Le a et le b - 17. a(b)? : a suivie d’un b optionnel 60
Balises de structure

61
 Les balises de structure

Balise Description
header Pour le bloc d'entête, il peut y avoir un header pour la page, un header par
section, par article, etc. . L’en-tête de la page contiendrait habituellement un
titre , un logo,…, l’en-tête de l’article contiendrait, le titre de l’article, l’auteur,
etc.
footer Elle regroupe les éléments de pied de page ou d’une longue section ou d’un
long article. Le pied de page contiendrait un lien de contact, un copyright, etc.
main Pour le bloc de contenu principal. Il contient le contenu spécifique à une page.
Il ne peut y avoir qu'un seul <main> dans une page. 62
 Les balises de structure

Balise Description
nav Contenant une série de liens hypertextes pour la navigation sur le site (menu
de navigation), elle peut être placée à gauche au dessous du header
aside Pour le bloc latéral. Section dont le contenu n’est pas nécessairement
directement lié au contenu principal qui l'entoure, mais pour fournir des
informations supplémentaires au contenu
article Définit une partie indépendante du document qui possède une identité à
part, comme un commentaire, un article de blog composé d’un titre, d’une
illustration et d’un texte
section Détermine une partie du contenu de la page se rapportant à un thème
déterminé 63
 Exemple

<header id="entete">
<h1>Balises sémantiques HTML5 et le modèle Flexbox</h1>
<nav>
<ul>
<li><a href="">Lien1</a><br></li><li><a href="">Lien2</a></li>
</ul>
</
</nav>
</header>
<div class="row">
<main>
<article><h2>A propos de cette page</h2>
<p>Les balises de structure et le modèle FlexBox</p>
</article> 64
 Exemple

<article>
<h2>Testez!</h2>
<p>Testez cette page:</p>
</article>
</main>
<aside>
<h2>HTML</h2>
<p>Signifie Hypertext Markup Language. La norme actuelle
est HTML5.</p>
</aside>
</div>
<footer>Février, 2017</footer>

65