01 HTML 5 PDF

HTML5
Introduction HTML
Principales autres balises
Nouveautés HTML5
Les conteneurs HTML5
Les balises sémantiques
Quelques rappels
Patrice Pegaule / 2016

Introduction HTML
Patrice Pegaule - patrice.pegaule@gmail.com 2016 2

HTML
● HTML – HyperText Markup Language
● Langage de marquages utilisant des balises pour décrire
des pages web
● Le W3C tente de persévérer vers la voie du XML (création
du XHTML)
● Le WhatWG souhaite améliorer HTML et débute son
travail en 2004 avec Ian Hickson qui sera l’éditeur officiel
du HTML 5
● Le HTML5 est soutenu devant le W3C en 2007.
● Il sera retenu et son premier brouillon sera publié l’année
suivante.

Qu’est que c’est un tag ?
● Mots clef entre “<“ et “>”
● Il ya habituellement une balise de début et une balise de
fin
● exemple:
‣ <tag>…</tag>
● Balises vides
‣ <tag />
● Attributs
‣ Un attribut est une pair nom=“valeur”
‣ Il est dans une balise
‣ <tag attribut=“valeur”> … </tag>

Des lignes directrices pour les tags
● Document a des:
‣ Marquages / tags
• Vides <br/>
• Qui contient du texte ou d’autres marquages
<h1>texte</h1>
• Marquages contient des attributs <img
src=“http://...”/>
• Marquages doivent être écrites en bas de casse
• Les tags doivent être correctement emboîtés
• Les tags doivent être toujours ferme
‣ texte

Structure d’un document
● La structure logique d’un document
‣ Le titre du document
‣ Les titres des sections
‣ Le contenu
• Les paragraphes
• L’information qui est dans des tableaux
• Les listes des items (ordonnées ou non
ordonnées)
● Petit exemple du façon dans lequel nous pouvons
structurer un document en utilisant une éditeur de texte

La structure d’un document HTML5
<!DOCTYPE html>
<html>
<head>
<title>le titre du document</title>
</head>
<body>

</body>
</html>

<!DOCTYPE html>
● Un DOCTYPE est un préambule nécessaire.
● DOCTYPE sont nécessaires pour des raisons historiques.
● Quand il est omis, les navigateurs ont tendance à

utiliser un mode de rendu différent qui est incompatible
avec certaines spécifications.

<html>
● La racine du document
● Contient un élément <head> (qui contient des

métadonnées)
● Contient un élément <body> (qui contient le contenu)
● Peut avoir des attributs globaux comme "lang" 

<html lang="fr"> qui précise le contenu du document est
en francais

La section « head »
● Contient information sur le document
● <title> - le titre du document
● <link> - le lien vers un resource utilise par la page

‣ <link rel="stylesheet" type="text/css" media="all"
href="style.css" />
‣ <link rel="shortcut icon" href="/favicon.ico"
type="image/x-icon" />
● <meta> - information supplémentaire sur la page – mots

clef, type du contenu, description – utilise par des
navigateurs et robots
● <script> - des références aux fichiers javascript

La section « body »
● Contient les tags qui sont affiches dans le navigateur
● La section « body » doit contenir SEULEMENT du contenu
● L’information du style doit être mis en documents

extérieurs
● Nous allons voir les éléments du section « body » et nous

allons le tester par construire une page web simple

Contenu et formatage
● Paragraphe : <p>
● Ligne nouvelle : <br/>
● Texte souligné : <em>
● Text gras : <strong>
● Text fin : <small>
● Exposant : <sub> <sup>
● Attention, les balises servent à la gestion du contenu mais

elles sont aussi interprétées par les robots.
● Pour cela, certaines sont appelées balises sémantiques.

Balises sémantiques
Balise Rôle
<abbr> Abréviation ou acronyme
<address> Adresse
<blockquote> Citation longue
<cite> Origine d’une référence
<del> Contenu supprimé
<dfn> Définition d’un nouveau terme
<em> Accentuation (emphase)
<ins> Contenu inséré
<q> Citation courte
<s> Contenu obsolète
<strong> Renforcement de l’importance
¡ Liste des balises HTML5 expliquée en fr : Site Jaéthème.com

