HTML ça sert à quoi ? HTML est un langage HTML permet de décrire un document … … surtout sa...
-
Upload
papillion-rollin -
Category
Documents
-
view
113 -
download
0
Transcript of HTML ça sert à quoi ? HTML est un langage HTML permet de décrire un document … … surtout sa...
![Page 1: HTML ça sert à quoi ? HTML est un langage HTML permet de décrire un document … … surtout sa structure et son contenu.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9da0497959293b8cfbd3/html5/thumbnails/1.jpg)
![Page 2: HTML ça sert à quoi ? HTML est un langage HTML permet de décrire un document … … surtout sa structure et son contenu.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9da0497959293b8cfbd3/html5/thumbnails/2.jpg)
HTML ça sert à quoi ?
HTML est un langage
HTML permet de décrire un document …… surtout sa structure et son contenu
![Page 3: HTML ça sert à quoi ? HTML est un langage HTML permet de décrire un document … … surtout sa structure et son contenu.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9da0497959293b8cfbd3/html5/thumbnails/3.jpg)
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
![Page 4: HTML ça sert à quoi ? HTML est un langage HTML permet de décrire un document … … surtout sa structure et son contenu.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9da0497959293b8cfbd3/html5/thumbnails/4.jpg)
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
![Page 5: HTML ça sert à quoi ? HTML est un langage HTML permet de décrire un document … … surtout sa structure et son contenu.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9da0497959293b8cfbd3/html5/thumbnails/5.jpg)
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
![Page 6: HTML ça sert à quoi ? HTML est un langage HTML permet de décrire un document … … surtout sa structure et son contenu.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9da0497959293b8cfbd3/html5/thumbnails/6.jpg)
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
![Page 7: HTML ça sert à quoi ? HTML est un langage HTML permet de décrire un document … … surtout sa structure et son contenu.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9da0497959293b8cfbd3/html5/thumbnails/7.jpg)
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
![Page 8: HTML ça sert à quoi ? HTML est un langage HTML permet de décrire un document … … surtout sa structure et son contenu.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9da0497959293b8cfbd3/html5/thumbnails/8.jpg)
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.
![Page 9: HTML ça sert à quoi ? HTML est un langage HTML permet de décrire un document … … surtout sa structure et son contenu.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9da0497959293b8cfbd3/html5/thumbnails/9.jpg)
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
![Page 10: HTML ça sert à quoi ? HTML est un langage HTML permet de décrire un document … … surtout sa structure et son contenu.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9da0497959293b8cfbd3/html5/thumbnails/10.jpg)
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
![Page 11: HTML ça sert à quoi ? HTML est un langage HTML permet de décrire un document … … surtout sa structure et son contenu.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9da0497959293b8cfbd3/html5/thumbnails/11.jpg)
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
![Page 12: HTML ça sert à quoi ? HTML est un langage HTML permet de décrire un document … … surtout sa structure et son contenu.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9da0497959293b8cfbd3/html5/thumbnails/12.jpg)
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
![Page 13: HTML ça sert à quoi ? HTML est un langage HTML permet de décrire un document … … surtout sa structure et son contenu.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9da0497959293b8cfbd3/html5/thumbnails/13.jpg)
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
![Page 14: HTML ça sert à quoi ? HTML est un langage HTML permet de décrire un document … … surtout sa structure et son contenu.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9da0497959293b8cfbd3/html5/thumbnails/14.jpg)
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
![Page 15: HTML ça sert à quoi ? HTML est un langage HTML permet de décrire un document … … surtout sa structure et son contenu.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9da0497959293b8cfbd3/html5/thumbnails/15.jpg)
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
![Page 16: HTML ça sert à quoi ? HTML est un langage HTML permet de décrire un document … … surtout sa structure et son contenu.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9da0497959293b8cfbd3/html5/thumbnails/16.jpg)
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)
![Page 17: HTML ça sert à quoi ? HTML est un langage HTML permet de décrire un document … … surtout sa structure et son contenu.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9da0497959293b8cfbd3/html5/thumbnails/17.jpg)
Un petit peu de pratique maintenant !