Introduction au langage HTML

Transcription

1 Introduction au langage HTML Thibault MARZAIS, Mathieu LACROIX, Antoine VACAVANT 24 et 25 Avril 2006 /80 Thibault MARZAIS, Mathieu LACROIX, Antoine VACAVANT Introduction au langage HTML

2 Introduction Le langage HTML Hyper Text Markup Language Langage à balises (méta-information) Ce langage évolue : nous vous présentons les techniques modernes Exposé interactif Nous allons construire progressivement un fichier d exemples. 2/80 Thibault MARZAIS, Mathieu LACROIX, Antoine VACAVANT Introduction au langage HTML

3 Essayons d obtenir un fichier tout bête 3/80 Thibault MARZAIS, Mathieu LACROIX, Antoine VACAVANT Introduction au langage HTML

4 Mon premier fichier HTML Notion de balises ouvrantes <... > et fermantes < /... > Le HTML est un langage à balises. Un couple de balises encadrant un texte lui donne une signification particulière pour l interprétation 4/80 Thibault MARZAIS, Mathieu LACROIX, Antoine VACAVANT Introduction au langage HTML

5 Mon premier fichier HTML Notion de balises ouvrantes <... > et fermantes < /... > Le HTML est un langage à balises. Un couple de balises encadrant un texte lui donne une signification particulière pour l interprétation Créons le fichier essai.html <html> <body> Ceci est mon premier fichier HTML. </body> </html> 4/80 Thibault MARZAIS, Mathieu LACROIX, Antoine VACAVANT Introduction au langage HTML

6 Essayons d obtenir un fichier tout bête 5/80 Thibault MARZAIS, Mathieu LACROIX, Antoine VACAVANT Introduction au langage HTML

7 Mon premier fichier HTML Quelques conseils Balise en minuscule Si vous ouvrez une balise, refermez la aussitôt. Quelques explications <html>... < /html> sert à délimiter le document HTML <body>... < /body> encadre le contenu (ce qui sera visible à l écran) <head>... < /head> encadre toutes les méta-informations (ce qu on ne voit pas...) 6/80 Thibault MARZAIS, Mathieu LACROIX, Antoine VACAVANT Introduction au langage HTML

8 Attention à l imbrication des balises Cherchez l erreur <html> <body> Mon fichier HTML. </body> </html> <html> <body> Mon fichier HTML. </html> </body> 7/80 Thibault MARZAIS, Mathieu LACROIX, Antoine VACAVANT Introduction au langage HTML

9 Attention à l imbrication des balises Cherchez l erreur <html> <body> Mon fichier HTML. </body> </html> <html> <body> Mon fichier HTML. </html> </body> Une règle pour les balises Première ouverte, dernière fermée 8/80 Thibault MARZAIS, Mathieu LACROIX, Antoine VACAVANT Introduction au langage HTML

10 Essayons d obtenir des espaces et des sauts de lignes 9/80 Thibault MARZAIS, Mathieu LACROIX, Antoine VACAVANT Introduction au langage HTML

11 Essayons d obtenir des espaces et des sauts de lignes On va éditer le fichier essai.html <html> <body> Ceci est mon premier fichier HTML. Il a des espaces et des sauts de ligne </body> </html> 10/80 Thibault MARZAIS, Mathieu LACROIX, Antoine VACAVANT Introduction au langage HTML

12 Et bien ça marche pas... 11/80 Thibault MARZAIS, Mathieu LACROIX, Antoine VACAVANT Introduction au langage HTML

13 Et bien ça marche pas... ben ça alors!! Les espaces ne marchent pas... Mise en forme automatique il va falloir spécifier où se trouvent les espaces 12/80 Thibault MARZAIS, Mathieu LACROIX, Antoine VACAVANT Introduction au langage HTML

