1 HTML Basique
Hypertext Markup Language
2
(HTML)
Décrit le contenu et la structure des informations
sur une page Web.
pas la même chose que la présentation ou
l’apparence à l'écran.
Entoure le contenu du texte avec des balises
d'ouverture et de clôture.
Le nom de chaque balise est appelé un élément :
●
syntaxe : <élément> contenu </élément>
●
exemple : <p>C’est un paragraphe.</p>
La version actuelle de HTML est HTML5.
XHTML
3
Utilise le format XML
XML + HTML = XHTML
Standardisé en 2000
Une page XHTML stricte utilise une
syntaxe et des balises différentes de
celles du HTML
Structure d’une page HTML
4
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
information about the page
</head>
<body>
page contents
</body>
</html> HTML
L'en-tête (<head>…</head>) décrit la page et le corps
(<body>…</body>) contient le contenu de la page.
une page HTML est enregistrée dans un fichier se terminant par
l'extension « .html ».
DOCTYPE indique que la navigateur doit interpréter le code de la page
comme HTML5 (la dernière version du langage).
Header décrit la page
Body contient le contenu de la page
Titre de la page : balise <title>
5
…
<head>
<title> HARRY POTTER AND THE DEATHLY HALLOWS - PART
2 </title>
</head>
…
HTML
Placé dans l’en-tête de la page.
Affiché dans la barre de titre du navigateur
Web et quand la page est marquée par un
marque page.
Paragraphe : balise <p>
6
…
<body>
<p> Harry Potter and the Deathly Hallows,
the last book in the series, begins directly after the events of
the sixth book.
Voldemort has completed his ascension to power and gains
control of the Ministry of Magic</p>
</body>
… HTML
Harry Potter and the Deathly Hallows, the last book in the series, begins
directly after the events of the sixth book. Voldemort has completed his
ascension to power and gains control of the Ministry of Magic
output
Placé dans le corps de la page.
Rubriques : balises <h1>,
7
<h2>, … <h6>
<h1> Harry Potter </h1>
<h2> Books </h2>
<h3> Harry Potter and the Philosopher’s Stone </h3>
HTML
Harry Potter
Books
Harry Potter and the Philosopher’s Stone
output
Bar horizontal : balise <hr />
8
<p> First paragraph </p>
<hr />
<p> Second Paragraph </p>
HTML
First Paragraph
Second Paragraph
output
A noter que cette balise est auto-fermante.
Éléments de bloc et de ligne (1/2)
9
Les éléments de bloc contiennent en général
une grande région du contenu.
●
Exemples : paragraphes, listes, cellules
de tableau, etc.
●
le navigateur Web sépare les blocs en
utilisant une marge d'espace.
Éléments de bloc et de ligne (2/2)
10
Les éléments de ligne affectent une petite quantité du
contenu.
● Exemples : texte en gras, fragments de code, images,
etc.
● Le navigateur permet à de nombreux éléments de
ligne d’apparaitre sur lamême ligne.
● Les éléments de ligne doivent être imbriqués dans un
élément de bloc.
Balises HTML : plus d’information (1/2)
11
Certaines balises peuvent contenir des informations
supplémentaires appelées attributs.
Syntaxe :
<element attribute="value" attribute="value">
content
</element>
Exemple :
<a href="page2.html">Next page</a>
Balises HTML : plus
12
d’information (2/2)
Certaines balises n’ont pas de contenu. Elles peuvent
être ouvertes et fermées immédiatement (balises
auto-fermantes).
Syntaxe :
<element attribute="value" attribute="value" />
Exemples :
<hr />
<img src="Harry.jpg" alt="pic of Harry Potter"/>
Liens : balise <a> (1/2)
13
<p>
Search
<a href="http://www.google.com/">Google</a>
now!
</p>
HTML
Search Google now!
output
L'attribut href indique l'URL de destination.
Les liens sont des éléments de ligne. Ils doivent
donc être placés à l'intérieur d'un élément de
bloc tel que <p> ou <h1>.
Liens : balise <a> (2/2)
14
<p><a href=“deathlyHallows-book.html">Harry Potter and the
Deathly Hallows Book</a></p>
<p><a href="http://en.wikipedia.org”
title="Search">Wikipedia</a></p>
HTML
Harry Potter and the Deathly Hallows
Wikipedia output
Types d'URL qui peuvent apparaître dans les liens :
Absolue : vers un autre site web ;
Relative : vers une autre page sur un même site.
Balises imbriquées
15
Faux :
<p>
<a href=" deathlyHallows-book.html"> Harry Potter and the
Deathly Hallows Book </p>
<p>
This text also links to Harry Potter Book</a>
</p>
HTML
Les balises doivent être correctement imbriquées :
une balise de fermeture doit correspondre à balise la
plus récemment ouverte.
Le navigateur peut afficher une page dans laquelle
des balises sont incorrectement imbriquées, mais
cette page ne sera pas valide car la syntaxe n’est pas
correcte.
Images : balise <img> (1/2)
16
<img src="images/tobby.jpg" alt=“Tobby from Harry Potter" />
HTML
L'attribut src spécifie la source de l'URL de
l'image.
HTML5 nécessite également un attribut alt
décrivant l'image.
Images : balise <img> (2/2)
17
<a href="http://harrypotter.net/">
<img src="images/dumbledore.jpg" alt=“Dumbledore from Harry
Potter"
title="Alas! Ear wax!"/>
</a>
HTML
Si l’image est placée à l'intérieur d'une balise <a>,
elle devient un lien.
L'attribut optionnel title spécifie une info-bulle.
Saut de ligne : balise <br />
18
<p>One Ring to rule them all, One Ring to find them,
<br /> One Ring to bring them all and in the darkness bind
them.</p>
<p> In the Land of Mordor where the Shadows lie. </p>
HTML
One Ring to rule them all, One Ring to find them,
One Ring to bring them all and in the darkness bind them
In the Land of Mordor where the Shadows lie.
output
La balise <br /> est auto-fermante.
La balise <br /> ne devrait pas être utilisée pour séparer
les paragraphes ou utilisée à plusieurs reprises pour créer
des espaces.
Commentaires : balise <!-- … -->
19
<!-- My web page, by Bob Student
INF2164, year 2048 -->
<p>CS courses are <!-- NOT --> a lot of fun!</p>
HTML
CS courses are a lot of fun!
output
Les commentaires sont utiles, par exemple, pour
désactiver certaines sections d'une page.
Les commentaires ne peuvent pas être imbriqués
et ne peuvent pas contenir “--”.
Éléments de phrase :
balises <em>, <strong>
20
<p>
HTML is <em>really</em>,
<strong>REALLY</strong> fun!
</p>
HTML
HTML is really REALLY fun!
output
La balise <em> : texte en italique.
La balise <strong> : texte fortement souligné
(habituellement en gras).
Les balises doivent être correctement imbriquées pour
une page valide.
Liste non ordonnée :
balises <ul>, <li>
21
<ul>
<li>No shoes</li>
<li>No shirt</li>
<li>No problem!</li>
</ul> HTML
• No shoes
• No shirt
• No problem! output
La balise <ul> représente une liste à puces
d'éléments (bloc).
La balise <li> représente un élément unique dans
la liste (bloc).
Liste non ordonnée : exemple
22
<ul>
<li>Harry Potter characters:
<ul> • Harry Potter characters:
<li>Harry Potter</li> • Harry Potter
<li>Hermione</li> • Hermione
<li>Ron</li> • Ron
</ul> • LOTR characters:
</li> • Frodo
<li>LOTR characters: • Bilbo
<ul> • Sam
<li>Frodo</li>
<li>Bilbo</li>
output
<li>Sam</li>
</ul>
</li>
</ul>
HTML
Liste ordonnée : balise <ol>
23
<p>Apple business model:</p>
<ol>
<li>Beat Microsoft</li>
<li>Beat Google</li>
<li>Conquer the world!</li>
<li>Develop a good operating system<li>
</ol> HTML
Apple business model:
1. Beat Microsoft
2. Beat Google
3. Conquer the world!
4. Develop a good operating system
output
La balise <ol> représente une liste numérotée des éléments.
Nous pouvons faire des listes avec des lettres ou des chiffres
romains en utilisant le CSS (plus tard).
Erreur courante : liste non fermée
24
<ul>
<li>No shoes</li>
<li>No shirt</li>
<li>No problem!</li>
<p>Paragraph after list...</p> HTML
• No shoes
• No shirt
• No problem!
Paragraph after list... output
Si vous laissez une liste ouverte, le contenu
ultérieur
sera aligné incorrectement.
Erreur commune :
mauvaise imbrication de listes
25
<ul>
<li>Harry Potter characters:</li>
<ul>
<li>Harry Potter</li>
<li>Hermione</li>
<li>Ron</li>
</ul>
</li>
<li>LOTR characters:
<ul>
<li>Frodo</li>
<li>Bilbo</li>
<li>Sam</li>
</ul>
</ul> HTML
La fermeture précipité de la balise <li> (ou l’absence de
la fermeture de la balise <li>) rendra l’affichage de la
page correct dans la plupart des navigateurs, mais la
page ne sera pas valide.
Liste de définitions :
balises <dl>, <dt>, <dd>
26
<dl>
<dt>newbie</dt> <dd>one who does not have mad skills</dd>
<dt>jaded</dt> <dd>tired, bored, or lacking enthusiasm
</dd>
<dt>frag</dt> <dd>a kill in a shooting game</dd>
</dl> HTML
newbie
one who does not have mad skills
jaded
Tired, bored, or lacking enthusiasm
frag
a kill in a shooting game output
La balise <dl> représente une liste de définitions de
termes.
La balise <dt> représente chaque terme, et la balise
<dd> sa définition.
Tableaux :
balises <table>, <tr>, <td>
27
<table>
<tr><td>1,1</td><td>1,2 okay</td></tr>
<tr><td>2,1 real wide</td><td>2,2</td></tr> </table>
HTML
1,1 1,2 okay
2,1 real wide 2,2
output
La balise <table> définit le tableau; la balise <tr> chaque ligne du
Utile pour l'affichage de grands ensembles de données
organisées en lignes et colonnes.
REMARQUE : les tables sont parfois utilisées par des
débutants pour la mise en page web, mais ce n'est pas
sémantiquement approprié en HTML et cela doit être évité.
En-tête et légendes d’un tableau :
balises <th>, <caption>
28
<table>
<caption>My important data</caption>
<tr><th>Column 1</th><th>Column 2</th></tr>
<tr><td>1,1</td><td>1,2 okay</td></tr>
<tr><td>2,1 real wide</td><td>2,2</td></tr>
</table> HTML
My important data
Column 1 Column 2
1,1 1,2 okay
2,1 real wide 2,2
output
Les cellules d'une ligne entourées par la balise <th> sont
considérées comme des en-têtes.
Une légende au début de la table est réalisée à l’aide de la
balise <caption>.
Citations : balise <blockquote>
29
<p>As Lincoln said in his famous Gettysburg Address:</p>
<blockquote>
<p>Fourscore and seven years ago, our fathers brought
forth
on this continent a new nation, conceived in liberty,
and
dedicated to the proposition that all men are created
equal.</p>
</blockquote> HTML
As Lincoln said in his famous Gettysburg Address:
Fourscore and seven years ago, our fathers brought forth on this
continent a new nation, conceived in liberty, and dedicated to the proposition
that all men are created equal.
output
La balise <blockquote> définie une longue
citation.
Citations en ligne : balise <q>
30
<p>Quoth the Raven, <q>Nevermore.</q></p>
HTML
Quoth the Raven, “Nevermore.”
output
La balise <q> défini une citation courte.
Pourquoi ne pas simplement écrire <p>Quoth the Raven,
"Nevermore."</p> ?
Nous n'utilisons pas de symboles " pour deux raisons :
HTML5 ne doit pas contenir de marques de caractères
de citation littérale; ils doivent être écrits comme
"
L’utilisation de la balise <q> nous permet d'appliquer
des styles CSS à des citations.
Entités HTML de caractères
31
Caractères Entités
<> < >
é è
éèñ
ñ
™© ™ ©
πδΔ π δ Δ
И И
"& " &
Codage de texte HTML
32
<p>
<a href="http://google.com/search?
q=xenia&ie=utf-8&aq=t">
Search Google for Xenia
</a>
</p> HTML
<p> <a href="http://google.com/search?q=xenia&ie=utf-8&aq=t"> Search
Google for Xenia </a> </p>
output
Code informatique : balise <code>
33
<p>
The <code>ul</code> and <code>ol</code>
tags make lists.
</p> HTML
The ul and ol tags make lists.
output
La balise <code> défini une courte section
de code informatique.
Texte préformaté : balise <pre> (1/2)
34
<pre>
Bill Gates speaks
You will be assimilated
Microsoft fans delirious
</pre> HTML
Bill Gates speaks
You will be assimilated
Microsoft fans delirious
output
La balise <pre> permet d’afficher le texte
avec tous les espaces et les passages à la
ligne.
Texte préformaté : balise <pre> (2/2)
35
<pre><code>
public static void main(String[] args) {
System.out.println("Hello, world!");
}
</code></pre> HTML
public static void main(String[] args) {
System.out.println("Hello, world!");
}
output
Pour afficher une grande partie de code informatique,
il faut l'enfermer dans une balise <pre> pour
préserver les espaces et dans une balise <code>
pour décrire la sémantique du contenu.
Standards du Web
36
Pourquoi utiliser HTML5 et les standards
du web ?
langue plus rigide et structurée,
plus interopérable entre les différents
navigateurs,
plus probable que nos pages s'affichent
correctement dans l'avenir,
peut être échangé avec d'autres données XML :
SVG (graphiques), MathML, MusicML, etc.
Validateur XHTML du W3C
37
<p>
<a href="http://validator.w3.org/check/referer">
<img src="http://www.w3.org/Icons/valid-xhtml11"
alt="Validate" />
</a>
</p> HTML
Vérifie votre code HTML pour s'assurer qu'il respecte la
syntaxe officielle HTML5.
Plus strict que le navigateur qui peut afficher correctement
une page HTML syntaxiquement incorrecte.
Utilisé sous forme de script par votre enseignant pour
valider les TP
Métadonnées d’une page Web :
balise <meta>
38
<meta name="description"
content=“Harry Potter Official Website." />
<meta name="keywords" content="harry potter, harry potter
and the deathly hallows, deathly hallows, ministry of
magic, resurrection stone, clock of invisibility" />
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" /> HTML
Contient l’information sur votre page pour un
navigateur, un moteur de recherche, etc.
Placé dans la tête de votre document HTML.
La balise <meta> spécifie (en général) à la fois deux
attributs : name et content.
Parfois une balise <meta> utilise l'attribut http-equiv
au lieu de name.
Balise <meta> pour aider le
navigateur ou le serveur web
39
<meta http-equiv="Content-Type"
content="type of document (character encoding)" />
<meta http-equiv="refresh"
content="how often to refresh the page (seconds)" />
</head> HTML
L’utilisation de Content-Type permet d’éviter
l’avertissement « provisoirement valide » du validateur
W3C :
<meta http-equiv="Content-Type"
content="text/html;charset=iso-8859-1" />
L’utilisation de Refresh peut rediriger une page web vers
une autre :
<meta http-equiv="refresh"
content="5;url=http://www.bjp.com" />
Pourquoi faire cela?
Balise <meta> pour la description
de la page web
40
<head>
<meta name="author"
content="web page's author" />
<meta name="revised"
content="web page version and/or last modification
date" />
<meta name="generator"
content="the software used to create the page" />
</head> HTML
Nombreux éditeurs WYSIWYG HTML (FrontPage,
PageMaker, etc) marquent leur nom dans la balise
<meta>.
Balise <meta> pour aider les
moteurs de recherche
41
<head>
<meta name="description"
content="how you want search engines to display your page"
/>
<meta name="keywords"
content="words to associate with your page (comma
separated)" />
</head> HTML
Ce sont des suggestions pour les moteurs de
recherche sur comment indexer la page web.
Les moteurs de recherche peuvent choisir
d’ignorer cette information.
Qu'est-ce que HTML5 ?
42
Une nouvelle version du langage de balisage HTML (la
norme W3C ).
Successeur de HTML 4.01 et XHTML 1.1.
Etabli l’équilibre entre HTML4 qui est trop « lâche » et
XTML qui est trop stricte.
Réduit le besoin du navigateur en différents plugins
pour afficher, par exemple, le contenu multimédia.
Rendre le contenu Web plus riche, sémantiquement
significatif,descriptif, accessible.
Présenter le Web comme une plate-forme
d'application (Web 2.0).
HTML5 : nouveautés (1/3)
43
Voir les liens :
https://github.com/html5rocks/slides.html5rocks.com
https://www.w3schools.com/html/
En résumé :
– Ajout de balises sémantiques : nav, aside, header, footer, section, aside,
article
– Les formulaires passent à la version 2.0 :
ajout curseurs, barres de recherche,
couleur / nombre / email / url
date / heure, des espaces réservés, ...
HTML5 : nouveautés (2/3)
44
Ajout des balises <audio> et <video> pour l'intégration de multimédia.
Ajout de la balise <canvas> pour dessiner des formes 2D en HTML / JS (comme dans
DrawingPanel).
– https://www.rgraph.net/canvas/reference/index.html
– https://webmediadev.wordpress.com/2011/10/13/html5-canvas-cheat-sheet/
– https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial
Exemple : http://www.effectgames.com/demos/canvascycle/
HTML5 : nouveautés (3/3)
45
sémantique Web / attributs de microdonnées : rel = "...", itemscope, itemtype,
itemprop, voir :
●
http://en.wikipedia.org/wiki/Semantic_Web
●
http://diveintohtml5.info/
intégration des formats de type XML
autres choses :
●
des applications hors ligne,
●
la géolocalisation (http://diveintohtml5.info/geolocation.html),
●
gestion de l'historique, …
Multimédia : formats de fichiers (1/2)
46
Différence de fonctionnement (animation, 5.1 stéréo,
transparence)
Nombreux formats multimédias utilisent la compression
pour réduire la taille du fichier :
●
les algorithmes de compression sont appelés des
codecs (liste)
●
certains algorithmes de compression sont «sans
perte», d'autres «avec perte» de qualité.
Certains formats sont brevetés (inutilisable dans le logiciel
libre).
Multimédia : formats de fichiers (2/2)
47
Certains formats sont cryptés pour protéger les informations à
l'intérieur :
gestion des droits numériques (Digital Rights Management -
DRM) défini ce que l’utilisateur peut faire avec le fichier
Le cryptage peut etre rompu : DeCSS
Certains formats sont en streaming (peut jouer pendant le
Téléchargement)
Comparaisons de formats
Formats des fichiers « image » (1/2)
48
JPEG :
●
utilise "compression avec perte"
●
petite taille de fichier
●
bon pour les photos
GIF :
●
256 couleurs;
●
codage sans perte LZW
●
permet la transparence
●
possible de créer des GIF animés
Formats des fichiers « image » (2/2)
49
PNG :
●
format libre : créé pour éviter de brevets du format
GIF;
●
compression sans perte,
●
transparence
Autres : TIFF, PNG
Comparaisons de format d'image : texte, photo
Images pixellisées et vectorielles
50
Les formats d'image vus précédemment sont les formats raster ou
bitmap :
●
ils décrivent les pixels qui doivent être affichés sur l'écran.
Les formats graphiques vectoriels tels que SVG décrivent des
formes / lignes plutôt que des pixels :
– Avantage :
●
une précision infinie ;
●
bon pour le zoom et l’impression .
– Inconvénients :
●
pas pris en charge sur toutes les plateformes ;
●
coûteux en calcul.
Formats des fichiers « audio »
51
MP3 : utilise la compression avec perte qui élimine les sons
inaudibles.
AAC : format des fichier audio iTunes d'Apple.
WMA/ASF : format Microsoft Windows Media Audio.
OGG : format hippie audio/vidéo Linux.
RA/RM/RAM : format Real Audio.
Autres formats : WAV (MS), AU (Sun), AIFF/SND (Apple), FLAC.
Musique séquencée : MID, MOD.
Comparaison des formats d’audio.
Formats des fichiers « video »
52
MPEG : format vidéo standard de Motion Picture.
●
les DVD sont encodés au format MPEG-2
●
HD DVD sont souvent compressés avec le codec
MPEG-4 (H.264).
MOV : QuickTime format de films d'Apple.
WMV/ASF : format Windows Media Video de Microsoft.
AVI: format classique vidéo de Microsoft qui peut être
différemment encodé.
SWF/FLC : format multimédia de Macromedia Flash.
RV : format Real Video.
Comparaison des formats.
Flash
53
http://en.wikipedia.org/wiki/Macromedia_flash
Format de graphiques, vidéo, audio développé par
Macromedia/Adobe.
Largement utilisé pour de nombreuses raisons :
●
pris en charge dans la plupart des grandes plates-
formes et navigateurs, léger, peut produire
d’impressionnants contenu interactif animé.
Bémols :
●
propriétaire,
●
le logiciel d'édition coûte de l'argent
(le spectateur est libre).
Exemples : Duck Hunt, Homestar Runner
Fichiers multimédias et HTML5
54
<a href="video.avi">My video</a>
Le navigateur possède une liste d'applications par
défaut à associer à chaque type de fichier.
S’il a trouvé une application associée, cette application
sera exécutée.
Certains types de fichiers sont affichés dans le
navigateur en utilisant des plugins.
Si le navigateur n’a pas trouvé une application associée,
il propose de télécharger le fichier.
Les types de fichiers et les plugins
55
Un plugin est une application du navigateur pour afficher certains
types de fichiers.
●
Exemples : Flash player, QuickTime, Windows Media
Player, Acrobat Reader, Java.
URL « about:plugins » affiche la liste des plugins de Firefox.
Vous pouvez entrer dans les préférences d’un navigateur, puis
choisir : contenu, types de fichiers, gérer, etc.
cela permet de changer l’application/
le plugin qui sera utilisé pour ouvrir
des types de fichiers particuliers.
Vidéo et HTML5
56
<video src="video.ogv"
width="425"
height="350">
</video>
http://diveintohtml5.info/video.html
Il est facile de manipuler la vidéo en utilisant JS DOM
(lecture/pause/stop/etc.)
un inconvénient :
●
drame sur le nombres de codecs comme MPEG
4/H.264, Ogg Theora /VP3,WebM, AVI, etc..
Objets incorporés : balise <object>
57
<object data="video.avi" type="video/avi"></object>
http://www.w3schools.com/tags/tag_object.asp
C'est ainsi que vous allez faire pour intégrer une vidéo
dans un document HTML5.
●
Attributs : archive, classid, codebase, codetype,
data, declare, height, name, standby, type,
usemap, width
– l’attribut type spécifie le type MIME du fichier.
– le navigateur IE6 a besoin de l’attribut classid pour
spécifier quels plug-in utiliser (liste).
Objets incorporés : balise <param>
58
<object id="slider1" width="100" height="50">
<param name="BorderStyle" value="thick" />
<param name="MousePointer" value="hourglass" />
<param name="Enabled" value="true" />
<param name="Min" value="0" />
<param name="Max" value="10" />
</object>
http://www.w3schools.com/tags/tag_param.asp
indique un paramètre à passer à l'objet incorporé
Les attributs name et value sont obligatoires.
Intégration d'une vidéo YouTube
59
<object width="width" height="height"
type="application/x-shockwave-flash" data="videoURL">
<param name="wmode" value="transparent" />
parameters
</object>
<object width="425" height="350"
type="application/x-shockwave-flash«
data="http://www.youtube.com/v/eKgPY1adc0A">
<param name="wmode" value="transparent" />
</object>
ce code, contrairement au code sur des pages de YouTube, est
compatible avec HTML5.
60
