Les base du Html5
-
Upload
erwan-tanguy -
Category
Internet
-
view
720 -
download
0
Transcript of Les base du Html5
Aperçu rapide des
bases du HTML5
Ticoët l Communication culturelle
Rozenn Tanguy - 06 78 00 37 02 - [email protected]
Erwan Tanguy – 06 62 15 11 02 – [email protected]
HTML5 2
HTML : les balises et les attributs
HTML permet d'enrichir un
texte avec des informations
structurelles, sémantiques et
de présentation. Le principe
de HTML consiste à utiliser
des éléments délimités par
des balises.
<balise>éléments</balise>
Exemple :
<h1>Titre de mon
contenu</h1>
<p>Paragraphe de mon
contenu<p>
Les attributs permettent
d'apporter certaines précisions
à des éléments. Il peut s'agir par
exemple d'un nom de fichier
(pour placer une image) ou
d'une référence à une adresse
HTML (lorsqu'on crée un lien).
<balise
attribut="contenu">éléments</b
alise>
Exemple d’une image :
<IMG src="bateau01.jpg" alt="Un
bateau">
HTML5 3
Le head
Simplification du code Contrairement aux version html et xhtml passées, il ne sera plus nécessaire de spécifier la version. Cette une manière d'annoncer que le html5 est compatible avec toutes les versions et que les futures versions du html devront l'être.
<!DOCTYPE html> <html> <head>
<meta charset="UTF-8"> <title>ma page</title> <meta name="description" content="ma page"> <link rel="stylesheet"
href="file.css"> <script src="file.js"></script> </head> (…)
HTML5 4
Les balises
Par défaut, il existe plusieurs comportements pour les balises. Les deux principaux
sont les balises bloc et les balises inline.
Bloc Les balises bloc déterminent
un cadre qui, par défaut, prend 100% de la largeur et dont la hauteur se définit par ses contenus. Il est possible d’imbriquer plusieurs balises
bloc en fonction des besoins.
Les balises les plus courantes : <div> pour un cadre sans
particularité ;
<h1>, <h2>, <hx> pour encadrer des titres ;
<p> pour encadrer des paragraphes ;
<hr> pour afficher une ligne de séparation ;
<header>, <footer>, <section>, <article>, <aside> pour encadrer des
parties précises de votre contenu…
HTML5 5
Les balises
Inline Les balises inline déterminent une particularité pour des
éléments précis. Il a la largeur que lui impose son contenu.
Les balises les plus courantes :
<strong> pour afficher un
gras ;
<em> pour afficher une
emphase, italique ;
<span> pour encadrer des
éléments sans particularité –
utile pour des modifications
avec les CSS ;
<br> pour faire un saut de
ligne ;
<img
src="url" alt="description">
pour afficher une image ;
<a href="url"> pour mettre un
lien sur un élément…
HTML5 6
Les attributs
Les attributs les plus courant
pour faciliter l’usage des CSS
permettent d’ajouter des
identifiants ou des classes aux
balises. Cela permet par
exemple de pouvoir isoler une
div d’une autre :
<div>contenu</div>
<div id="special">contenu
identifié</div>
L’id "special" va permettre de
donner des spécificités CSS sans
toucher à l’autre div. En CSS, on
appelle cet élément #special.
Liste des attributs les plus
fréquents :
id pour donner un identifiant
(CSS : #id) ;
class pour donner une classe
(CSS : .class) ;
title pour donner une
information bulle à un
contenu (texte ou image) ;
href pour indiquer le chemin
pour les liens <a> ou les styles
CSS <link> ;
src pour indiquer le chemin
pour les <script> ou les
images <img>…
HTML5 7
Le <head>
Simplification du code Contrairement aux version html et xhtml passées, il ne sera plus
nécessaire de spécifier la version. Cette une manière d'annoncer que le
html5 est compatible avec toutes les versions et que les futures versions
du html devront l'être.
Exemple de html5 :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ma page</title>
<meta name="description" content="ma page">
<link rel="stylesheet" href="file.css">
<script src="file.js"></script>
</head>
(…)
HTML5 8
HTML5
Introduction : vers un web sémantique La version finalisée du html5 est prévu pour 2014 mais il est déjà possible de
l’utiliser. L’avantage du html5 par rapport aux xhtml et hml4, c’est son importante orientation sémantique. Vous allez pouvoir plus facilement définir les rôles des balises html, ce qui aura aussi certainement un impact sur le référencement. Sémantique ? Le web sémantique est un mouvement qui favorise les « méthodes communes pour échanger des données ».
Le html est sémantique depuis le début. Les balises qui composent le code html définissent leur rôle. Le titre principale est défini par un <h1>, les paragraphes sont eux des <p>, etc. Le html5 va plus loin en proposant des balises pour presque tous les cas. Là où était utilisée la balise <div> pour les blocs du site, nous allons pouvoir spécifier ces blocs comme étant un <header>, un <footer>, le contenu de l’ <article>.
Voir : http://fr.wikipedia.org/wiki/Web_s%C3%A9mantique http://www.php-astux.info/semantique-html.php
HTML5 9
Les balises obsolètes
Certaines balises, même si elles peuvent être comprises par les navigateurs, sont considérées comme
obsolètes par le html5. Il est recommandé de ne plus utiliser. Les balises à éviter frame, frameset et noframes acronym (utiliser abbr à la place) font, big, center et strike
Les balises redéfinies <b> maintenant juste pour appliquer un style à un texte sans donner une importance <i> pour signifier que le texte est une voix alternative sans donner
d'importance <cite> pour citer le nom d'une œuvre mas plus le nom d'une personne
Les liens : ça change !
La modification du mode
d'écriture des liens est importante.
La balise <a>, de type inline, ne
pouvait se placer que dans des
balises bloc (<h1><a
href="monlien.html">titre</a></h1>). Si un
lien était répété sur un titre et un
paragraphe, il fallait le rédiger
dans le <h1> et dans le <p>. Avec
le html5, vous pouvez envelopper
les deux balises par un <a> : <a href="monlien.html"><h1>titre</h1><p>mon
texte de paragraphe</p></a>
Par contre il n'est pas possible
d'insérer un <a> dans un <a> !
HTML5 10
Structure
Header, footer, nav La fonction de ces trois balises est assez simple à comprendre. Elles
encadrent l'entête, le pied de page et le menu de navigation.
La véritable nouveauté de ces trois balises résident dans le fait qu'elles ne
sont pas exclusivement destinées à l'ensemble de la page (auquel cas il
n'y aurait qu'un header, qu'un footer…) mais peuvent définir des données
propres à une autre balise structurant la page.
Section Proche de la balise <div> avec une approche plus sémantique, elle est
censé regrouper des contenus contextuel, par thématique ou apparenté.
Cette balise peut contenir un header et un footer. Header, footer, nav et
aside peuvent être utilisés pour spécifiés les différents contenus de section.
HTML5 11
Structure
Aside C'est une forme d'encadré qui peut accueillir du contenu
indirectement en lien avec le contenu général de la page mais qui
n'affecte ce contenu si il était enlevé. Cela peut être une citation
extraite du document principal.
Article Cette balise est proche de section mais plus précise. Elle est censée regrouper les données soit d'une page précise, soit d'un flux éventuel. Il sera donc utilisé pour les billets de blog, les informations, les fils de discussion… Il n'est pas simple de définir quand nous devons utiliser section ou article, sachant qu'il peut y avoir plusieurs section dans un article et inversement.
Exemple de structure en html5
Source de l'image : http://www.html5code.com/tutorials/html5-semantic-layout-tags/
HTML5 13
Les balises inline
Nouveaux éléments orientés sémantiques HMLT5 implémente des éléments "inline" comme les précédents span, strong, em…
Mark
Cette balise permet de surligner des récurrences sans lui donner une importance. Par
exemple, sur une page de résultat pour la recherche d'un terme, <mark> encadre le
terme pour le mettre en surbrillance.
Time
La balise <time> sert à informer sur les dates, les heures ou la combinaison des deux. C'est
une alternative html5 aux microformats. Il est possible d'y ajouter l'attribut pubdate pour
informer que c'est une date de publication.
Exemples :
<time datetime="14:30">14 h 30</time>
<time datetime="2012-08-01T11:12" pubdate>Article publié le 1 août 2012 à 11h12</time>
Autres balises : meter, progress > http://www.alsacreations.com/article/lire/1416-html5-
meter-progress.html
HTML5 14
Utiliser html5 !
Il est possible d'utiliser du HTML5 aujourd'hui, même si tous les navigateurs (soit parce que anciens, soit parce que généralement problématiques). Pour que votre site puisse être lisible sur tous les navigateurs, il vous faudra vous armer de patience et ajouter quelques codes. Style Pour les navigateurs qui ne savent pas encore interpréter le HTML5, vous devrez simplement les renseigner en CSS. Par exemple, vous donnez aux balises blocs une valeur "display: block" (section, article, nav, aside, header, footer et hgroup). Les problèmes les plus important vous viendront de IE. Il faudrait, via du javascript, créer les éléments un par un. Heureusement, il existe des scripts pour le faire. Voir les scripts de Remy Sharp par exemple (http://html5shiv.googlecode.com/svn/trunk/html5.js) à appeler dans votre <head> avec les commentaires IE : <!—[if IE]><script src="…"></script><![endif]-->.
Tableau des éléments
HTML5 16
Quelques liens
Web sémantique et (x)html5
http://tcuvelier.developpez.com/tutoriels/web-semantique/html5-
microdonnees/introduction/
HTML5, l'évolution sémantique et SEO
http://blog.maroketing.com/html-5-evolution-semantique-et-
seo/comment-page-1/
Structurer une page en HTML5 avec les μdonnées et des μformats
http://on-air.hiseo.fr/html5/semantic-html5/
Les spécifications HTML5 http://www.xul.fr/html5/specifications.php
Livre de Jeremy Keith
http://www.abookapart.com/products/html5-for-web-designers/
et lire (en anglais) http://adactio.com/articles/1704/
HTML5 semantic layout tags (en anglais)
http://www.html5code.com/tutorials/html5-semantic-layout-tags/
16