¡ Sinon la référence absolue : W3schools.com

Principales autres balises

Tableaux
● Les tableaux doivent être utilise seulement pour présenter
d’information tabulaire
● Ils ne doivent pas être utilise pour faire le design de la
page
● <table>
‣ <tr> 
• <td > table cell</td>
‣ </tr>
● </table>

Tableaux
<table> Définit une table
<tr> Définit une ligne de la table
<td> Définit une cellule commune
<tbody> Définit le corps du tableau
thead> Définit l'entête du tableau
<th> Définit une cellule de titre
<tfoot> Définit le pied du tableau
<caption> Définit la description du tableau

Tableaux
Code Correspondance
Le résultat est un tableau basic =>

Tableaux
Fusion de cellules
<td colspan=2 >
<td rowspan=2 >

Tableaux
<th>, <thead>, <tbody>, <tfoot> et <caption> permettent d'ajouter
de la sémantique
Même si un résultat visuel est le même, les moteurs de recherche

l’interprète différemment.

Formulaires <form>
● Nécessaire pour collecter et envoyer data vers le serveur,
interaction avec l’utilisateur.
● Composition d’un formulaire :
‣ Une balise <form>
‣ Une méthode d'envoi HTTP : GET ou POST
‣ Une destination (script serveur), dans l'attribut action de

<form>
‣ Des champs (attributs name renseignés), visibles ou non
‣ Un bouton d'envoi (submit)

Formulaires <form>
Méthode GET
● Accède au destinataire via une requête GET (HTTP)
● Données en clair et visibles dans l'URL de la requête
(paramètres)
● Avantages :
‣ URL pouvant être mise en signet (recherche / Google)
‣ Paramètres des URL accessibles en JavaScript
● Inconvénients :
‣ Des données sensibles peuvent être exposées (mot de
passe)
‣ Paramètres pouvant être facilement modifiés
‣ Ne peut pas transférer de fichiers
‣ Taille des URL limitée à 2000 caractères

Formulaires <form>
Méthode POST
● Accède au destinataire via une requête POST (HTTP)
● Données en clair transmises dans l'entête HTTP de la requêtes
(visible avec le debug des navigateurs)
● Avantages :
‣ Plus discret sur ce qui est transmis (mais crypté)
‣ Peut transmettre des fichiers
● Inconvénients :
‣ Ne peut pas être mis en signet
‣ Données non accessibles en JavaScript

Formulaires <form>
Principaux types <input>
Type Elément
Text Saisie de texte
password Saisie de mot de passe
Radio Bouton radio
Checkbox Case à cocher
File Sélection d’un fichier
Button Bouton

Formulaires <form>
¡ hidden (champ caché)
‣ Champ invisible dans le navigateur
‣ Nécessite de remplir les attributs "value" et "name"
Valeur
‣ transmise avec les autres
‣ Très utile
¡ reset (remise à zéro)
‣ Apparence d'un bouton
‣ Remet le formulaire dans le même état qu'à la
réception
¡ Autres types HTML5
‣ Nombreux types disponibles, attention compatibilité !

<label>
● La balise « label » représente une légende dans une
interface utilisateur.
● Peut être associé à un contrôle de forme spécifique,

connu sous le nom de contrôle marqué
‣ Peut utiliser l'attribut for pour spécifier le contrôle
marqué
‣ Peut mettre le contrôle de formulaire à l'intérieur de
l'élément d'étiquette lui-même.

Nouveautés HTML5

HTML5 / CSS3
HTML5 : entre autres, nouvelles
balises qui décrivent encore
plus le contenu
(<article>, <header>, etc.)
CSS3 : animations, effets 3D,

dégradés, ombres...

Nouveautés HTML5
¡ Les nouvelles balises sémantiques (<header>,  
<footer> ...)
¡ Les balises multimédias (<audio> et <video>)
¡ La balise <canvas> pour un affichage dynamique
¡ Le stockage hors ligne
¡ Géolocalisation
¡ Une gestion des formulaires plus poussée

Les conteneurs HTML5
balises sémantiques

