Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

DEVELOPPEMENT WEB ET MULTIMEDIA 1 AU 2021-2022 1 Chapitre 2 Les bases de HTML5

DEVELOPPEMENT WEB ET MULTIMEDIA 1 AU 2021-2022 1 Chapitre 2 Les bases de HTML5 Introduction Le HTML (HyperText Markup Language) est le format de données conçus pour présenter des pages web qui pouvant être lues par des navigateurs (Exp : Internet Explorer, Mozilla Firefox, Opera, Google Chrome, …). C'est un langage de présentation de données, et non pas un langage de programmation. Il est figé, c'est-à-dire qu'une fois le document chargé dans le navigateur, il ne répond à aucune action de l'utilisateur sur le contenu de la page. Ce langage est pourvu d'un système de balisage (basé sur les balises) qui va permettre de structurer les documents. HTML5 (HyperText Markup Language 5) est la dernière révision majeure d'HTML (format de données conçu pour représenter les pages web). Cette version a été finalisée le 28 octobre 2014. Dans le langage courant, HTML5 désigne souvent un ensemble de technologies Web (HTML5, CSS3 et JavaScript) permettant notamment le développement d'applications. I. Qu'est-ce qu'une balise HTML ? Une balise HTML est l’élément de base du codage HTML d’une page web. Invisibles pour l’internaute (sauf en activant l’affichage du code source), elle est interprétée par le navigateur pour la composition de la page. Elle est toujours délimitée par les signes « < » et « > ». Une balise peut en plus comporter de zéro à plusieurs attributs. Les attributs sont des informations complémentaires qui la caractérisent. Ils se présentent sous la forme : nomattribut="valeur" Exemple de balise et son attribut <html lang="fr"> <h1 id="titre"> Titre de ma page </h1> Chaque balise ouverte doit être fermée, cependant il existe des exceptions. On distingue deux types de balises : • Les balises simples (mono-balises). • Les balises doubles. DEVELOPPEMENT WEB ET MULTIMEDIA 1 AU 2021-2022 2 1. Les balises simples Ce sont des balises qui sont dites "vides", c'est-à-dire qu'elles ne vont contenir aucune autre balise HTML. Ces balises n'ont pas besoin d'être fermées. Exemple de balise simple <img src="adresse/de/l/image"> 2. Les balises doubles Les balises doubles sont dites ouvrantes/fermantes, c'est-à-dire qu'elles nécessitent deux balises, une ouvrante et une fermante dans lesquelles on va pouvoir mettre d'autres balises ou du texte. La balise fermante est identique à la balise ouvrante, à la différence qu'elle contient un "/". Exemple de balise double <p> Ici du texte ou toute autre balise. </p> 3. Imbrication des balises Lorsqu’on cumule l'écriture de plusieurs balises ouvrantes (forcément inévitable), il est impératif de respecter la hiérarchie des balises, c'est-à-dire que la première ouverte sera la dernière fermée. Le chevauchement des balises est une erreur grave. Exemple de balises imbriquées <b><u>Ici les balises sont correctement imbriquées.</u></b> 4. Structure d'un document HTML Document HTML de base <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Document sans nom</title> </head> <body> …. </body> </html> DEVELOPPEMENT WEB ET MULTIMEDIA 1 AU 2021-2022 3  <!DOCTYPE html> définit ce document pour être HTML5  <html> est l'élément racine d'une page HTML  <head> contient des informations méta sur le document  <title> spécifie un titre pour le document  <body> contient le contenu visible de la page  <h1> définit un titre  <p> définit un paragraphe 5. Le DOCTYPE Il sert d'une part à déclarer quel "langage", "grammaire", ou norme on applique à notre page. Cette déclaration nous permet de soumettre nos pages au validateur du W3C (World Wide Consortium) qui vérifie que notre code HTML ne comporte aucune erreur de syntaxe (balises mal fermées, utilisation d'attributs inexistants...). 6. Les commentaires Les commentaires permettent de laisser des informations ou des descriptions du code et sont utilisables à n'importe quel endroit du document. Commentaires HTML    II. Le corps du document (body) 1. Mise en forme a. Les niveaux de titres Il existe différents niveaux de titres, ils vont de 1 à 6 et ont chacun leur importance. La balise représentant ces niveaux de titre est <hX> où X représente le niveau. Exemples de titres <h1> Titre de ma page </h1> <h2> Titre de niveau 2 </h2> <h3> Titre de niveau 3 </h3> b. Les paragraphes de texte Comme tout document texte, un document HTML doit être segmenté en paragraphes. Cette segmentation est possible en précisant où commence chaque paragraphe et où il se termine. DEVELOPPEMENT WEB ET MULTIMEDIA 1 AU 2021-2022 4 C'est le rôle de la balise <p>. Les paragraphes de texte en HTML <p> Voici un premier paragraphe. </p> <p> Voici un deuxième paragraphe. </p> <p> Voici un troisième paragraphe. </p> c. La mise en forme de texte Style Balise Affichage gras <b>Ce texte s'affichera en gras. </b> Ce texte s'affichera en gras. strong <strong>Ce texte s'affichera en gras pour souligner qu’il est important. </strong> Ce texte s'affichera en gras pour souligner qu’il est important. italique <i>Ce texte s'affichera en italique. </i> Ce texte s'affichera en italique. emphase <em>Ce texte s'affichera en italique pour souligner qu’il est important.. </em> Ce texte s'affichera en italique pour souligner qu’il est important.. souligné <u>Ce texte sera souligné. </u> <ins>Ce texte sera souligné. </ins> Ce texte sera souligné. barré <s>Ce texte sera barré. </s> <del>Ce texte sera barré. </del> Ce texte sera barré. exposant Ce texte sera en <sup>exposant. </sup> Ce texte sera en exposant. indice Ce texte sera en <sub> indice. </sub> Ce texte sera en indice. surligner ce <mark>mot</mark> sera surligné Ce mot sera surligné plus petit <small>Ce texte est plus petit. </small> Ce texte est plus petit. d. Modifier la couleur du texte Pour modifier la couleur du texte on utilise l'attribut « style » avec la propriété « color » : Texte en rouge <h1 style="color:#ff0000"> Ce texte sera en rouge. </h1> Les couleurs peuvent être écrites de deux manières : • En hexadécimal de type RVB et précédées d'un dièse (#) ; Exemples :, #ff0000 => rouge #00ff00 => vert, #0000ff => bleu, … • Textuelles en anglais US ; Exemples: red, yellow, pink, violet, blue, Orange, SlateBlue, Tomato, MediumSeaGreen, … e. Modifier la couleur de fond Pour modifier la couleur du texte on utilise l'attribut « style » avec la propriété « background-color» : Fond du texte en bleu DEVELOPPEMENT WEB ET MULTIMEDIA 1 AU 2021-2022 5 <h1 style=" background-color :blue"> Ce texte sera en rouge. </h1> f. Modifier la police du texte Pour modifier la police du texte on utilise l'attribut « style » avec la propriété « font-family» : Texte en verdana <h1 style="font-family:verdana;"> Ce texte sera en verdana. </h1> On a tendance à écrire des familles de polices plutôt qu'une seule police. En effet, il se peut que sur un système, différent du nôtre, la police choisie ne soit pas installée. On sépare alors les différentes polices par une virgule. Texte en verdana ou sans-serif <h1 style="font-family:verdana,sans-serif">Ce texte sera en verdana ou en sans-serif si verdana n'est pas installée.</h1> g. Modifier la taille du texte Pour modifier la taille du texte on utilise l'attribut « style » avec la propriété « font-size» : Texte en taille 10px <h1 style="font-size: 10px"> Ce texte aura 10px de taille. </h1> Par défaut, la valeur en pixels de font-size vaut "16px". Il y a deux manières pour modifier la valeur de cette propriété /* Valeurs dont la taille est absolue */ font-size: xx-small; font-size: x-small; font-size: small; font-size: medium; /* Valeurs relatives */ font-size: larger; font-size: smaller; /* Valeurs de longueurs */ font-size: 12px; font-size: 0.8em; font-size: large; font-size: x-large; font-size: xx-large; h. Alignement du texte HTML /* Valeurs proportionnelles */ font-size: 80%; Pour aligner un texte on utilise l'attribut « style » avec la propriété « text-align»: Texte centré <h1 style="text-align: center"> Ce texte sera centré </h1> DEVELOPPEMENT WEB ET MULTIMEDIA 1 AU 2021-2022 6 /* Exemples de valeurs */ text-align: left; text-align: right; text-align: center; text-align: justify; 2. Les images Pour afficher une image en HTML, on utilise la balise «<img>». Elle admet des différents attributs, dont les plus importants sont « src » et « alt ».  src : permet de renseigner le chemin de l'image, qui peut être absolu ou relatif.  alt : affiche un texte alternatif à la place de l'image dans le cas où, pour une raison ou une autre, celle-ci ne peut pas être chargée. Il aide de plus les moteurs de recherche à référencer l'image. Afficher une image <img src="adresse/de/l/image" alt="Description de l'image"> Les différents formats d'image supportés par cette balise sont : • GIF • JPG • PNG • BMP (à éviter). 3. Les liens hypertextes Un lien hypertexte est un élément HTML permettant d'envoyer le visiteur vers une nouvelle page. On peut insérer dans cet élément toute sorte de textes, images et autres balises dites "inline" (comme les balises <span>, <strong>, etc). Un lien sera représenté dans le code par la balise «<a>». L'adresse de destination doit se trouver dans l'attribut «href». L'attribut « title », permet de renseigner un petit descriptif sur le contenu de la page cible, c’est un atout non négligeable en matière de uploads/s3/ chap-ii-les-bases-de-html5-2021.pdf