HTML
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 La balise <strong> permet de mettre un morceau de texte en gras L’exemple donnera : Mon texte très intéressant.
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) 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. L’attribut, ou étiquette href indique l’adresse.
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> 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> 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… Penser sémantique, 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 forme une 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… Processeur Prix AMD Sempron 3000+ 29,90€ Intel Xeon 7041 3290,00€ 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. 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 !