14 Et bien ça marche pas... ben ça alors!! Les espaces ne marchent pas... Mise en forme automatique il va falloir spécifier où se trouvent les espaces Les espaces et les sauts de ligne Le retour à la ligne <br/> Les espaces insécables Modifiez votre fichier en conséquence 12/80 Thibault MARZAIS, Mathieu LACROIX, Antoine VACAVANT Introduction au langage HTML

15 Essayons d obtenir des espaces et des sauts de lignes On va éditer le fichier essai.html <html> <body> Ceci est mon premier fichier HTML.<br/> Il a des espaces et des sauts <br/> de ligne </body> </html> 13/80 Thibault MARZAIS, Mathieu LACROIX, Antoine VACAVANT Introduction au langage HTML

16 Essayons d obtenir des espaces et des sauts de lignes 14/80 Thibault MARZAIS, Mathieu LACROIX, Antoine VACAVANT Introduction au langage HTML

17 Présentation du fichier Indentation Puisque les espaces et sauts de ligne ne sont pas pris en compte, on va pouvoir indenter notre fichier. C est une question de lisibilité 15/80 Thibault MARZAIS, Mathieu LACROIX, Antoine VACAVANT Introduction au langage HTML

18 Présentation du fichier Indentation Puisque les espaces et sauts de ligne ne sont pas pris en compte, on va pouvoir indenter notre fichier. C est une question de lisibilité C est déjà plus clair <html> <body> Ceci est mon premier fichier HTML.<br/> Il a des espaces et des sauts <br/> de ligne </body> </html> 15/80 Thibault MARZAIS, Mathieu LACROIX, Antoine VACAVANT Introduction au langage HTML

19 Présentation du fichier Commentaires Puisqu on est ammené à modifier un jour ou l autre nos fichiers, on peut y laisser des commentaires (que le navigateur devra ignorer). Le commentaire se fait à l aide de la pseudo balise <! > 16/80 Thibault MARZAIS, Mathieu LACROIX, Antoine VACAVANT Introduction au langage HTML

20 Présentation du fichier Commentaires Puisqu on est ammené à modifier un jour ou l autre nos fichiers, on peut y laisser des commentaires (que le navigateur devra ignorer). Le commentaire se fait à l aide de la pseudo balise <! > On commente. Parfois, le code ne parle pas de lui même <html>  <body> Ceci est mon premier fichier HTML.<br/>  Il a des espaces et des sauts <br/> de ligne </body> </html> 16/80 Thibault MARZAIS, Mathieu LACROIX, Antoine VACAVANT Introduction au langage HTML

21 Essayons d obtenir des caractères spéciaux 17/80 Thibault MARZAIS, Mathieu LACROIX, Antoine VACAVANT Introduction au langage HTML

22 Essayons d obtenir des caractères spéciaux On obtient parfois ceci... 18/80 Thibault MARZAIS, Mathieu LACROIX, Antoine VACAVANT Introduction au langage HTML

23 Les caractères spéciaux Attention aux caractères spéciaux (accents, caractères non latins) Mots-clés (pas pratique : usage très local) é = &eacute ; è = &egrave ; à = &agrave ; î = &icirc ; ï = &iuml ; ü = &uuml ; ç = &ccedil ; Mieux : encodage du fichier 19/80 Thibault MARZAIS, Mathieu LACROIX, Antoine VACAVANT Introduction au langage HTML

24 Encodage du fichier Quand on écrit un fichier texte, on l écrit avec un code. Le type d encodage diffère selon le système d exploitaion et de l éditeur. Certains éditeurs permettent de passer d un encodage à un autre. Solution Préférer si possible les encodages UTF-8 ou UTF-16 Sinon, ISO-LATIN-1 Inclure dans le fichier HTML une commande qui désigne quel est le code utilisé dans le fichier. 20/80 Thibault MARZAIS, Mathieu LACROIX, Antoine VACAVANT Introduction au langage HTML

