Fiche de révision : Création de pages web en HTML

📋 Plan du Cours

1. Balises HTML et éditeurs
2. Structure fondamentale du document
3. Mise en forme du contenu
4. Listes HTML et marqueurs
5. Liens externes et ancres
6. Images et zones réactives
7. Tableaux et cellules fusionnées
8. Audio, vidéo et ressources intégrées
9. Conteneurs génériques HTML
10. Éléments sémantiques HTML5
11. Formulaire et envoi des données
12. Champs et choix de formulaire

📖 1. Balises HTML et éditeurs

🔑 Notions clés & Définitions

• HTML : Signifie Hyper Text Markup Language et permet de créer une page web.

★ À maîtriser

• Les balises indiquent au navigateur comment afficher le document, et certaines permettent d’intégrer des images, des vidéos ou de la musique.

• Le navigateur analyse et interprète le document HTML afin d’afficher correctement la page, sans montrer les balises telles quelles.

• La syntaxe générale d’une balise comprend un chevron ouvrant, un nom, des attributs optionnels et un chevron fermant ; un attribut est écrit avec son nom, un signe égal et une valeur entre guillemets doubles.

Compléments

• Les éditeurs HTML cités sont :

  • Notepad++
  • Visual Studio Code
  • WebExpert
  • FrontPage
  • Dreamweaver
  • WebCreator
  • Sublime Text

• Visual Studio Code est un éditeur de code source gratuit et open source développé par Microsoft.

📖 2. Structure fondamentale du document

🔑 Notions clés & Définitions

• Élément html : L’élément <html> est la racine du document HTML et tout autre élément du document en est un descendant.
• Élément head : L’élément <head> fournit les métadonnées du document, notamment son titre et des liens.
• Élément title : L’élément <title> définit le titre du document, affiché dans la barre de titre ou l’onglet du navigateur, et ne contient que du texte.
• Élément meta : L’élément <meta> fournit des métadonnées interprétables par les machines, qui ne sont pas affichées dans la page.
• Élément body : L’élément <body> représente le contenu principal et visible du document HTML, qui ne peut contenir qu’un seul élément <body>.

★ À maîtriser

• Le DOCTYPE indique au navigateur la version HTML déclarée dans le document ; en HTML5, il s’écrit <!DOCTYPE html>.

Compléments

• L’attribut charset de <meta> spécifie le codage des caractères, notamment UTF-8 ou ISO-8859-1.

• L’attribut name de <meta> peut préciser la description, les mots-clés, l’auteur ou le viewport du document.

📖 3. Mise en forme du contenu

★ À maîtriser

• Les balises de formatage au niveau du texte comprennent notamment <b> et <strong> pour le gras, <i> et <em> pour l’italique, <u> et <ins> pour le soulignement, ainsi que <sup> et <sub> pour l’exposant et l’indice.

• Les titres HTML vont de <h1> à <h6>.

• La balise <br> provoque un retour à la ligne et la balise <p> délimite un paragraphe.

Compléments

• L’entité   insère un espace insécable dans le texte HTML.

• La balise <hr> insère un trait horizontal, dont la largeur, la taille, l’alignement et l’ombrage peuvent être précisés par des attributs.

• Dans l’exercice corrigé, le titre utilise la police Verdana et la couleur #003569, tandis que le texte utilise la couleur #444444, une taille 4 et met le mot « inventore » en gras et en italique.

📖 4. Listes HTML et marqueurs

🔑 Notions clés & Définitions

• Liste non ordonnée : Une liste non ordonnée <ul> présente des éléments sans hiérarchie ni ordre logique apparent, et chaque élément est représenté par <li>.
• Liste ordonnée : Une liste ordonnée <ol> présente des éléments munis d’un indicateur ordinal, et chaque élément est représenté par <li>.
• Liste de définition : Une liste <dl> associe des termes introduits par <dt> à leurs descriptions ou définitions introduites par <dd>, par exemple dans un glossaire.

★ À maîtriser

• HTML distingue les listes non ordonnées <ul>, les listes ordonnées <ol> et les listes de définition <dl> ; les éléments des listes sont représentés par <li>.

