Développement
web
Professeur : Amira BOUIRI
Les éléments HTML5
1
Eléments et structure d’une
page HTML5
2
Travailler avec les éléments
(1)
Un élément est composé d'une
balise ouvrante, d’une balise fermante
et le contenu entre les deux balises.
Soit l’exemple suivant :
On a deux éléments imbriqués :
Un élément div commençant par la balise <div> et
se terminant par la balise </div> et contenant du
texte dont une partie est encapsulée dans un
autre élément (enfant).
Un élément b commençant par la balise <b> et se
terminant par la balise </b> et contenant du
texte uniquement.
3
Travailler avec les éléments
(2)
Les noms des balises HTML ne sont pas sensibles à
la casse mais il est recommandé d’utiliser des
minuscules (recommandation du W3C depuis la
version HTML 4.01).
Si vous travaillez sur une ancienne page web, vous
pourriez remarquer qu'il a été écrit utilisant des
noms de balises majuscules : Les navigateurs
traiteront le balises <b> et <B> de la même
façon.
HTML5 a plus de 100 éléments définis que vous
pouvez utiliser pour créer des pages et des
applications web riches.
Vous trouverez une liste de tous les éléments
4 définis par le W3C à l’adresse :
Ajouter des attributs aux
éléments
La balise ouvrante d’un élément peut contenir des
informations supplémentaire sous la forme d’un
ou plusieurs attributs.
Un attribut est une paire nom="valeur" où le nom
est unique dans une même balise et la valeur est
toujours incluse entre deux guillemets ou deux
quottes simples.
Vous pouvez aussi avoir des attributs Booléens qui
contiennent le nom d'attribut, mais aucune valeur
(Exemples : checked, selected, disabled, readonly)
.
5
Les balises auto-
fermantes
Tout élément vide (sans contenu) peut
être représenté par une seule balise auto-
fermante (exemple <br />).
qui sont
Les éléments devrait d'avoir
vides qui sont capables avoir
dudes
momentanément
contenu, mais vides balises
fermantes séparées.
Exemple :
<div> </div>
ou encore
<script src="[Link]">
</script>
6
Ajouter des attributs
personnalisés (expando
attributes)
Expando attributes sont des attributs que vous
définissez vous même.
Expando attributes sont connus comme attributs
définis par l'auteur du document HTML ou
simplement comme attributs personnalisés.
Quand vous voulez attacher des données à une
balise HTML, vous pouvez juste créer un attribut
avec le nom de votre choix et assigner les
données.
Cependant, le nom que vous créez pourrait être en
conflit avec un autre attribut défini par le W3C (ou
qui sera défini dans les prochaines spécifications).
Pour éviter tout conflit, il est recommandé
d’assigner un nom qui est préfixé par "data-"
7
(Exempe : data-code = "123").
Ajouter des
commentaires
Pour ajouterdes commentaires, utilisezla
suivante
vous : syntaxe
<!-- Mettre un commentaire -->
Aucun espace n’est autorisé entre <!
et -- au débutdu commentaire.
Les espaces sont cependant possibles entre le --
et > à la fin du commentaire.
8
Structure de base d’un document
HTML
La structure de
base
9
Structure de base d’une page
HTML5
<!DOCTYPE html>
Elle est indispensable car c'est elle qui indique qu'il s'agit bien d'une
page web HTML5.
Auparavant : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN" "[Link]
La balise </html>
<html></html> : C'est la balise principale du code. Elle englobe tout le
contenu de la page.
L'en-tête <head> et le corps <body> : Une page web est
constituée de deux parties :
L'en-tête <head> :
cette section donne quelques informations générales sur la page
comme son titre, l'encodage, etc. Cette section est généralement
assez courte. Les informations que contient l'en-tête ne sont pas
affichées sur la page, ce sont simplement des informations
générales à destination de l'ordinateur. Elles sont cependant très
importantes !
Le corps <body> :
1
c'est là que se trouve la partie principale de la page. Tout ce qui est
0 écrit ici sera affiché à l'écran.
Structure de base d’une page
HTML5
L'encodage (charset)
<meta charset="utf-8" /> : Cette balise indique l'encodage utilisé
dans le fichier .html.
L'encodage indique la façon dont le fichier est enregistré. C'est lui
qui détermine comment les caractères spéciaux vont s'afficher
(accents, idéogrammes chinois et japonais, caractères arabes,
etc.).
Le titre principal de la page
<title> : C'est le titre de la page.
Il faut savoir que le titre apparaît aussi dans les résultats de
recherche
1
1
Les balises META
Les balises META servent à placer des
métadonnées (metadata) dans une page HTML.
On placera ces informations dans l’élément head,
et elles ne seront pas affichées sur la page.
À qui sont destinées ces informations?
aux navigateurs web
aux moteurs de recherche;
plus largement, à tous les outils d’indexation,
c’est-à-dire tous les outils qui analysent vos pages
pour y identifier diverses informations.
1
2
Les balises META
name
content-Type : Indique la nature du document et le jeux de
caractères utilisés.
decription : Contient la description de votre page. Bien
qu’elle ne soit pas affiché, elle sera affiché dans les
recherches Google, juste sous le titre de la page.
keywords : cette balise contient en général tous les mots-
clés ou expressions-clés de la page. Ils devront être séparé
d’une virgule.
robots : Elle sert à « communiquer » avec les robots des
moteurs de recherches. En effet, Google, Yahoo, bing … ont
des robots qui parcourent le web et enregistrent les pages
web des sites. Ils vont de site en site en suivant les liens.
Dans cette balise <robots>, on indique à ces robots si on
souhaite qu’ils enregistrent ou non la page ainsi que s’ils
doivent ou non suivre les liens de cette page. A noter qu’on
peut définir individuellement chaque lien et son suivi grâce
1
à l’attribut « NoFollow ».
3
Les balises META
author : le nom de l’auteur de la page.
<meta name=author content="Mark Allen">
copyright
<meta name=copyright content="Copyright 2000, Mark Allen">
http-equiv
refresh : le navigateur va recharger la page après une durée de
temps spécifie en seconde. <META HTTP-EQUIV=refresh
CONTENT=45>
reply-to : elle permet d’envoyer un email à le responsible du site.
Ex: <META HTTP-EQUIV=reply-to CONTENT="ctdp@t
[Link]">
content : specification du type d’écriture
dans ce document. Ex : text/HTML.
1
4
Les balises META
1
5
Utilisation des caractères spéciaux (HTML
Entities)
1
6
Intégrer du code HTML à l’aide de
<iframe>
Vous pouvez utiliser l'élément <iframe > pour
intégrer un cadre qui contient un document HTML
dans le document HTML actuel.
c'est un élément qui permet
d'insérer une page Web dans une autre
Ceci peut être utile quand vous voulez réutiliser du
code HTML sur votre site; par exemple, quand
vous voulez créer un en-tête commun qui
s’affichera sur toutes les pages de votre site Web.
Ceci peut aussi être utile quand vous voulez inclure
une page HTML d'un autre site web dans votre
page.
1
7
Les
paragraphes
Lorsqu'on écrit du texte dans une page web, on le
fait à l'intérieur de paragraphes. Le langage HTML
propose justement la balise <p> pour délimiter
les paragraphes.
Chaque nouveau paragraphe produit un saut de
ligne. Pour un simple retour à la ligne à l’intérieur
d’un même paragraphe, on a la balise orpheline
<br/>.
1
8
Les
titres
En HTML, on a le droit d'utiliser six niveaux de titres
différents.
<h1> </h1> : signifie « titre très important ». En
général, on s'en sert pour afficher le titre de la page
au début de celle-ci.
<h2> </h2> : signifie « titre important ».
<h3> </h3> : pareil, c'est un titre un peu moins
important (on peut dire un « sous-titre » si vous
voulez).
<h4> </h4> : titre encore moins important.
<h5> </h5> : titre pas important.
<h6> </h6> : titre pas important du tout.
Attention :
ne confondez pas avec la balise <title>. La balise
<title> affiche le titre de la page dans la barre de titre
1
9 du navigateur comme nous l'avons vu. Les titres <h1>
Les
titres
2
0
Les
hyperliens
L'élément <a> permet de créer :
un lien à un document HTML externe (lien
externe)
Un saut à un emplacement dans le
document HTML actuel (ancre interne)
Syntaxe d’un lien externe :
2
1
ancre
interne
Il s’agit d’un point de repère dans les
pages HTML.
<h2 id="mon_ancre">Titre</h2>
<a href="#mon_ancre">Aller vers
l'ancre</a>
2
2
Envoyer des emails avec les
hyperliens
2
3
Les listes
(1)
Les liste
ordonnées :
Attributs acceptés :
Start : Définir le numéro de départ
Type : Définir le type de la liste ; peut être
“1”,“A”,“a”, or “I”
2
4
Les listes
(2)
Les liste non
ordonnées :
2
5
Les listes
(3)
Les listes de
description :
2
6
Les
tableaux
Le tableau se défini grâce à la balise <TABLE> qui
doit absolument être refermée : </TABLE>.
Il faut commencer par ouvrir une balise <TR> pour
commencer une ligne et la refermer </TR> pour
terminer la ligne.
Mais cela ne suffit toujours pas à la création d'un
tableau car il faut également définir les colonnes.
Le couple <TD> et </TD> correspond à la
colonne. A l'intérieur d'une ligne (couple <TR>
</TR>), il faut placer autant de couples <TD>
</TD> qu'il y a de colonnes dans le tableau.
Attention :
il faut donc mettre un même nombre de colonnes
dans chaque ligne.
2
7
Les
tableaux
2
8
Les
tableaux
2
9
Fusionner lignes et
colonnes
Un atout très intéressant :
pouvoir fusionner des cellules au
niveau d'une ligne ou d'une colonne ou
même les deux grâce aux attributs respectifs
COLSPAN=x et ROWSPAN=y
où x et y représentent le
nombre de cellules à fusionner sur
l'axe des lignes ou des colonnes.
Ces attributs sont valables pour les balises <TD>
et <TH>.
Attention :
Surtout ne pas oublier de ne pas écrire le couple
<TD> </TD> correspondant à une cellule que l'on
3
0 aura fusionnée avec une autre écrite
Fusionner lignes et
colonnes
3
1
Fusionner lignes et
colonnes
3
2
Les
images
src : permet d’indiquer la source de l’image
alt : texte alternatif, lorsque l’image ne se
télécharge pas, le texte alternatif s’affiche.
Ajouter une info bulle : L'attribut permettant
d'afficher une bulle d'aide est le même que pour
les liens : il s'agit de title. Cet attribut est
facultatif
Les images doivent être situés dans des
paragraphes.
3
3
Les balise <div> et
<span>
La balise <div> définit une division ou une section, appelé
aussi calque, dans un document HTML. Il s’agit d’un bloc.
La balise <div> est utilisée pour regrouper des éléments
sous forme de bloc et ainsi pouvoir les formater en CSS.
Remarque :
Les navigateurs placenttoujours un saut
de ligne avant et après un élément <div>.
La balise <span> est inline, elle s'inscrit dans le flux du
contenu, peut être répartie sur plusieurs lignes.
On ne peut lui spécifier une hauteur ni une largeur ni
l'entourer d'une marge.
Elle peut être placée à l'intérieur d'un paragraphe pour
délimiter une partie de celui-ci sans affecter en soi
l'apparence du texte.
<span> n'a pas de saut de ligne.
3
4
Les balises sémantiques
de HTML5
3
5
Introduction aux balises
sémantiquessur
HTML5 la séparation
insiste
présentation entre la structure, la le
laquelle il faut comportement,
adhérer. une bonne
et
La sémantique pratique à
est définie comme l'étude de
signification d'expressions linguistiques.
Dans le contexte de HTML, cela signifie que les
balises doivent fournir une signification au
contenu intégré dans le document de HTML.
En HTML5, Les balises ne fournissent pas de
présentation mais elles fournissent la
signification.
3
6
Introduction aux balises
sémantiques
Fichier HTML Fichier CSS Fichier JAVASCRIPT
Fournir une Gérer la Gérer le
structure présentation du comportement du
significative. document HTML. document HTML.
3
7
Pourquoi les balises
sémantiques?
Donner plus de sens à la structure de la page
HTML (les noms des balises sémantiques ont été
choisis à partir des id les plus utilisés).
Aider les web crawlers (robot d’indexation) à
mieux interpréter vos pages web
Aider les lecteurs d’écrans à mieux lire le contenu
de vos pages web
3
8
Les balises sémantiques
(1)
3
9
Les balises sémantiques
(2)
Voici un schéma basique d'un découpage d'une
page HTML5.
Il ne s'agit pas d'une règle fixe mais juste d'un
exemple.
4
0
Les balises sémantiques
(3)
Voici un schéma basique d'un découpage d'une
page HTML5.
Il ne s'agit pas d'une règle fixe mais juste d'un
exemple.
4
1
Les balises sémantiques
(4)
Voici le code HTML de l’exemple
précédent :
4
2
La balise sémantique :
<section>
C'est la plus générique : elle est utilisée lorsqu'aucun autre
élément de section n'a pu lui être préféré.
Il ne faut cependant pas la confondre avec l'élément div qui
n'a aucune valeur sémantique. Les deux ne sont pas
interchangeables.
La section regroupe un ensemble de contenu d'une même
thématique, ou bien un ensemble d'éléments offrant une
fonctionnalité spécifique dans une application web.
4
3
La balise sémantique :
<article>
L'élément <article>, possède une plus forte valeur
sémantique.
Il vise à baliser des blocs de contenu utiles que l'on pourrait
extraire du document tout en conservant leur sens et leurs
informations.
Il est fréquent qu'il soit présent au côté d'autres frères dans
un même document.
Des éléments <article> dans un parent <article> sont
censés représenter des blocs de commentaires relatifs à cet
élément parent.
4
4
La balise sémantique :
<aside>
L'élément <aside> est destiné au contenu indirectement lié
à l'article lui- même : il représente ce qui l'entoure, de façon
annexe.
Par exemple, on pourra s'en servir pour proposer la définition
d'un terme, une biographie de l'auteur de l'article, un
glossaire, préciser des sources, une liste d'articles en
relation... aside n'est donc pas forcément dédié au seul
usage d'une barre de contenu latérale.
4
5
La balise sémantique :
<header>
L'élément <header> représente l'en-tête d'une section
(section, article...) ou d'une page entière.
Il peut contenir un logo, un ou
plusieurs titres, d'autres informations
d'introduction, une navigation, un formulaire de recherche
général.
4
6
La balise sémantique :
<footer>
L'élément <footer> représente le pied de page, ou bien la
conclusion d'une section.
On y place des informations concernant l'auteur, des
mentions légales, une navigation ou une pagination (en
combinaison avec <nav>), un logo de rappel, des
coordonnées, des dates de publication.
4
7
La balise sémantique :
<nav>
L'élément <nav> est une section de liens de navigation.
On peut l'utiliser pour la navigation
principale, mais également pour d'autres parties du
document devant lister des liens de navigation interne.
4
8
Les balises de type block et
inline
block : une balise de type block sur la page web crée
automatiquement un retour à la ligne avant et après. La
page web sera constituée d'une série de blocs les uns à la
l'intérieur
suite des autres.d'unEt il est possible
va augmenter
de mettre un bloc à
autre, ce qui considérablement nos le
h1, p, ul, ol, dl, table, pour
possibilités blockquote,…)design du site. (ex
inline :créer
une balise de type inline se trouve: obligatoirement à
l'intérieur d'une balise block. Une balise inline ne crée pas
de retour à la ligne, le texte qui se trouve à l'intérieur s'écrit
donc à la suite du texte précédent, sur la même ligne. (a,
img, strong, em,…)
La balise <div> définit une division ou une section, appelé
aussi calque, dans un document HTML.
Elle est utilisée pour regrouper des éléments sous forme de
bloc et ainsi pouvoir les formater en CSS.
Remarque : Les navigateurs placent toujours un saut de
4
ligne
9 avant et
Les balises de type block et
inline
Les caractéristiques d'un élément de type block :
Les éléments de type block peuvent
contenir à la fois d'autres éléments
de type block, des éléments de type inline ou du texte.
Il est possible de fixer une largeur et une hauteur à ces éléments
Par défaut, la largeur d'un élément de type block est aussi grande
que celle de son conteneur
Ils s'empilent naturellement les uns au-dessus des autres, dans
l'ordre du flux HTML.
Les caractéristiques d'un élément de type inline :
Les éléments de type inline ne peuvent contenir que d'autres
éléments de type inline ou du texte
Il n'est pas possible de définir une largeur et une hauteur explicite
pour ces éléments
Par défaut, leur largeur et leur hauteur dépendent du contenue de
l'élément
5 Ils s'écoulent selon le flux du texte HTML
0
Annotation du contenu
5
1
Annotation du contenu
(1)
En annotant le contenu en utilisant des éléments
HTML5, il faut savoir que les éléments <b> et
<i> sont toujours disponible, mais ont
maintenant une nouvelle signification.
Utilisation de l’élément <b> :
L'élément <b> représente un span de texte
auquel l'attention est tirée sans transmettre
n'importe quelle importance supplémentaire.
Utilisation de l’élément <i> :
L'élément <i> représente également un
span de texte avec une attention un peu plus
importante que l’élément <b>
Utilisation de l’élément <em> :
Selon le W3C, l'élément <em> représente
également un span de texte avec une attention
encore plus importante.
<abbr> : pour abbréviation.
5
2
Annotation du contenu
(2)
<address> : définir les coordonnées
d’un contact.
5
3
Annotation du contenu
(3)
<blockquote> : Une longue citation (sur
plusieurs lignes).
<q> : Une courte citation (sur une seule
ligne).
<cite> : nom de l’oeuvre objet de la citation.
5
4
Annotation du contenu
(4)
<br /> : Retour à la ligne immédiat.
<wbr /> : Retour à la ligne possible (le
navigateur décide).
<dfn> : définition d’un terme
5
5
Annotation du contenu
(5)
<summary> et <detail> : détail accessible si
nécessaire.
<s> Indique un texte effacé (qui n’est plus
valide).
<u> Même effet que le <b> sauf que par
défaut le texte est souligné.
<mark> Marque un span de texte.
<ins> Indique un texte inséré.
<del> Indique un texte supprimé.
<small> Indique une écriture fine.
<sub> Indique un subscript.
<sup> Indique un superscript.
5 <time> Dénote le temps
6
Les balises multimedia
5
7
Les balises multimédias
(1)
Éléments <figure> et <figcaption>
La balise <figure> définit un contenu
autonome, comme des illustrations, des
diagrammes, des photos, des listes de codes, etc.
Pour ajouter une légende, utilisez la balise
<figcaption> à l'intérieur de la balise <figure>
<figure class="center">
<figcaption>
<p>Un diagramme circulaire de
statistiques</p>
</figcaption>
<p><img alt="" src="url" ></p>
</figure>
5
8
Les balises multimédias
(2)
Élément
<audio>
Sans l’attribut « controls », le navigateur va seulement
télécharger les informations générales sur le fichier (on
parle de métadonnées) mais il ne se passera rien de
particulier.
5
9
Les balises multimédias
(3)
Liste des attributs liés à la balise <audio> :
controls : pour ajouter les boutons « Lecture », « Pause » et la barre de
défilement. Cela peut sembler indispensable, mais certains sites web
préfèrent créer eux-mêmes leurs propres boutons et commander la lecture
avec du JavaScript.
width : pour modifier la largeur de l'outil de lecture audio.
loop : la musique sera jouée en boucle.
autoplay : la musique sera jouée dès le chargement de la page.
preload : indique si la musique peut être pré chargée dès le chargement de
la page ou non. Cet attribut peut prendre les valeurs :
auto (par défaut) : le navigateur décide s'il doit pré charger toute la
musique, uniquement les métadonnées ou rien du tout.
metadata : charge uniquement les métadonnées (durée, etc.).
none : pas de pré chargement. Utile si on ne veut pas gaspiller de bande
passante sur votre site.
6
0
Les balises multimédias
(4)
Élément
<video>
L'attribut src définit bien entendu l'adresse du
fichier vidéo.
Si vous indiquez les dimensions avec les
attributs height et width, c'est encore mieux,
et si tout va bien, un élément devrait
s'afficher dans le navigateur... pour peu que
celui-ci supporte le format de vidéo indiqué
dans la source.
6
1
Les balises multimédias
(5)
Liste des attributs liés à la balise <video> :
poster : image à afficher à la place de la vidéo tant que celle-ci
n'est pas lancée. Par défaut, le navigateur prend la première image
de la vidéo.
controls : pour ajouter les boutons «
Lecture », « Pause » et la barre de
défilement.
width : pour modifier la largeur de la vidéo.
height : pour modifier la hauteur de la vidéo.
loop : la vidéo sera jouée en boucle.
autoplay : la vidéo sera jouée dès le chargement de la page.
preload : indique si la vidéo peut être pré chargée dès le
chargement de la page ou non. Cet attribut peut prendre les
valeurs :
auto (par défaut) : le navigateur décide s'il doit pré charger toute
la vidéo, uniquement les métadonnées ou rien du tout.
metadata : charge uniquement les métadonnées (durée,
dimensions, etc.).
6
2 none : pas de pré chargement.
Les balises multimédias
(6)
Tous les navigateurs ne supportent pas les mêmes
formats vidéos, il est donc recommandé d’offrir
plusieurs formats de votre vidéo comme suit :
Pour convertir votre vidéo, plusieurs outils
gratuits peuvent être utilisés
tel que : Format
Factory (
[Link]
harger-
6
3 34059936-format-factory)
Les balises multimédias
(7)
En résumé :
Insérer de la musique ou de la vidéo n'était pas possible autrefois en
HTML. Il fallait recourir à un plugin comme Flash.
Depuis HTML5, les balises <audio> et <video> ont été introduites et
permettent de jouer de la musique et des vidéos sans plugin.
Il existe plusieurs formats audio et vidéo.
Aucun format n'est reconnu par l'ensemble des navigateurs : il faut
proposer différentes versions de sa musique ou de sa vidéo pour
satisfaire tous les navigateurs.
Il faut ajouter l'attribut controls aux balises <audio> et <video> pour
permettre au visiteur de lancer ou d'arrêter le média.
Ces balises ne sont pas conçues pour empêcher le téléchargement de
la musique et de la vidéo. Vous ne pouvez pas protéger votre média
contre la copie.
6
4