25 Préciser l encodage du fichier Méta-informations : un bloc <head>... < /head> (précède <body>... < /body> ) Détails... plus tard! <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso " /> </head> <body> Bonjour à tous!... </body> </html> 21/80 Thibault MARZAIS, Mathieu LACROIX, Antoine VACAVANT Introduction au langage HTML

26 Essayons d obtenir des caractères spéciaux 22/80 Thibault MARZAIS, Mathieu LACROIX, Antoine VACAVANT Introduction au langage HTML

27 D autres caractères spéciaux Certains caractères doivent être codés par mots-clés < &lt ; > &gt ; & &amp ; &quot ; Plusieurs façons de coder les lettres (existe aussi des codes numériques) 23/80 Thibault MARZAIS, Mathieu LACROIX, Antoine VACAVANT Introduction au langage HTML

28 Essayons d obtenir du texte mis en forme 24/80 Thibault MARZAIS, Mathieu LACROIX, Antoine VACAVANT Introduction au langage HTML

29 Mise en forme du texte Le HTML sépare contenu et présentation Existe balises de mise en forme (centré, gras, italique, fonte de caractère...) Utiles, mais caduques <b>... < /b> : mettre en gras (bold) <i>... < /i> : mettre en italique <center>... < /center> : centre le texte sur la ligne <del>... < /del> : barre le texte <ins>... < /ins> : souligne le texte <sub>... < /sub> : texte en indice <sup>... < /sup> : texte en exposant 25/80 Thibault MARZAIS, Mathieu LACROIX, Antoine VACAVANT Introduction au langage HTML

30 Essayons d obtenir du texte mis en forme 26/80 Thibault MARZAIS, Mathieu LACROIX, Antoine VACAVANT Introduction au langage HTML

31 Mise en forme du texte Autres balises <big>... < /big> : plus gros <small>... < /small> : plus petit <h1>... < /h1> : gros titre <h2>... < /h2> : plus petit que h1 <h3>... < /h3> <h4>... < /h4> <h5>... < /h5> <h6>... < /h6> : petit texte <hr/ > : trace une ligne horizontale 27/80 Thibault MARZAIS, Mathieu LACROIX, Antoine VACAVANT Introduction au langage HTML

32 Mise en forme du texte 28/80 Thibault MARZAIS, Mathieu LACROIX, Antoine VACAVANT Introduction au langage HTML

33 Essayons d obtenir du texte aligné 29/80 Thibault MARZAIS, Mathieu LACROIX, Antoine VACAVANT Introduction au langage HTML

34 Alignement de texte Il existe <center>... < /center> mais pas de balises <right> pour aligner à droite Solution : paragraphe <p>... < /p> avec argument right Notion d argument très utilisée Nom exact : attribut Ajoutez à essai.html : <p align= left >Ce texte est à gauche de la page< /p> <p align= center >Ce texte est au milieu de la page< /p> <p align= right >Ce texte est à droite de la page< /p> 30/80 Thibault MARZAIS, Mathieu LACROIX, Antoine VACAVANT Introduction au langage HTML

35 Le style C était bien, mais... On pourrait aussi modifier la police, la couleur... On aimerait définir le style ïun bloc, sans utiliser plusieurs attributs premier pas vers CSS! attribut style 31/80 Thibault MARZAIS, Mathieu LACROIX, Antoine VACAVANT Introduction au langage HTML

36 Mise en forme du texte Le style Plus long à écrire? On verra plus tard que non Notez la syntaxe machin:truc ; bidule:chose Modifiez essai.html : <p style= text align:left >Ce texte est à gauche< /p> <p style= text align:center >Ce texte est au milieu< /p> <p style= text align:right >Ce texte est à droite< /p> 32/80 Thibault MARZAIS, Mathieu LACROIX, Antoine VACAVANT Introduction au langage HTML

37 Essayons d obtenir du texte aligné 33/80 Thibault MARZAIS, Mathieu LACROIX, Antoine VACAVANT Introduction au langage HTML