Les balises sémantiques
En général, une page web est constituée d'un en-tête (tout en
haut), de menus de navigation (en haut ou sur les côtés), de
différentes sections au centre… et d'un pied de page (tout en
bas).
Entête : <header>
Balise regroupant les liens de navigation : <nav>
Portion généralement autonome de la page : <article>
Section de page : <section>
Informations complémentaires : <aside>
Pied de page : <footer>
Et plus récemment,
Contenu principal : <main> (Doit être unique dans la page)
Les balises sémantiques 31
AVANT
APRES
Patrice Pegaule - patrice.pegaule@gmail.com 2016

Les balises sémantiques 32
AVANT
APRES

Exemples de structure

<section>
● L'élément section représente une section générique
d'un document ou une application. Une section, dans ce
contexte, est un regroupement thématique de
contenu, généralement avec un titre.
● Des exemples de sections:
‣ chapitres,
‣ les sections numérotées d'une thèse.

Example no. 1
<!DOCTYPE html>
<html>
<head>
<title>The first example</title>
</head>
<body >
<section> About the course </section>
<section> About the lab </section>
</body>
</html>

Headings
● Les titres des sections
● H1…H6
● Utilises par des moteurs de recherche pour comprendre
la structure des documents
● Ne doit pas être utilise pour des raisons de style (pour faire
le texte plus gros et plus haut)
● <h1>titre du document</h1>
‣ <h2> titre de la première section</h2>
• <h3> titre de la première sous-section</h3>

Example no. 2
<!DOCTYPE html>
<html>
<head>
<title>The second example</title>
</head>
<body >
<section>
<h2>About the course</h2>
<p>Some information about the course</p>
</section>
</body>
</html>
<header>
● L'élément <header> représente un
groupe d'aides d'initiation ou de navigation.
● Un élément <header> peut contenir un titre (un

élément h1-h6 ou un élément HGroup),
● L'élément en-tête peut également être utilisé pour

envelopper le tableau d'une section de contenu, un
formulaire de recherche, ou les logos pertinents.

<footer>
● L'élément footer représente un footer de son ancêtre le
plus proche de l'élément racine.
● contient des informations sur sa section, comme qui l'a

écrit, des liens vers des documents connexes, les
données le droit d'auteur, et autres.
● Lorsque l'élément footer contient des sections entières, ils

représentent annexes, index, accords de licence, et
d'autres contenus tels.

Example no. 3
<header>
<h2>Cours de HTML</h2>
</header>
<section>
<h3>Programme</h3>
<p>quelques infos sur le cours</p>
</section>
<footer>
<p>Adresse du contact</p>
</footer>

<nav>
● L'élément nav représente une section d'une page avec
des liens de navigation.
● Liens sont vers
‣ Des pages du même site
‣ Des pages des autres sites
‣ Des points dans la même page

Listes
● Listes ordonnées <ol>
● Listes à puces : <ul>
● Eléments du chaque liste - <li>
● Exemple:
‣ <ul>
• <li>rouge</li>
• <li>vert</li>
‣ </ul>

Liens
● <a href=“url absolue ou relative” target=“”>texte ou
image</a>
● « target » représente ou le lien doit être ouvert

‣ S’il manque – la même page
‣ “_blank” – nouvelle fenêtre
● <a name=“le nom d’une ancre dans le même

document> texte ou image </a>
● <a href=“#nom d’une ancre”>text or image</a>

Absolute vs urls relatifs
● Url absolue: http://www.google.com
● ./images/1.jpg Url relative - se réfère à la 1.jpg fichier

qui se trouve dans les dossier qui s’appelle images et qui
est fils du dossier du base / en cours
● Si la page comporte un élément de base - l'URL

relative commence à partir de l'adresse de base
● Si la page n'a pas un élément de base l'URL

relative commence à partir de l'URL de la page en cours

Example no. 4
<nav>
<ul>
<li><a href="#cours">Cours</a></li>
<li><a href="#cours">TP</a></li>
<li><a href="exercice1.html">Exercice 1</a></li>
<li><a href="http://www.w3schools.com
target=_blank">w3schools</a></li>
</nav>
<section>
<header>
<h2>Cours Html</h2>
<p>programme du cours</p>
</header>
</section>
<figure>
● L'élément figure représente une partie du contenu,
éventuellement avec une légende, qui est autonome
et est généralement référencé comme une seule unité à
partir du flux principal du document.
● Habituellement contient des images, des vidéos
● Peut contenir du texte / code / <pre>
● <figcaption> - L'élément figcaption représente une
légende pour le reste du contenu de l'élément parent

