diff --git a/src/cours/CIEL1/04-web-statique/td/black.png b/src/cours/CIEL1/04-web-statique/td/black.png new file mode 100644 index 0000000..89092e0 Binary files /dev/null and b/src/cours/CIEL1/04-web-statique/td/black.png differ diff --git a/src/cours/CIEL1/04-web-statique/td/image-1.png b/src/cours/CIEL1/04-web-statique/td/image-1.png new file mode 100644 index 0000000..67c7506 Binary files /dev/null and b/src/cours/CIEL1/04-web-statique/td/image-1.png differ diff --git a/src/cours/CIEL1/04-web-statique/td/image-2.png b/src/cours/CIEL1/04-web-statique/td/image-2.png new file mode 100644 index 0000000..eab782e Binary files /dev/null and b/src/cours/CIEL1/04-web-statique/td/image-2.png differ diff --git a/src/cours/CIEL1/04-web-statique/td/image-3.png b/src/cours/CIEL1/04-web-statique/td/image-3.png new file mode 100644 index 0000000..00768e9 Binary files /dev/null and b/src/cours/CIEL1/04-web-statique/td/image-3.png differ diff --git a/src/cours/CIEL1/04-web-statique/td/image-4.png b/src/cours/CIEL1/04-web-statique/td/image-4.png new file mode 100644 index 0000000..af2c6a3 Binary files /dev/null and b/src/cours/CIEL1/04-web-statique/td/image-4.png differ diff --git a/src/cours/CIEL1/04-web-statique/td/image-5.png b/src/cours/CIEL1/04-web-statique/td/image-5.png new file mode 100644 index 0000000..99d1ee8 Binary files /dev/null and b/src/cours/CIEL1/04-web-statique/td/image-5.png differ diff --git a/src/cours/CIEL1/04-web-statique/td/image.png b/src/cours/CIEL1/04-web-statique/td/image.png new file mode 100644 index 0000000..976281d Binary files /dev/null and b/src/cours/CIEL1/04-web-statique/td/image.png differ diff --git a/src/cours/CIEL1/04-web-statique/td/index.html b/src/cours/CIEL1/04-web-statique/td/index.html new file mode 100644 index 0000000..9731da6 --- /dev/null +++ b/src/cours/CIEL1/04-web-statique/td/index.html @@ -0,0 +1,12 @@ + + + + + + + + + + + +
TitreAnnéeRéalisateur.ice
Bienvenue chez les Ch'tis2008Dany Boon
\ No newline at end of file diff --git a/src/cours/CIEL1/04-web-statique/td/nyamcatrainbow.gif b/src/cours/CIEL1/04-web-statique/td/nyamcatrainbow.gif new file mode 100644 index 0000000..9d4adf8 Binary files /dev/null and b/src/cours/CIEL1/04-web-statique/td/nyamcatrainbow.gif differ diff --git a/src/cours/CIEL1/04-web-statique/td/red.png b/src/cours/CIEL1/04-web-statique/td/red.png new file mode 100644 index 0000000..0f6a299 Binary files /dev/null and b/src/cours/CIEL1/04-web-statique/td/red.png differ diff --git a/src/cours/CIEL1/04-web-statique/td/td1.md b/src/cours/CIEL1/04-web-statique/td/td1.md new file mode 100644 index 0000000..36fedc6 --- /dev/null +++ b/src/cours/CIEL1/04-web-statique/td/td1.md @@ -0,0 +1,123 @@ +# 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 + +

Le Moscow mule est un cocktail à base de vodka, de bière de gingembre épicée et de jus de citron vert.

+

Un French Connection est un cocktail composé de parts égales de cognac et d'amaretto.

+

Le Long Island Iced Tea est un cocktail à base de tequila, de gin, de vodka, de rhum et de liqueur d'oranges.

+ +``` +2. Centrer horizontalement les paragraphes à l'intérieur du **premier** élément `
`. +```html + +
+

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.

+

Le Long Island Iced Tea est un cocktail à base de tequila, de gin, de vodka, de rhum et de liqueur d'oranges.

+
+
+

Un French Connection est un cocktail composé de parts égales de cognac et d'amaretto.

+

Le Tequila sunrise est un cocktail à base de tequila, de jus d'orange, et de grenadine.

+
+ +``` +1. Supprimer le souligné des liens et barrer les éléments ``. +```html + +

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.

+

Le Long Island Iced Tea est un cocktail à base de tequila, de gin, de vodka, de rhum et de liqueur d'oranges.

