Chapitre HTML PDF

Chapitre 1: HTML
Enseignante: Nourhene Ellouze
Matière: Développement Web
Niveau: PI2
Plan du cours DAW
1. Qu’est ce que HTML 5 ?
▪ HTML 5 : un ensemble de technologies (HTML 5, CSS 3, JavaScript)
▪ Les éléments basiques d’une page HTML
2. Introduction au langage HTML
▪ Structure d’une page HTML
▪ Le doctype, l’entête, et le corps
▪ Les balises usuelles
▪ Les images
▪ Les liens
▪ Les listes
▪ Les tableaux
3. Formulaire
4. Les grandes nouveautés du HTML 5
▪ Les formulaires en HTML5
▪ Les balises sémantiques
▪ Les balises multimédias (audio et vidéo)
2
1. Qu’est ce que HTML 5 ?
3
HTML 5 :HTML 5, CSS 3, et JavaScript
▪ Le HTML 5 est fondamentalement le langage HTML dans sa 5ème version…
▪ …Mais il regroupe, par un abus de langage justifié, le HTML 5, le CSS 3 et le

JavaScript. Le HTML 5 est donc la pierre angulaire de cet l’édifice.
▪ On va donc avoir :
➢ HTML -> fond du document
➢ CSS -> forme du document
➢ JavaScript -> dynamisme du document
4
Présentation du langage HTML
▪ HTML (Hypertext Markup Language) est le format de données structurant
une page web.
▪ HTML est initialement dérivé du SGML (Standard Generalized Markup
Language) dont la première publication date de 1986.
▪ C’est un langage de balisage : <balise>Contenu</balise>
<html>
<head>
Les en-têtes du document Exemple de document
</head> HTML avec les premières
<body> balises html, head et body
Le corps du document
</body>
</html>
5
Avec quoi fait-on une page web ?
Page Web
Le code compliqué qui décrit la page s’appelle HTML

C’est ce que nous allons apprendre à faire
6
2. Introduction au langage HTML
7
Structure d’une page HTML5
<!DOCTYPE html>
<html> Ceci est le début d'un document de type HTML
<head> Ceci est le début de la zone d'en-tête
<meta charset="utf-8" />
<title> Titre du document. </title>
<meta name="author" content="mettre ici
votre nom" />
</head> Ceci est la fin de la zone d'en-tête
<body> Ceci est le début du corps du document
<header>
<h1> Titre affiché du document. </h1>
</header>
<section>
Corps du document.
</section>
<footer>
Bas de page.
</footer>
</body> Ceci est la fin du corps du document
</html> Ceci est la fin d'un document de type HTML
8
Ma première page HTML
Code Affichage
9
Le Doctype avant tout
▪ Le doctype est le préambule d’une page HTML, il spécifie le type de
document.
▪ Doctype HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
▪ Doctype XHTML 1.1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
▪ Doctype HTML 5
<!DOCTYPE html>
10
L’entête
<htm Entête est placée entre la balise ouvrante <head> et la balise fermante </head>
l>
<head>
Cette balise permet de dire que le
<meta charset="utf-8"/>
<title>Titre de la page</title> contenu est écrit avec la norme utf-8
<title> Titre
<meta charset= " utf-8" />du document </title (avec les accents é-à-è-ë-…)
</head>
Cette balise permet d’indiquer le titre de la page
<body>
…
<p>Bonjour !!!</p>
…
</body>
</html>
11
L’entête
▪ Son contenu inclut le titre qui apparaît dans la barre de titre du navigateur ainsi
que dans les signets lorsque vous mettez le site en favoris.
▪ Exemple:
<title>Cours HTML5 - Apprenez les bases du HTML5</title>
12
L’entête
▪ Les balises meta sont obligatoirement placées dans la balise <head>
▪ Ils permettent de renseigner diverses informations sur la page en cours, comme son
auteur, une courte description du document, des mots-clefs, etc.
<meta name=“Nom" content=“contenu">
▪ meta author : Renseigne le prénom et nom de l'auteur de la page courante.