38 Essayons d obtenir un titre pour la page 34/80 Thibault MARZAIS, Mathieu LACROIX, Antoine VACAVANT Introduction au langage HTML

39 Donner un titre à notre page web Où se trouve le titre? C est dans le nom de la fenêtre Cest une méta-information : dans le bloc <head>... < /head> Ajouter au fichier : <head>... <title>un bon titre... c est pour mieux m y retrouver mon enfant< /title> < /head> 35/80 Thibault MARZAIS, Mathieu LACROIX, Antoine VACAVANT Introduction au langage HTML

40 Essayons d obtenir un titre pour la page 36/80 Thibault MARZAIS, Mathieu LACROIX, Antoine VACAVANT Introduction au langage HTML

41 Essayons d obtenir une couleur de fond beurk!! c est pas beau 37/80 Thibault MARZAIS, Mathieu LACROIX, Antoine VACAVANT Introduction au langage HTML

42 Une couleur de fond C est pour donner une couleur à l arrière plan. Ce n est pas une meta-information, puisque cette information concerne le contenu ( <body>... < /body> ) C est donc un style de <body>... < /body> modifier votre fichier : <body style= background:yellow < /body> 38/80 Thibault MARZAIS, Mathieu LACROIX, Antoine VACAVANT Introduction au langage HTML

43 Essayons d obtenir une couleur de fond 39/80 Thibault MARZAIS, Mathieu LACROIX, Antoine VACAVANT Introduction au langage HTML

44 Essayons d obtenir une image de fond 40/80 Thibault MARZAIS, Mathieu LACROIX, Antoine VACAVANT Introduction au langage HTML

45 Les images de fond La plupart des formats d images sont supportés : bmp, gif, jpg, png... Attention Toutes les images ne conviennent pas... Prenez les images fondorange.png et fondconfettis.png et modifiez votre fichier : <body style = background:url(fichierimage.png) < /body> 41/80 Thibault MARZAIS, Mathieu LACROIX, Antoine VACAVANT Introduction au langage HTML

46 Essayons d obtenir une image de fond 42/80 Thibault MARZAIS, Mathieu LACROIX, Antoine VACAVANT Introduction au langage HTML

47 Essayons d obtenir une image de fond Eh oui, c est pas beau... il faut une image qui pave le plan. 43/80 Thibault MARZAIS, Mathieu LACROIX, Antoine VACAVANT Introduction au langage HTML

48 Image de fond Attention aux erreurs de nom de fichier Le nom de fichier que l on met est un nom relatif si possible sans espaces : <body style = background:url(nomfichierimagerelatif.png) < /body> Rappel :../ permet de remonter d un cran dans l arborescence des répertoires Chemin relatif : chemin à partir de l endroit où se trouve le fichier html. Il faut utiliser / comme séparateur de dossiers. 44/80 Thibault MARZAIS, Mathieu LACROIX, Antoine VACAVANT Introduction au langage HTML

49 Attention aux erreurs de nom de fichier Ne jamais mettre de chemin absolu... Interdit <body style = background:url(c :/stage/siteweb/images/fond.jpg) < /body> Autorisé <body style = background:url(images/fond.jpg) < /body> 45/80 Thibault MARZAIS, Mathieu LACROIX, Antoine VACAVANT Introduction au langage HTML

50 Essayons d obtenir un lien vers un autre fichier 46/80 Thibault MARZAIS, Mathieu LACROIX, Antoine VACAVANT Introduction au langage HTML

51 Les lien hyper texte Lien = zones cliquable référençant une autre page Balise <a>... < /a> qui encadre la zone cliquable Marche à suivre Créez une copie de essai.html, appelez-la essai2.html et modifiez son contenu pour les différencier, puis rajoutez dans essai.html : Pour accéder au fichier précédent, cliquez <a href = essai2.html > sur ce lien < /a> 47/80 Thibault MARZAIS, Mathieu LACROIX, Antoine VACAVANT Introduction au langage HTML

