Les bases de HTML 5
publicité
LES BASES DE HTML 5
Ce cours recense de façon synthétique
les principaux concepts, outils, éléments
et attributs HTML nécessaires à la
création d'un site internet. Les listes ne
sont donc pas exhaustives et certaines
explications ne sont pas exemptes de
simplifcations.
Sommaire
Introduction
Les logiciels nécessaires
Le W3C
Syntaxe
Mise en forme
Les balises
Structure minimale d'une page HTML
Règles facultatives hérités du XHTML
Quelques différences avec HTML4
L'encodage des caractères
2
2
2
2
2
2
3
3
3
4
Les caractères nommés
Les URL
Les types MIME
4
4
5
Les attributs
5
5
5
Attribut standard
Attribut d’Événement
Balise d'en tête <head>
Les métadonnées de la page web
Le titre
Lier un fchier à la page web
6
6
6
6
Insérer de code
6
Balise de corps <body>
6
6
7
7
7
8
8
8
8
9
La sémantique du Web
Balise d'architecture non sémantique
Balise d'architecture sémantique
Balise sémantique de texte
Balise de texte non sémantique
Balise de liste
Balise de tableau
Balise de formulaire
Balise multimédia
INTRODUCTION
Les logiciels nécessaires
Pour créer une page web, il sufft d'écrire le code de la page dans un fchier d’extension .html avec un simple éditeur de
texte. Mais il est recommandé d’utiliser un logiciel proposant une coloration syntaxique pour faciliter la lecture du code.
(Ex : Notepad++, Komodo Edit)
Un navigateur internet affche l'apparence d'une page web à partir d'un fchier html. (ex : Firefox)
Le W3C
le langage HTML (« HyperText Mark-Up Language ») est un standard, c'est-à-dire qu'il s'agit de recommandations
publiées par un consortium international : le World Wide Web Consortium (W3C).
Ce standard évolue et présente donc plusieurs version dont :
•
HTML 4 (1999)
•
XHTML (2000)
•
HTML 5 (2014)
XHTML est une reformulation plus rigoureuse du HTML. Bien que sa syntaxe présente des différences minimes avec
celle du HTML, elle en devient pour autant plus précise et plus logique.
Le W3C propose des outils de validations de code : http://validator.w3.org/
Les navigateurs internet implémentent ces standards au fur et à mesure de son évolution mais notez que tous les
navigateurs ne sont pas forcément à jour. Un même site ne s'affche pas exactement de la même façon suivant le
navigateur utilisé.
SYNTAXE
Mise en forme
Le langage HTML considère une suite d'un ou plusieurs espaces/tabulations/saut de ligne comme une seul espace. Cela
permet notamment d'indenter le code HTML pour plus de lisibilité, sans modifer l'apparence de la page HTML dans le
navigateur.
Le doctype : <!DOCTYPE html>
Déclaration de Type de Document (DTD), également nommée "doctype". Cette syntaxe informe au navigateur la version
du code HTML utilisé ; ici HTML5.
Les commentaires : <!-- -->
Syntaxe indiquant que les éléments ne doivent pas être prises en compte lors de l'affchage des éléments dans le
navigateur (en vert).
<!-- partie mise en commentaire -->
Les balises
Un élément HTML est composé d'une balise ouvrante (son nom encadré par des chevrons, en bleu) de son contenu
(noir) et d'une balise fermante (son nom précédé d'un slash / encadré par des chevrons, en bleu).
<nomElement> ← balise ouvrante
Texte affiché ← Contenu de l'élément
</nomElement> ← balise fermante
Certain éléments HTML n'ont jamais de contenu, on se passe donc de la balise fermante. On signale une balise autofermante (ou orpheline) en ajoutant un espace et un slash ( /) à la fn de la balise ouvrante.
<nomElement /> ← balise auto-fermante (ou orpheline)
Certaines balises ouvrantes peuvent contenir des attributs (rouge) paramétrables en leurs assignant une valeur entre
guillemets (violet).
<nomElement nomAttribut="valeurAttribut">
Les balises peuvent s'imbriquer les unes dans les autres mais pas se chevaucher. (Elles s'ouvrent et se ferment dans un
ordre logique.)
<a> <b></b> </a> ← correct
<a> <b> </a> </b> ← INCORRECT !
Les éléments imbriqués son les « Enfants » de l'élément « Parent ». Un élément « Enfant » reçoit en héritage tous les
styles CSS « héritable » de son élément « Parent ».
<a> <b></b> </a> ← l'élément B est un enfant de l'élément A. L'élément A est un parent de l'élément B.
Structure minimale d'une page HTML
<!DOCTYPE html> ← code HTML 5
<html lang="fr"> ← création d'une page HTML dont le contenu est en langue française
<head> ← (tête) balise contenant les propriétés/méta-données de la page web (éléments non affchées)
<meta charset="utf-8" /> ← jeux de caractères standard unicode
<title>Les bases de HTML 5</title> ← titre de la page web
</head>
<body> ← (corps) balise contenant les éléments à affcher
<!-- Contenu visible de la page web --> ← un exemple de commentaire informatif
</body>
</html>
Règles facultatives hérités du XHTML
Les noms des balises sont en minuscule. ← les minuscules sont visuellement plus lisible que les majuscules
Tous les éléments doivent être fermés. Les balises auto-fermantes doivent contenir un espace et un slash à la fn de la
balise ouvrante. ← Organise le code de façon logique. Règle plus simple car elle n'a pas les exceptions : <p>, <dd>, <dt>, <li>,
<optgroup>, <option>, <rt>, <rp>, <td>, <th>, <tr>, <thead> et <tfoot>
Les attributs ont une valeur entre guillemets. ← règles beaucoup plus simple que « les guillemets peuvent être omis si la valeur de
l'attribut ne contient que des lettres (a-z et A-Z), des chiffres (0-9), trait d'union (-), virgule (,), tiret bas (_) et deux-points (:) »
Un attribut minimisé (valeur booléenne arbitrairement sur « true ») est égale à son propre nom.
Ex :
HTML : selected ←attribut minimisé
XHTML : selected="selected" ←(="true" ou ="false" ne fonctionnent pas)
Quelques différences avec HTML4
Ajout de nombreuses balises sémantiques et des balises médias <audio> <video> et <canvas>.
L'identifcation des balises <img>, <form> et <a> se fait avec id car contrairement à name il est obligatoirement
unique.
Les attributs alt sur les images sont obligatoires pour des raisons d'accessibilités. Si l'image est purement décorative on
écrit alors alt=""
Les attributs type (type MIME) ne sont plus obligatoires pour les balises <link>, <script> et <style>
Note : l'attribut language de <script> est remplacer par type
Le design est exclusivement réservé au code CSS.
Il faut utiliser une feuille de style CSS, l'attribut style ou la balise <style>.
Sauf exception, sont obsolètes les balises et attributs de design : <basefont>, <big>, <center>, <font>,
<strike>, <tt>, align bgcolor width height border cellpadding cellspacing etc.
L'encodage des caractères
Il est important de savoir dans quel codage est enregistré le fchier .html, afn de pouvoir annoncer ce codage aux
navigateurs web qui affcheront les bons caractères à l'écran.
Codages des caractères usuels :
•
ASCII est un standard américain. ← 128 caractères - pas de lettre avec signes diacritiques (accents)
•
ISO-8859-1 (ou Latin-1) extension d’ASCII ← 191 caractères - lettre avec signes diacritiques
•
ISO-8859-15 (ou Latin-9) extension de Latin-1 ← ajout notable œ et €
•
Windows-1252 (ou CP1252) extension de Latin-1 ← 218 caractères, œ, €, «, », …, – (demi-cadratin), ‰ etc.
•
ANSI n'est pas un standard, il correspond le plus souvent à Windows-1252.
•
UTF-8 est un standard d'Unicode compatible avec la norme ASCII ← code l'ensemble des caractères internationaux
Il est recommandé d'utiliser l'encodage UTF-8. (Dans notepad++ : encodage → convertir en UTF-8)
Les caractères nommés
Un caractère nommé est nécessaire s'il ne doit pas être confondu avec la syntaxe du code HTML.
Il est encadré par & et ;
Espace insécable : &nbsp; ← non-breaking space (espace insécable)
(Espace cumulable et ne pouvant être brisé par une fn de ligne.)
Chevron ouvrant (<) : &lt; ← less than (moins que)
Chevron fermant (>) : &gt; ← greater than (plus que)
Guillemets (") : &quote; ← (citation)
Esperluette (&) : &amp; ← ampersand (esperluette)
Un caractère nommé permet également d'utiliser un caractère qui se trouve en dehors du jeu de caractères utilisé,
déterminé par l'encodage des caractères (É, à, œ, Γ, «, », ©, ←, √).
Lettre avec signes diacritiques : & + (lettre à accentuée) + (signes diacritiques) + ;
Signes diacritiques :
•
aiguë : acute
•
grave : grave
•
circonfexe : circ ← circumfex
•
tréma : uml ← umlaut
•
cédille : cedil ← cedilla
lettres ligaturées : & + (2 lettres) + lig;
Mais les caractères nommés rendent le code peu lisible :
<p>C'est &ccedil;a ton &oelig;uvre&nbsp;?</p> ← affche « C'est ça ton œuvre ? »
Les URL
Uniform Resource Locator, littéralement « localisateur uniforme de ressource », désigne une chaîne de caractères utilisée
pour adresser les ressources du World Wide Web.
Cibler une page internet : http://(adresse web)
Cibler une adresse e-mail : mailto:(e-mail)
Cibler une balise dans une page HTML : #(id/name de l'élément HTML)
Cibler un fchier/dossier déduit à partir de l'URL de la source :
•
/(chemin d'accès à partir du dossier racine) ← URL absolu
•
./(chemin d'accès à partir du dossier courant) ← URL relative (syntaxe facultative)
•
../(chemin d'accès à partir du dossier parent) ← URL relative, syntaxe pour remonter d'un dossier (cumulable pour
remonter de plusieurs dossiers)
Ex :
<img src="../../mes-images/chaton.jpg" /> ← Cette URL relative cible l'image en partant du fchier
contenant le lien, puis en remontant de 2 dossiers, puis en rentrant dans le dossier « mes-images » pour enfn chercher l'image
« chaton.jpg ».
Les types MIME
C'est un identifant de format de données sur internet. Il permet d'informer le format d'un fchier ou le codage utilisé
dans une balise.
Il est composé en deux parties : (type)/(sous-type).
Les types et sous-types non standards commencent par « x- ».
type : text/
sous-type : css ; html ; xml
type : image/
sous-type : jpeg ; png ; gif ; tiff ; svg+xml ; vnd.microsoft.icon (anciennement x-icon)
type : audio/
sous-type : ogg ; mpeg ; wav
type : video/
sous-type : mp4 ; webm ; ogg ; x-flv
type : application/
sous-type : javascript ; rss+xml ; x-shockwave-flash ; pdf
Ex :
<style type="text/css"> ← cette balise contient du texte qui est du code CSS
<link type="image/jpeg" /> ← cette balise lie une image en format JPEG
LES ATTRIBUTS
Attribut standard
Sauf exception, tous les éléments HTML peuvent avoir les attributs suivants :
id ← identifcation (identité) nom UNIQUE de l'élément
Class ← (catégorie) le(s) nom(s) de catégorie séparé par des espaces
style ← (style) code CSS
lang ← language (langue) abréviation de la langue (en, fr etc.)
hidden ← (cacher) attribut minimisé
title ← (titre) texte visible au survole de la souris
Attribut d’Événement
Ces attributs créent un « écouteur » sur éléments HTML qui déclenche un code javascript lorsque l’événement est
produit (sur l’élément possédant l'écouteur).
<nomElement nomEcouteur="code javascript"></nomElement>
Les noms des attributs javascript n'ont pas d'espace, mais il est signifé par la présence d'une majuscule sur le mot suivant.
onClick ← on click (au clic) code javascript
onKeyPress ← on key press (à l’appui d'une touche) code javascript
onChange ← on change (au changement) code javascript
onFocus ← on focus (au focus) code javascript
onLoad ← on load (au chargement) code javascript
Les instructions Javascript se terminent toujours par un point virgule ;
Si le code Javascript contient des guillemets " on les remplace par des apostrophes ' pour éviter la confusion avec les
guillemets de l'attribut.
<a href="#" onClick="alert('clic');">lien</a>
Pour annuler le déclenchement d'un lien, on ajoute le code javascript : return=false;
<a href="page.html" OnClick="f1(); return=false;" >mon Lien</a> ← Lors du clic, la fonction
javascript f1 est appelée et le lien href est bloqué (si le javascript est désactivé, le lien fonctionnera avec href).
BALISE D'EN TÊTE <HEAD>
Les métadonnées de la page web
<meta charset="" /> ← [character set : jeux de caractère] encodage des caractères (ex : utf-8)
<meta name="Description" content="" /> ← [description] texte affché par les moteurs de recherches
<meta name="Keywords" content="" /> ← [mots clés] texte pour le référencement
<meta name="author" content="" /> ← [auteurs] texte
Le titre
<title> ← [title : titre] de la page web (affché dans l'onglet du navigateur web)
Lier un fchier à la page web
<link />
rel ="stylesheet" ← [style sheet :feuille de style] lie un fchier .css pour le design ="icon"← [icon : icône] lie une image
.ico .gif ou .png qui sera affchée dans l'onglet du navigateur web
href ← [hypertext reference : référence hypertexte] URL
type ← type MIME
Insérer de code
<script> ← insertion de code (par défaut en javascript)
type ← type MIME
src ← [source : source] URL insère du code enregistré dans un fchier externe
<style> ← insertion de code (par défaut en CSS)
type ← type MIME
BALISE DE CORPS <BODY>
La sémantique du Web
Les balises sémantiques donnent du sens au contenu qu'elles encadrent. Il est primordiale de les utiliser à bonne escient
car cela permet aux moteurs de rendu/recherches (navigateurs internet, lecteurs d'écran, Google etc.) d’interpréter le
code pour optimiser leurs performances. Dans un Web "intelligent", la présentation ne sert à rien, la sémantique est
tout.
Balise d'architecture non sémantique
Ces balises permettent de défnir la structure de la page HTML sans préciser le sens du contenu.
<div> ← [division : division] défnit une section de type « block level » (les éléments s'affchent les uns sous les autres)
<span> ← [span ≈ couvrir] défnit une section de type « inline » (les éléments s'affchent les uns à côté des autres)
<br /> ← [break : stop] créer un saut de ligne
<hr /> ← [horizontal rule : tracer une ligne horizontale]
<pre> ← [preformater] les espaces, tabulations et saut de ligne sont interprétés normalement
Balise d'architecture sémantique
Ces balises permettent de défnir la structure de la page HTML en précisant le sens du contenu.
<h1> <h2> <h3> <h4> <h5> <h6> ← [heading : titre] le chiffre indique le niveau hiérarchique
<p> ← [paragraph : paragraphe]
<section> ← [section] d'éléments thématiques (qui vont ensembles)
<article> ← [article] section autonome/indépendant (qui se sufft à elle-même)
<aside> ← [de côté] section annexe au contenu principale (un apport tangentiel)
<header> ← [en-tête] en-tête d'une section ou de la page
<footer> ← [bas de page] bas d'une section ou de la page
<nav> ← [navigation : navigation] section de liens de navigations (ex : accueil, page suivante, contact)
<menu> ← [menu] section de boutons de contrôles (ex : play, stop, pause)
<figure> ← [fgure] image en lien avec le contenu principal
<figcaption> ← [légende fgure] | enfant de <fgure> |
<address> ← [adresse] section d'information de contact
<blockquote> ← [block quote : bloc de citation] section de citation
cite ← [citation] URL de la citation
Balise sémantique de texte
Ces balises permettent de mettre en forme du texte en précisant le sens des mots contenu.
<strong> ← [fort] contenu important
<small> ← [modest] contenu relatif
<em> ← [emphase] mettre l'accent (phonétique)
<cite> ← [citer] titre d'une oeuvre, d'un document ou d'un événement.
<q> ← [quote : citation]
cite ← [citer] URL de la citation
<time> ← [date]
<abbr> ← [abbreviation : abréviation]
<dfn> ← [défnition] un terme qui est défnit
<del> ← [delete : supprimer/barrer] texte supprimé
<ins> ← [insert : insérer] texte de remplacement
<code> ← [code]
Balise de texte non sémantique
Ces balises permettent de mettre en forme du texte sans préciser le sens des mots contenu.
<b> ← [bold : gras]
<i> ← [italic : italique]
<u> ← [underline : souligner]
<s> ← [strike : barrer]
<mark> ← [marquer] texte surligné
<sub> ← [subscript : indice] texte en indice
<sup> ← [superior : supérieur] texte en exposant
Balise de liste
<ul> ← [unordered list : liste désordonnée] liste à puces
<ol> ← [ordered list : liste ordonnée] liste numérotée
<li> ← [list : liste] élément d'un liste | enfant de <ul> ou <ol> |
Balise de tableau
Les balises de tableau doivent obligatoirement êtres contenu dans une balise <table>.
Note : Un tableau est conçu initialement pour affcher des données tabulaires et non pour faire la présentation de la
page.
<table> ← [tableau]
border ← [bordure] nombre de pixel
<caption> ← [légende] légende d'un tableau | enfant de <table> |
<th> ← [table heading : titre de tableau] ligne titre d'un tableau | enfant de <table> |
colspan ← [colunms span : couvrir des colonnes] nombre de colonnes sur lesquelles les cellules débordent
rowspan ← [rows span : couvrir des lignes] nombre de lignes sur lesquelles les cellules débordent
<tr> ← [table row : ligne de tableau] ligne d'un tableau | enfant de <table> |
colspan ← [colunms span : couvrir des colonnes] nombre de colonnes sur lesquelles les cellules débordent
rowspan ← [rows span : couvrir des lignes] nombre de lignes sur lesquelles les cellules débordent
<td> ← [table division : division de tableau] cellule d'une ligne | enfant de <tr> ou <th> |
colspan ← [colunms span : couvrir des colonnes] nombre de colonnes sur lesquelles les cellules débordent
rowspan ← [rows span : couvrir des lignes] nombre de lignes sur lesquelles les cellules débordent
Balise de formulaire
Les balises de formulaire doivent obligatoirement êtres contenu dans une balise <form>.
<form> ← [formulaire]
<select> ← [sélectionner] liste sélectionnable | enfant de <form> |
disabled ← [désactivé] attribut minimisé
<option> ← [option] élément d'une liste sélectionnable | enfant de <select> |
disabled ← [désactivé] attribut minimisé
selected ← [selectionné] attribut minimisé
<input /> ← [donnée d'entrée] | enfant de <form> |
type ="button"← [bouton] ="submit"← [soumettre] ="reset"← [remettre] ="text"← [texte]
="radio"← [radio] ="checkbox"← [check box : case à cocher]
size ← [taille] nombre de caractère visible
value ← [valeur] texte affché
disabled ← [désactivé] attribut minimisé
selected ← [sélectionné] attribut minimisé
name ← [nom] nom du groupe de bouton (un seul bouton « radio » peut être sélectionné au sein d'un même groupe)
<label> ← [étiquette] associe un texte à un élément de formulaire | enfant de <form> |
for ← [pour] id de l'élément auquel l'étiquette correspond
<textarea> ← [text area : zone de texte] zone de texte étirable | enfant de <form> |
disabled ← [désactivé] attribut minimisé
Balise multimédia
<a> ← [anchor : ancre] créer un lien
href ← [hypertext reference : éférence hypertexte] URL de la cible du lien
target ← [cible] ="_blank" ← ouvre le lien dans un nouvel onglet/page.
<img /> ← [image : image] | enfant de <p>, <h1> [...] <h6> ou <fgure> |
src ← [source : source] URL de l'image à affchée
alt ← [alternative : alternative] texte affché si l'image n'est pas chargée
width ← [largeur] nombre de pixel
height ← [hauteur] nombre de pixel
usemap ← [use map : utilisation carte] name de la balise <map> à intégrer dans l'image.
<map> ← [carte] zone cliquable à l’intérieur d'une image
name ← [nom] nom de la carte
<area /> ← [zone] interactive d'une image | enfant de <map> |
shape ← [forme] ="rect"← [rectangle] ="circle"← [cercle] ="poly"← [polygonne]
coords ← [coordinates : coordonnées] suite de nombre x1, y1, x2, y2, etc. (cercle : x1, y1 rayon)
href ← [hypertext reference : référence hypertexte] URL de la cible du lien
alt ← [alternative : alternative] texte affché au survole de la souris
<canvas> ← [toile (pour peinture)] zone pour les dessins ou applications graphiques.
width ← [largeur] nombre de pixel
height ← [hauteur] nombre de pixel
<noscript> ←[pas de script] Contenu affché seulement si JavaScript est désactivé (message ou alternative)
<audio> ← [audio]
controls ← [contrôleurs] boutons de navigation, attribut minimisé
autoplay ← [démarrage automatique] attribut minimisé
loop ← [boucle] attribut minimisé
preload ← [préchargement] ="none"← [aucun] ="auto"← [automatique] au chargement de la page ="metadata"←
[métadonnées] seulement
<video> ← [vidéo]
width ← [largeur] nombre de pixel
height ← [hauteur] nombre de pixel
poster ← [poster] URL de l'image à affcher par défaut
controls ← [contrôleurs] boutons de navigation, attribut minimisé
autoplay ← [démarrage automatique] attribut minimisé
loop ← [boucle] attribut minimisé
preload ← [préchargement] ="none"← [aucun] ="auto"← [automatique] au chargement de la page ="metadata"←
[métadonnées] seulement
<source /> ← [source] | enfant de <video> ou <audio> |
src ← [source : source] URL du fchier audio ou vidéo
type ← type MIME
<object> ← [incorporer] insérer un contenu externe et interactif ou un plug-in
data ← [données] URL du contenu externe
type ← type MIME
width ← [largeur] nombre de pixel
height ← [hauteur] nombre de pixel
<param> ← [parameter : paramètre] | enfant de <object> |
name ← [nom] nom du paramètre
value ← [valeur] texte valeur du paramètre
<iframe> ← insérer une page html
src ← [source : source] URL de la page web
width ← [largeur] nombre de pixel
height ← [hauteur] nombre de pixel