S'il y a plusieurs auteurs, les séparer d'une virgule.
<meta name="author" content=“Nourhene Ellouze, Amina
Ghariani">
13
L’entête
▪ meta keywords : Contient une liste de mots-clefs sur lesquels les moteurs de
recherche vont se référer.
▪ Les mots-clefs sont séparés par une virgule.
▪ Avoir trop de mots-clefs peut être considéré par les moteurs comme du spam, donc ne
pas dépasser les 500 caractères.
<meta name="keywords" content="cours html, balise meta,
formulaires, listes, tableaux, cadres">
▪ meta category: Contient une liste de mots qui décrivent la catégorie de la

page. Elle est utile pour les annuaires et elle n’est pas obligatoire.
▪ S’il y a plusieurs valeurs possibles, alors elles seront séparées par des virgules
<META NAME="Category" CONTENT= "Webmastering,

Gestion de sites">
14
L’entête
▪ meta language: Langue de la page sous la forme d'une abréviation (2 lettres).
▪ Cette zone est optionnelle et sans doute inutile (elle ne semble pas prise en compte par
les moteurs).
▪ Exemples de valeurs possibles : ''fr'' (Français), ''en'' (Anglais), ''de'' (Allemand), ''es''
(Espagnol), ''it'' (Italien).
<META NAME="Language" CONTENT="fr">
▪ meta description: Description de la page. Zone très utile.

▪ Chaque page DOIT avoir une description (entre 100 et 1000 caractères).
▪ Cette description est fréquemment reprise par les annuaires qui indexent votre site.
▪ Évitez donc d’y faire figurer une suite de mots clés sans attrait pour les internautes.
META NAME ="Description" CONTENT="Cette description est faite

dans notre cours AWD">
15
L’entête
▪ <META NAME="Copyright" CONTENT="Indiquez ici les copyrights.">
▪ <META NAME="Generator" CONTENT="Listez ici à la façon des mots clés les
différents logiciels utilisés.">
▪ <META NAME="Date" CONTENT="Inscrivez ici la date de création de votre
page.">
<META NAME="Copyright" CONTENT="© 1999 Hugo ETIEVANT">

<META NAME="Generator" CONTENT="HomeSite v1.2,Paint Shop Pro
5.0,Animation Shop,Netscape Communicator 4.0">
<META NAME="Date" CONTENT=« Mon, 15 Feb 2021 08:00:00">
16
L’entête
▪ meta http-equiv : permet de préciser l'encodage utilisé pour la page grâce au
mot clé Content-Type.
▪ Exemple pour un encodage au format UTF-8 :
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
▪ Pour les pages en arabre on peut utiliser l’encodage : ISO-8859-6

▪ meta Refresh: permet de :
▪ Recharger (réactualiser) automatiquement la page toutes les n secondes (ex., 10 s).
<META http-equiv="Refresh" content="10">
▪ Rediriger automatiquement le navigateur vers une autre page au bout de n secondes