52 Essayons d obtenir un lien vers un autre fichier 48/80 Thibault MARZAIS, Mathieu LACROIX, Antoine VACAVANT Introduction au langage HTML

53 Les lien hyper texte Comme les url() de background, le href de <a> est un chemin relatif Autre attribut à <a>... < /a> : target. Où ouvrir le lien? target nest pas limité à blank (on verra plus tard) Question Que fait l attribut target quand on lui met l argument blank? <a href = essai2.html target= blank > sur ce lien < /a> 49/80 Thibault MARZAIS, Mathieu LACROIX, Antoine VACAVANT Introduction au langage HTML

54 Les lien hyper texte Lien hyper texte internes Pour les grandes pages, les liens peuvent être internes Point d ancrage <a name=... >... < /a> (Cette balise ne se voit pas... elle n a pas d effet visuel) Un lien vers une ancre : <a href= #... >... < /a> On peut aussi mixer lien externe et ancre : <a href= essai2.html#uneancre >... < /a> 50/80 Thibault MARZAIS, Mathieu LACROIX, Antoine VACAVANT Introduction au langage HTML

55 Les lien hyper texte Un petit test Modifiez essai.html : <a name = debut >Bonjour à tous!< /a>... (mettre plein de <br / >) <a href = #debut >Revenir au début de la page< /a> 51/80 Thibault MARZAIS, Mathieu LACROIX, Antoine VACAVANT Introduction au langage HTML

56 Un petit test de lien interne 52/80 Thibault MARZAIS, Mathieu LACROIX, Antoine VACAVANT Introduction au langage HTML

57 Les lien hyper texte <a>... < /a> peut encadrer nimporte quoi (texte, image, tableau, liste...) Le href peut référencer nimporte quel objet affichable par le navigateur (page html, image, film mpeg...) Le navigateur peut afficher ou bien sauvegarder la cible (rapatrier sur votre ordinateur) Pour sauvegarder la cible : clic-droit, enregistrer la cible sous... 53/80 Thibault MARZAIS, Mathieu LACROIX, Antoine VACAVANT Introduction au langage HTML

58 Les liens hyper texte Quelques fichiers Créez un répertoire photos dans lequel vous placerez les fichiers Confettis.jpg et Confettis-reduit.jpg. Créez un répertoire fichiers dans lequel vous placerez les fichiers texte.doc et plan.pdf Modifiez essai.html : Voici une <a href= photos/confettis-reduit.jpg >petite image< /a> Voici une <a href= photos/confettis.jpg >grande image< /a> Voici un <a href= fichiers/plan.pdf >fichier pdf< /a> Voici un <a href= fichiers/texte.doc >fichier word< /a> 54/80 Thibault MARZAIS, Mathieu LACROIX, Antoine VACAVANT Introduction au langage HTML

59 Essayons d obtenir des liens vers d autres fichiers 55/80 Thibault MARZAIS, Mathieu LACROIX, Antoine VACAVANT Introduction au langage HTML

60 Essayons d obtenir un lien vers une adresse 56/80 Thibault MARZAIS, Mathieu LACROIX, Antoine VACAVANT Introduction au langage HTML

61 Un lien vers une adresse 1ère méthode <a href = mailto :marzais@llaic3.u-clermont1.fr > < /a> Cette méthode met en clair votre sur le web attention au spam 7/80 Thibault MARZAIS, Mathieu LACROIX, Antoine VACAVANT Introduction au langage HTML

62 Un lien vers une adresse 1ère méthode pas bonne <a href = mailto :marzais@llaic3.u-clermont1.fr > < /a> Cette méthode met en clair votre sur le web attention au spam autre méthode <a href = mailto :marzais nospam@llaic3.u-clermont1.fr > < /a> autre méthode <a href = mailto :marzais [at] llaic3.u-clermont1 [dot] fr > < /a> 58/80 Thibault MARZAIS, Mathieu LACROIX, Antoine VACAVANT Introduction au langage HTML