Images
● <img src="url absolue ou relative" alt="texte alternatif,
texte pour le cas ou l’image ne peut pas être affichée ou
compris" />
● L’attribut "alt" est obligatoire XHTML!
● l’attribut « src » peut être un url complet: http://host/

path_to_file ou un chemin relative a la page curent.

<video>
● A video element is used for playing videos or movies, and
audio files with captions.
● some attributes:
‣ src = the address of the file
‣ poster = the address of an image to show if the
video is not available
‣ autoplay= boolean; if present the video will be
played as soon as it is available
‣ controls = boolean; if present the controls will be
displayed
‣ muted=boolean; if present the sound will be muted
‣ width, height = the dimensions of the video frame

Example no. 5
<figure>
<img src="/images/3il.jpg" />
<figcaption>Logo de 3il</figcaption>
</figure>
<figure>
<video src="/videos/introduction.mp4" controls="controls"
poster="/images/thumb.jpg" />
<figcaption>Retrouvez sur YouTube les vidéos du cours</
figcaption>
</figure>

<main>
La balise <main> indique la zone principale du document.
Le contenu de l'élément <main> doit être unique au document.

Il ne doit contenir aucun contenu qui est répété dans les
documents tels que les barres latérales, les liens de navigation,
les informations de copyright, les logos de site et les formulaires
de recherche.
A noter: Il ne doit pas y avoir plus d'un élément <main> dans un

document. L'élément <main> ne doit PAS être un descendant
d'un élément <article>, <aside>, <footer>, <header> ou <nav>.
Il ne marche pas sous Internet explorer mais uniquement sous

Edge
En savoir + : w3schools

<main>
<main>
<h1>Navigateurs Web</h1>
<p>Google Chrome, Firefox, et Internet Explorer sont les navigateurs les
utilisés.</p>
<article>
<h1>Google Chrome</h1>
<p>Chrome est libre, en open-source et développé par Google</p>
</article>
<article>
<h1>Internet Explorer</h1>
<p>Internet Explorer est le navigateur gratuit de Microsoft depuis
1995.</p>
</article>
<article>
<h1>Mozilla Firefox</h1>
<p>Firefox est libre, en open-source. Il vient de from Mozilla et a vu le
jour en 2004.</p>
</article>
</main>

Quelques rappels

Editeurs de texte
¡ Voir une liste non exhaustive d’éditeurs de texte.
Windows Linux Apple

Sublime Text Sublime Text Atom
Notepad++ Brackets Sublime Text
Brackets gEdit Brackets
jEdit Kate jEdit
PSpad nano Smultron
ConTEXT vim TextWrangler
Emacs
jEdit

Les commentaires 54
Avant de commencer à coder, rappel des commentaires …
HTML CSS JavaScript PHP

 lignes */
// une ligne // une ligne
<p>Hi</p> div { color: blue; } /* /*

 Utilité : servir d'exemple */ Utilité : servir d'exemple */
// cette ligne initialise a à 2 $a=2;

// initialise a à 2

Types de balise HTML
¡ Balises ouvrantes et fermantes <balise>contenu</balise>
<p>Du contenu ici. <a href="http://google.fr">Google</a>.</p>
<div>Du contenu ici</div>
...
¡ Balises autofermantes <balise />

<br />
<img src="logo.png" alt="logo" />
<meta charset="utf-8" />
...

Structure d'une page HTML
<!doctype html>
<html>
<head>
<title>Bonjour</title>
</head>
<body>
<div id="header">
<h1>Titre de la page</h1>
<ul id="menu">
<li>Accueil</li>
<li>Portfolio</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
<p>Ceci est ma page</p>
</body>
</html>

Structure d'une page HTML
<!doctype html>
<html>
<head>
<title>Bonjour</title>
</head>
<body>
<div id="header">
<h1>Titre de la page</h1>
<ul id="menu">
<li>Accueil</li>
<li>Portfolio</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
<p>Ceci est ma page</p>
</body>
</html>

