HTML 5

-- --

HTML 5
Contenu
Introduction............................................................................................................................................. 4
Les navigateurs .................................................................................................................................... 4
Editeur HTML ....................................................................................................................................... 4
Règles de nommage des Fichiers ........................................................................................................ 4
Les balises ................................................................................................................................................ 4
Structure de base d’une page HTML5 ..................................................................................................... 5
Commentaires ......................................................................................................................................... 5
Paragraphes ............................................................................................................................................. 5
Saut de ligne ........................................................................................................................................ 5
Les titres .................................................................................................................................................. 6
La mise en valeur ..................................................................................................................................... 6
Un peu en valeur ................................................................................................................................. 6
Bien en valeur ...................................................................................................................................... 6
Marquer le texte.................................................................................................................................. 6
Les listes .................................................................................................................................................. 7
Non ordonnée ..................................................................................................................................... 7
Ordonnée ............................................................................................................................................ 7
Les liens ................................................................................................................................................... 8
Lien externe ......................................................................................................................................... 8
Lien interne.......................................................................................................................................... 8
Lien vers une ancre.............................................................................................................................. 8
Lien vers une ancre sur une autre page .......................................................................................... 8
Infobulle .............................................................................................................................................. 8
Ouvrir dans une nouvelle fenêtre ....................................................................................................... 8
E-mail ................................................................................................................................................... 8
Fichier à télécharger ............................................................................................................................ 8
Les images ............................................................................................................................................... 9
Formats................................................................................................................................................ 9
Insérer une image................................................................................................................................ 9
Infobulle .............................................................................................................................................. 9

HTML 5 2 / 18
-- --

Miniature cliquable ............................................................................................................................. 9

Les figures& légende ........................................................................................................................... 9
Structurer sa page ................................................................................................................................. 10
Les tableaux ........................................................................................................................................... 11
Ligne d'en-tête................................................................................................................................... 11
Titre du tableau ................................................................................................................................. 12
Structurer un tableau ........................................................................................................................ 12
Fusion de cellules .......................................................................................................................... 12
Les formulaires ...................................................................................................................................... 13
Zone de saisie .................................................................................................................................... 13
Libellé ............................................................................................................................................ 13
Autres attributs ............................................................................................................................. 13
Zone mot de passe ........................................................................................................................ 14
Zone multiligne .................................................................................................................................. 14
Zones de saisie enrichies ................................................................................................................... 14
Les éléments d'options...................................................................................................................... 14
Les cases à cocher ......................................................................................................................... 14
Les zones d'options ....................................................................................................................... 15
Les listes déroulantes .................................................................................................................... 15
Regrouper des champs ...................................................................................................................... 16
Autres propriétés du formulaire ....................................................................................................... 16
Donner le focus à un champ .......................................................................................................... 16
Champ obligatoire ......................................................................................................................... 16
Boutond'envoi ................................................................................................................................... 16
La vidéo et l'audio ................................................................................................................................. 17
Les formats audio .............................................................................................................................. 17
Les formats vidéo .............................................................................................................................. 17
Insérer un élément audio .................................................................................................................. 17
Insérer une vidéo............................................................................................................................... 18

HTML 5 3 / 18
-- --

Introduction
HTML inventé par Tim Berners-Lee en 1991. Il a créé le World Wide Web Consortium (W3C).
CSS est apparu en 1996

HTML : langage pour créer de pages web, gestion du contenu

CSS : langage pour gérer l’apparence de la page web

Les navigateurs
 internet explorer 10,
 firefox 20,
 chrome 26,
 safari 6 (apple),
 opéra 12

Ctrl + clic : ouvre un lien dans nouvel onglet

Shift + clic : ouvre un lien dans une nouvelle fenêtre

Editeur HTML
Télécharger NotePad++
Déclarer le langage HTML ou CSS

F5 : actualise la page HTML dans le navigateur

Règles de nommage des Fichiers

Pas d’espaces, pas de caractères spéciaux, noms en minuscule
ma_page.html
mon_image.jpg

Les balises

Fermantes : <titre>Ceci est mon titre</titre>

Orphelines : <image />
Elles peuvent posséder des attributs <image nom=’’[Link]’’ />

HTML 5 4 / 18
-- --

Structure de base d’une page HTML5

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Titre</title>
</head>

<body>

</body>
</html>

DOCTYPE : html : écrit en HTML5

2 sections : head et body
Head : en-tête, titre, description, encodage…
Body : corps de la page
Utf-8 : encodage du fichier pour afficher les caractères spéciaux (accents…)

Titre : très important pour le référencement, apparait dans le navigateur

Commentaires
Pour commenter son code HTML

< !-- Commentaire ici -- >

Tout le monde peut voir le code HTML : clic droit /code source de la page

Paragraphes
<p> : début de paragraphe
</p> : fin de paragraphe

