Source: openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-e

Source: openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/memento-des-balises-html janv. 2019 Mé ménto HTML Balises de premier niveau Les balises de premier niveau sont indispensables pour réaliser le « code minimal » d'une page web. Voici en détail le code minimal d'une page HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Titre dans l’onglet</title> <link rel="stylesheet" href="s****.css" /> </head> <body> </body> </html> obtenu facilement avec sublime texte Commentaires HTML : <!-- Ceci est un commentaire HTML --> Balises d'en-tête Ces balises sont toutes situées dans l'en-tête de la page web, c'est-à-dire entre <head> et </head> : Balise Description <link /> Liaison avec une feuille de style <meta /> Métadonnées de la page web (charset, mots-clés, etc.) <style> Code CSS <title> Titre de la page <script> Code JavaScript Balises de structuration du texte Balise Description <strong> Mise en valeur forte (gras) <em> Mise en valeur normale (italique) <mark> Mise en valeur visuelle <h1> Titre de niveau 1 <h4> Titre de niveau 4 <h2> Titre de niveau 2 <h5> Titre de niveau 5 <h3> Titre de niveau 3 <h6> Titre de niveau 6 <img /> Image attributs : src et alt <a> Lien hypertexte attribut : href <br /> Retour à la ligne <p> Paragraphe <hr /> Ligne de séparation horizontale <sup> Exposant <sub> Indice <audio> Son attribut sans valeur pour obtenir les boutons : controls <video> Vidéo attribut sans valeur pour obtenir les boutons : controls <source> Source des balises <audio> et <video> Balise Description <html> Balise principale <head> En-tête de la page <body> Corps de la page Source: openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/memento-des-balises-html janv. 2019 attributs : src et type (plus d’info) <figure> Figure (image, code, etc.) <figcaption> Description de la figure <abbr> Abréviation <ins> Texte inséré <address> Adresse de contact <kbd> Saisie clavier <blockquote> Citation (longue) <pre> Affichage formaté (pour les codes sources) <cite> Citation du titre d'une œuvre ou d'un évènement <progress> Barre de progression <del> Texte supprimé <q> Citation (courte) <dfn> Définition <time> Date ou heure Balises de listes Les balises HTML permettant de créer des listes (listes à puces, listes numérotées, listes de définitions…) Balises structurantes (HTML5) Ces balises permettent de construire le squelette de notre site web. Balises de tableau Balise Description <table> Tableau <caption> Titre du tableau <tr> Ligne de tableau <th> Cellule d'en-tête <td> Cellule <thead> Section de l'en-tête du tableau <tbody> Section du corps du tableau <tfoot> Section du pied du tableau Balises de formulaire Balise Description <form> Formulaire <fieldset> Groupe de champs <legend> Titre d'un groupe de champs <label> Libellé d'un champ <input /> Champ de formulaire (texte, mot de passe, case à cocher, bouton, etc.) <textarea> Zone de saisie multiligne <select> Liste déroulante <option> Élément d'une liste déroulante <optgroup> Groupe d'éléments d'une liste déroulante Balise Description <ul> Liste à puces, non numérotée <ol> Liste numérotée <li> Élément de la liste à puces <dl> Liste de définitions <dt> Terme à définir <dd> Définition du terme Balise Description <header> En-tête <nav> Liens principaux de navigation <footer> Pied de page <section> Section de page <article> Article (contenu autonome) <aside> Informations complémentaires Source: openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/memento-des-balises-html janv. 2019 Balises génériques Toutes les balises HTML ont un sens : - <p> signifie « Paragraphe » - <h2> signifie « Sous-titre » - <em> signifie « emphase » - etc. Les balises génériques sont des balises qui n'ont pas de signification. On utilise ces balises génériques (aussi appelées balises universelles) le plus souvent pour construire son design. Elles permettent d’assigner un attribut class ou ID à du texte qui n’est pas entouré de balises. Ces balises ont un intérêt uniquement si vous leur associez un attribut class, id ou style :  class : indique le nom de la classe CSS à utiliser.  id : donne un nom à la balise. Ce nom doit être unique sur toute la page car il permet d'identifier la balise. Vous pouvez vous servir de l'ID pour de nombreuses choses, par exemple pour créer un lien vers une ancre, pour un style CSS de type ID, pour des manipulations en JavaScript, etc.  style : cet attribut vous permet d'indiquer directement le code CSS à appliquer. Vous n'êtes donc pas obligés d'avoir une feuille de style à part, vous pouvez mettre directement les attributs CSS. Notez qu'il est préférable de ne pas utiliser cet attribut et de passer à la place par une feuille de style externe, car cela rend votre site plus facile à mettre à jour par la suite. Ces trois attributs ne sont pas réservés aux balises génériques : vous pouvez les utiliser dans la plupart des autres balises. Balise Description <span> Balise générique de type inline attributs : class, ID ou style <div> Balise générique de type block attributs : class, ID ou style uploads/s3/ memento-memo-html-2019.pdf

  • 20
  • 0
  • 0
Afficher les détails des licences
Licence et utilisation
Gratuit pour un usage personnel Attribution requise
Partager