Hoja de repaso: Introduction aux bases du HTML et CSS

📋 Plan du Cours

  1. Syntaxe HTML de base
  2. Mise en couleur en HTML
  3. Fichiers CSS et liens
  4. Balises HTML essentielles
  5. Attributs et styles
  6. Balises d'organisation
  7. Balises multimédia

📖 1. Syntaxe HTML de base

🔑 Notions clés & Définitions

  • DOCTYPE HTML : déclaration obligatoire <DOCTYPE html> placée en début de document pour indiquer qu'il s'agit d'un document HTML. Elle permet au navigateur de suivre la norme HTML.
  • <html> : balise racine qui englobe tout le contenu de la page HTML. Elle doit ouvrir et fermer le document HTML.
  • <head> : section qui contient des informations sur la page, comme le titre, les liens vers des fichiers CSS, ou autres métadonnées.
  • <body> : section qui contient le contenu visible de la page, comme le texte, images, liens, etc.
  • <link rel="stylesheet" href="style.css"> : balise utilisée dans <head> pour assembler un fichier CSS externe à la page HTML, permettant de styliser la page.

📝 Points essentiels

  • La déclaration <!DOCTYPE html> doit être placée en début de document pour respecter la norme.
  • La balise <html> doit contenir tout le code HTML, avec <head> en premier, suivi de <body>.
  • La balise <head> inclut souvent <title> pour définir le titre affiché en haut du navigateur, et <link> pour relier un fichier CSS.
  • La balise <body> contient le contenu visible, comme <p>, <h1>, <img>, <button>, etc.
  • La structure d’un document HTML est :
    <!DOCTYPE html>
    <html>
      <head>
        <!-- Métadonnées, liens CSS, titre -->
      </head>
      <body>
        <!-- Contenu visible -->
      </body>
    </html>
    
  • La balise <html> doit être présente pour que l’écriture soit reconnue comme du HTML et que la coloration ou le style s’applique correctement.

💡 À retenir

La syntaxe HTML de base repose sur une structure précise avec <!DOCTYPE html>, la balise racine <html>, une section <head> pour les métadonnées et une section <body> pour le contenu visible, assurant ainsi la conformité et la bonne interprétation de la page par le navigateur.

📖 2. Mise en couleur en HTML

🔑 Notions clés & Définitions

  • Couleurs en HTML (color, background-color) : Attributs permettant de définir la couleur du texte ou de l'arrière-plan d'un élément HTML. La couleur peut être spécifiée par un nom, une valeur hexadécimale, ou une valeur RGB.
  • Mise en couleur en HTML : Utilisation des attributs color et background-color dans l'attribut style en ligne pour appliquer des couleurs à un contenu HTML.
  • Attributs de style en ligne : Attribut style placé dans une balise HTML permettant d'appliquer directement des styles CSS, notamment la couleur du texte ou de l'arrière-plan.
  • Mise en couleur avec <Html> et <body> : En plaçant la balise <Html> pour indiquer le début du document HTML, et en utilisant <body> pour définir la zone où la couleur s'applique globalement ou localement.
  • Mise en couleur en utilisant <p> : La balise <p> peut recevoir des styles en ligne pour changer la couleur du texte ou de l'arrière-plan, par exemple <p style="color: red;">.
  • Mise en couleur avec <link rel="stylesheet" href="style.css"> : Lien vers un fichier CSS externe permettant de gérer la couleur des éléments de façon centralisée, mais dans ce contexte, la mise en couleur est principalement en ligne.

📝 Points essentiels

  • La couleur du texte peut être modifiée en utilisant color : dans l'attribut style en ligne, par exemple <p style="color: blue;">.
  • La couleur de l'arrière-plan peut être modifiée avec background-color : dans l'attribut style, par exemple <p style="background-color: pink;">.
  • La balise <Html> doit être présente pour que l'écriture ait une coloration cohérente dans le document HTML.
  • La balise <head> contient la balise <link rel="stylesheet" href="style.css"> pour assembler des fichiers CSS, mais la mise en couleur en ligne est aussi possible directement dans les balises HTML.
  • La couleur peut s'appliquer à tout le contenu d'un <body> ou à des éléments spécifiques comme <h1>, <p>, <button>, etc.
  • La balise <title> dans <head> indique le titre du site, mais n'intervient pas dans la coloration.
  • La norme <!DOCTYPE html> doit être respectée pour assurer la compatibilité et la conformité du site.

💡 À retenir

La mise en couleur en HTML s'effectue principalement via les attributs color et background-color en ligne dans la balise <style> ou directement dans l'attribut style, permettant de personnaliser facilement la présentation visuelle du contenu.