<META http-equiv="Refresh" content="10; URL=http://www.fst.rnu.tn">
17
Le corps
<html>
<head>
</head>
Placé entre les balises <body> et
<body> termine par </body>
C’est là que va figurer tout le contenu
de la page
</body>
</html>
18
Les balises usuelles
▪ Les balises peuvent être de deux natures différentes:
▪ Les balises « block » : Elles englobent le contenu. Elles contiennent des paragraphes,
des titres, etc.
HTML
< p > Ceci est un paragraphe < /p >
▪ Les balises « inline » : Elles sont dans le texte. (mettre en gras, souligner, etc…)
< p > On va écrire un texte <strong> en gras </strong> !!!</p>
19
Les paragraphes
▪ <p> … </p> : Balise de paragraphes (balise la plus utile !)
<body>
<p>
Thomas Andrews, né le 7 février 1873 et mort le 15 avril
1912, est un architecte naval britannique qui a travaillé à la
construction de plusieurs paquebots. Il grandit au sein d'une
famille aisée, puis devient apprenti dans les chantiers navals
Harland & Wolff de Belfast dont le président, Lord Pirrie, est
son oncle. Pendant quelques années, Andrews gravit
progressivement les échelons avant d'être nommé directeur
général de l'entreprise. La réparation du paquebot Suevic de
la White Star Line, à laquelle il participe, fait de lui un des
architectes navals les plus renommés de son époque.
</p>
</body>
20
Retour à la ligne
▪ <br/> : Retour à la ligne
<body>
<p>
Ligne 1 <br/>
ligne 2
<br/> Ligne 3
toujours ligne 3
</p>
</body>
21
Balises de formatage du Texte
Balises Explications
<I> texte </I> Met le texte en italique
<B> texte </B> Met le texte en gras
<TT> texte </TT> Pour l'utilisation d'une police à chasse fixe
<S> texte </S> Barre le texte
<SUB> texte </SUB> Indice
<SUP> texte </SUP> Exposant
<U> texte </U> Souligne le texte
22
Exercice d’application
▪ Ouvrir l'éditeur du texte Notepad++
▪ Ecrire le code HTML permettant d’ :
▪ Ajouter le titre « Ma première page »
▪ Afficher Bonjour HTML5! (en gras)
▪ Ajouter le texte «Bienvenue dans notre page d’accueil » dans une nouvelle ligne
▪ Enregistrer le fichier créé sous le nom EX1.html
▪ Aller au menu Exécution et choisir un navigateur (ex. : Chrome)
23
Les titres
▪ <h1> … </h1> Titre TRES important
▪ <h2> … </h2> Titre important
▪ <h3> … </h3> Titre moyen
▪ <h4> … </h4> Titre pas important
▪ <h5> … </h5> Titre pas du tout important
Code Affichage
24
Les images
▪ Syntaxe:
<IMG SRC="chemin_de_l'image" NAME="nom_de_l'image" >
▪ SRC: est un attribut obligatoire

