Ajoute cours HTML (slides)

2025-10-09 10:28:07 +02:00 · 2025-10-09 10:28:07 +02:00 · 6ca088aedc
commit 6ca088aedc
parent 927bdf236d
4 changed files with 200 additions and 0 deletions
--- 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 :
    - `<!doctype html>`
--- a/src/slides/B1/html/01_html_bases.md
+++ 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
+---
+
+<style>
+section {
+  font-size: 28px;
+}
+</style>
+
+# 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 :
+  * `<balise>`
+
+---
+
+### Deux types de balises
+  * **Paires**
+    - On les ouvre et on les ferme
+      * Ouvrir : `<balise`
+      * Fermer : `</balise>`
+    * Exemple :
+      * ```html
+        <h1>Ceci est un titre</h1>
+        ```
+  * **Orphelines**
+    * Elles n'ont pas besoin d'être fermées
+      - Mais on peut écrire : `<balise/>`
+    * Servent à insérer un élément à un endroit précis
+    * Exemple
+      * ```html
+        <img src="image.png">
+        ```
+---
+
+### Attributs
+
+* Paramètres des balises : donnent des informations supplémentaires
+* Syntaxe : 
+  * ```html
+    <balise attribut="valeur">
+    ```
+* Exemple : 
+  * ```html
+    <img src="mon_image.png" alt="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
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width" />
+    <title>Titre de la page</title>
+</head>
+```
+- `<meta charset="utf-8" />` : encodage du texte
+- `<meta name="viewport" content="width=device-width" />` : gère la taille de l'écran
+- `<title>Titre de la page</title>` : Titre de la page (s'affiche dans l'onglet du navigateur)
+
+---
+
+## Quelques balises
+
+---
+
+### Texte
+
+- `<h1><h2><h3>...<h6>` : titres
+  - Le numéro indique l'importance (1 est + important)
+```html
+<h1>Ceci est uin titre</h1>
+<h2>Ceci est un titre de sous-partie</h2>
+```
+
+- `<p>` : paragraphe
+```html
+<p>
+  Ceci est un paragraphe ou j'écris des choses
+</p>
+<p>
+  Ceci est un autre paragraphe !
+</p>
+```
+
+---
+
+### Listes
+
+- Plusieurs balises nécessaires :
+  - `<ul` / `<ol>` au début (et `</ul>` / `</ol>` à 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
+  - `<li>` (list item) : élément de la liste
+- Exemple:
+```html
+<ol>
+  <li>premier élément</li>
+  <li>second élement</li>
+  <li>troisième élément</li>
+</ol>
+```
+---
+
+### Images
+
+```html
+<img src="mon_image.png" alt="Mon image" width="100px">
+```
+- 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
+<!-- URL-->
+<a href="https://fr.wikipedia.org/wiki/HTML">HTML</a>
+
+<!-- Autre page-->
+<a href="/projets.html">Nos projets</a>
+```
+
+- Balise : `<a></a>`
+- Attribut `href` : lien vers lequel diriger
+- Entre les deux `<a></a>` : 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**
+
--- a/src/slides/B1/html/images/exemple_balises.svg
+++ b/src/slides/B1/html/images/exemple_balises.svg
--- a/src/slides/B1/html/images/html_structure.svg
+++ b/src/slides/B1/html/images/html_structure.svg