Compléments

• L’attribut type de <ul> peut prendre les valeurs disc pour une puce remplie, circle pour une puce vide et square pour une puce carrée.

• Les valeurs de type de <ol> sont :

  • 1 : chiffres arabes
  • a : lettres minuscules
  • A : lettres majuscules
  • i : chiffres romains minuscules
  • I : chiffres romains majuscules

💡 Astuce mémo

UL organise sans ordre apparent ; OL affiche un ordre numéroté.

📖 5. Liens externes et ancres

🔑 Notions clés & Définitions

• Lien hypertexte : Un lien hypertexte est créé avec l’élément <a> ; le texte contenu dans cet élément constitue la zone cliquable.

★ À maîtriser

📌 Un lien externe pointe vers une URL ou un fichier du même serveur, tandis qu’un lien interne pointe vers un marqueur situé dans la même page.

• L’attribut href indique la destination d’un lien, qui peut être une URL, un fichier ou une ancre interne précédée du symbole #.

Compléments

• L’attribut target="_blank" ouvre le lien dans une nouvelle fenêtre ou un nouveau contexte de navigation, tandis que target="_self" utilise le contexte actuel par défaut.

• L’attribut target="_top" ouvre le lien dans l’ensemble de la fenêtre lorsqu’on se trouve dans une page contenant des frames.

📖 6. Images et zones réactives

🔑 Notions clés & Définitions

• Image réactive : Une image réactive est une image associée à plusieurs zones cliquables définies dans une carte <map>, contrairement à une image rendue cliquable par un lien unique.

★ À maîtriser

• La balise <img> insère une image à l’aide de l’attribut src, et ses attributs peuvent préciser le texte alternatif alt, les dimensions width et height, la bordure border et l’alignement align.

Compléments

• Les formats d’image indiqués sont :

  • JPEG (.JPG)
  • PNG
  • GIF

• L’attribut usemap de <img> associe l’image à une carte <map> dont le nom correspond à la valeur de usemap sans le symbole #.

• Chaque zone réactive est définie par <area> avec notamment les attributs name, shape, coords, href et alt.

• La forme rect utilise les coordonnées des coins supérieur gauche et inférieur droit, la forme circle celles du centre et du rayon, et la forme poly celles des points du polygone avec retour au point de départ.

📖 7. Tableaux et cellules fusionnées

🔑 Notions clés & Définitions

• Tableau HTML : Un tableau HTML organise des données en lignes et en colonnes, dont l’intersection forme une cellule.

★ À maîtriser

• Les éléments de tableau sont :
  • <table> : tableau
  • <tr> : ligne
  • <td> : cellule
  • <th> : cellule d’en-tête

📌 L’attribut colspan fusionne des cellules horizontalement sur une même rangée, tandis que rowspan étend une cellule verticalement sur plusieurs lignes.

Compléments

• Les attributs de tableau cités sont :

  • bgcolor : couleur de fond
  • border : épaisseur des bordures
  • bordercolor : couleur des bordures
  • cellspacing : espacement entre les cellules
  • cellpadding : espacement entre bord et contenu
  • width : largeur du tableau

• L’élément <caption> ajoute un titre au tableau, en dehors des lignes et des cellules.

• Les groupes de lignes du tableau sont :

  • <thead> : informations d’en-tête
  • <tbody> : données du tableau
  • <tfoot> : informations de pied

📖 8. Audio, vidéo et ressources intégrées

🔑 Notions clés & Définitions

• Élément iframe : L’élément <iframe> permet d’intégrer un document ou une ressource, comme une carte Google Maps ou une animation, dans le contenu d’une autre page.
• Élément object : L’élément <object> représente une ressource externe pouvant être interprétée comme une image, un contexte de navigation imbriqué ou une ressource à traiter comme un plugin.

📝 Points essentiels

• L’élément <audio> intègre du contenu sonore et peut utiliser une ou plusieurs sources avec src ou <source> ; les formats cités sont audio/mpeg, audio/ogg et audio/wav.

