HTML ça sert à quoi ? HTML est un langage HTML permet de décrire un document … … surtout sa...
17
-
Upload
papillion-rollin -
Category
Documents
-
view
115 -
download
0
Transcript of HTML ça sert à quoi ? HTML est un langage HTML permet de décrire un document … … surtout sa...
HTML ça sert à quoi ?
HTML est un langage
HTML permet de décrire un document …… surtout sa structure et son contenu
Un peu d’histoire…
• 1991 : Naissance d’HTML• 1993 : HTML 1.0, Premier navigateur Internet : Mosaic• 1995 : HTML 2.0• 1997 : HTML 3.2 et 4.0, support des feuilles de styles• 1999 : HTML 4.01• 2000 : XHTML 1.0• 2001 : XHTML 1.1• 2010 : HTML5
• 1996 : CSS 1.0• 1998 : CSS 2.0• Un jour (peut-être) : CSS 3.0
HTML ou XHTML ?
HTML est une extension de SGML
XHTML est une extension de XML
Concrètement : HTML est destiné au grand public, XHTML est moins permissif
Les bases du HTML
HTML est un langage de balisage,c’est-à-dire qu’il utilise des boites pour structurer un document
Par exemple, pour définir le titre d’une page :On utilise une boite nommée ‘title’ dans laquelle on place le titre
<title>Ma page</title>
<title> indique que l’on commence une boite‘Ma page’ est le titre de ma page
</title> indique que l’on a fini de déclarer notre titre
Les bases du HTML
Il existe 2 type de balises :- Celles qui définissent du contenu- Celles qui n’ont pas de contenu
La balise <p> décrit un paragraphe, elle contient donc un contenu :<p>Mon texte.</p>
Mais si on souhaite sauter une ligne par exemple,on utilise la balise <br/>
Il n’y a pas de contenu à mettre dans un saut de ligne
Les bases du HTML
On peut mettre des boites dans des boites
Par exemple :<p>Mon texte <em>très</em> <strong>intéressant</strong>.</p>
La balise <em> permet de mettre un morceau de texte en emphase
L’exemple donnera :Mon texte très intéressant.
La balise <strong> permet de mettre un morceau de texte en gras
Les bases du HTML
Certaines balises ont besoin d’informations supplémentaires
Par exemple, pour créer un lien il faut spécifier l’adresse de destination :<p>Mon texte <a href=« http://www.google.fr »>intéressant</a>.</p>
La balise <a> permet de créer un lien ou un ancre (a = anchor)
L’attribut, ou étiquette href indique l’adresse.
Pour spécifier l’adresse de destination on utilise un attribut de la balise,On peut l’assimiler à une étiquette collée sur la boite.
Les bases du HTML
Voici un autre exemple sur une balise qui n’a pas de contenu :
Pour insérer une image :<img src=« fichier.jpg » alt=« Mon image »
/>
La balise <img/> permet d’insérer une image
L’attribut src permet de spécifier l’image à afficher (src = source)
L’attribut alt permet de spécifier un texte alternatif à l’image,dans le cas où celle-ci ne peut pas s’afficher
Les bases du HTML
Une image n’est pas un contenu ?
<img>fichier.jpg</img>
Pour des raisons pratiques non.Une image, avant d’être un contenu, est une ressource
(un fichier) pour le navigateur
Les bases du HTML
HTML, comme tous langages, a des règles
Un document doit avoir une structure minimale :
• Une tête• Un corps
Le tout dans une boite HTML
Les bases du HTML<html>
<head></head><body></body>
</html>
Dans le <head> (la tête) on retrouve les métadonnées(données relatives aux données)
<title> décrit le titre de la page
Le titre de la page décrit la page,c’est donc une information sur les informations
Le titre est donc une métadonnée
Les bases du HTML<html>
<head></head><body></body>
</html>
Dans le <body> (le corps) on retrouve les données, le contenu de la page
La tête et le corps sont dans une boite <html>,la fermeture de cette boite indique que la page est terminée
Une dernière chose…
Bien choisir la version de (X)HTML dont on a besoin
Penser sémantique,le document HTML décrit la structure du document
Ainsi que le contenu de la page
HTML ne doit pas être utilisé pour mettre en forme une page
Une dernière chose…
La « tradition » voulait que l’on mette en formeune page en utilisant la balise <table> (tableau)
Un tableau est représenté mentalement par une grille,ce qui peut paraître plus simple
La balise <table> a comme but d’afficher des informations tabulaires,C’est-à-dire des informations qui ne peuvent pas être mieux visualisé
que par un tableau
Une dernière chose…
La meilleure méthode est de penser en « calques » ou couches
HTML comporte des erreurs de conception,qui sont corrigées au fur et à mesure.
Processeur Prix
AMD Sempron 3000+ 29,90€
Intel Xeon 7041 3290,00€
Par exemple on trouve une balise <i> dans HTML 4.01,qui permet de mettre un texte en italique (but présentationnel)
Un petit peu de pratique maintenant !
