From 6ca088aedce1fb8f33ee26e55fe01be5cfa0db14 Mon Sep 17 00:00:00 2001 From: Alexis Fourmaux Date: Thu, 9 Oct 2025 10:28:07 +0200 Subject: [PATCH] Ajoute cours HTML (slides) --- .../04-web-statique/tp/tp01-html-bases.md | 1 + src/slides/B1/html/01_html_bases.md | 191 ++++++++++++++++++ src/slides/B1/html/images/exemple_balises.svg | 4 + src/slides/B1/html/images/html_structure.svg | 4 + 4 files changed, 200 insertions(+) create mode 100644 src/slides/B1/html/01_html_bases.md create mode 100644 src/slides/B1/html/images/exemple_balises.svg create mode 100644 src/slides/B1/html/images/html_structure.svg diff --git a/src/cours/CIEL1/04-web-statique/tp/tp01-html-bases.md b/src/cours/CIEL1/04-web-statique/tp/tp01-html-bases.md index a956aca..a6942a9 100644 --- a/src/cours/CIEL1/04-web-statique/tp/tp01-html-bases.md +++ b/src/cours/CIEL1/04-web-statique/tp/tp01-html-bases.md @@ -100,6 +100,7 @@ Le tout dans un répertoire avec le nom suivant `YYYY-MM-DD_TPX_NOM1_Prenom1_NOM ``` ```admonish note title="Dans le compte rendu" +1. Qu'est-ce que le HTML ? 1. Qu'est-ce qu'une balise HTML, et de quoi est-elle composée ? 2. À l'aide de la documentation, expliquer le rôle des différentes sections : - `` diff --git a/src/slides/B1/html/01_html_bases.md b/src/slides/B1/html/01_html_bases.md new file mode 100644 index 0000000..2657361 --- /dev/null +++ b/src/slides/B1/html/01_html_bases.md @@ -0,0 +1,191 @@ +--- +marp: true +theme: catppuccin +paginate: true +size: 4:3 +transition: coverflow +footer: '' +math: katex +--- + + + +# HTML - Bases + +--- + +## Qu'est-ce que le HTML ? + +--- + +- HTML : HyperText Markup Language +- Langage de balisage ou de **description** +- Décrit la **structure** d'une page web + +--- + +## Les balises + +--- + +### Qu'est-ce que c'est ? + +- Les balises permettent à l'ordinateur de savoir ce qu'il va devoir afficher + * Information sur la **nature** de l'élément qu'elles encadrent + * titre, paragraphe, image, etc.. +* Elles sont invisibles à l'écran +* Syntaxe d'une balise : + * `` + +--- + +### Deux types de balises + * **Paires** + - On les ouvre et on les ferme + * Ouvrir : `` + * Exemple : + * ```html +

Ceci est un titre

+ ``` + * **Orphelines** + * Elles n'ont pas besoin d'être fermées + - Mais on peut écrire : `` + * Servent à insérer un élément à un endroit précis + * Exemple + * ```html + + ``` +--- + +### Attributs + +* Paramètres des balises : donnent des informations supplémentaires +* Syntaxe : + * ```html + + ``` +* Exemple : + * ```html + Mon texte alternatif + ``` + +--- + +## Structure d'une page HTML + +--- + +- Les balises s'ouvrent et se ferment dans un ordre précis + - On peut ouvrir une balise à l'intérieur d'une autre balise + - Mais il faut la fermer à l'intérieur aussi + +![Exemple balises](./images/exemple_balises.svg) + +- On **indente** les balises intérieures : + - On les décale pour que ce soit plus lisible + +--- + +![Structure HTML width:800px](./images/html_structure.svg) + +- **Doctype** : indique qu'il s'agit d'une page HTML +- **Balise `html`** : balise principale qui englobe tout le contenu +- **Balise `head`** : contient des informations importantes pour l'ordinateur +- **Balise `body`** : contient le contenu de la page, qui sera affiché + + +--- + +### Head : plus de détails + +```html + + + + Titre de la page + +``` +- `` : encodage du texte +- `` : gère la taille de l'écran +- `Titre de la page` : Titre de la page (s'affiche dans l'onglet du navigateur) + +--- + +## Quelques balises + +--- + +### Texte + +- `

...

` : titres + - Le numéro indique l'importance (1 est + important) +```html +

Ceci est uin titre

+

Ceci est un titre de sous-partie

+``` + +- `

` : paragraphe +```html +

+ Ceci est un paragraphe ou j'écris des choses +

+

+ Ceci est un autre paragraphe ! +

+``` + +--- + +### Listes + +- Plusieurs balises nécessaires : + - `` au début (et `` / `` à la fin) + - **ul** = **u**nordered **l**ist (liste non-ordonnée): avec des tirets + - **ol** = **o**rdered **l**ist (liste ordonnée): avec des numéros + - `
  • ` (list item) : élément de la liste +- Exemple: +```html +
      +
    1. premier élément
      2. +
    2. second élement
      3. +
    3. troisième élément
      4. +
    +``` +--- + +### Images + +```html +Mon image +``` +- Balise orpheline +- Attributs : + - `src`: (**obligatoire**) lien de l'image à afficher (url ou lien vers un fichier) + - `alt`: (**obligatoire**) texte alternatif si l'image est introuvable + - `width` : largeur voulue de l'image. Il existe d'autres attributs pour la taille. + +--- +### Liens + +```html + +HTML + + +Nos projets +``` + +- Balise : `` +- Attribut `href` : lien vers lequel diriger +- Entre les deux `` : texte du lien +- Deux types + - Liens vers une URL + - Liens relatifs (vers une autre page) + - **Attention** : le fichier doit être dans le **même répertoire** + - Sinon, préciser chemin **relatif** + diff --git a/src/slides/B1/html/images/exemple_balises.svg b/src/slides/B1/html/images/exemple_balises.svg new file mode 100644 index 0000000..42a6517 --- /dev/null +++ b/src/slides/B1/html/images/exemple_balises.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/slides/B1/html/images/html_structure.svg b/src/slides/B1/html/images/html_structure.svg new file mode 100644 index 0000000..436cd6c --- /dev/null +++ b/src/slides/B1/html/images/html_structure.svg @@ -0,0 +1,4 @@ + + + +
    Head
    Body
    HTML
    Doctype
     \ No newline at end of file