📖 3. Fichiers CSS et liens

🔑 Notions clés & Définitions

  • Fichiers CSS : fichiers contenant des règles de style pour définir l'apparence d'une page web. Ils sont généralement enregistrés avec l'extension .css.
  • Lien entre HTML et CSS : mécanisme permettant de relier un fichier HTML à un fichier CSS pour appliquer des styles.
  • Balise <link> : balise utilisée dans la section <head> du document HTML pour insérer un fichier CSS externe.
  • Attribut rel : attribut de la balise <link> qui indique la relation entre le document HTML et le fichier lié, ici "stylesheet".
  • Attribut href : attribut de la balise <link> qui spécifie le chemin vers le fichier CSS externe.

📝 Points essentiels

  • La balise <link> doit être placée dans la section <head> du document HTML.
  • La syntaxe correcte pour relier un fichier CSS externe est : <link rel="stylesheet" href="style.css">.
  • La relation "stylesheet" dans l’attribut rel indique que le fichier lié est une feuille de style.
  • Le fichier CSS permet de modifier l’apparence de tout le contenu du document HTML en appliquant des règles de style.
  • Lorsqu’on utilise <link rel="stylesheet" href="style.css">, tout le contenu HTML devient stylé selon les règles définies dans le fichier CSS.
  • La mise en place du lien CSS permet d'appliquer des styles globaux, par exemple changer la couleur de tout le texte ou le fond de la page.
  • La syntaxe doit respecter l’ordre : <link rel="stylesheet" href="chemin/vers/fichier.css">.

💡 À retenir

Le lien entre HTML et CSS se fait principalement via la balise <link> dans la section <head>, permettant d'appliquer des styles externes à tout ou partie du contenu HTML.

📖 4. Balises HTML essentielles

🔑 Notions clés & Définitions

  • p : Balise de paragraphe utilisée pour structurer le texte en blocs distincts. Exemple : <p>Texte</p>.
  • h1 : Balise de titre de premier niveau, utilisée pour le titre principal d'une page ou section. Plus grande que <h6>. Exemple : <h1>Titre</h1>.
  • br : Balise de saut de ligne, insérée pour passer à la ligne suivante sans créer de nouveau paragraphe. Exemple : <br>.
  • button : Balise pour créer un bouton interactif. Exemple : <button>Cliquez-moi</button>.
  • strong : Balise pour indiquer que le texte est important, généralement en gras. Exemple : <strong>Important</strong>.
  • a : Balise pour insérer un lien hypertexte. Attribut href pour définir la destination. Exemple : <a href="https://exemple.com">Lien</a>.
  • em : Balise pour mettre le texte en italique, souvent pour insister ou souligner une nuance. Exemple : <em>Important</em>.
  • img : Balise pour insérer une image. Attributs src (source), width, height pour définir la taille. Exemple : <img src="image.png" width="100" height="200">.

📝 Points essentiels

  • Les balises <p>, <h1>, <br>, <button>, <strong>, <a>, <em>, <img> sont fondamentales pour structurer et enrichir une page HTML.
  • La balise <p> sert à organiser le texte en paragraphes, tandis que <h1> sert à hiérarchiser le contenu avec un titre principal.
  • <br> permet de passer à la ligne sans créer un nouveau paragraphe, utile pour des sauts de ligne simples.
  • <button> crée un bouton cliquable, souvent associé à des actions JavaScript.
  • <strong> et <em> permettent de mettre en valeur le texte, respectivement en gras et en italique.
  • <a> permet d’insérer des liens hypertextes, essentiels pour la navigation.
  • <img> insère une image dans la page, avec possibilité de définir sa taille.

💡 À retenir

Les balises essentielles <p>, <h1>, <br>, <button>, <strong>, <a>, <em>, <img> structurent et enrichissent le contenu HTML, facilitant la présentation et l’interactivité d’une page web.

📖 5. Attributs et styles

🔑 Notions clés & Définitions

  • Attributs HTML : éléments qui modifient ou précisent le comportement ou l'apparence d'une balise HTML. Exemple : color, background-color. AUTEUR (source) : mentionne que ces attributs peuvent être utilisés pour définir des styles en ligne.
  • Styles en ligne : styles appliqués directement à une balise HTML via l'attribut style. Exemple : <p style="color: blue;">. AUTEUR (source) : indique que pour colorier ou modifier l'apparence, on peut utiliser style dans la balise.
  • Attributs comme color, background-color : spécifient la couleur du texte ou de l'arrière-plan d'un élément HTML. Ces attributs peuvent être utilisés dans le style en ligne pour changer la couleur ou la couleur de fond d'un contenu.