63 Essayons d obtenir un lien vers une adresse 59/80 Thibault MARZAIS, Mathieu LACROIX, Antoine VACAVANT Introduction au langage HTML

64 Essayons d obtenir Des images dans la page web 60/80 Thibault MARZAIS, Mathieu LACROIX, Antoine VACAVANT Introduction au langage HTML

65 Des images dans la page web Insérer des images Balise <img/ > avec l attribut src : le chemin du fichier Remarque : c est une balise autonome, pensez au / > Modifiez essai.html : J ai une jolie photo de confettis <br/ > <img src= photos/confettis.jpg / > 61/80 Thibault MARZAIS, Mathieu LACROIX, Antoine VACAVANT Introduction au langage HTML

66 Des images dans la page web Insérer des images Balise <img/ > avec l attribut src : le chemin du fichier Remarque : c est une balise autonome, pensez au / > Modifiez essai.html : J ai une jolie photo de confettis <br/ > <img src= photos/confettis.jpg / > Image trop grosse Prend trop de place sur la page Penser aux gens qui n ont qu un accès bas débit (modem 56k) long chargement de la photo 61/80 Thibault MARZAIS, Mathieu LACROIX, Antoine VACAVANT Introduction au langage HTML

67 Des images dans la page web Nouvelle méthode On va combiner liens et images. <a href= photos/confettis.jpg > <img src= photos/confettis-reduit.jpg / > < /a> Cette méthode permet de ne rappatrier la grosse image que si on clique sur la petite image 62/80 Thibault MARZAIS, Mathieu LACROIX, Antoine VACAVANT Introduction au langage HTML

69 Des images dans une page web On peut ajouter un bord à l image Spécifier une taille de l image (redimensionnement à la volée) en pixels ou en pourcentage L attribut style <img style = border-style :solid ;border-width :5px src = Confettis.jpg / > <img style = width :30px src = Confettis.jpg / > <img style = height :50% src = Confettis.jpg / > 64/80 Thibault MARZAIS, Mathieu LACROIX, Antoine VACAVANT Introduction au langage HTML

70 Des images dans une page web Autres attributs title est une information sémantique pour le navigateur alt est un texte de remplacement si l image ne peut pas s afficher : par exemple une erreur de frappe dans le nom du fichier Modifiez essai.html Confettis : <img style= width :50% src= Confettis.jpg title= Confettis alt= Confettis / > Confettis : <img style= width :50% src= Confetis.jpg title= Confettis alt= Confettis / > 65/80 Thibault MARZAIS, Mathieu LACROIX, Antoine VACAVANT Introduction au langage HTML

72 Retour aux adresses On peut aussi éviter le spam en ajoutant une image : Autre méthode Pour toutes questions ou remarques <br / > <img src= .png / > 67/80 Thibault MARZAIS, Mathieu LACROIX, Antoine VACAVANT Introduction au langage HTML

73 Essayons d obtenir Des listes et des énumérations 68/80 Thibault MARZAIS, Mathieu LACROIX, Antoine VACAVANT Introduction au langage HTML

74 Des listes et des énumérations Les listes Il existe deux types de listes : les listes numérotées on va utiliser la balise <ol>... < /ol> (ordered) les listes non numérotées on va utiliser la balise <ul>... < /ul> (unordered) Chaque item de la liste est encadré par la balise <li>... < /li>, on peut y mettre n importe quoi : texte, images, liens, tableaux... Notez le passage à la ligne automatique 69/80 Thibault MARZAIS, Mathieu LACROIX, Antoine VACAVANT Introduction au langage HTML

75 Essayons d obtenir Des listes et des énumérations 70/80 Thibault MARZAIS, Mathieu LACROIX, Antoine VACAVANT Introduction au langage HTML