Exemple : <p>Ceci est un paragraphe<p/>

Puis
<p>paragraphe 1</p>
<p>paragraphe 2</p>

Saut de ligne
<br /> : saut de ligne
A Placer dans un paragraphe

Ex : <p>Ceci est un paragraphe <br /> avec un saut de ligne</p>

HTML 5 5 / 18
-- --

Les titres

<h1></h1> : titre de niveau 1

<h2></h2>
…
<h6></h6> : titre de niveau 6

Ex : <h1>Titre de niveau 1 </h1>

La mise en valeur
Dans un paragraphe, fait ressortir le texte.

Un peu en valeur
<em></em> : met un peu en évidence un texte un peu important
Par défaut le texte est en italique mais cela dépend du CSS et du navigateur

Ex : <p>paragraphe avec <em>mise en valeur</em> d’un texte</p>

Bien en valeur
<strong></strong> : met bien en évidence un texte important
Par défaut le texte est en gras mais cela dépend du CSS et du navigateur

Ex : <p>paragraphe avec <strong>mise en évidence importante</strong> d’un texte</p>

Marquer le texte
<mark></mark> : texte pas important mis en valeur
Par défaut le texte est surligné mais cela dépend du CSS et du navigateur

Ex : <p>paragraphe avec <mark>du texte marqué</mark>dans ce paragraphe</p>

HTML 5 6 / 18
-- --

Les listes

Non ordonnée
Liste à puces ( u :unordered)

<ul></ul> : délimite toute la liste

<li></li> : un élément de la liste

Ex :
<ul>
<li>commencer</li>
<li>continuer</li>
<li>finir</li>
</ul>

Ordonnée
Liste numérotée (ordered)

<ol></ol> : délimite toute la liste numérotée

<li></li> : un élément de la liste

Ex :
<ol>
<li>tourner la clef</li>
<li>accélérer</li>
<li>ralentir</li>
<li>s’arrêter</li>
</ol>

HTML 5 7 / 18
-- --

Les liens

<a href= > ( a : ancre)

Lien externe
<a href =’’[Link] du lien</a>
<a href=’’[Link] super moteur de recherche</a>

Lien interne
<a href=’’[Link]’’>Lien vers la page 1</a> : même dossier
<a href=’’../[Link]’’>Lien vers la page 1</a> : dossier parent
<a href=’’dossier/[Link]’’>Lien vers la page 1</a> : dans un sous-dossier

Lien vers une ancre

<p id=’’mon_ancre’’>Nom de l’ancre</p> : déclaration de l’ancre
<a href=’’#mon_ancre’’>Aller vers l’ancre</a> : lien vers l’ancre
L’id doit être sans espace, ni caractères spéciaux

Lien vers une ancre sur une autre page

<a href=’’[Link]#mon_ancre’’>Aller vers l’ancre sur une autre page</a> : lien vers l’ancre

Infobulle
Title =’’lien vers ce site web’’
<a href=’’[Link] title=’’ lien vers [Link]’’>Un super moteur de recherche</a>

Ouvrir dans une nouvelle fenêtre

target=’’_blank’’
<a href=’’[Link] target=’’_blank’’>Un super moteur de recherche</a>

E-mail
<a href=’’mailto :[Link]@[Link]”>Envoyez-moi un e-mail</a>

Fichier à télécharger
<a href=’’[Link]”>Télécharger ce fichier</a>

HTML 5 8 / 18
-- --

Les images

Formats
JPG : Très bonne compression pour les photos, 16 millions de couleurs
PNG : gère la transparence, 256 (8 bits) ou 16 millions de couleurs(24 bits)
GIF : gère la transparence, 256 couleurs, peut être animé, vieux format

Insérer une image

<img src=’’images/[Link]’’ alt=’’photo de mon site’’ />
Les 2 attributs Src et Alt sont obligatoires

Src : source
 absolue ‘’[Link]
 relative ‘’images/[Link]’’
Alt : texte alternatif, si l’image ne peut être affiché, pour personnes non-voyantes, pour les robots

Infobulle
Title =’’informations sur l’image’’
<img src=’’images/[Link]’’ alt=’’photo de mon site’’title=’’Superbe photo de mon site web’’/>

Miniature cliquable
<a href=’’[Link]’’><img src=’’images/photo_mini.jpg’’ alt=’’photo de mon site’’title=’’miniature
cliquable’’/></a>

Les figures& légende

Sur des images, du texte, un tableau…
<figure>
<img src=’’images/[Link]’’ alt=’’photo de mon site’’ title=’’Superbe photo de mon site web’’/>
<figcaption>Légende de la photo</figcaption>
</figure>

HTML 5 9 / 18
-- --

Structurer sa page

<header> : l'en-tête
<footer> : le pied de page
<nav> : principaux liens de navigation

