UN DOCUMENT HTML5 1.Un document HTML5 minimal 2.Les caractères accentués 3.Les caractères spéciaux 4.En résumé 42
Un document HTML5 minimal Les bases d'un code HTML5 ressemblent à celles des précédentes versions HTML 4 et XHTML 1.x.. Il y a donc un DOCTYPE suivi des éléments les plus courants : <html>, <head>, <title>, <meta>, <link>, <script> et <body>. La structure du document est simplifiée 43
Un document HTML5 minimal 44
Un document HTML5 minimal Le DOCTYPE <!DOCTYPE html> permet de préciser le type de document, afin de permettre au navigateur de savoir quel langage de la vaste famille SGML, il devra interpréter. Ecriture simplifiée par rapport aux précédentes versions. HTML 4.01 Strict <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> XHTML 1.0 Strict <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> 45
Un document HTML5 minimal L'élément racine <html> C'est lui qui va recueillir les deux principaux éléments de la hiérarchie : <head> et<body>. <! DOCTYPE html> <html> <head> </head> <body> </body> </html> 46
Un document HTML5 minimal L'élément <head> L'en-tête est située entre les balises <head> et </head> Elle regroupe toutes les méta-informations, c'est-à-dire les données qui ne sont pas représentées directement dans la page. Exemples: le titre dans <title> Le titre de la page</title> Autres méta-informations : mots-clés, description de la page, <link /> <script> </script> 47
Un document HTML5 minimal L'élément <body> Le contenu de la page Web, structuré grâce à différentes balises est présenté entre <body> et </body> L'apparence du contenu est gérée par les styles CSS figurant dans <link /> (ou <style></style>, non recommandée dans ce cours) 48
Un document HTML5 minimal L'attribut charset (dans <meta>) <meta charset="utf-8" /> Précise l'encodage des caractères Ne pas se retrouver avec les caractères spéciaux ou accentués, mal présentés et incompréhensibles. Le choix de l'utf-8 est désormais préconisé par le W3C pour tous les protocoles échangeant du texte sur Internet (dont HTML). L'éditeur doit permettre d enregistrer le fichier avec le bon encodage. Placer cette déclaration d'encodage avant toutes les autres balises contenues dans la section <head>. En HTML4 : <meta http-equiv="content-type" content="text/html; charset=utf-8"> En XHTML : <meta http-equiv="content-type" content="text/html; charset=utf-8" /> A lire: http://www.alsacreations.com/astuce/lire/34-charset-iso-8859-1-iso-8859-15-utf-8-lequelchoisir.html 49
Déclarer l'encodage des caractères d'un document HTML http://www.alsacreations.com/astuce/lire/69-declarer-encodage-des-caracteres.html 50
Un document HTML5 minimal L'élément <title> <title>titre de la page</title> <title> permet de donner un titre à une page, qui sera affiché dans la barre de titre, les favoris, l historique et éventuellement dans les résultats des moteurs de recherche. Il ne peut contenir des mises en forme. 51
Un document HTML5 minimal L'élément <meta> The meta element with a name attribute represents document metadata in the form of name/value pairs. A defined metadata name is any of the following: application-name author generator Keywords Source: http://www.w3.org/tr/html-markup/meta.name.html Exemples: <meta name=" keywords" content="web, conception sites, html, css, internet, webdesigner " /> <meta name="author" content="prénom Nom /> 52
Un document HTML5 minimal L'élément <link /> Permet de mettre en relation la page avec d'autres documents externes. La plupart du temps, les feuilles de style CSS externes avec une relation du type stylesheet. <link rel="stylesheet" href="../styles/style.css" /> En HTML5, il n'est plus obligatoire de spécifier l'attribut type. Pour inclure directement des instructions CSS dans le document HTML sans passer par un fichier externe, la balise <style> </style> peut être est utilisée. Cependant, il vaut mieux utiliser un fichier CSS indépendant : il n'y aura qu'un seul code à maintenir pour toutes les pages. 53
Un document HTML5 minimal L'élément <script> Cet élément permet d'ajouter des scripts (JavaScript) qui vont s'éxécuter côté client dans le navigateur dès leur chargement. <script src="../js/script.js"></script> En HTML5, il n'est plus obligatoire de spécifier l'attribut type. 54
Les caractères accentués Les caractères accentués s'affichent de la même manière quel que soit le poste client, lorsque le code ci-dessous est utilisé dans le fichier source : Caractère Code HTML Á Á À À Ã Ã É É È È Î Î Ö Ö Â Â Å Å Ä Ä Ê Ê Ë Ë Ô Ô Æ Æ Ç Ç Caractère à ä é ê ú ü ï ç â æ è ë û ö î ù Code HTML à ä é ê ú ü ï ç â æ è ë û ö î ù Attention: Les codes HTML sont case sensitive(distinction entre majuscules et minuscules) É É n'a pas la même signification que é é 55
Les caractères spéciaux Les caractères spéciaux sont également rendus par un code HTML Caractère > > < < Espace insécable (non-breaking space) ™»» ««² ² ½ ½ Code HTML Caractère Code HTML & & ; œ œ " " ± ± ¹ ¹ ³ ³ ¼ ¼ ¾ ¾ ‰ Si dans votre texte des caractères qui ont une signification particulière en HTML sont employés vous devez masquer ces caractères. Les caractères suivants doivent être masqués de la façon suivante: Remplacez le caractère < par la suite de caractères < Remplacez le caractère > par la suite de caractères> Remplacez le caractère & par la suite de caractères & Remplacez le caractère " par la suite de caractères " Remplacez les caractères «et» par les suites de caractères «et» 56
En résumé L'éditeur de texte Notepad++ sera utilisé pour créer un fichier ayant l'extension.html (par exemple : test.html). Ce sera notre page web. À l'intérieur du fichier, nous écrirons le contenu de notre page, accompagné de balises HTML, écrites en minuscules, sauf DOCTYPE Les balises peuvent avoir plusieurs formes : <balise> </balise> : elles s'ouvrent et se ferment pour délimiter le contenu (début et fin d'un titre, par exemple). <balise /> : balises orphelines (on ne les insère qu'en un seul exemplaire), elles permettent d'insérer un élément à un endroit précis (par exemple une image). Les balises sont parfois accompagnées d'attributs pour donner des indications supplémentaires. On peut afficher le code source de n'importe quelle page web en faisant un clic droit puis en sélectionnant Afficher le code source de la page. 57
Structurer un document HTML5 1.Les autres éléments HTML5 2.Le paragraphe 3.Le saut de ligne 4.Les titres 5.Les balises <span></span> et <div></div> 6.Indentation <blockquote> </blockquote> 7.Mise en valeur des textes: indiquer le sens du texte 58
Structurer un document HTML5 Les autres éléments HTML5 Une fois la structure de base préparée, il est temps de commencer à y placer d'autres éléments HTML pour insérer le contenu de la page Web: paragraphes, listes, liens, images, vidéos, tableaux, formulaires, entre <body> et </body>. La majorité des éléments HTML sont toujours présents dans HTML5, avec quelques nouveautés. Par exemple : <section>, <article>, <header>, <footer>, <nav> et<as ide> Éléments <figure> & <figcaption> Éléments média <audio> et <video> Élément <canvas> 59
Le paragraphe La plupart du temps, lorsqu'on écrit du texte, il figure à l'intérieur de paragraphes. Le langage HTML propose la balise <p> </p> pour délimiter les paragraphes. <p> signifie «Début du paragraphe», permet d'introduire un nouveau paragraphe: retour à la ligne + ligne vierge. </p> signifie «Fin du paragraphe». Exemple: <p>bonjour, bienvenue sur mon site!</p> Résultat: 60
Le saut de ligne En HTML, si vous appuyez sur la touche Entrée, cela ne crée pas une nouvelle ligne. <br /> est une balise orpheline qui sert à retourner à la ligne. A mettre à l'intérieur d'un paragraphe, par exemple. Exemple: <p>bonjour, <br /> bienvenue sur mon site!</p> Résultat: 61
Les titres En HTML, six niveaux de titres différents sont disponibles (gras et grand). Exemple: <h1>titre très important</h1> <h2>titre important</h2> <h3>titre un peu moins important (sous-titre)</h3> <h4>titre pas trop important</h4> <h5>titre pas important</h5> <h6>titre pas vraiment important</h6> Résultat: Attention : Ne les confondez pas avec la balise <title>! La balise <title> affiche le titre de la page dans la barre de titre du navigateur. Les titres <h i > servent à créer des titres qui seront affichés dans la page web. Ne choisissez pas votre balise de titre en fonction de la taille qu'elle applique au texte! Il faut impérativement bien structurer sa page en commençant par un titre de niveau 1 (<h1>), puis un titre de niveau 2 (<h2>), etc. 62
Les balises <span></span> et <div></div> <span> </span> : c'est une balise de type inline, c'est-àdire une balise que l'on place au sein d un texte, pour sélectionner certains mots uniquement. <div> </div> : c'est une balise de type block, qui entoure un bloc de texte. Elles crée un nouveau «bloc» dans la page et provoque un retour à la ligne. <div> est une balise fréquemment utilisée dans la construction d'un design. 63
Les balises <span></span> et <div></div> Code HTML: <div class="centre"> <h1>présentation de div et span</h1> <p>bonjour, <br /> Bienvenue sur mon site!</p> <p>bonjour et <span class="salutations">bienvenue</span> sur mon site!</p> </div> Code CSS:.centre {color: blue; text-align : center; }.salutations {color: red;} 64
Indentation <blockquote> </blockquote> La balise <blockquote> sert à mettre du texte en retrait : Décalage vers la droite <blockquote>ce texte est en retrait. <blockquote> Ce texte est en double retrait.</blockquote> </blockquote> 65
Mise en valeur des textes: indiquer le sens du texte HTML vous propose différents moyens pour mettre en valeur le texte de votre page. Mettre un peu en valeur Pour mettre un peu en valeur votre texte, vous devez utiliser la balise <em> </em> (le texte sera présenté en italique). Mettre bien en valeur Pour mettre un texte bien en valeur, vous devez utiliser la balise <strong> </strong> qui signifie «fort», ou «important» (le texte sera présenté en gras). Marquer le texte La balise <mark> </mark> permet de faire ressortir visuellement une portion de texte (surligner le texte) Exemple: <p><strong>html </strong>est très important, <em>css</em> est aussi important, <mark>javascript</mark> est intéressant. </p> Résultat: 66
Les listes 1.Présentation des listes 2.Les listes <ol> </ol> 3.Les listes <ul> </ul> 4.Imbrication de listes 5.Listes de définitions 67
Présentation des listes Les listes nous permettent de mieux structurer le texte et d'ordonner nos informations. Les listes non ordonnées ou listes à puces <ul></ul> Les listes ordonnées ou listes numérotées <ol></ol> Chacun des éléments de la liste doit figurer entre <li></li> Exemple: <ul> <li>fraises</li> <li>framboises</li> <li>cerises</li> </ul> <ol> <li>fraises</li> <li>framboises</li> <li>cerises</li> </ol> Résultat 68
Les listes <ol> </ol> Attributs spécifiques à <ol> Exemple: Résultat <ol start="2" type="a"> <li>premier élément</li> <li>deuxième élément</li> <li>troisième élément</li> </ol> Exemple: <ol start="3" type="i" reversed> <li>premier élément</li> <li>deuxième élément</li> <li>troisième élément</li> </ol> Résultat 69
Les listes <ul> </ul> Elle ne dispose pas d attributs spécifiques contrairement à <ol>, mais l apparence par défaut de ces deux types de listes peut être modifiée grâce à la propriété CSS list-style-type, qui adopte entre autres les valeurs disc (défaut), square, circle pour les puces. Code CSS ul.carre{ list-style-type: square; } Code HTML <ul class="carre"> <li>fraises</li> <li>framboises</li> <li>cerises</li> </ul> Résultat 70
Imbrication de listes Nous pouvons créer des listes imbriquées Une liste de deuxième niveau devra forcément être placée dans un <li>. Exemple: Résultat 71
Les listes de définitions La liste de définitions fait intervenir les balises <dl> (description list), <dt> (pour délimiter un terme) et <dd> (pour délimiter la définition de ce terme). Exemple: <dl> <dt>html</dt> <dd>» langage utilisé pour affiché du contenu sur le web</dd> <dt>balise</dt> <dd>» élément présentant certaines fonctionnalités</dd> <dt>attribut</dt> <dd>» élément spécifique à une balise pouvant prendre certaines valeurs</dd> <dd>» propriété d'une balise</dd> </dl> Résultat 72
Les images 1.Format d images 2.Insertion d une image 3.Les figures 73
Format d images Le JPEG Les images au format JPEG (Joint Photographic Expert Group) sont très répandues sur le Web. Ce format est conçu pour réduire la taille du fichier. Elles peuvent comporter plus de 16 millions de couleurs. Extension.jpg ou.jpeg. Le PNG Le format PNG (Portable Network Graphics) est adapté à la plupart des graphiques. Le PNG a été inventé pour concurrencer le GIF. Le PNG peut aller jusqu'à plusieurs millions de couleurs. Le GIF Le format GIF est limité à 256 couleurs. Le GIF peut être animé. 74
Insertion d une image Choisissez bien le nom de votre image: fichiers avec des noms en minuscules, sans espace ni accent, par exemple : mon_image.png. La balise <img /> doit être accompagnée de deux attributs obligatoires: src : il permet d'indiquer l adresse de l'image que l'on veut insérer. alt : cela signifie «texte alternatif», un court texte qui décrit ce que contient l'image. Ce texte sera affiché à la place de l'image si celle-ci ne peut pas être téléchargée, ou dans les navigateurs de personnes handicapées (non-voyants) qui ne peuvent pas «voir» l'image. Cela aide aussi les robots des moteurs de recherche pour les recherches d'images. Les attributes: align, border, hspace, longdesc, et vspace ne sont plus acceptés en HTML5. 75
Insertion d une image Ajouter une infobulle L'attribut title permet d'afficher une bulle (facultatif, contrairement à alt). Exemple <p> Voici le logo de HTML5:<br /> <img src="../../images/html5_sticker.png " alt="logo de HTML5" title="i've seen the Future. It's in my Browser" /> </p> Résultat 76
Les figures Les figures peuvent être de différents types :images, codes source, citations ; En HTML5, on dispose de la balise <figure> </figure> Une figure est le plus souvent accompagnée d'une légende ajoutée avec la balise <figcaption> </figcaption > à l'intérieur de la balise <figure> Une figure peut comporter plusieurs images Exemple <figure> <img src="../../images/html5_sticker.png" alt="logo de HTML5" title="i've seen the Future. It's in my Browser" /> <figcaption>fig1. Logo de HTML5:</figcaption> </figure> 77
Les liens hypertexte 1.Un lien vers un autre site 2.Un lien vers une page de votre site 3.Un lien vers une ancre 4.Un lien qui affiche une infobulle au survol 5.Un lien qui ouvre une nouvelle fenêtre 6.Un lien de type mailto 78
Un lien vers un autre site La balise <a> </a> sera utilisée avec l attribut, href, pour indiquer vers quelle page le lien doit conduire. Il s agit d un lien absolu qui doit commencer avec le nom du protocole Exemple: <p>souhaitez-vous visiter <a href="http://ent.uvt.rnu.tn">ent</a> pour accéder à votre espace de cours de développement web?</p> Résultat 79
Un lien vers une page de votre site La balise <a> </a> sera utilisée avec l attribut, href, pour indiquer vers quelle page de votre site le lien doit conduire. Exemple: <p>souhaitez-vous visiter la <a href="page2.html"> page 2</a>?</p> Les différents liens relatifs 80
Un lien vers une ancre La balise <a> </a> sera utilisée avec l attribut, href, pour indiquer vers quelle ancre (emplacement nommé unique) le lien doit conduire. Pour créer une ancre, il suffit de rajouter l'attribut id à une balise qui va alors servir de repère: donner un nom à l'ancre. (Évitez de créer des id avec des espaces ou des caractères spéciaux). Cela nous servira ensuite pour faire un lien vers cette ancre. Exemple : Ancre nommée mon_ancre <h1 id="mon_ancre">titre</h1> Lien: L'attribut href contiendra un dièse (#) suivi du nom de l'ancre <p><a href="#mon_ancre">aller vers l'ancre</a></p> 81
Un lien qui affiche une infobulle au survol Utile pour informer le visiteur avant même qu'il n'ait cliqué sur le lien. Exemple : <p>souhaitez-vous visiter <a href="http://ent.uvt.rnu.tn" title="environnement numérique de travail">ent</a> pour accéder à votre espace de cours de développement web?</p> Résultat 82
Un lien qui ouvre une nouvelle fenêtre Il est possible de «forcer» l'ouverture d'un lien dans une nouvelle fenêtre ou un nouvel onglet (Selon la configuration du navigateur. Vous ne pouvez pas choisir entre l'ouverture d'une nouvelle fenêtre ou d'un nouvel onglet). Pour cela, on rajoutera target="_blank" à la balise <a> Exemple : <p>souhaitez-vous visiter <a href="http://ent.uvt.rnu.tn" target="_blank">ent</a> pour accéder à votre espace de cours de développement web?</p> 83
Un lien de type mailto Un lien pour envoyer un email Un lien de messagerie (e-mail) permet d ouvrir le logiciel de messagerie associé au navigateur Exemple : <p><a href="mailto:moi@yahoo.fr">ecrivez-moi</a></p> Un lien pour télécharger un fichier Même principe que pour un lien vers une page web, mais en indiquant cette fois le nom du fichier à télécharger. Exemple: <p><a href="monfichier.zip">télécharger le fichier</a></p> Le navigateur, voyant qu'il ne s'agit pas d'une page web à afficher, va lancer la procédure de téléchargement lorsqu'on cliquera sur le lien. 84