▪ Soit un chemin relatif de l’image
▪ Soit un chemin absolue de l’image (commençant par « http:// ») pour pointer vers un autre site
25
Les liens
▪ <a>…</a> : Faire un lien vers une image ou un fichier.
▪ Syntaxe:
▪ <A href="mon_lien">Texte_ou_image_à_cliquer</A>
26
Les listes
▪ HTML définit diffèrent types de listes comme:
▪ Les listes numérotées ou ordonnées (ou Ordered lists),
▪ Les listes non numérotées (Unordered lists) dites listes à puces dont les entées sont
signalées par un signe typographique,
▪ Les listes de menu.
27
Les listes ordonnées
Balises de définition
Syntaxe Affichage
<OL>
<LI>item n°1 1. item n°1
</OL>
Type de numérotation Exemple

Valeur Description Syntaxe Affichage
1 chiffres arables
I chiffres romains <OL TYPE=”I”> I. item n°1
<LI>item n°1 II. item n°2
i chiffres romains minuscules <LI>item n°2 III.item n°3
A lettres de l'alphabet <LI>item n°3
</OL>
a lettres minuscules de l'alphabet
28
Les listes non ordonnées
Balises de définition
Syntaxe Affichage
<UL> • item n°1

<LI>item n°1 • item n°2
<LI>item n°2 • item n°3
<LI>item n°3
</UL>
Exemple
Type de puces Syntaxe Affichage
Valeur Description <UL TYPE=”SQUARE”> ▪ item n°1

square carreau <LI>item n°1 ▪ item n°2
Circle cercle <LI>item n°2 ▪ item n°3
<LI>item n°3
disc Rond plein </UL>
29
Liste de définitions
Syntaxe Affichage
<DL>
<DT>terme n°1
<DD>définition n°1
<DT>terme n°2
</DL>
30
▪ Écrire le code HTML permettant d’obtenir le résultat suivant:
Titre Niveau 1
Titre Niveau 3
Titre Niveau 3
31
Les tableaux
Balises de définition de tableau
Balise Rôle
<table> </table> Marque le début et la fin du tableau
<tr> </tr> Marque le début et la fin d'une ligne du tableau
<td> </td> Marque le début et la fin d'une cellule du tableau dans une ligne
<th> </th> Marque le début et la fin d'une cellule d ’entête dans un tableau
<caption></caption> Pour donner une légende à un tableau
32
Attribut: colspan
▪ COLSPAN=n : fusionne n cellules horizontalement
<td colspan="n">
33
Attribut : rowspan
▪ ROWSPAN=n: fusionne n cellules verticalement.
<td rowspan="n">
34
▪ Créer un document HTML5 contenant le tableau suivant :
35
3. Formulaire
36
Formulaire
37
Fonctionnement
Serveurs Google
38
Traitement des formulaires
▪ Comment utiliser un formulaire ?
▪ Réalisation du formulaire (Simple)
▪ En HTML
▪ Exploitation du formulaire par un script

▪ CGI
▪ PHP
▪ JSP
▪ ASP
▪…
39
Insertion d’un formulaire
▪ Un formulaire est inséré dans une page HTML en utilisant la balise ouvrante et
la balise fermante <FORM> …….</FORM>
▪ En plus de ses éléments principaux, le formulaire peut contenir du texte
▪ Toutes les mises en forme peuvent être appliquées aux éléments du formulaire
▪ Plusieurs formulaires peuvent être insérés dans la même page
40
Les attributs de la balise FORM
<FORM ACTION="script" METHOD="post" NAME ="nom_form">
▪ Attribut ACTION :
▪ URL du script ou programme à exécuter ou chemin du script à exécuter sur les données
du formulaire
▪ ACTION= "chemin_script "
▪ Attribut METHOD: méthode d’envoi des donnéesGET ou POST
▪ GET : données du form envoyées avec l’URL du script (limitée à 255 caractères)
▪ POST: données du form envoyées séparément de l’URL (meilleure, illimitée)
▪ Attribut NAME : nom du formulaire 41
La balise INPUT
▪ La balise <INPUT> permet de placer un champ dans lequel les informations
peuvent être recueillies :
▪ crée une zone de saisie
▪ Balise monolithique
▪ Principaux attributs:
Attributs Descriptions
TYPE (text, password, radio, checkbox, submit, reset, file, …)
NAME Nom du champ
VALUE Valeur du champ
SIZE Largeur du cadre réservé au champ
Nombre maximal de caractères pouvant être tapés dans un
MAXLENGTH
champ
42
INPUT TYPE="TEXT"
43
Zone de texte : <TEXTAREA>
▪ La balise <TEXTAREA> permet de crée une zone de saisie de texte
▪ Principaux attributs : NAME, COLS, ROWS
▪ COLS : nombre de colonnes
▪ ROWS : nombre de lignes
▪ READONLY : Spécifie que la boîte est en mode lecture seulement.
44
Les libellés
▪ Cette zone de texte est bien jolie mais si votre visiteur tombe dessus, il ne sait
pas ce qu'il doit écrire. C'est justement le rôle de la balise <label> :
<label> Votre nom : </label> <INPUT TYPE="text" NAME="nom" SIZE=15
MAXLENGTH=30>
▪ Pour lier le label au champ, il faut lui donner un attribut for qui a la même
valeur que l'id du champ
<label for="nom" > Votre nom: </label> <INPUT

TYPE="text" ID="nom" SIZE=15 MAXLENGTH=30>
▪ Si on lie le label au champ, en cliquant sur le libellé, on passe le focus et on

active le champ
45
Envoie des données d’un formulaire
▪ Pour envoyer le formulaire, il suffit de cliquer avec la souris sur un bouton
spécial créé par la balise <INPUT>
<INPUT TYPE = "submit" VALUE= " Envoyer" >
ATTRIBUTS Descriptions
TYPE = "submit" Envoyer le formulaire à l'adresse indiquée dans <FORM ACTION="...">
VALUE = "texte" Permet de modifier le texte affiché sur le bouton. (Par défaut = Submit)
46
Effacer les données d’un formulaire
▪ Après avoir rempli les données du formulaire, nous pouvons les effacer tous
avec un bouton créé par la balise <INPUT> avant l’envoi du formulaire
<INPUT TYPE="reset" VALUE="Effacer">
ATTRIBUTS Descriptions
TYPE = "reset" Remise à zéro de toutes les entrées du formulaire.
VALUE = "texte" Permet de modifier le texte affiché sur le bouton. (Par défaut = Reset)
47
Mot de passe
▪ L’attribut TYPE avec la valeur "password", dans une balise <INPUT> permet de
masquer un champs lors de la saisie, ses caractères sont remplacés par des
points ou des étoiles
<label for="passwd" > Votre mot de passe: </label> :

<INPUT TYPE="password" NAME="passwd" ID ="passwd" SIZE=15 MAXLENGTH=30>
48
Les éléments d’option
▪ Ce sont des éléments qui demandent au visiteur de faire un choix parmi une
liste de possibilités. On trouve :
▪ les cases d'options à un seul choix (Boutons Radio);
▪ les cases à cocher ;
▪ les listes déroulantes
49
Case d’option: Bouton Radio
▪ Syntaxe:
▪ <INPUT TYPE ="radio" NAME ="nom_radio" VALUE="valeur1"> texte du bouton1
▪ <INPUT TYPE ="radio" NAME =" nom_radio" VALUE="valeur2"> texte du bouton2
▪ La valeur de l’attribut NAME doit être commune à toutes les zones

Votre sexe :
<INPUT TYPE ="radio" NAME ="sexe" ID="Homme" VALUE="Homme">
<label for="Homme"> Homme</label>
<INPUT TYPE ="radio" NAME ="sexe" ID="Femme" VALUE="Femme">
<label for="Femme"> Femme</label>
50
Attribut: CHECKED
▪ L’attribut CHECKED permet de cocher par défaut l’un des boutons
Votre sexe :
<INPUT TYPE ="radio" NAME ="sexe" ID="Homme" VALUE="Homme" CHECKED>
<label for="Homme"> Homme</label>
<INPUT TYPE ="radio" NAME ="sexe" ID="Femme" VALUE="Femme">
<label for="Femme"> Femme</label>
51
Les cases à cocher
▪ La commande input Type= "CHECKBOX" permet d'afficher une liste ou
plusieurs choix sont possibles en même temps.
▪ Syntaxe:
Vos loisirs : <BR>
<INPUT TYPE ="Checkbox" NAME ="loisirs" ID="Sport" VALUE="Sport">
<label for="Sport"> Sport</label> <BR>
<INPUT TYPE ="Checkbox" NAME ="loisirs" ID="Music" VALUE="Music">
<label for="Music"> Music</label> <BR>
<INPUT TYPE ="Checkbox" NAME ="loisirs" ID="Danse" VALUE="Danse">
<label for=" Danse "> Danse </label> <BR>
52
Les listes déroulantes
▪ Les deux balises <SELECT> et <OPTION> permettent d'afficher une liste
déroulante (sous la forme d'un menu "pop-up").
▪ Principaux attributs :
▪ NAME,
▪ VALUE,
▪ SIZE: indique le nombre de Lignes visibles du menu,
▪ MULTIPLE: Pour sélectionner plus qu’ un choix,
▪ SELECTED: Pour sélectionner un choix par défaut

53
Les listes déroulantes
Ville(s) visités :<BR>
<SELECT NAME="ville" SIZE="5" MULTIPLE>
<OPTION VALUE="Maroc"> Maroc
<OPTION VALUE="France" SELECTED> France
<OPTION VALUE="Espagne"> Espagne
<OPTION VALUE="Egypte"> Egypte
<OPTION VALUE="Italie"> Italie
</SELECT>
<BR><BR>
54
Les balises <FIELDSET> et <LEGEND>
Ces deux balises permettent de structurer les formulaires.
Code
Affichage
55
▪ Écrire le code HTML permettant d’obtenir le résultat suivant:
56
4. Les grandes nouveautés du
HTML 5
57
Formulaire : nouveau champs
▪ email : pour saisir une adresse E-mail
▪ url: pour saisir une adresse absolue
▪ tel : Ce champ est dédié à la saisie de numéros de téléphone
▪ number : pour saisir un nombre entier
▪ range : permet de sélectionner un nombre avec un curseur
▪ date : pour saisir une date
▪ Grâce à ces nouveaux champs, le contrôle avec javascript devient de plus en
plus moins utilisé dans les formulaires
58
Formulaire : nouveau champs
ATTRIBUTS de la balise Desccriptions
<INPUT>
Type = "email " Saisie d'une adresse e-mail
Type="url" Saisie d’une adresse absolue
Type = "date " Un contrôle pour saisir une date (année, mois et jour, mais pas d'heure).
Type = "number " Saisie d’un nombre entier
Type = "range" Un contrôle permettant de saisir un nombre dont la valeur exacte n'est pas importante.
Les valeurs maximale et minimale sont indiqués par les attributs max et min
respectivement.
Type = "Tel " Un contrôle pour saisir un numéro de téléphone. Les sauts à la ligne sont
automatiquement retirés de la valeur envoyée. Les attributs pattern et maxlength
peuvent être utilisés pour restreindre les valeurs.
Type = "File " Un contrôle qui permet à l'utilisateur de sélectionner un fichier. L'attribut accept peut
être utilisé pour définir les types de fichiers que le contrôle peut sélectionner.
59
Manipuler une date
▪ <input type="date" />
▪ date : pour la date (05/08/1985 par exemple)
▪ time : pour l'heure (13:37 par exemple)
▪ week : pour la semaine
▪ month : pour le mois
60
Nouveaux attributs HTML5
▪ PATTERN: Cet attribut indique une expression régulière qui sert à
vérifier la valeur saisie.
▪ Noté Bien: l’attribut pattern ne s'applique que lorsque la valeur de l'attribut
type est text, tel, url ou email.
▪ Exemples :
▪ <input type="text" pattern="[A-F][0-9]{5}"/>
▪ Ce champ exige une valeur numérique d'au moins 5 chiffres précédés d'une lettre majuscule
comprise entre A et F.
▪ <input type="text" pattern="[A-Z]{1}[a-z]*"/>
▪ Ce champ exige un mot qui commence par une lettre majuscule et de longueur quelconque.
▪ AUTOFOCUS: qui placera le focus dans le premier champ de saisie

dès l'ouverture de la page
61
Nouveaux attributs HTML5
▪ PLACEHOLDER: C’est un attribut qui permet de renseigner un texte indicatif (en
gris claire) par défaut dans un champ de formulaire. Sa valeur s'efface dès que
l'utilisateur active le champ de formulaire
▪ Exemple : <input type="text" placeholder="Entrez votre nom"/>
▪ REQUIRED: Cet attribut permet de rendre obligatoire le remplissage d'un

champ et bloquer la validation du formulaire si l'un des champs (concernés par
cet attribut) n'a pas été renseigné.
▪ Cet attribut n'a pas besoin de valeur car sa seule présence suffit, cependant les syntaxes
suivantes sont admises :
▪ <input type="text" required/>
▪ <input type="text" required="required"/>
▪ <input type="text" required=""/>
62
▪ Mettre à jour le code HTML développé dans l’exercice précédant afin d’obtenir
le résultat suivant:
63
Les nouvelles balises sémantiques
▪ Une balise sémantique est une balise qui donne une indication sur le contenu
qu’elle contient
▪ les balises <div> ou <span> ne peuvent donner aucune indication sur les éléments
qu’elles contiennent
▪ Les balises <header>, <nav>, <article>, <section>, <aside> et <footer> permettent un

découpage plus précis de votre page web en délimitant des zones spécifiques
64
<body>
<div id="header"></div>
<div id="nav"></div>
<div class="article">
<div class="section"></div>
<div class="section"></div>
</div>
<div id="footer"></div>
<div id="aside"></div>
</body>
<body>
<header></header>
<nav></nav>
<article>
<section></section>
<section></section>
</article>
<aside></aside>
<footer></footer>
</body> 65
66
Les nouvelles balises sémantiques: <header>
▪ En-tête d'une section (section, article...) ou d'une page entière.
▪ Sert à contenir un logo, un ou plusieurs titres, d'autres informations
d'introduction, une navigation, un formulaire de recherche général.
<article>
<header>
<h1>Titre de l'article</h1>
<p>Auteur : Nom</p>
</header>
<p>Contenu de l'article</p>
</article>
67
Les nouvelles balises sémantiques: <footer>
▪ Pied de page, ou bien la conclusion d'une section.
▪ Peut contenir les informations concernant :
▪ l'auteur,
▪ une navigation ou une pagination (en combinaison avec <nav>),
▪ un logo de rappel,
▪ des coordonnées,
▪ des dates de publication.
<article> ...
<footer>
<p>Posté par Foulen, le <time datetime="2021-02-
24"> 12 octobre 2012</time> </p>
</footer>
</article>
68
Les nouvelles balises sémantiques: <nav>
▪ La balise <nav> doit regrouper tous les principaux liens de navigation du site.
▪ On peut placer par exemple le menu principal d’un site.
▪ Généralement, le menu est réalisé sous forme de liste à puces à l'intérieur de
la balise <nav> :
<nav>
<ul>
<li><a href="index.html">Accueil</a></li>
<li><a href="forum.html">Forum</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
69
Les nouvelles balises sémantiques: <article>
▪ C’est une spécialisation de section vise à baliser des blocs de contenu utiles
que l'on pourrait extraire du document tout en conservant leur sens et leurs
informations.
▪ C'est le cas par exemple des actualités (articles de journaux ou de blogs)
<article>
<h1>titre de l’article</h1>
<p>Contenu de l’article</p>
</article>
70
Les nouvelles balises sémantiques: <section>
▪ C'est la balise la plus générique: Elle regroupe un ensemble de contenu d'une
même thématique
▪ La section englobe généralement une portion du contenu au centre de la page.

Elle contient naturellement un titre d'introduction
<section>
<h1>Articles</h1>
<article>
<p>texte texte texte texte </p>
</article>
</section>
71
Les nouvelles balises sémantiques: <aside>
▪ Contient des informations complémentaires au document que l'on visualise
▪ Par exemple :
▪ la définition d'un terme, préciser des sources,
▪ une liste d'articles en relation...
<aside>
<h4>Sources de l'article</h4>
<ul>
<li><a href="#">Lien 1</a></li>
</ul>
</aside>
72
Exemple d’utilisation des balises sémantiques
73
Les nouvelles balises <audio> et <video>
▪ Une des grandes nouveautés de l’HTML 5 est la prise en charge sans
plugins, de la lecture des flux audio et vidéo
▪ Les balises <audio> et <video> se comportent de la même manière et
s’utilisent quasiment de la même façon que l’inclusion d’une simple image !
▪ syntaxe minimale pour la lecture d’un fichier vidéo :
<video src="video.webm"></video>
▪ syntaxe minimale pour la lecture d’un fichier audio :

<audio src="audio.mp3" controls></audio>
▪ syntaxe minimale pour l’insertion d’image :

<img src="image.png" alt="Une image !">
74
La balise <video>
▪ Le syntaxe suivant <video src="video.webm"></video>
offre la possibilité de l’insertion d’un vidéo depuis un navigateur
▪ Cependant, Il faut ajouter l’attribut controls pour contrôler la lecture, la pause
et le stop de la vidéo
▪ La balise <video> possède également l’attribut autoplay, preload et loop
▪ controls : pour ajouter les boutons « Lecture », « Pause » et la barre de défilement
▪ Width, height.
▪ loop : (jouer en boucle.)
▪ autoplay : la musique sera jouée dès le chargement de la page.
▪ preload : on ne peut pas le forcer, ça dépend du navigateur
75
La balise <audio>
▪ Le syntaxe suivant <audio src="audio.mp3" controls></audio>
offre la possibilité de l’insertion et le contrôle d’un audio depuis un navigateur
▪ Comme la baise <video>, la balise <audio> possède les attributs autoplay,
preload et loop
76

Chapitre HTML PDF

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

Chapitre HTML PDF

Transféré par

Droits d'auteur :

Formats disponibles

Chapitre 1: HTML

Enseignante: Nourhene Ellouze

Matière: Développement Web

▪ …Mais il regroupe, par un abus de langage justifié, le HTML 5, le CSS 3 et le

➢ HTML -> fond du document

➢ CSS -> forme du document

➢ JavaScript -> dynamisme du document

Le code compliqué qui décrit la page s’appelle HTML

▪ Doctype XHTML 1.1

Cette balise permet d’indiquer le titre de la page

<title>Cours HTML5 - Apprenez les bases du HTML5</title>

<meta name=“Nom" content=“contenu">

▪ meta author : Renseigne le prénom et nom de l'auteur de la page courante.

▪ meta category: Contient une liste de mots qui décrivent la catégorie de la

<META NAME="Category" CONTENT= "Webmastering,

▪ meta description: Description de la page. Zone très utile.

META NAME ="Description" CONTENT="Cette description est faite

<META NAME="Copyright" CONTENT="© 1999 Hugo ETIEVANT">

▪ Pour les pages en arabre on peut utiliser l’encodage : ISO-8859-6

▪ Rediriger automatiquement le navigateur vers une autre page au bout de n secondes

< p > On va écrire un texte <strong> en gras </strong> !!!</p>

▪ SRC: est un attribut obligatoire

▪ Les listes de menu.

Type de numérotation Exemple

<UL> • item n°1

Valeur Description <UL TYPE=”SQUARE”> ▪ item n°1

▪ Exploitation du formulaire par un script

la balise fermante <FORM> …….</FORM>

▪ En plus de ses éléments principaux, le formulaire peut contenir du texte

▪ Plusieurs formulaires peuvent être insérés dans la même page

<FORM ACTION="script" METHOD="post" NAME ="nom_form">

<label for="nom" > Votre nom: </label> <INPUT

▪ Si on lie le label au champ, en cliquant sur le libellé, on passe le focus et on

<label for="passwd" > Votre mot de passe: </label> :

liste de possibilités. On trouve :

▪ les cases d'options à un seul choix (Boutons Radio);

▪ les cases à cocher ;

▪ les listes déroulantes

▪ La valeur de l’attribut NAME doit être commune à toutes les zones

▪ SIZE: indique le nombre de Lignes visibles du menu,

▪ MULTIPLE: Pour sélectionner plus qu’ un choix,

▪ SELECTED: Pour sélectionner un choix par défaut

▪ AUTOFOCUS: qui placera le focus dans le premier champ de saisie

▪ REQUIRED: Cet attribut permet de rendre obligatoire le remplissage d'un

▪ Les balises <header>, <nav>, <article>, <section>, <aside> et <footer> permettent un

▪ La section englobe généralement une portion du contenu au centre de la page.

▪ syntaxe minimale pour la lecture d’un fichier audio :

▪ syntaxe minimale pour l’insertion d’image :

offre la possibilité de l’insertion et le contrôle d’un audio depuis un navigateur

▪ Comme la baise <video>, la balise <audio> possède les attributs autoplay,

Vous aimerez peut-être aussi