2. HTML 5, une présentation générale par Elisabeth de Pablo

1

19 OCTOBRE 2012

2. HTML 5.0, UNE PRÉSENTATION

Rappel html HTML 5, une base

INALCO - CIM5A01D

2012-2013 - Elisabeth de Pablo

2

Un site web ?

• Y accéder >> à l’aide d’un navigateur ! Facile tout le monde sait le faire

Faire un site ?

• Nécessite de connaître un ou plutôt des langages informatiques dont HTML (HyperText Markup Language) et CSS (Cascading Style Sheets)

Le navigateur traduit les langages pour faire apparaître sur votre ordinateur le site que vous désirez voir.

Rappel


http://en.wikipedia.org/wiki/HTML




http://en.wikipedia.org/wiki/Css




3

La langage html a été inventé par Tim Berners-Lee en 1991

Il a créé le World Wide Web Consortium (W3C) http://www.w3.org/

Ainsi que la World Wide Web Foundation http://www.webfoundation.org/

De nombreuses améliorations ont été faites durant les dernières années = les versions différentes

Rappel


http://www.w3.org/

http://www.w3.org/

http://www.webfoundation.org/

http://www.webfoundation.org/

4

Que fait le langage HTML ?

>> gère et organise le contenu de la page

Jusqu’en 1996, il était tout seul…

Est alors venu s’ajouter le CSS qui lui

>> défini l’apparence de la page

Un exemple bien connu pour se rendre compte des possibilités liées aux CSS : ZEN GARDEN

Rappel


http://www.csszengarden.com/

5

Comment écrire du html ?

Il existe beaucoup de logiciels permettant de réaliser des pages web plus ou moins facilement selon un type dit WYSIWYG ou Editeur de textes.

Le plus connu actuellement : Adobe Dreamweaver (la version CS6 vient de sortir)

Scriptol = page proposant une liste de logiciels gratuits

Le moins onéreux mais orienté code >> utilisez un bloc-notes ou pour un peu plus de confort Note-Pad ou Note-Pad plus plus.

HTML 5, une base


http://www.adobe.com/products/dreamweaver.html

http://www.scriptol.fr/logiciel/creation-page.php

http://www.notepad.org/

http://notepad-plus-plus.org/

http://notepad-plus-plus.org/

6

HTML 5, une base


Pour bien démarrer : les balises

Prenons un éditeur de texte (notepad si possible)

Le langage html utilise des “balises” pour coder ses éléments.

Les balises sont repérables car elles sont encadrées par les signes < et >

Il existe deux types de balises : les balises doubles ou paires et les balises simples ou orphelines.

7

HTML 5, une base


Balises doubles ou paires

Elles encadrent un texte et sont composées de deux parties, une ouvrante < > et une fermante </ >

<p> voici ma page web </p>

Balises simples ou orphelines

Elles servent à insérer un élément à un endroit déterminé, elles se placent généralement après un élément et peut être écrit :

< br> ou <br/>

8

HTML 5, une base


Les attributs des balises

Dans les balises, peuvent être ajoutés des attributs. Ce sont des textes qui fonctionnent comme des options

<image nom=“monimage.jpg”> </image>

On comprend ici que l’image à afficher est celle qui se nomme monimage.jpg.

L’attribut est inscrit uniquement dans la balise ouvrante, on ne le répète pas dans la fermante.

9

HTML 5, une base


Structuration générale de la page HTML

Il existe des impondérables pour créer et structurer une page :

1. Mention du DOCTYPE

= mentionner qu’il s’agit d’une page web html

<!DOCTYPE html>

2. Mention du langage

<html> ici développement complet de la page </html>

10

HTML 5, une base


Structuration générale de la page HTML 2

3. L’en-tête et le corps

Une page web est constituée de deux parties

L’en-tête ou head = des informations générales sur la page qui ne sont pas affichées sur la page dans le navigateur. Ces informations restent au niveau du code mais sont importantes pour les moteurs de recherche par exemple.

<head> </head>

Le corps = le développement visible du site

<body> </body>

11

HTML 5, une base



4. L’encodage des caractères dans le <head>

Sous quel format de caractère votre page est-elle enregistrée ? Il en existe plusieurs : ISO-8859, Windows… Normalement l’encodage “universel” est le utf-8 qui permet de lire tous les caractères utilisés dans le monde.

<meta charset=“utf-8”/>

5. Balises meta <head>

Ce sont des balises qui servent à écrire des méta données (metatags) – on les reverra plus tard.

12

HTML 5, une base



6. Le titre <head>

Donner un titre qui s’affichera dans l’onglet de votre navigateur

<title> MA PAGE WEB </title>

7. Ecrire des commentaires dans le code pour laisser des indications, donner des informations, se répérer sur une page compliquée, … <head> et <body>



13

HTML 5, une base


Résumé

<!DOCTYPE html>

<html>

<head>

<meta charset:”utf-8”>

<title> Ma Page Web </title>

</head>

<body>

<p> entrer ici mon texte >/p>

</body>

</html>

14

HTML 5, une base


Le corps ou <body>

Le texte sous forme de paragraphe et de retour à la ligne