Un menu est réalisé à l'aide de liste à puces

<nav>
<ul>
<li><a href="[Link]">accueil</a></li>
<li><a href="[Link]">forum</a></li>
<li><a href="[Link]">contact</a></li>
</ul>
</nav>

<section> : regroupe des contenus en fonction de leur thématique

<section>
<h1>Section 1 </h1>
<p>contenu de la section 1</p>
</section>

<aside>: informations complémentaires, généralement sur le côté

<article>: article indépendant, peut être repris sur un autre site

<article>
<h1>Mon bel article </h1>
<p>contenu de mon bel article</p>
</article>

Ces balises peuvent s'imbriquer les unes dans les autres.

Ici on prépare le terrain, c'est le CSS qui mettra en forme la page

HTML 5 10 / 18
-- --

Les tableaux

 <table> …</table>: début et fin de tableau

 <tr>…</tr> : début et fin de ligne du tableau
 <td>…</td>: début et fin de cellule
<table>
<tr><!--ligne 1-->
<td>cellule 1</td>
<td>cellule 2</td>
<td>cellule 3</td>
</tr>
<tr><!--ligne 2-->
<td>cellule 4</td>
<td>cellule 5</td>
<td>cellule 6</td>
</tr>
</table>

La mise en forme se fait en CSS, cf chapitre 'bordures et ombres'

td{
border : 1px solid blue;}

Border-collapse : colle les bordures

 Collapse
 Separate : par défaut

Table{
Border-collapse : collapse}

Ligne d'en-tête
 <th>…</th> : début et fin de CELLULE d'en-tête (remplace le TD)
<table>
<tr><!--ligne d'en-tête-->
<th>titre 1</th>
<th>titre 2</th>
<th>titre 3</th>
</tr>
<tr><!--ligne 1-->
<td>cellule 1</td>
<td>cellule 2</td>
<td>cellule 3</td>
</tr>
</table>

HTML 5 11 / 18
-- --

Penser à rajouter th dans le css pour les bordures :

Td, th{
border : 1px solid blue;}

Titre du tableau
Caption: se place en tout début du tableau
<table>
<caption> Titre de mon joli tableau</caption>
…
Le titre peut être positionné avec la balise caption-side : top, bottom, left, right

Structurer un tableau
 Thead : en-tête
 Tbody : corps du tableau
 Tfoot : pied
Pour organiser un grand tableau, pas obligatoire à utiliser.

Fusion de cellules
 Colspan : fusion de colonnes
 Rowspan: fusion de lignes

<Td colspan ="2"> : on fusionne 2 cellules en colonnes

<Td colspan ="2">Ma cellule fusionné </td>

Fusion en lignes cf p. 218

HTML 5 12 / 18
-- --

Les formulaires

 Form

<form>
<p>Texte dans mon beau formulaire</p>
</form>

Méthod
o GET : pas utilisé 255 caractères max, les informations transitent par la barre
d'adresse
o POST : grande quantité d'informations
Method="post"
 Action : une action en php

<form method="post" action="[Link]">

</form>

Zone de saisie
Input
<input type="text" />
<input type="text" name="nom"/>

Libellé
Label
<label>Votre nom :</label>

Pour lier le libellé à la zone de saisie, on utilise un id pour la zone de saisie et un attribut for pour le
libellé qui sont identiques.

<form method="post" action="[Link]">

<p>
<labelfor="nom">Votre nom :</label>
<input type="text" name="nom" id="nom"/>
</p>
</form>

Autres attributs
 Size : nombre de caractères de la zone de saisie
 Maxlength : nombre de caractères maxi
 Value : valeur par défaut
 Placeholder : texte qui disparait dès que l'utilisateursaisit dans la zone

<input type="text" name="nom" id="nom" size="50" placeholder="jean dupont par exemple"/>

HTML 5 13 / 18
-- --

Zone mot de passe

Type="password"

Zone multiligne
Textarea

<label for="commentaire">Saisir un commentaire pertinent :</label>

<textareaname="commentaire" id="commentaire"/></textarea>

Modifier la taille
 En css : width et heigth
 Avec les attributs de textareaRows et Cols
o Rows="10" cols="5"

Zones de saisie enrichies

 Type="email" : le navigateur vérifiera s'il s'agit bien d'une adresse mail
 Type="url" : idem pour les url
 Type="tel"
Suivant le téléphone mobile, le clavier s'adaptera au champ demandé.
 Type="number" : met les flèches de sélection d'un nombre
o On peut spécifier les attributs : Min,Max,Step
 Type="range" : création d'un curseurhorizontal
o On peut spécifier les attributs : Min,Max,Step
 Type="color" : pas encore utilisé
Champs date :
 Date
 Time
 Week
 Month
 Datetime : date et heure avec décalage horaire
 Datetime-local : date et heure sans décalage horaire