📝 Points essentiels

  • La couleur du texte ou de l'arrière-plan peut être modifiée en utilisant les attributs color et background-color dans le style en ligne d'une balise HTML.
  • La mise en place du style en ligne se fait via l'attribut style dans la balise, par exemple : <p style="color: red;">.
  • La balise <html> doit être présente pour que l'écriture ait une coloration appliquée globalement.
  • La déclaration <link rel="stylesheet" href="style.css"> dans <head> permet d'assembler plusieurs fichiers et d'appliquer des styles externes.
  • Modifier la couleur d'un contenu dans une balise <p> ou <h1> se fait en appliquant style="color: ...".
  • La propriété background-color permet de souligner ou de mettre en valeur le fond d'un élément.

💡 À retenir

Les attributs color et background-color permettent de styliser directement le contenu HTML en ligne, facilitant la personnalisation visuelle sans passer par une feuille de style externe. La balise <html> doit être présente pour que ces styles soient pris en compte globalement.

📖 6. Balises d'organisation

🔑 Notions clés & Définitions

  • html : Balise racine d’un document HTML, qui englobe tout le contenu de la page. Elle indique que le document est en HTML.
  • head : Balise contenant des informations sur le document, comme le titre, les liens vers des feuilles de style, ou d’autres métadonnées. Elle doit être placée avant la balise body.
  • body : Balise qui contient le contenu visible de la page web, comme le texte, les images, les liens, etc.
  • titre (title) : Balise située dans head, qui définit le titre de la page affiché dans l’onglet du navigateur.

📝 Points essentiels

  • La balise <html> doit encadrer tout le contenu du document pour indiquer qu’il s’agit d’un document HTML.
  • La balise <head> est placée avant <body> et sert à inclure des éléments non visibles directement, comme le titre ou les liens vers des styles.
  • La balise <body> contient tout le contenu visible de la page, comme les paragraphes, images, boutons, etc.
  • La déclaration <!DOCTYPE html> est essentielle pour respecter la norme et assurer la compatibilité du site.
  • La balise <title> doit être placée dans <head> et définit le titre affiché dans l’onglet du navigateur.
  • La balise <html> doit ouvrir le document et être fermée à la fin pour indiquer le début et la fin du contenu HTML.
  • La balise <link rel="stylesheet" href="style.css"> dans <head> permet d’associer une feuille de style externe au document.

💡 À retenir

Les balises d’organisation <html>, <head>, et <body> structurent le document HTML en séparant les métadonnées, le contenu visible, et la racine du document, ce qui est essentiel pour une bonne organisation et conformité du site.

📖 7. Balises multimédia

🔑 Notions clés & Définitions

  • Balise <img> : Balise utilisée pour insérer une image dans une page HTML. Elle nécessite l’attribut src pour spécifier le chemin de l’image, ainsi que des attributs optionnels comme width et height pour définir la taille. (source : Page 3)

  • Insertion d'images : Processus d’intégration d’un fichier image dans une page HTML à l’aide de la balise <img>. La source de l’image est indiquée par l’attribut src. La taille peut être ajustée avec width et height. (source : Page 3)

  • Balise <video> : Balise permettant d’intégrer une vidéo dans une page HTML. Elle doit contenir des sources vidéo via <source> ou un attribut src. La balise peut inclure des attributs pour contrôler la lecture, comme controls. (source : Page 3)

  • Balise <audio> : Balise pour insérer un lecteur audio dans une page HTML. Elle utilise également des sources audio via <source> ou src, et peut comporter l’attribut controls pour afficher les contrôles de lecture. (source : Page 3)

📝 Points essentiels

  • La balise <img> doit comporter l’attribut src pour spécifier le fichier image. La taille de l’image peut être modifiée avec width et height. La balise <img> est auto-fermante (<img ... />). (source : Page 3)

  • La balise <video> doit contenir au moins une source vidéo, souvent via <source src="..." type="...">. Elle peut inclure l’attribut controls pour permettre la lecture, pause, etc. (source : Page 3)

  • La balise <audio> fonctionne de manière similaire à <video>, avec des sources audio et l’attribut controls. (source : Page 3)

  • La mise en place de médias dans une page HTML nécessite de respecter la syntaxe correcte des balises et attributs, notamment src, width, height, et controls. (source : Page 3)

💡 À retenir