Paragraphe

<p> bonjour et bienvenue sur mon site </p>

Retour à la ligne

<br> ou <br/>

<p> bonjour et bienvenue sur mon site <br>

Je suis heureux de vous présenter notre association </p>

15

HTML 5, une base


Le corps ou <body> 2

Les titres, sous-titres, texte courant, etc.

c’est là où le css est utile aussi.

Par défaut, il y a 6 types de hierarchisation des caractères en html, nommés : <h1>, <h2>,…<h6>

Autres mises en exergue de textes : mise en gras, en italique, surlignage, etc.

Gras ou texte important : <strong> … </strong>

Italique ou texte : <em> … </em>

Surlignage : <mark> …. >/mark>

16

HTML 5, une base


Les listes

Comment créer des listes et les référencer avec des puces, des tirets, etc.

Les balises <ul> </ul> crées une liste

Entre ces deux balises on désigne chaque élément entre deux autres balises <li> </li>

<ul>

<li> premier étage </li>

<li> deuxième étage </li>

</ul>

17

HTML 5, une base


Les listes 2

Comment créer des listes et les référencer avec des puces, des tirets, etc.

Les balises <ol> </ol> crées une autre type de liste

Entre ces deux balises on désigne chaque élément entre deux autres balises <li> </li>

<ol>

<li> premier étage </li>

<li> deuxième étage </li>

</ol>

18

HTML 5, une base


Faire des liens

L’intérêt d’un site web > faire des liens vers d’autres pages ou d’autres sites

Une balise à retenir <a> … </a>

À laquelle vient s’ajouter un attribut : href

Ainsi pour créer un lien dans une page on écrira :

<a href=http://www.archivesaudiovisuelles.fr> Lien vers le site des archives audiovisuelles </a>

http://www.archivesaudiovisuelles.fr/

http://www.archivesaudiovisuelles.fr/

19

HTML 5, une base


Faire des liens 2

Il existe des liens absolus et des liens relatifs

Liens absolus = adresse complète (href=“http://www.semionet.fr ”)

Liens relatifs = adresse vers un fichier qui se trouve dans le dossier du site (href=“contact.html”)

http://www.semionet.fr/

20

HTML 5, une base


Faire des liens 3

Il est possible également de faire des liens vers une “ancre” = un point x de la page en cours ou vers un point y d’une autre page.

Exemple de liens vers des sous-titres : <h2 id=“ancre1”> Les cours </h2> <p> texte </p> <h2 id=“ancre2”> Les Horaires</h2> <p> texte </p>

L’appel au lien dans la page se fera : <a href=“#ancre1”> revoir les cours </a>

L’appel au lien vers une ancre dans une autre se fera : <a href=“presentation.html#ancre1”> revoir les cours </a>

21

HTML 5, une base


Quelques indications supplémentaires

Il est possible de faire ouvrir des liens dans un autre onglet du navigateur par exemple en rajoutant une cible

<a href=“http://www.semionet.fr ” target=“blank” > ESCoM </a>

Il est également possible de faire un lien vers un email

<a href=“mailto:[email protected]”> écrivez moi</a>

Il est également possible de faire télécharger un document

<a href=“document/nomfichier.pdf”> écrivez moi</a>


22

HTML 5, une base


Quelques indications supplémentaires 2

Il est possible de rajouter un texte qui s’affiche en surimpression lorsque la souris passe sur le lien

<a href=“http://www.semionet.fr ” title=“Lien vers le site de l’ESCoM” > ESCoM </a>


23

HTML 5, une base


Insérer des images, Quels formats ?

Choisir au mieux un format afin que l’image puisse s’afficher rapidement lors de la consultation de la page.

Attention, il existe de nombreux formats, chacun est réservé à une fonction particulière.

Pour le web, préférez :

>> le jpg (jpeg), format très utilisé, permet de réduire le poids des photos et d’afficher jusqu’à 16 millions de couleurs

>> le gif pour les graphiques, desssins ou tout fichier qui ne demande pas une grosse gestion des couleurs

>> le png remplace le gif pour tous les graphiques

24

HTML 5, une base


Insérer des images

Balise image simple accompagné de deux attributs : src (= l’emplacement de l’image en lien relatif ou absolu) et alt (=texte qui remplace l’image en cas de non affichage, pour accessibilité)

<img src=“images/logo.jpg” alt=“logo du site” />

On peut ajouter un autre attribut pour générer une information bulle avec title=“…”

25

HTML 5, une base


Insérer des images 2

Vous pouvez maintenant insérer des images :

1. À l’intérieur de <p> …. </p>

2. à l’intérieur d’une balise <figure> … </figure>

Si l’image illustre le texte, préférez <p>

Si l’image apporte une information complémentaire au texte, préférez <figure>

26

HTML 5, une base


Insérer des images 3

Donnez une légende à votre image entre <figure> à l’aide de la balise <figcaption> :

< figure > <img src=“images/logo.jpg” alt=“logo du site” /> <figcaption> Voici le logo du site </figcaption> </figure>

Documents

2. HTML 5, une présentation générale par Elisabeth de Pablo