HTML CSS pour les MMIs
Published: 2023-11-13 09:44:34

# Cours de HTML/CSS

## Sommaire

- [Introduction](#introduction)
    - [Qu'est-ce que le HTML ?](#qu'est-ce-que-le-html-)
    - [Qu'est-ce que le CSS ?](#qu'est-ce-que-le-css-)
- [Les balises HTML](#les-balises-html)
- [Les attributs HTML](#les-attributs-html)
- [Les sélecteurs CSS](#les-sélecteurs-css)
- [Les propriétés CSS](#les-propriétés-css)
- [Exemples](#exemples)

## Introduction

### Qu'est-ce que le HTML ?

Le HTML est un langage de balisage qui permet de structurer et de mettre en forme du contenu. Il est utilisé pour créer
des pages web.

### Qu'est-ce que le CSS ?

Le CSS est un langage de style qui permet de mettre en forme du contenu. Il est utilisé pour mettre en forme des pages
web.

## Les balises HTML

Les balises HTML sont des éléments qui permettent de structurer et de mettre en forme du contenu. Elles sont composées
d'un nom et de deux chevrons.

```html

<balise></balise> <!-- balise n'est pas une balise HTML, mais simplement un exemple !  -->
```

Voici la liste de toutes les balises et de leur utilité :

- `<html></html>` : balise racine, elle contient toutes les autres balises
- `<head></head>` : balise d'en-tête, elle contient des informations sur la page
- `<body></body>` : balise de corps, elle contient le contenu de la page
- `<h1></h1>` : balise de titre, elle permet de créer un titre
    - `<h2></h2>` : balise de sous-titre, elle permet de créer un sous-titre
        - etc ...
- `<p></p>` : balise de paragraphe, elle permet de créer un paragraphe
- `<br>` : balise de saut de ligne, elle permet de créer un saut de ligne
- `<hr>` : balise de séparation, elle permet de créer une séparation
- `<a></a>` : balise de lien, elle permet de créer un lien
- `<img src="image.jpg">` : balise d'image, elle permet d'afficher une image
- `<ul></ul>` : balise de liste non-ordonnée, elle permet de créer une liste non-ordonnée
    - `<li></li>` : balise d'élément de liste, elle permet de créer un élément de liste
- `<ol></ol>` : balise de liste ordonnée, elle permet de créer une liste ordonnée
    - `<li></li>` : balise d'élément de liste, elle permet de créer un élément de liste
- `<table></table>` : balise de tableau, elle permet de créer un tableau
    - `<tr></tr>` : balise de ligne de tableau, elle permet de créer une ligne de tableau
        - `<td></td>` : balise de cellule de tableau, elle permet de créer une cellule de tableau
- `<div></div>` : balise de division, elle permet de créer une division
- `<span></span>` : balise de span, elle permet de créer un span

## Les attributs HTML

Les attributs HTML sont des éléments qui permettent de modifier le comportement ou l'apparence d'une balise. Ils sont
composés d'un nom et d'une valeur.

```html

<balise attribut="valeur"></balise> <!-- balise n'est pas une balise HTML, mais simplement un exemple !  -->
```

Voici la liste de tous les attributs et de leur utilité :

- `id="valeur"` : attribut d'identifiant, il permet d'identifier une balise
- `class="valeur"` : attribut de classe, il permet de classer une balise
- `style="valeur"` : attribut de style, il permet de mettre en forme une balise
- `href="valeur"` : attribut d'hyperlien, il permet de créer un lien
- `src="valeur"` : attribut de source, il permet de définir la source d'une balise
- `alt="valeur"` : attribut d'alternative, il permet de définir une alternative à une balise
- `title="valeur"` : attribut de titre, il permet de définir un titre à une balise

## Les sélecteurs CSS

Les sélecteurs CSS sont des éléments qui permettent de sélectionner des balises. Ils sont composés d'un nom et de deux
accolades.

```css
.selecteur {
    propriété: valeur;
}

/* sélecteur n'est pas un sélecteur CSS, mais simplement un exemple ! */
```

Voici la liste de tous les sélecteurs et de leur utilité :

- `*` : sélecteur universel, il permet de sélectionner toutes les balises
- `balise` : sélecteur de balise, il permet de sélectionner une balise
- `.classe` : sélecteur de classe, il permet de sélectionner une balise ayant une classe
- `#identifiant` : sélecteur d'identifiant, il permet de sélectionner une balise ayant un identifiant

## Les propriétés CSS

Les propriétés CSS sont des éléments qui permettent de modifier le comportement ou l'apparence d'une balise. Elles sont
composées d'un nom et d'une valeur.

```css
propriété: valeur;
/* propriété n'est pas une propriété CSS, mais simplement un exemple ! */
```

Voici la liste de toutes les propriétés et de leur utilité :

- `color: valeur;` : propriété de couleur, elle permet de définir la couleur du texte
- `background-color: valeur;` : propriété de couleur de fond, elle permet de définir la couleur de fond
- `font-family: valeur;` : propriété de police, elle permet de définir la police
- `font-size: valeur;` : propriété de taille de police, elle permet de définir la taille de police
- `font-weight: valeur;` : propriété de graisse de police, elle permet de définir la graisse de police
- et j'en passe ... !

### Exemples

```html

<form action="page.php" method="post">
    <input type="text" name="nom">
    <input type="submit" value="Envoyer">
</form>
```

En php je récupère les données du formulaire avec la variable superglobale `$_POST['nom']`

Il peut y'avoir plusieurs classe CSS sur une balise HTML, exemple :

```html
<p class="classe1 classe2 classe3">Paragraphe</p> 
```

le css :

```css
.classe1 {
    color: red;
}

.classe2 {
    font-size: 20px;
}

.classe3 {
    font-weight: bold;
}
```

Ici, j'ai une classe qui va mettre le texte en rouge, une autre qui va mettre la taille de la police à 20px et une autre
qui va mettre le texte en gras.
Et pour les ID, c'est pareil !

Pour les balises HTML voici certains cas ou cela peut être utile :

lien :
```html 
<a href="https://google.fr">Google</a>
```

image :
```html
<img src="image.jpg" alt="Image">
```

tableau :
```html

<table>
    <tr>
        <td>Cellule 1</td>
        <td>Cellule 2</td>
    </tr>
    <tr>
        <td>Cellule 3</td>
        <td>Cellule 4</td>
    </tr>
</table>

```

Liste :
```html

<ul>
    <li>Element 1</li>
    <li>Element 2</li>
</ul>
```

Liste ordonnée (numérotée) :
```html
<ol>
    <li>Element 1</li>
    <li>Element 2</li>
</ol>
```

Division (Une boite dans laquelle on peut mettre du contenu) :
```html
<div>Division 1</div>
<div>Division 2</div>
```

```html
<p>Paragraphe 1</p>
<p>Paragraphe 2</p>
```

```html
<h1>Titre 1</h1>
<h2>Titre 2</h2>
```

Retour à la ligne :
```html
 <br>
```

Formulaires :
```html
<form action="page.php" method="post">
    <input type="text" name="nom">
    <input type="submit" value="Envoyer">
</form>
```

```html
<head>
    <title>Titre</title>
</head>
```