<input type="date" />
 Search

Les éléments d'options

Les cases à cocher
checkbox
<input type="checkbox" name="choix"/>
<label for="choix1">choix 1</label>
Checked : coche la case par défaut

<input type="checkbox" name="choix" checked/>

HTML 5 14 / 18
-- --

Les zones d'options

Radio, value
L'ensemble des boutons doivent avoir le même nom (ici name="tarif").

<form>
<labelfor="jour">tarif de jour</label>
<input type= "radio" name="tarif" value="jour" id="jour">
<labelfor="nuit">tarif de nuit</label>
<input type= "radio" name="tarif" value="nuit" id= "nuit" checked>
<label for="weekend">tarif de week-end</label>
<input type= "radio" name="tarif" value="week-end" id="weekend">
</form>

Checked: sélectionne un bouton par défaut

Les listes déroulantes

Select, option
<form>
<label for="pays">choisir un pays :</label><br/>
<Selectname="pays" id="pays">
<option value="France">France</option>
<option value="Espagne">Espagne</option>
<option value="Italie" selected>Italie</option>
</select>
</form>

Selected : sélectionne une valeur par défaut

Grouper les valeurs

optgroup

<optgroup label ="europe">

<option value="France">France</option>
<option value="Espagne">Espagne</option>
</optgroup>…

HTML 5 15 / 18
-- --

Regrouper des champs

Fieldset, legend

<fieldset>
<legend> Vos coordonnées</legend>
<!--Champs à grouper dans cette catégorie-->
</fieldset>
<fieldset>
<legend>Voscompétences</legend>
<!--Champs à grouper dans cette seconde catégorie-->
</fieldset>

Autres propriétés du formulaire

Donner le focus à un champ
Autofocus

<input type="text" name="nom" autofocus/>

Champ obligatoire
Required

<input type="number" name="age" required/>

En css on a 2 pseudo-formats :required et :invalid

:invalid{
background-color :red}

Boutond'envoi
 Submit : envoi
 Reset :remise à zéro
 Image : comme submit mais sous forme d'image, il faut rajouter src
 Button: bouton générique à traiter en javascript

Value: change le texte du bouton

<input type="submit" value =" envoyer"/>

HTML 5 16 / 18
-- --

La vidéo et l'audio

Video, Audio

Les formats audio

 MP3 : compressé
 AAC : utilisé par Apple, bonne qualité, compresé
 OGG : compressé, format libre, linux
 WAV : non compressé, à éviter
IE : MP3
Chrome : MP3, OGG
FireFox : OGG

Pas de format universel…

Les formats vidéo

 Format conteneur
o AVI, MP4, MKV
 Codec audio
o Mp3, aac, ogg
 Codec vidéo
o H.264 : l'un des plus puissants, mais pas 100% gratuit
o Oggtheor:gratuit et libre, linux. Pas de base sur windows
o WebM : gratuit et libre, proposé par google
IE : H.264,WebM
Chrome :Oggtheor, WebM
FireFox :Oggtheor, WebM

Télécharger Miro VideoConverter, convertit une video dans un autre format

Insérer un élément audio

<audio src="musique.mp3"></audio>
Attributs:
 Controls: boutons lecture, pause…, sinon se gère en javascript par ex
 Width
 Loop: musique jouée en loupe
 Autoplay
 Preload
o Auto : par défaut
o Metadata: charge les métadonnées : durée,…
o None : pas de préchargement

<audio src="musique.mp3"controlsautoplay></audio>

Télécharger Dewplayer en flash si besoin.

HTML 5 17 / 18
-- --

Insérer une vidéo

<video src="[Link]"></video>
Attributs:
 Poster : image à afficher avant la vidéo, sinon 1ère image de la vidéo.
 Controls: boutons lecture, pause…, sinon se gère en javascript par ex
 Width
 Height
 Loop: vidéo jouée en loupe
 Autoplay
 Preload
o Auto : par défaut
o Metadata: charge les métadonnées : durée,…
o None : pas de préchargement

Le navigateur conserve toujours les proportions de la vidéo.

<video src="[Link]" controls poster="[Link]" width="600"></video>

Pour être sûr que la vidéo marche pour tous les navigateurs :

<video src="video.mp4" controls poster="[Link]" width="600"></video>

<video src="[Link]" controls poster="[Link]" width="600"></video>
<video src="[Link]" controls poster="[Link]" width="600"></video>

Le navigateur prendra la vidéo qu'il connaît.

N.B.: il vaut mieux mettre le MP4 (H.264) en 1er car les iphone et ipad ne connaissent que ce format
et le voient que s'il est le 1er.

Il n'est pas possible d'empêcher le téléchargement des vidéos, ni de les afficher en plein écran
automatiquement. Flash permet d'empêcher le téléchargement.

HTML 5 18 / 18