Remerciez-le!

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

1 Initiation HTML Apprendre les bases du langage pour créer des sites web Les b

1 Initiation HTML Apprendre les bases du langage pour créer des sites web Les bases d’un site web • Un fichier HTML est un format de fichier « texte » éditable dont les éléments ont du sens • Au format .html • Peut contenir du texte, des images, des liens, des médias, etc. • Peut être liée à une autre page via des liens • Un ensemble de pages liées entre elles • Accessible en ligne depuis n'importe où Un site Web c’est ... • Contenus textuels dans le fichier HTML, mais aussi images, sons, vidéos, CSS, JavaScript, polices d'écriture, etc. tous ces fichiers sont chargés dans le navigateur pour créer une page web. Mais pas que ... La syntaxe HTML : balises, éléments et attributs • Les balises structurent le contenu de la page (texte, images, etc.) • Chaque balise a un rôle et donne du sens au contenu présenté Le principe de balise • On peut imbriquer les balises (on y reviendra) les unes dans les autres Le principe de balise <p> Hooo un bloc !! </p> <div> <p> Et un joli paragraphe </p> <p> Et autre un joli paragraphe </p> </div> • Touche < du clavier pour ouvrir : < • Touche maj + < pour fermer : > • Le nom des balises est prédéfini dans les spécifications HTML, on ne peut donc PAS en inventer ! • Quelques exemples : <html>, <body>, <img>, <p>, <div>, <a>, etc. Le principe de balise • Par convention et pour faciliter la lecture du code, toute balise ouverte doit être fermée (sauf exception). • Certaines balises bien particulières n’ont pas besoin d’être fermées, on les dit « auto-fermantes », elles n’ont ni contenu ni balise fermante. • Note : je mets le / final par convention, mais pas obligatoire. Le principe de balise • La balise gauche est appelée la balise ouverte tandis que la balise droite est appelée la balise fermante • La balise fermante possède un "forward slash /" après le premier crochet d'angle Le principe de balise Imbrication Il faut ouvrir et fermer les balises dans le bon ordre : <a><b></b></a> et non <a><b></a></b> Règles : pas possible de mettre n’importe quelle balise n’importe où. (En théorie du moins...) <table> <tr> <th>A1</th> <th>B1</th> </tr> <tr> <td>A2</td> <td>B2</td> </tr> </table> • Certaines balises peuvent être complétées par des attributs précisant certains paramètres (l'adresse des liens, source d'une image à afficher, etc.) • Une balise peut contenir plusieurs attributs Attributs et valeurs Balise et attributs doivent être écrite en lettres miniscules ●Les attributs sont des éléments prédéfinis dans le HTML on ne peut en « inventer » ●On peut les mettre entre simple quote, double quote ou rien. Par convention nous choisissons les doubles quotes " " <div id="kittens"> // <div id=kittens> ●Les attributs sont toujours dans la balise ouvrante Attributs et valeurs ●src=" " : donner la source (d’une image par exemple) – <img src="monimage.png" width="400" height="250" alt="image de chatons" /> ●href=" " : donner la destination d’un lien – <a href="http://www.google.fr"> Texte du lien </a> Exemples d’attributs ●id=" " : donner un identifiant à l’élément que l’on pourra utiliser en CSS. Les Ids doivent être uniques par page – <p id="monid"> contenu </p> ● class=" " : donner une classe à l’élément que l’on pourra utiliser en CSS. Les classes peuvent être dupliquées sur la page – <p class="maclasse"> contenu </p> Exemples d’attributs Remarque Les commentaires sont placés entre des balises en utilisant la syntaxe <-- comment --> Doctype, html, body : structure d'un document valide Décomposons balise par balise ! Structure d’un document HTML simplifié • Permet au navigateur de savoir quelle version de HTML (ou XHTML) est utilisée sur la page • Obligatoire pour valider une page (validateur W3C) • Pas de doctype = « Quirks » mode : le navigateur fait ce qu’il peut avec ce qu’il trouve, en mode rétro-compatibilité => peut expliquer certains bugs sur IE La notion de doctype <!doctype html> Dans ce code, la partie html donne le nom de l’élément racine du document • Tout document HTML commence par la balise <html> qui se ferme en fin de document : </html> • La balise <html> contient nécessairement deux balises définissant l'entête (<head>) et le corps (<body>) du document. La balise <html> • Permet de spécifier la langue de traitement du document global – Indexation dans la bonne langue par les moteurs de recherche – Synthèse vocale – Vérification orthographique des formulaires L'attribut lang <html lang="fr" dir="ltr"> L'attribut dir • Permet de spécifier le sens de lecture du texte de la page – la valeur ltr pour le texte qui se lit de gauche à droite – la valeur ltr pour le texte qui se lit de droite à gauche • L’entête (optionnel) du document HTML est délimité par l’élement HEAD qui contient des informations sur le document, tels que son titre (élément TITLE obligatoire), et d’autres données (les métadonnées - méta-informations) qui ne sont pas considérées comme faisant partie du contenu du document (BODY). La balise <head> • On y ajoutera également les appels pour les feuilles de style CSS et certains JavaScripts • On y trouve la balise <title> qui sera le titre du document – Sert en référencement (repris dans les résultats de recherche) – Affichée dans l’onglet du navigateur La balise <title> La balise <head> : les balises meta • L’élément META représente un mécanisme générique pour spécifier des métadonnées. On peut utiliser l’élément META pour identifier les propriétés d’un document (par exemple, l’auteur, la date d’expiration, une liste de mots-clés, etc.) et assigner des valeurs à ces propriétés. La balise <head> : les balises meta • L’élément META et les propriétés du document : Chaque élément META spécifie un couple propriété/valeur. L’attribut name identifie la propriété et l’attribut content en spécifie la valeur. exemple : <META name="Auteur" content="Cherifi Walid"> • L’élément META et les en-têtes HTTP : l’attribut http-equiv (à la place de name), a un sens particulier quand les documents sont ramenés via le protocole HTTP. exemple :<META http-equiv="Expires" content="Tue, 20 Aug 1996 14:25:27 GMT"> La balise <head> : les balises meta • L’élément META et les moteurs de recherche : une utilisation courante consiste à spécifier des mots-clés qu’un moteur de recherche peut utiliser pour améliorer la pertinence du résultat d’une recherche. exemple : <META name="keywords" lang="fr" content="vacances, soleil"> <META name="description" content="description pour le référencement"/> • On peut utiliser l’élément META pour spécifier les informations par défaut sur un document dans les cas suivants : - le langage de script par défaut ; - le langage de feuille de style par défaut ; - l’encodage de caractères du document. L’exemple suivant spécifie l’encodage de caractères du document comme étant "UTF-8" : <META http-equiv="Content-Type" content="text/html; charset=UTF-8"> La balise <head> : les balises meta ●Le corps du document (élément BODY) représente le contenu du document. ●Le contenu est constitué de texte, images, graphiques et autres éléments qui seront affichés <body> Contenu de la page </body> La balise <body> ●Puisque les feuilles de style (CSS) sont désormais le moyen conseillé de spécifier la présentation d’un document, les attributs de présentation des éléments sont donc proscrits. Le W3C recommande aux auteurs et aux développeurs de séparer la structure et la présentation. En résumé <!doctype html> <html lang="fr"> <head> <meta charset="UTF-8"> <title> Titre de ma page </title> </head> <body> Contenu de la page </body> </html> - La validation inspecte les erreurs et vérifie que la page est conforme au standard (HTML5) - La validation reste un outil et non une fin en soi, mais un code non valide a des chances de poser des soucis plus tard C’est valide ! Les commentaires dans le HTML Il est possible d’écrire du texte qui ne sera visible que dans le code source et non sur le site : un commentaire Les éléments de structuration du contenu • <div> est un conteneur • Cette balise n’a aucune valeur sémantique (aucun « sens ») • Élément de type bloc qui peut inclure n’importe quel autre balise HTML • Suivi d’un passage à la ligne • Permet de regrouper d’autres blocs de HTML (paragraphes, tableaux, etc.) La balise « division » <div> • L'élément <div> n'affecte pas l'apparence de la page, mais il est communément utilisés avec CSS pour associer des styles communs à des sections de page. La balise « division » <div> Grille en div • Les paragraphes sont des éléments de type « bloc », suivis d’un passage à la ligne et d'une marge par défaut • On peut imbriquer un paragraphe dans un div • On ne doit PAS mettre un paragraphe dans un paragraphe La balise paragraphe <p> La balise paragraphe <p> • Il existe des entités HTML pour encoder certains caractères spéciaux comme les espaces : Paragraphes et retours à la ligne Deux éléments fréquents : - <p> est utilisé pour construire des nouveaux paragraphes - <br> est utilisé pour créer des reours à la ligne Rremarque 1: l'élément <br> est vide "auto-fermante". Remarque 2: uploads/Litterature/ cours-2-initiation-html.pdf