76 Essayons d obtenir Un tableau 71/80 Thibault MARZAIS, Mathieu LACROIX, Antoine VACAVANT Introduction au langage HTML

77 Les tableaux tableaux Un tableau est délimité par la balise <table>... < /table> Chaque ligne est incluse dans la balise <tr>... < /tr> Chaque colonne d une ligne est incluse dans la balise <td>... < /td> Ajouter à essai.html <table> <tr> <td>ligne 1 colonne 1< /td> <td>ligne 1 colonne 2< /td> < /tr> <tr> <td>ligne 2 colonne 1< /td> <td>ligne 2 colonne 2< /td> < /tr> < /table> 72/80 Thibault MARZAIS, Mathieu LACROIX, Antoine VACAVANT Introduction au langage HTML

78 Les tableaux Ce n est pas ce qu on voulait On va ajouter un attribut de style pour le tableau On se souveint de style= border-style :solid ;border-width :2px On va comparer avec un autre attribut : border= 2 Ajouter à essai.html deux tableaux pour comparer <table style= border-style :solid ;border-width :2px style= width :90% > <table border= 2 style= width :90% > 73/80 Thibault MARZAIS, Mathieu LACROIX, Antoine VACAVANT Introduction au langage HTML

79 Essayons d obtenir Un tableau 74/80 Thibault MARZAIS, Mathieu LACROIX, Antoine VACAVANT Introduction au langage HTML

80 Essayons d obtenir Un tableau avec de l alignement 75/80 Thibault MARZAIS, Mathieu LACROIX, Antoine VACAVANT Introduction au langage HTML

81 Les tableaux L alignement dans les tableaux On peut ajouter l attribut style à chacune des balises <table>... < /table>, <tr>... < /tr> <td>... < /td>. Rappel : style= text-align :right, style= text-align :left, style= text-align :center Attention Comme on le verra quand on étudiera le CSS, le style s applique en cascade. 76/80 Thibault MARZAIS, Mathieu LACROIX, Antoine VACAVANT Introduction au langage HTML

82 Essayons d obtenir Un tableau avec de l alignement 77/80 Thibault MARZAIS, Mathieu LACROIX, Antoine VACAVANT Introduction au langage HTML

83 Les tableaux Autres attributs des tableaux Alignement vertical : style= vertical-align :top, middle, bottom Couleur de fond, image de fond : background :url(images/fondorange.png), background :yellow Les tableaux sont bien souvent inutiles Dès lors qu on veut faire de la mise en page, les tableaux sont inutiles (il vaut mieux utiliser le CSS) La seule réelle utilité des tableaux est quand on veut afficher un tableau de données brutes. 78/80 Thibault MARZAIS, Mathieu LACROIX, Antoine VACAVANT Introduction au langage HTML

84 Les balises meta Nous avons vu <meta> pour l encodage des caractères. D autres méta-informations sont utiles, pour le navigateur et surtout pour les moteurs de recherche. Par exemple : <meta name= keywords content= stage, cies, essai / > <meta name= description content= Accueil / > <meta name= distribution content= Global / > <meta name= generator content= A la main! / > <meta name= rating content= General / > <meta name= robots content= Index,Follow / > <meta http-equiv= content-language content= fr / > 79/80 Thibault MARZAIS, Mathieu LACROIX, Antoine VACAVANT Introduction au langage HTML

85 Conclusion Conclusion Globalement, le HTML est très simple Nous avons passé des balises sous silences, qui sont maintenant caduques grce à CSS (évolution du langage) Il y a souvent plusieurs façons de réaliser ce que l on a en tête Pour la mise en forme, utiliser les styles CSS au maximum, et ne revenir au HTML de base qu en dernier recours 80/80 Thibault MARZAIS, Mathieu LACROIX, Antoine VACAVANT Introduction au langage HTML