+ +``` + +### 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 + - `` pour indiquer un nouveau tableau + - `` pour indiquer une nouvelle ligne + - `` définit la partie d'en-tête + - `` définit la partie principale + - `` définit la partie basse + - `
` pour indiquer une nouvelle cellules de **données** + - `` 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 + - `
` définit le titre du tableau + + Reproduisez le tableau suivant : + + ![alt text](image.png) + +6. Sachant que `
` 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 + +
+ +``` +```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) \ No newline at end of file diff --git a/src/cours/CIEL1/04-web-statique/td/white.png b/src/cours/CIEL1/04-web-statique/td/white.png new file mode 100644 index 0000000..851690b Binary files /dev/null and b/src/cours/CIEL1/04-web-statique/td/white.png differ diff --git a/src/cours/CIEL1/04-web-statique/web-statique.md b/src/cours/CIEL1/04-web-statique/web-statique.md index 66baae1..145fd1c 100644 --- a/src/cours/CIEL1/04-web-statique/web-statique.md +++ b/src/cours/CIEL1/04-web-statique/web-statique.md @@ -13,6 +13,7 @@ Voir à la fin d'un TP ### Bases [MDN - Introduction au HTML](https://developer.mozilla.org/fr/docs/conflicting/Learn_web_development/Core/Structuring_content_2f5dc6d6e575054cc70e0a8faa24bef31907d53cee6754dd2c92e644e705a7d8) + ### Debug [MDN - Debug HTML](https://developer.mozilla.org/fr/docs/Learn_web_development/Core/Structuring_content/Debugging_HTML) @@ -47,4 +48,8 @@ ou section référence : https://developer.mozilla.org/fr/docs/Web # Orga ## TP - Découverte du HTML + bases CSS -- Styler une page web avec CSS (boîtes et flex) \ No newline at end of file +- Styler une page web avec CSS (boîtes et flex) + + +# Exercices +[text](https://aymeric-auberton.fr/academie/css/exercices) \ No newline at end of file diff --git a/src/slides/B1/html/01_html_bases.md b/src/slides/B1/web/01_html_bases.md similarity index 100% rename from src/slides/B1/html/01_html_bases.md rename to src/slides/B1/web/01_html_bases.md diff --git a/src/slides/B1/web/02_css_bases.md b/src/slides/B1/web/02_css_bases.md new file mode 100644 index 0000000..888a33e --- /dev/null +++ b/src/slides/B1/web/02_css_bases.md @@ -0,0 +1,449 @@ +--- +marp: true +theme: catppuccin +paginate: true +size: 4:3 +transition: coverflow +footer: '' +math: katex +lang: "fr" +--- + + + +# CSS + +--- + +## Qu'est-ce que le CSS ? + +--- + +- Permet de choisir le **style** de votre page +- On peut choisir : + - couleurs + - tailles du texte, polices + - bordures, marges etc... +- Pour rendre votre site plus agréable à lire +- **Attention** : navigateurs ne connaissent pas toutes les propriétés CSS + - Mais ignorées si non connues + +--- + +| | | +| -------- | ------------------------------------------------------ | +| Sans CSS | ![frama_no_css width:550px](./images/frama_no_css.png) | +| Avec CSS | ![frama_css width:550px](./images/frama_css.png) | + +--- + +CSS et HTML sont indissociables : +- Beaucoup d'exemples avec HTML pour comprendre le lien +- Nouvelles notions de HTML car utiles avec CSS + +--- + +## Intégrer du CSS + +Une ligne à ajouter : + +```html + +``` + +Dans la section `` + +```html + + + + + + Ma page + +... + +``` + +Attributs : +- `rel` : `stylesheet` pour préciser que c'est du CSS +- `href` : pour donner le nom du fichier CSS + +--- + +## Syntaxe de base + +![css_syntaxe width:800px](./images/css.svg) + +--- +3 éléments : + +- **Sélecteurs** : permet de selectionner l'élément où on applique le style + - ex: pour sélectionner les balises `

` on écrit `p` +- **Propriétés** : l'effet à modifier + - ex: `color` permet de modifier la couleur d'un texte +- **Valeurs** : la valeur de la proipriété à appliquer + - ex: la valeur `blue` permet d'appliquer la couleur bleue à la propriété `color` + +--- + +- **Syntaxe** détaillée : +```css +selecteur { + propriete1: valeur; + propriete2: valeur; +} +``` + +- Accolades `{}` pour préciser le groupe de propriétés appliquées au sélecteur +- `:` pour séparer la propriété et la valeur +- `;` à la fin d'une ligne +- Pas de limite au nombre de propriétés + +--- + +### Commentaires + +On peut ajouter des commentaires dans le CSS +- début : `/*` +- fin : `*/` + +```css +/* ceci est un commentaire */ + +/* Il peut +prendre +plusieurs +lignes */ +``` + +--- + +## Sélecteurs + +--- + +### Sélection multiple + +On peut sélectionner plusieurs éléments à la fois en les séparant par une virgule +```css +h1, +h2, +h3 { + color: blue; +} +``` + +--- + +### Sélecteur de balise + +- On peut sélectionner selon une balise +- On utilise la balise sans les chevrons `<>` + +```css +p { + color: blue +} +``` + +Ici tous les paragraphes (balise `

`) seront en bleu. + + +--- +### Sélectionner une balise enfant + +On peut vouloir sélectionner une balise incluse dans une autre : +- il suffit de mettre deux sélecteurs séparés par un espace + +```css +nav ul { + display: flex; +} +``` +Ici on sélectionne toutes les listes non ordonnées à l'intérieur d'une balise `