Les balises <img>, <video> et <audio> permettent d’intégrer facilement des médias dans une page HTML, en utilisant des attributs spécifiques pour définir leur source, taille et contrôles de lecture.

📅 Repères chronologiques

Aucun événement daté explicite dans le contenu fourni.

📊 Tableaux de Synthèse

ThèmeNotions clésPoints essentielsAuteur / Référence
Syntaxe HTML de base<!DOCTYPE html>, <html>, <head>, <body>Structure obligatoire d’un document HTML, balise racine, métadonnées, contenu visibleAucun
Mise en couleur en HTMLcolor, background-color, attribut styleUtilisation des styles en ligne pour changer la couleur du texte ou de l’arrière-planAucun
Fichiers CSS et liens<link rel="stylesheet" href="style.css">Lien entre HTML et CSS via <link> dans <head>, application de styles globauxAucun
Balises HTML essentielles<p>, <h1>, <br>, <button>, <strong>, <a>, <em>, <img>Structuration du contenu, hiérarchisation, mise en valeur, liens, imagesAucun

⚠️ Pièges & Confusions Fréquentes

  1. Omettre la déclaration <!DOCTYPE html> en début de document, ce qui peut entraîner des problèmes d’interprétation par le navigateur.
  2. Oublier la balise <html> ou la placer incorrectement, ce qui peut empêcher la reconnaissance du document comme du HTML.
  3. Confondre la mise en couleur en ligne (style) avec la gestion via fichier CSS externe.
  4. Ne pas placer la balise <link> dans <head>, ce qui empêche le lien avec le fichier CSS.
  5. Utiliser <br> pour créer des espacements ou des marges, alors que c’est destiné aux sauts de ligne simples.
  6. Oublier d’attribuer href dans la balise <a> pour que le lien fonctionne.
  7. Confondre <strong> (importance) et <b> (gras), ou <em> (italique) et <i> (italique sans nuance sémantique).
  8. Ne pas fermer correctement les balises auto-fermantes comme <img> ou <br>, ce qui peut causer des erreurs d’affichage.
  9. Ne pas respecter la hiérarchie des titres (<h1> à <h6>) pour une structure sémantique cohérente.
  10. Utiliser des styles en ligne pour tout, au lieu de privilégier une gestion centralisée via CSS, ce qui complique la maintenance.

✅ Checklist Examen

  • Connaître la déclaration <!DOCTYPE html> et son rôle dans la conformité du document.
  • Savoir que <html> doit englober tout le contenu HTML, avec <head> en premier et <body> en second.
  • Être capable d’identifier et d’utiliser correctement les balises <p>, <h1>, <br>, <button>, <strong>, <a>, <em>, <img>.
  • Maîtriser l’utilisation des attributs style pour appliquer des couleurs via color et background-color.
  • Savoir relier un fichier CSS externe avec <link rel="stylesheet" href="style.css"> dans <head>.
  • Connaître la syntaxe correcte pour insérer une image avec <img src="" width="" height="">.
  • Comprendre la différence entre balises sémantiques et non sémantiques, notamment <b> vs <strong>, <i> vs <em>.
  • Identifier les erreurs courantes comme l’oubli de fermeture de balises ou la mauvaise hiérarchie des titres.
  • Être capable d’écrire une structure HTML simple avec une mise en couleur de base.
  • Connaître la fonction de chaque balise essentielle pour structurer une page web.
  • Savoir que la balise <link> doit être placée dans <head>.
  • Maîtriser la syntaxe et l’usage des balises auto-fermantes <img>, <br>.

Pon a prueba tus conocimientos

Pon a prueba tus conocimientos sobre Introduction aux bases du HTML et CSS con 7 preguntas de opción múltiple con correcciones detalladas.

1. Qui est crédité d'avoir formulé la norme de syntaxe HTML de base, notamment la déclaration `<!DOCTYPE html>` et la structure `<html>`, `<head>`, `<body>` ?

2. Quelle est la caractéristique principale permettant de mettre en couleur un contenu en HTML ?

Realiza el cuestionario →

Repasa con tarjetas de memoria

Memoriza los conceptos clave de Introduction aux bases du HTML et CSS con 14 tarjetas de memoria interactivas.

DOCTYPE HTML — rôle ?

Indique la norme HTML du document.

<html> — fonction ?

Balise racine englobant tout le contenu HTML.

<head> — contenu ?

Informations sur la page, métadonnées, liens CSS.

Ver tarjetas de memoria →

Similar courses

Crea tus propias hojas de repaso

Importa tu curso y la IA genera hojas, cuestionarios y tarjetas de memoria en 30 segundos.

Generador de hojas