Remerciez-le!

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

Les bases de HTML 5 Le fonctionnement des sites web Avec le navigateur, vous p

Les bases de HTML 5 Le fonctionnement des sites web Avec le navigateur, vous pouvez consulter n'importe quel site web. Exemples : Les langages HTML et CSS sont à la base du fonctionnement de tous les sites web. C'est le navigateur web qui fera la traduction entre ces langages informatiques et ce qu’on voit s'afficher à l'écran. L'ordinateur se base sur ce qu'on lui a expliqué en HTML et CSS pour savoir ce qu'il doit afficher, comme le montre la figure suivante : HTML et CSS : deux langages pour créer un site web HTML (HyperText Markup Language) : il a fait son apparition dès 1991 lors du lancement du Web. Son rôle est de gérer et organiser le contenu. C'est donc en HTML qu’on écrit ce qui doit être affiché sur la page : du texte, des liens, des images… CSS (Cascading Style Sheets, aussi appelées Feuilles de style) : le rôle du CSS est de gérer l'apparence de la page web (agencement, positionnement, décoration, couleurs, taille du texte…). Ce langage est venu compléter le HTML en 1996. Les versions de HTML HTML 1 : c'est la toute première version créée par Tim Berners-Lee en 1991. HTML 2 : la deuxième version du HTML apparaît en 1994 et prend fin en 1996 avec l'apparition du HTML 3.0. C'est cette version qui posera en fait les bases des versions suivantes du HTML. Les règles et le fonctionnement de cette version sont donnés par le W3C (tandis que la première version a été créée par un seul homme). HTML 3 : apparue en 1996, cette nouvelle version du HTML rajoute de nombreuses possibilités au langage comme les tableaux, les applets, les scripts, le positionnement du texte autour des images, etc. HTML 4 : il s'agit de la version la plus répandue du HTML (plus précisément, il s'agit de HTML 4.01). Elle apparaît pour la première fois en 1998 et propose l'utilisation de frames (qui découpent une page web en plusieurs parties), des tableaux plus complexes, des améliorations sur les formulaires, etc. Mais surtout, cette version permet pour la première fois d'exploiter des feuilles de style. XHTML : signifie eXtensible HyperText Markup Language, c'est à dire langage de balises hypertexte extensible. XHTML se fonde sur la syntaxe définie par XML. HTML 5 : c'est la dernière version. Encore assez peu répandue, elle fait beaucoup parler d'elle car elle apporte de nombreuses améliorations comme la possibilité d'inclure facilement des vidéos, un meilleur agencement du contenu, de nouvelles fonctionnalités pour les formulaires, etc. Les balises Les pages HTML sont représentées de ce qu'on appelle des balises. Celles-ci sont invisibles à l'écran pour les visiteurs, mais elles permettent à l'ordinateur de comprendre ce qu'il doit afficher. Les balises sont entourées de « chevrons », c'est-à- dire des symboles < et >, comme ceci : <balise> Les balises en paires Elles s'ouvrent, contiennent du texte, et se ferment plus loin. Exemple : <title>Ceci est un titre</title> On distingue une balise ouvrante (<title>) et une balise fermante (</title>) qui indique que le titre se termine. Cela signifie pour l'ordinateur que tout ce qui n'est pas entre ces deux balises n'est pas un titre. Les balises orphelines Ce sont des balises qui servent le plus souvent à insérer un élément à un endroit précis. Il n'est pas nécessaire de délimiter le début et la fin. Exemple : <img /> Les attributs Les attributs sont un peu les options des balises. Ils viennent les compléter pour donner des informations supplémentaires. L'attribut se place après le nom de la balise ouvrante et a le plus souvent une valeur de cette façon : <balise attribut="valeur"> Exemple : <image nom="photo.jpg" /> L'ordinateur comprend alors qu'il doit afficher l'image contenue dans le fichier photo.jpg. Structure de base d'une page HTML5 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Titre de la page</title> </head> <body> </body> </html> La page HTML <!DOCTYPE html> La toute première ligne s'appelle le doctype. Elle est indispensable car c'est elle qui indique qu'il s'agit bien d'une page web HTML. Ce n'est pas vraiment une balise comme les autres car elle commence par un point d'exclamation. <html> … </html> C'est la balise principale du code. Elle englobe tout le contenu de la page L'en-tête <head> et le corps <body> Une page web est constituée de deux parties : L'en-tête <head> : cette section donne quelques informations générales sur la page comme son titre, l'encodage (pour la gestion des caractères spéciaux), etc. Cette section est généralement assez courte. Les informations que contient l'en-tête ne sont pas affichées sur la page, ce sont simplement des informations générales à destination de l'ordinateur. Le corps <body> : c'est là que se trouve la partie principale de la page. Tout ce qui sera écrit ici sera affiché à l'écran. L'encodage (charset) <meta charset="utf-8" /> Cette balise indique l'encodage utilisé dans votre fichier .html. L'encodage indique la façon dont le fichier est enregistré. C'est lui qui détermine comment les caractères spéciaux vont s'afficher (accents, idéogrammes chinois et japonais, caractères arabes, etc.). Il y a plusieurs techniques d'encodage comme : ISO-8859-1, OEM 775, Windows-1253… Une seule cependant devrait être utilisée aujourd'hui autant que possible : UTF-8. Cette méthode d'encodage permet d'afficher sans aucun problème pratiquement tous les symboles de toutes les langues. Le titre principal de la page <title> … </title> C'est le titre de la page. Toute page doit avoir un titre qui décrit ce qu'elle contient. Il est conseillé de garder le titre assez court (moins de 100 caractères en général). Le titre ne s'affiche pas dans la page mais en haut de celle-ci càd dans l'onglet du navigateur. Les commentaires Un commentaire en HTML est un texte qui sert simplement de mémo. Il n'est pas affiché. Il n'est pas lu par l'ordinateur. Cela ne change rien à l'affichage de la page.  Les paragraphes <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Paragraphes</title> </head> <body> <p>Bonjour et bienvenue sur mon site !</p> </body> </html> Rq : Pour Sauter une ligne il faut utiliser une deuxième balise <p> car ça ne sert à rien de taper Entrée. La balise <br /> C'est une balise orpheline qui sert juste à indiquer qu'on doit aller à la ligne. <p> </p> : pour organiser son texte en paragraphes. <br /> : pour aller à la ligne. Exemple <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Essais de sauts de ligne</title> </head> <body> Ceci est un <br /> exemple <p> avec les balises P et BR </p> </body> </html> Les titres En HTML on a le droit d'utiliser six niveaux de titres différents. <H6>Titre de niveau 6</H6> <H5>Titre de niveau 5</H5> <H4>Titre de niveau 4</H4> <H3>Titre de niveau 3</H3> <H2>Titre de niveau 2</H2> <H1>Titre de niveau 1</H1> La mise en valeur Mettre un peu en valeur : utiliser la balise <em> </em>. Mettre bien en valeur : on utilise la balise <strong> </strong> Exemple : <p>Ce texte est mis en évidence <em> avec em </em> et celui-là <strong> avec strong</strong> </p> Donne le résultat suivant dans le navigateur : Marquer le texte La balise <mark> permet de faire ressortir visuellement une portion de texte. L'extrait n'est pas forcément considéré comme important mais on veut qu'il se distingue bien du reste du texte. Exemple : <p>Ce texte est mis en évidence <mark> avec mark </mark> </p> Donne le résultat suivant dans le navigateur : Les listes Liste non ordonnée <ul> </ul> <li></li> délimite un élément de la liste (une puce). Exemple : <ul> <li>Fraises</li> <li>Framboises</li> <li>Cerises</li> </ul> Donne le résultat suivant dans le navigateur : Les listes Liste ordonnée <ol> </ol> Exemple : <ol> <li>Fraises</li> <li>Framboises</li> <li>Cerises</li> </ol> Donne le résultat suivant dans le navigateur : Créer des liens Pour faire un lien, la balise que nous allons utiliser est très simple à retenir : <a>. Il faut lui ajouter un attribut, href, pour indiquer vers quelle page le lien doit conduire. Exemple : <a href="page.html">Page</a> Donne le résultat suivant dans le navigateur : Un lien vers une autre page du même site Un lien vers une ancre Une ancre est une sorte de point de repère que vous pouvez mettre dans vos pages HTML lorsqu'elles sont très longues. Il s’agit d’un lien interne. Les liens internes permettent de se déplacer à l'intérieur d'un fichier HTML, sans que le visiteur soit obligé de faire "scroller" la fenêtre. Le visiteur va donc cliquer sur un lien et il sera amené vers l'ancre. Pour cela deux étapes sont nécessaires : Définir la cible d'un lien (l'ancre) et associer ce même lien à cette ancre. Pour créer une ancre :  il suffit de rajouter l'attribut id à une balise qui va alors servir de repère. On peut utiliser l'attribut id pour donner un nom à l'ancre. Cela nous servira ensuite pour faire un lien vers cette ancre. Exemple : <a id="top"></a> Ensuite, il suffit de créer un lien comme d'habitude, mais cette fois l'attribut href contiendra un dièse (#) suivi du nom de l'ancre. Exemple : <a href="#top">top</a> Liens externes uploads/s3/les-bases-de-html-5.pdf