Ajoute cours HTML (slides)
This commit is contained in:
parent
927bdf236d
commit
6ca088aedc
4 changed files with 200 additions and 0 deletions
|
|
@ -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"
|
```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 ?
|
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 :
|
2. À l'aide de la documentation, expliquer le rôle des différentes sections :
|
||||||
- `<!doctype html>`
|
- `<!doctype html>`
|
||||||
|
|
|
||||||
191
src/slides/B1/html/01_html_bases.md
Normal file
191
src/slides/B1/html/01_html_bases.md
Normal file
|
|
@ -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
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
- On **indente** les balises intérieures :
|
||||||
|
- On les décale pour que ce soit plus lisible
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
- **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**
|
||||||
|
|
||||||
4
src/slides/B1/html/images/exemple_balises.svg
Normal file
4
src/slides/B1/html/images/exemple_balises.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 248 KiB |
4
src/slides/B1/html/images/html_structure.svg
Normal file
4
src/slides/B1/html/images/html_structure.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 297 KiB |
Loading…
Add table
Add a link
Reference in a new issue