HTML
Hyper Text Markup Language
HTML ?
●
Hyper Text Markup Language
●
langage de balisage standard pour la création de pages Web
●
décrit la structure d'une page Web
●
se compose d'une série d'éléments qui indiquent au
navigateur comment afficher le contenu
3
Histoire
Le World Wide Web a connu de nombreuses versions de HTML :
●
1989 Tim Berners-Lee invented www
●
1991 Tim Berners-Lee invented HTML
●
1995 HTML Working Group defined HTML 2.0
●
1997 W3C Recommendation: HTML 3.2
●
1999 W3C Recommendation: HTML 4.01
●
2000 W3C Recommendation: XHTML 1.0
●
2008 WHATWG HTML5 First Public Draft
●
2012 WHATWG HTML5 Living Standard
●
2014 W3C Recommendation: HTML5
●
…
Dans ce cours on traitera le standard HTML5
4
Fonctionnement
5
Navigateurs Web
●
Le but d'un navigateur web (Chrome, Edge, Firefox, ...) est
de lire des documents HTML et de les afficher correctement.
●
Un navigateur n'affiche pas les éléments HTML, mais les
utilise pour déterminer comment afficher le document :
6
Document HTML
● La déclaration <!DOCTYPE html> définit que ce document est un
document HTML5
● L'élément <html> est l'élément racine d'une page HTML
● L'élément <head> contient des méta-informations sur la page HTML
● L'élément <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)
● L'élément <body> définit le corps du document. C’est un conteneur
pour tous les contenus visibles.
● L'élément <h1> définit un grand titre
● L'élément <p> définit un paragraphe
7
Structure des pages HTML
●
Le contenu de
l'élément <title> sera
affiché dans la barre
de titre du navigateur
ou dans l'onglet de la
page.
●
Le contenu de la
section <body> sera
affiché dans le
navigateur.
8
Documents HTML
●
Tous les documents HTML doivent commencer par une déclaration de type
de document : <!DOCTYPE html>.
●
Le document HTML lui-même commence par <html> et se termine par
</html>.
●
La partie visible du document HTML se situe entre <body> et </body>.
●
La déclaration <!DOCTYPE> représente le type de document et aide les
navigateurs à afficher correctement les pages Web.
●
Il ne doit apparaître qu'une seule fois, en haut de la page (avant toute balise
HTML).
●
La déclaration <!DOCTYPE> n'est pas sensible à la casse.
●
La déclaration <!DOCTYPE> pour HTML5 est : <!DOCTYPE html>
9
éléments HTML
●
Un élément HTML est défini par une balise de début (balise ouvrante), du
contenu et une balise de fin (balise fermante) :
●
La balise ouvrante et celle fermante doivent avoir le même nom
●
L'élément HTML est tout, de la balise de début à la balise de fin :
●
Remarque :
– Certains éléments HTML n'ont pas de contenu (comme l'élément <br> line
break).
– Ces éléments sont appelés éléments vides.
– Les éléments vides n'ont pas de balise de fin !
10
éléments HTML
●
HTML n'est pas sensible à la casse
●
Les balises HTML ne sont pas sensibles à la casse :
– <P> signifie la même chose que </p>.
●
La norme HTML n'exige pas de balises en minuscules,
mais le W3C recommande de les mettre en minuscules
en HTML et l’exige pour les types de documents plus
stricts comme XHTML.
●
utilisons toujours des noms de balises en minuscules.
11
éléments HTML
●
Les paragraphes HTML sont définis avec la balise <p> :
●
Certains éléments HTML s'afficheront correctement, même si on
oublie la balise de fin :
●
Cependant, ne jamais se fier à cela ! Des résultats inattendus et
des erreurs peuvent se produire si on oublie la balise de fin !
12
Attributs HTML
●
Tous les éléments HTML peuvent avoir des attributs
●
Les attributs fournissent des informations
supplémentaires sur les éléments
●
Les attributs sont toujours spécifiés dans la balise de
début
●
Les attributs viennent généralement dans des paires
nom/valeur comme :
nom="valeur"
●
le W3C recommande de mettre les nom des attributs en
minuscules et le valeurs entre cotes.
13
Attributs HTML
Exemple : l'attribut lang
●
On doit toujours inclure l'attribut lang dans la balise <html>, pour déclarer la
langue de la page Web.
– Ceci est destiné à aider les moteurs de recherche et les navigateurs.
●
L'exemple suivant spécifie l'anglais comme langue :
<html lang="en">
●
Les codes de pays peuvent également être ajoutés au code de langue dans
l'attribut lang.
– Ainsi, les deux premiers caractères définissent la langue de la page HTML, et les
deux derniers caractères définissent le pays.
●
L'exemple suivant spécifie l'anglais comme langue et les États-Unis comme
pays :
<html lang="en-US"> 14
Titres HTML
●
Les titres HTML (headings) sont définis avec les
balises <h1> à <h6> :
– <h1> définit le titre le plus important.
– <h6> définit le titre le moins important
15
Titres HTML
●
Les navigateurs ajoutent automatiquement un espace blanc (une
marge) avant et après un titre.
●
Les titres sont importants :
– Les moteurs de recherche utilisent les titres pour indexer la structure et
le contenu de vos pages Web.
– Les utilisateurs parcourent souvent une page par ses titres. Il est
important de les utiliser pour montrer la structure du document.
●
Les titres <h1> doivent être utilisés pour les en-têtes principaux,
suivis des <h2>, puis des <h3> moins importants, et ainsi de suite.
●
Attention : N'utilisez pas de titres pour rendre le texte GROS ou gras.
16
Paragraphes HTML
●
L'élément HTML <p> définit un paragraphe.
●
Un paragraphe commence toujours sur une nouvelle ligne et les
navigateurs ajoutent automatiquement un espace blanc (une marge)
avant et après un paragraphe.
●
On ne peut être sûr de la façon dont HTML sera affiché :
– Des écrans grands ou petits et des fenêtres redimensionnées créeront
des résultats différents.
– Avec HTML, vous ne pouvez pas modifier l'affichage en ajoutant des
espaces ou des lignes supplémentaires dans votre code HTML.
17
Paragraphes HTML
●
Le navigateur supprimera automatiquement tous les espaces et
lignes supplémentaires lors de l'affichage de la page :
●
Utilisez <br> si vous voulez un saut de ligne (une nouvelle ligne) sans
commencer un nouveau paragraphe
18
Paragraphes HTML
●
L'élément <hr> est utilisé pour séparer le contenu
(ou définir un changement) dans une page HTML :
19
Formatage du texte
●
HTML contient plusieurs éléments pour définir le
texte avec une signification particulière.
●
Les éléments de mise en forme ont été conçus
pour afficher des types de texte spéciaux :
– <b> - Texte en gras – <small> - Texte plus petit
– <strong> - Texte important – <del> - Texte supprimé
– <i> - Texte en italique – <ins> - Texte inséré
– <em> - Texte mis en évidence – <sub> - Texte en indice
– <mark> - Texte marqué – <sup> - Texte en exposant
20
Formatage du texte
●
<b> définit le texte en gras, sans aucune importance supplémentaire.
●
<strong> définit le texte avec une forte importance. Le contenu à
l'intérieur est généralement affiché en gras.
●
<i> définit une partie de texte dans une voix ou une humeur
alternative. Le contenu à l'intérieur est généralement affiché en
italique.
– La balise <i> est souvent utilisée pour indiquer un terme technique, une
expression d'une autre langue, une pensée, un nom de navire, etc.
●
<em> définit le texte mis en évidence. Le contenu à l'intérieur est
généralement affiché en italique.
●
<small> définit un texte plus petit
●
<mark> définit le texte qui doit être marqué ou mis en surbrillance
21
Formatage du texte
●
<del> définit le texte qui a été supprimé d'un document. Les
navigateurs barrent généralement une ligne à travers le texte
supprimé
●
<ins> définit un texte qui a été inséré dans un document. Les
navigateurs souligneront généralement le texte inséré
●
<sub> définit le texte en indice. Le texte en indice apparaît un demi-
caractère sous la ligne normale et est parfois rendu dans une police
plus petite. Le texte en indice peut être utilisé pour les formules
chimiques, comme H2O
●
<sup> définit le texte en exposant. Le texte en exposant apparaît un
demi-caractère au-dessus de la ligne normale et est parfois rendu
dans une police plus petite. Le texte en exposant peut être utilisé
pour les notes de bas de page.
22
Formatage du texte
●
Exemple
23
