# TD1 - Web - HTML et CSS

### Exercice 1 - Bases

1. Créer un fichier `index.html` et y ajouter les balises minimales pour avoir une page web
2. Dans le fichier `index.html`, ajouter un titre et deux paragraphes.
3. Ajouter une image `image.png`
4. Ajouter un lien vers une page externe
5. Créer une liste à puces (non-ordonnée) avec vos trois films/séries préférées
6. Ajoutez une feuille de style CSS
7. Modifiez la couleur du titre pour qu'il s'affiche en vert
8. Changez la police des paragraphes pour utiliser `Helvetica`
9. Changez le lien pour qu'il s'affiche en rouge lorsqu'il est survolé par la souris, et en jaune lorsqu'il a été visité

### Exercice 2
1. Grâce au CSS, faire disparaître l'élément dont l'id est `hidden`
```html
<body>
   <p>Le <strong>Moscow mule</strong> est un cocktail à base de vodka, de bière de gingembre épicée et de jus de citron vert.</p>
   <p id="hidden">Un <strong>French Connection</strong> est un cocktail composé de parts égales de cognac et d'amaretto.</p>
   <p>Le <strong>Long Island Iced Tea</strong> est un cocktail à base de tequila, de gin, de vodka, de rhum et de liqueur d'oranges.</p>
</body>
```
2. Centrer horizontalement les paragraphes à l'intérieur du **premier** élément `<div>`.
```html
<body>
   <div class="super1">
      <p>Le Moscow mule est un cocktail à base de vodka, de bière de gingembre épicée et de jus de citron vert, accompagné d'une rondelle de citron.</p>
      <p>Le Long Island Iced Tea est un cocktail à base de tequila, de gin, de vodka, de rhum et de liqueur d'oranges.</p>
   </div>
   <div class="super2">
      <p>Un French Connection est un cocktail composé de parts égales de cognac et d'amaretto.</p>
      <p>Le Tequila sunrise est un cocktail à base de tequila, de jus d'orange, et de grenadine.</p>
   </div>
</body>
```
1. Supprimer le souligné des liens et barrer les éléments `<span>`.
```html
<body>
   <p>Le <a href="https://fr.wikipedia.org/wiki/Mule_de_Moscou">Moscow mule</a> est un cocktail à base de <span>vodka</span>, de <span>bière</span> de gingembre épicée et de jus de citron vert, accompagné d'une rondelle de citron.</p>
   <p>Le <a href="https://fr.wikipedia.org/wiki/Long_Island_Iced_Tea">Long Island Iced Tea</a> est un cocktail à base de <span>tequila</span>, de <span>gin</span>, de <span>vodka</span>, de <span>rhum</span> et de <span>liqueur d'oranges</span>.</p>
</body>
```

### Exercice 3 - Reproduction

1. Écrire le code HTML et la feuille de style CSS pour obtenir le rendu ci-dessous, en utilisant l'image fournie.
    - Bleu : `#0f4d8f`
    - [Image](https://aymeric-auberton.fr/img/css/nyamcatrainbow.gif)

![alt text](image-4.png)



### Exercice 4 - Tableaux

1. Créer un fichier `table.html` et y ajouter les balises minimales pour avoir une page web
2. Sachant qu'un tableau utilise les balises HTML suivantes
    - `<table>` pour indiquer un nouveau tableau
    - `<tr>` pour indiquer une nouvelle ligne
    - `<td>` pour indiquer une nouvelle cellules de **données**
    - `<th>` pour indiquer une nouvelle cellule d'en-tête
  
    Reproduire le tableau suivant (le contenu, pas la mise en forme) :

    | Titre                                 | Année | Réalisateur·ice              |
    | ------------------------------------- | ----- | ---------------------------- |
    | Bienvenue chez les Ch'tis             | 2008  | Dany Boon                    |
    | Intouchables                          | 2011  | Olivier Nakache, É. Toledano |
    | La Grande Vadrouille                  | 1966  | Gérard Oury                  |
    | Contre toute espérance                | 2007  | Bernard Émond                |
    | Astérix et Obélix : Mission Cléopâtre | 2002  | Alain Chabat                 |

3. Ajoutez une feuille de style à votre page
4. Grâce aux propriétés CSS suivantes, ajoutez des bordures au tableau :
   - `border-style: solid`
   - `border-width: 1px`
   - `border-color: black`
   - `border-collapse: collapse`
5. Un tableau plus complexe peut être composé de plusieurs parties
   - `<thead>` définit la partie d'en-tête
   - `<tbody>` définit la partie principale
   - `<tfooter>` définit la partie basse
   - `<caption>` définit le titre du tableau
   
   Reproduisez le tableau suivant :

   ![alt text](image.png)

6. Sachant que `<td>` peut prendre les attributs `rowspan` ou `colspan` pour fusionner deux cellules (en colonne ou en ligne respectivement), essayer de reproduire les deux tableaux suivants : 

![alt text](image-1.png)

![alt text](image-2.png)

### Exercice 5
Modifier le code HTML et la feuille de style CSS pour obtenir le rendu ci-dessous, en utilisant les images suivantes.
```html
<body>
    <table></table>
</body>
```
```css
img {
    display: block;
}
table {
    margin: auto;
    border-collapse: collapse;
    border-spacing: 0;
}
td {
    padding: 20px;
    border: 1px black solid;
}	
```

![coeur](image-5.png)


## Pour aller plus loin :

[Exercices supplémentaires](https://aymeric-auberton.fr/academie/css/exercices)