Liens absolus et relatifs

images/logo.png
<img src="images/logo.png" alt="" />

../
../images/logo.png
background: url(../images/logo.png);

Conclusions
● Dans ce cours, nous n’avons parlé seulement des tags les
plus importantes, vous allez découvrir plus dans votre
travail.
● HTML doit être utiliser uniquement pour présenter le

contenu d’une page web.

HTML 5
Tél. +33(0) 674 33 44 20
patrice.pegaule@gmail.com

01 HTML 5 PDF

Transféré par

Droits d'auteur :

Formats disponibles

01 HTML 5 PDF

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

01 HTML 5 PDF

Transféré par

Droits d'auteur :

Formats disponibles

HTML5

Patrice Pegaule / 2016

Patrice Pegaule - patrice.pegaule@gmail.com 2016 2

Patrice Pegaule - patrice.pegaule@gmail.com 2016 3

Patrice Pegaule - patrice.pegaule@gmail.com 2016 4

Patrice Pegaule - patrice.pegaule@gmail.com 2016 5

Patrice Pegaule - patrice.pegaule@gmail.com 2016 6

Patrice Pegaule - patrice.pegaule@gmail.com 2016 7

● DOCTYPE sont nécessaires pour des raisons historiques.

● Quand il est omis, les navigateurs ont tendance à

Patrice Pegaule - patrice.pegaule@gmail.com 2016 8

● Contient un élément <head> (qui contient des

● Contient un élément <body> (qui contient le contenu)

● Peut avoir des attributs globaux comme "lang"

Patrice Pegaule - patrice.pegaule@gmail.com 2016 9

● <title> - le titre du document

● <link> - le lien vers un resource utilise par la page

● <meta> - information supplémentaire sur la page – mots

● <script> - des références aux fichiers javascript

Patrice Pegaule - patrice.pegaule@gmail.com 2016 10

● La section « body » doit contenir SEULEMENT du contenu

● L’information du style doit être mis en documents

● Nous allons voir les éléments du section « body » et nous

Patrice Pegaule - patrice.pegaule@gmail.com 2016 11

● Attention, les balises servent à la gestion du contenu mais

Patrice Pegaule - patrice.pegaule@gmail.com 2016 12

¡ Liste des balises HTML5 expliquée en fr : Site Jaéthème.com

Patrice Pegaule - patrice.pegaule@gmail.com 2016 13

Patrice Pegaule - patrice.pegaule@gmail.com 2016 14

Patrice Pegaule - patrice.pegaule@gmail.com 2016 15

Patrice Pegaule - patrice.pegaule@gmail.com 2016 16

Le résultat est un tableau basic =>

Patrice Pegaule - patrice.pegaule@gmail.com 2016 17

<td colspan=2 >

<td rowspan=2 >

Patrice Pegaule - patrice.pegaule@gmail.com 2016 18

Même si un résultat visuel est le même, les moteurs de recherche

Patrice Pegaule - patrice.pegaule@gmail.com 2016 19

● Composition d’un formulaire :

‣ Une balise <form>

‣ Une méthode d'envoi HTTP : GET ou POST

‣ Une destination (script serveur), dans l'attribut action de

‣ Des champs (attributs name renseignés), visibles ou non

‣ Un bouton d'envoi (submit)

Patrice Pegaule - patrice.pegaule@gmail.com 2016 20

Patrice Pegaule - patrice.pegaule@gmail.com 2016 21

Patrice Pegaule - patrice.pegaule@gmail.com 2016 22

Text Saisie de texte

password Saisie de mot de passe

Radio Bouton radio

Checkbox Case à cocher

File Sélection d’un fichier

Patrice Pegaule - patrice.pegaule@gmail.com 2016 23

Patrice Pegaule - patrice.pegaule@gmail.com 2016 24

● Peut être associé à un contrôle de forme spécifique,

Patrice Pegaule - patrice.pegaule@gmail.com 2016 25

Patrice Pegaule - patrice.pegaule@gmail.com 2016 26

(<article>, <header>, etc.)

CSS3 : animations, effets 3D,

● Peut avoir des attributs globaux comme "lang" 