Présentation initiale HTML
HyperText Markup Language Qu'est ce que c'est ? HyperText Markup Language (littéralement Langage HyperTexte à balise) Il s'agit d’un langage informatique qui permet de créer des sites web. Tous les sites web sont basés sur ce langage, il est incontournable et universel aujourd'hui. Il est à la base même du Web. Le langage HTML a été inventé par un certain Tim Berners-Lee en 1991… Nom de naissance : Timothy John Berners-Lee Naissance : 8 juin 1955 (61 ans) Londres, Angleterre Nationalité : Royaume-Uni Royaume-Uni Profession : Informaticien, Physicien Principal inventeur du World Wide Web (WWW) au tournant des années 1990 il développe les trois principales technologies du Web : les adresses web (URL), l'Hypertext Transfer Protocol (HTTP) et l' Hypertext Markup Language (HTML). Il y a eu plusieurs versions des langages HTML. Les dernières versions sont HTML5
Les icônes des navigateurs web les plus répandus Comment le lire ? Les icônes des navigateurs web les plus répandus Pour cela, vous lancez un programme appelé le navigateur web. 1 Google Chrome 2 Safari 3 Edge (Internet Explorer est remplacé par Edge) 4 Mozilla Firefox 5 Opera Le nouveau navigateur de Microsoft, qui équipe tous les PC à partir de Windows 10. Il ressemble à Internet Explorer (les logos sont proches !) mais c'est une toute nouvelle version bien plus à jour. Edge est le remplaçant d'Internet Explorer.
Comment l’écrire ? Le logiciel Bloc-notes de Windows On peut tout à fait créer un site web uniquement avec Bloc-Notes, le logiciel d'édition de texte intégré par défaut à Windows. Pour enregistrer le fichier, donnez lui le nom que vous voulez, en terminant par .html, par exemple test.html Sur un serveur Web, en général et si aucun nom de fichier n'est spécifié dans la requête, c'est une page de nom index.html qui sera renvoyée Le logiciel Bloc-notes de Windows
Les balises et leurs attributs < balise > On distingue deux types de balises : Les balises en paires : <titre>Ceci est un titre</titre> Les balises orphelines : <image /> Les pages HTML sont remplies de balises. Celles-ci sont invisibles à l'écran pour vos visiteurs, mais elles permettent au navigateur de comprendre ce qu'il doit afficher. Elles sont entourées de « chevrons ». Elles s'ouvrent, contiennent du texte, et se ferment plus loin. Ce sont des balises qui servent le plus souvent à insérer un élément à un endroit précis. Le / de fin n'est pas obligatoire. On pourrait écrire <image>. Pour ne pas les confondre on rajoute ce / (slash) à la fin des balises orphelines.
Les attributs <balise attribut="valeur"> <image nom="photo.jpg"> Le navigateur comprend alors qu'il doit afficher l'image contenue dans le fichier photo.jpg. 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 Toutes les balises que nous venons de voir sont fictives. Les vraies balises ont des noms en anglais.
Structure d’une page HTML 1 2 3 4 5 6 7 8 9 10 11 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Mon titre</title> </head> Il y a des espaces au début de certaines lignes pour « décaler » les balises. Ce n'est pas obligatoire et cela n'a aucun impact sur l'affichage de la page, mais cela rend le code source plus lisible. Les balises s'ouvrent et se ferment dans un ordre précis. Par exemple, la balise <html> est la première que l'on ouvre et c'est aussi la dernière que l'on ferme (tout à la fin du code, avec </html>). Les balises doivent être fermées dans le sens inverse de leur ouverture. <body> </body> </html>
Le doctype <!DOCTYPE html> Elle est indispensable, c'est elle qui indique qu'il s'agit bien d'une page web HTML. Ce n'est pas vraiment une balise, elle commence par un point d'exclamation. C'est un peu l'exception qui confirme la règle.
La balise <html> 1 2 3 <html> </html> C'est la balise principale du code. Elle englobe tout le contenu de votre page. Comme vous pouvez le voir, la balise fermante se trouve tout à la fin du code </html>
L’en-tête <head> 3 4 5 6 <head> </head> <meta charset="utf-8"> <title>Mon titre</title> L'en-tête <head> : informations générales sur la page comme son titre , l'encodage pour la gestion des caractères spéciaux, etc. <head> <title> <meta>
Dans la balise nous pourrons mettre le contenu du document. Le corps <body> 3 4 5 6 <body> </body> <h1>Mon premier site</h1> <p>Mon premier paragraphe dans mon site</p> Dans la balise nous pourrons mettre le contenu du document. <body>
Afficher dans le navigateur Il existe plein d’autres balises , etc… <ul> <li> <br /> <a>
Pour en savoir plus Mémento des balises HTML https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/memento-des-balises-html Les balises HTML et leur rôle https://developer.mozilla.org/fr/Apprendre/HTML/Balises_HTML