• L’élément <video> permet d’intégrer une vidéo et les formats cités comme pris en charge sont MP4, WebM et Ogg.

📖 9. Conteneurs génériques HTML

🔑 Notions clés & Définitions

• Élément div : L’élément <div> est un conteneur de division ou de section qui peut inclure différents éléments HTML et sert à structurer le document.
• Élément span : L’élément <span> ne produit aucun effet visuel par lui-même et sert à appliquer un style aux éléments qu’il contient.

📝 Points essentiels

• Avant l’apparition des éléments sémantiques HTML5, les pages utilisaient des éléments <div> associés à des identifiants ou des classes pour structurer leurs blocs.

📖 10. Éléments sémantiques HTML5

🔑 Notions clés & Définitions

• Élément header : L’élément <header> regroupe l’en-tête d’un document ou d’une section, par exemple un logo, un menu ou un formulaire de recherche.
• Élément nav : L’élément <nav> contient les principaux blocs de liens de navigation, et non nécessairement tous les liens du document.
• Élément article : L’élément <article> définit un bloc indépendant regroupant notamment un article, une publication de blog ou un commentaire.
• Élément section : L’élément <section> regroupe un contenu thématique du document.
• Élément aside : L’élément <aside> contient des informations complémentaires facultatives qui ne modifient pas le contenu principal si elles sont supprimées.
• Élément footer : L’élément <footer> forme le pied d’une section ou de l’élément racine et peut contenir des droits d’auteur, des coordonnées ou des liens de navigation.

★ À maîtriser

• Les éléments sémantiques HTML5 décrivent clairement la nature du contenu et permettent de structurer et regrouper les éléments d’une page.

Compléments

• L’élément <figure> désigne un contenu autonome, comme une illustration, un schéma, une photo ou une liste de code, et <figcaption> en définit la légende.

• L’élément <details> contient des détails que l’utilisateur peut afficher ou masquer, et son contenu n’est visible que si l’attribut open est défini.

• L’élément <summary> définit le titre visible et cliquable permettant d’afficher ou de masquer le contenu d’un élément <details>.

📖 11. Formulaire et envoi des données

🔑 Notions clés & Définitions

• Formulaire HTML : Un formulaire HTML rend une page interactive en permettant à l’internaute de saisir du texte, de valider un choix ou de sélectionner une entrée, puis de transmettre ces informations pour traitement.

★ À maîtriser

📌 La méthode GET, utilisée par défaut, transmet les données dans l’URL avec ? et sépare les données avec &, tandis que POST transmet les données dans une entête sans les rendre visibles dans l’URL.

📌 L’attribut action de <form> désigne la page qui traite les données ; s’il est absent ou vide, la page qui contient le formulaire est utilisée.

Compléments

• L’élément <form> délimite les champs du formulaire et son attribut name permet de l’identifier de manière unique dans la page.

• La méthode POST permet de transmettre un volume de données plus important que GET.

💡 Astuce mémo

GET expose les données dans l’URL ; POST les transmet dans une entête.

📖 12. Champs et choix de formulaire

🔑 Notions clés & Définitions

• Élément input : L’élément <input> est une balise orpheline utilisée pour créer des champs de formulaire, dont le type est déterminé par l’attribut type.

★ À maîtriser

• Les types de <input> comprennent text pour une zone de texte, password pour un mot de passe masqué, radio pour un choix unique et checkbox pour des choix multiples.

• L’élément <select> crée une liste de sélection contenant des éléments <option>, et l’attribut selected sélectionne une option au chargement.

Compléments

• Ces types de <input> servent à :

  • file : charger un fichier
  • hidden : stocker un champ caché
  • button : créer un bouton simple
  • reset : réinitialiser les champs
  • submit : envoyer le formulaire

• L’attribut name identifie un champ, value définit sa valeur initiale ou l’étiquette d’un bouton, et size indique sa largeur en caractères ; la largeur par défaut d’une zone de texte est de 20 caractères.

• L’attribut checked coche automatiquement au chargement un bouton radio ou une case à cocher.

• Les éléments <fieldset> et <legend> permettent respectivement d’encadrer un formulaire et de lui donner une légende.