Académique Documents
Professionnel Documents
Culture Documents
HTML5
HTML5
ISMONTIC TANGER
OUAFIQ Majda
2021-2022
HTML5
HTML signifie HyperText Markup Language
HTML est le langage de balisage standard pour la création de pages Web
HTML décrit la structure d'une page Web (la mise en page)
Les Editeurs
On peut toujours créer un document HTML avec un éditeur normal en tapant
https://code.visualstudio.com/download
Document HTML Simple
Document HTML Simple
<!DOCTYPE html> : déclaration définit que ce document est un document
HTML5
<html> : l'élément racine d'une page HTML
<head> : contient des méta-informations (données sur des données) sur la page
HTML
< meta > : fournit des métadonnées sur le document HTML.
<title> : spécifie un titre pour la page HTML (qui est affiché dans la barre de
titre du navigateur ou dans l'onglet de la page)
<body> : définit le corps du document et est un conteneur pour tous les
contenus visibles, tels que les en-têtes, les paragraphes, les images, les
hyperliens, les tableaux, les listes, etc.
Un contenu;
Les métadonnées ne seront pas affichées sur la page, mais seulement interprétables
les mots clés, l’auteur du document, dernière modification ou mise à jour, et autres
métadonnées.
Les métadonnées peuvent être utilisées par les navigateurs (comment afficher le
META
Attribut Valeur Description
charset character_set Spécifie l’encodage des caractères du document HTML
Valeurs les plus utilisées:
UTF-8 : Unicode
ISO-8859-1 : Latin alphabet
<meta charset="UTF-8">
name application-name Spécifie un nom pour les métadonnées author <meta name="description"
content="Programmation Web"> description <meta name="keywords"
content="HTML,CSS,JavaScript"> generator <meta name="author"
content="OUAFIQ">
keywords <meta name="viewport" content="width=device-width, initialviewport scale=1.0">
http-equiv content-type Permet de donner des instructions pour la gestion du document, représente un
default-style objet pouvant modifier le comportement des serveurs refresh
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="refresh" content="30">
content text Donne la valeur associée à l'attribut name ou http-equiv
<meta name="author" content="OUAFIQ">
<meta http-equiv="refresh" content="30">
BODY
cette balise permet de délimiter la partie visible d'un document et de définir quelques
paramètres généraux du document (essentiellement des couleurs). elle possède les
attributs suivants :
attribut alink : permet de préciser la couleur des liens actifs, c'est-à-dire sur lequel on
est en train de cliquer.
attribut background : avec cet attribut, on indique le nom d'une image à utiliser
comme fond d'écran pour le document.
attribut bgcolor : permet de préciser la couleur utilisée pour le fond du document. on
indique soit le nom de la couleur, soit son codage rgb. attribut link : permet de
préciser la couleur des liens présents dans le document.
attribut text : permet de préciser la couleur du texte dans le document.
attribut vlink : permet de préciser la couleur des liens faisant référence à une adresse
déjà visitée.
Exemple:
Balises de Listes HTML
3. Listes de description HTML
Une liste de description est une liste de termes, avec une description de chaque terme.
La balise <dl> définit la liste de description, la balise <dt> définit le terme (nom) et la
balise <dd> décrit chaque terme .
Exemple:
Les liens hypertexte
1. Liens hypertexte
Les liens se trouvent dans presque toutes les pages Web. Les liens permettent aux
utilisateurs de cliquer sur leur chemin de page en page.
Les liens HTML sont des hyperliens.
Lorsque vous déplacez la souris sur un lien, la flèche de la souris se transforme en
une petite main.
Remarque : Un lien ne doit pas nécessairement être du texte. Un lien peut être une
image ou tout autre élément HTML !
2. Syntaxe
La balise <a> définit un lien hypertexte. Il a la syntaxe suivante :
<a href="url">link text</a>
2. URL absolues vs URL relatives
Les liens hypertexte
URL Absolues : équivalent à une URL, à utiliser lorsque le document appelé n’est pas
situé sur le même site que le document appelant.
URL Relatifs : à utiliser lorsque le document appelé est situé sur le même site que le
document appelant
Exemple
<h2>Absolute URLs</h2>
<p><a href="https://www.site.com/">site.com</a></p>
<p><a href="https://www.google.com/">Google.com</a></p>
<h2>Relative URLs</h2>
<p><a href="html_images.html">HTML Images</a></p>
<p><a href="/css/default.html">CSS Tutorial</a></p>
3. Lien externe
Les liens hypertexte
Par défaut, la page liée sera affichée dans la fenêtre actuelle du navigateur. Pour
changer cela, vous devez spécifier une autre cible pour le lien.
L'attribut target spécifie où ouvrir le document lié.
L'attribut target peut avoir l'une des valeurs suivantes :
_self- Par défaut. Ouvre le document dans la même fenêtre/onglet que celui sur
lequel vous avez cliqué
_blank - Ouvre le document dans une nouvelle fenêtre ou un nouvel onglet
_parent - Ouvre le document dans le cadre parent
_top - Ouvre le document dans tout le corps de la fenêtre
Exemple
<a href="https://www.site.com/" target="_blank">Visit site!</a>
Les liens hypertexte
3 . Lien externe
Les liens hypertexte
4. Lien interne
Lien qui amène à un endroit spécifique de la page HTML en cours.
L'attribut id permet de nommer un endroit du document pour y faire référence ensuite.
L'utilisation de la balise A avec cet attribut n'a pas d'effet visible sur le document ; en
particulier, il n'y a pas de lien hypertexte produit. En tout début de page, on peut par
exemple placer le code suivant. <h1 id="haut" >titre de la page</h1>
Cela permettra dans la suite de faire des liens vers ce haut de page.
Pour faire référence à une ancre interne à la page, on donne dans HREF le nom
attribué à l'ancre avec l'attribut ID précédé du symbole #.
Retour en<a href="#haut">haut de la page</a>.
Retour en haut de la page
Les liens hypertexte
5. Lien vers une adresse e-mail
Utilisez mailto: à l'intérieur de l'attribut href pour créer un lien qui ouvre le
programme de messagerie de l'utilisateur (pour lui permettre d'envoyer un nouvel
mail) :
<a href="mailto:someone@example.com">Send email</a>
Liens hypertextes dans les images
Avec les liens hypertextes , vous pouvez créer des zones cliquables sur une image.
La balise <map> permet de définir une image cliquable. Une image cliquable est une
image avec des zones cliquables. Les zones sont définies avec une ou plusieurs
balises <area>.
L'idée derrière une image cliquable est que vous devriez être capable d'effectuer
différentes actions selon l'endroit où vous cliquez sur l'image.
Pour créer une image cliquable, vous avez besoin d'une image et d'un code HTML
décrivant les zones cliquables.
L'image est insérée à l'aide de la balise <img>. La seule différence avec les autres
images est que vous devez ajouter un attribut usemap.
La valeur usemap commence par une balise de hachage # suivie du nom de l'image
cliquable et est utilisée pour créer une relation entre l'image et l'image cliquable.
Liens hypertextes dans les images
Exemple:
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
L'élément <source> vous permet de spécifier des fichiers vidéo alternatifs parmi
lesquels le navigateur peut choisir. Le navigateur utilisera le premier format reconnu.
Multimédia en HTML-Video
Le texte entre les balises <video> et </video> ne sera affiché que dans les
navigateurs qui ne prennent pas en charge l'élément <video>.
Exemple:
Youtube
La conversion de vidéos en différents formats peut être difficile et prendre du temps,
une solution plus simple consiste à laisser YouTube lire les vidéos de votre page Web.
YouTube affichera un identifiant (comme tgbNymZ7vqY), lorsque vous lisez une
Multimédia en
vidéo, vous pouvez utiliser cet identifiant et faire référence à votre vidéo dans le code
HTML en utilisant la balise <iframe> Exemple:
<header> <figcaption>
<nav> <footer>
<section> <details>
<article> <summary>
<aside> <mark>
Les éléments sémantiques -
<figure> <time>
HEADER
L'élément <header> spécifie une en-tête d'un document ou d'une section.
L’élément header représente l’en-tête de nos pages. Cet élément va généralement
contenir le logo du site et le menu principal de navigation.
Vous pouvez avoir plusieurs éléments <header> en un seul document.
<article>
<header>
<h1>Internet Explorer 9</h1>
<p><time pubdate datetime="2015-03-15"></time></p>
</header>
<p>Windows Internet Explorer 9 (abbreviated as IE9) was
released to the public on March 14, 2011 at 21:00 PDT.....</p>
</article>
Les éléments sémantiques
- NAV
L'élément <nav> définit un ensemble de liens de navigation.
Nous allons par exemple pouvoir utiliser cet élément pour entourer le menu de nos
pages.
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
Les éléments sémantiques
<a href="/jquery/">jQuery</a>
</nav>
MAIN
L’élément main représente le contenu principal ou « majoritaire » du body. La
zone de contenu principale d’un document comprend un contenu unique à ce
document et exclut le contenu répété sur un ensemble de documents, tels que des
liens de navigation de site, des informations de copyright, des logos de site et des
bannières. La spécification officielle (HTML5.1) indique que l’élément main ne
Les éléments sémantiques -
doit pas être imbriqué dans un autre élément structurant et qu’on ne doit utiliser
qu’un élément main par page.
– ARTICLE
L’élément article représente une partie indépendante d’une page. Nous utiliserons
cet élément pour entourer du contenu qui pourrait être extrait de notre page et
distribué ailleurs tout en continuant à faire du sens.
Imaginez par exemple une page catégorie d’un blog qui affiche les différents articles
de la catégorie. Chacun des différents articles n’a pas besoin des autres ou du reste
de la page pour faire du sens et pourrait tout à fait être extrait de la page et intégré
Les éléments sémantiques
sur un autre site et rester tout à fait lisible. Dans ce cas-là, il serait donc intéressant
de placer chaque article dans un élément article.
SECTION
L’élément section représente à nouveau une partie d’une page cohérente mais qui ne
va pas forcément faire du sens si on l’extrait seule de la page pour l’intégrer ailleurs.
L’élément section est à mi-chemin entre les éléments article et div et nous pourrons
nous en servir pour organiser nos pages.
Un cas classique d’utilisation de section est le cas d’une page de présentation d’une
entreprise. Sur ce type de pages, il y a généralement une partie dédiée à la
Les éléments sémantiques -
présentation de l’activité de l’entreprise, une autre partie pour l’équipe, etc. Nous
pourrons ici encadrer chaque partie avec un élément section pour les séparer les unes
des autres.
Il va être tout à fait possible d’inclure un ou plusieurs éléments section dans un
élément article si on souhaite diviser le contenu de notre article en plusieurs parties.
- ASIDE
L’élément aside permet d’indiquer un contenu en marge du reste de la page, c’est-
àdire différent du reste de la page. Imaginons par exemple que nous ayons un blog et
que chaque article de blog se trouve dans un élément article.
Les éléments sémantiques
Dans nos articles, nous affichons des publicités. Les publicités n’ont aucune
cohérence avec le contenu de l’article (ou tout au moins ne sont pas utiles à l’article).
Nous pourrons donc les placer dans un élément aside pour le signaler aux moteurs de
recherche et autres types de robots.
Les éléments sémantiques - FOOTER
L’élément footer va avoir un rôle et une signification sémantique identiques à
l’élément header. Comme son nom l’indique, nous utiliserons cet élément pour
entourer les informations de pied de page (notice de copyright, menu de navigation
bas, etc.).
Les éléments sémantiques -
Les éléments sémantiques
TIME
L’élément time va pouvoir représenter soit une heure de la journée soit une date
complète. Il faut savoir que les dates sont très difficiles à analyser pour les robots
car la plupart des auteurs utilisent des syntaxes différentes dans l’écriture d’un
moment de la journée ou d’une date.
Les éléments sémantiques -
Pour cette raison, nous allons ajouter un attribut datetime à l’élément time. Nous
allons ensuite simplement passer une date en valeur de cet attribut en respectant
le format yyyy-mm-dd hh:mmTIMEZONE.
La date devra être au format 24h et le timezone va être exprimé par rapport à GMT
(on écrira donc +01 pour Casablanca par exemple).
Les éléments sémantiques -
FIGURE
La balise <figure> spécifie contenu autonome, comme illustrations, schémas,
photos, listes de codes, etc…
Alors que le contenu de l'élément <figure> est liée au flux principal, la position est
indépendante du flux principal, et s'il a été retiré, il ne devrait pas affecter le flux du
document.
La balise <figcaption> définit une légende pour un élément <figure>.
<p>The Pulpit Rock is a massive cliff 604 metres (1982 feet) above Lysefjorden,
opposite the Kjerag plateau, in Forsand, Ryfylke, Norway. The top of the cliff is
approximately 25 by 25 metres (82 by 82 feet) square and almost flat, and is a
famous tourist attraction in Norway.</p>
<figure>
<img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
Les éléments sémantiques -
<figcaption>Fig.1 - The Pulpit Rock, Norway.</figcaption>
</figure>
DETAILS
La balise <details> spécifie des détails supplémentaires, que l'utilisateur peut afficher
ou masquer à la demande.
La balise <details> peut être utilisé pour créer un widget interactif que l'utilisateur
peut ouvrir et fermer. Tout type de contenu peut être mis à l'intérieur de la balise
<details>.
Le contenu d'un élément <details> ne doit pas être visible sauf si l'attribut open est
défini.
La balise <summary> définit une en-tête visible de l'élément <details>. Le titre peut
être cliqué pour voir /
cacher les détails.
<details><summary>Copyright 1999-2014.</summary>
<p>All content and graphics on this web site are the property of the company Refsnes
Data.</p>
</details>
Les Formulaires
Un formulaire HTML est utilisé pour collecter les entrées de l'utilisateur. L'entrée
utilisateur est le plus souvent envoyée à un serveur pour traitement.
Exemple:
Les éléments sémantiques -
Les Formulaires - form
L'élément <form> est un conteneur pour différents types d'éléments de saisie, tels
que : des champs de texte, des cases à cocher, des boutons radio, des boutons de
soumission, etc.
ses principaux attributs:
Attribut action : L'attribut action définit l'action à effectuer lors de la soumission
du formulaire. Habituellement, les données du formulaire sont envoyées à un
fichier sur le serveur lorsque l'utilisateur clique sur le bouton d'envoi.
Exemple:
Dans l'exemple ci-dessous, les données du formulaire sont envoyées à un fichier
appelé "page_action.php". Ce fichier contient un code côté serveur qui gère les
données du formulaire :
<form action="page_action.php">
Les Formulaires - form
Nom<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
</form>
Exemple:
<form action="action_page.php" autocomplete="on">
Les Formulaires - form
L'attribut novalidate: est un attribut booléen.Lorsqu'il est présent, il spécifie que
les données de formulaire (entrée) ne doivent pas être validées lors de la
soumission.
Exemple:
<form action="action_page.php" novalidate>
textarea
La balise textarea: permet de créer dans un formulaire une zone de saisie s'étendant
sur plusieurs lignes.
attribut name : avec l'attribut name, on nomme l'entrée de la balise textarea ; cela
est utile pour les traitements ultérieurs du formulaire.
attribut cols : spécifie le nombre de colonnes (en nombre de caractères) de la zone
de saisie.
attribut rows : spécifie le nombre de lignes de la zone de saisie.
Syntaxe:
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
Les Formulaires-select
La balise select permet de définir une liste déroulante dans un formulaire.
attribut name : avec l'attribut name, on nomme l'entrée de la balise select ; cela est
utile pour les traitements ultérieurs du formulaire.
attribut multiple : indique que les réponses multiples sont autorisées (par défaut,
une seule réponse est possible).
Attribut size: Nombre de lignes affichées, une par défaut.
La balise option : permet de définir un item dans une liste déroulante.
Les Formulaires -
attri
but value : permet de préciser la valeur associée à l'item.
attribut selected : indique que cet item est choisi par défaut
Syntaxe:
<select> <option> ….</option> ... </select>
datalist
La balise datalist spécifie une liste d'options pré-définies pour un élément <input>.
Elle est utilisée pour fournir une saisie « semi-automatique » dans <input> éléments.
<form action="" method="get">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>
Les Formulaires -
button
La balise button définit un bouton cliquable.
À l'intérieur d'un élément <button>, vous pouvez mettre du texte (et des balises
comme <i>, <b>, <strong>, <br>, <img>, etc.). Ce n'est pas possible avec un bouton
créé avec l'élément <input>!
Exemple:
<button type="submit" form="form1" >Click Me!</button>
fieldset, legend
Les Formulaires –
L'élément <fieldset> est utilisé pour regrouper les données associées dans un
formulaire.
L'élément <legend> définit une légende pour l' élément <fieldset> .
Exemple:
<form action="/action_page.php">
<fieldset>
<legend>Informations Personnelles:</legend>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</fieldset>
Les Formulaires -
</form>
Balise(HTML5)
Color : Select your favorite color: <input type="color" name="favcolor">
Attributs(HTML5)
Attribut formaction: spécifie l'URL d'un fichier qui va traiter les données lorsque le
formulaire est soumis
<form action="demo_form.asp">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit"><br>
<input type="submit" formaction="demo_admin.asp"
value="Submit as admin">
</form>
Les Formulaires –
Attribut height et width
<input type="image" src="img_submit.gif" alt="Submit" width="48"
height="48">
Attributs(HTML5)
Attribut min et max
Enter a date before 1980-01-01: <input type="date" name="bday" max="1979-
1231">
Enter a date after 2000-01-01: <input type="date" name="bday" min="2000-01-
02">
Quantity (between 1 and 5): <input type="number" name="quantity" min="1"
max="5">
Les Formulaires –
Attribut multiple: pour file
Select images: <input type="file" name="img" multiple>