---
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**

