Web : questions et exercices dans des blocs question
This commit is contained in:
@@ -25,11 +25,11 @@ Ce code est principalement ecrit en deux langages :
|
||||
- **HTML** (HyperText Markup Language) : definit le **contenu** (texte, images, liens...)
|
||||
- **CSS** (Cascading Style Sheets) : definit la **mise en forme** (couleurs, tailles, polices...)
|
||||
|
||||
### A vous !
|
||||
!!! question "A vous !"
|
||||
|
||||
Ouvrez le site du lycee dans votre navigateur. Faites un **clic droit** sur la page, puis choisissez **"Afficher le code source"**.
|
||||
Ouvrez le site du lycee dans votre navigateur. Faites un **clic droit** sur la page, puis choisissez **"Afficher le code source"**.
|
||||
|
||||
Vous voyez le code HTML de la page ! C'est ce code que le navigateur interprete pour produire ce que vous voyez a l'ecran.
|
||||
Vous voyez le code HTML de la page ! C'est ce code que le navigateur interprete pour produire ce que vous voyez a l'ecran.
|
||||
|
||||
---
|
||||
|
||||
@@ -67,14 +67,14 @@ Toute page HTML5 respecte cette structure de base :
|
||||
| `<title>` | Titre affiche dans l'onglet du navigateur |
|
||||
| `<body>` | Corps de la page : tout ce qui est affiche |
|
||||
|
||||
### Exercice 2.1
|
||||
!!! question "Exercice 2.1"
|
||||
|
||||
En observant le fichier `index.html` dans Notepad++ :
|
||||
En observant le fichier `index.html` dans Notepad++ :
|
||||
|
||||
1. Reperer les lignes correspondant au conteneur d'en-tete (`<head>`).
|
||||
2. Quel est le titre de la page ? Ou apparait-il dans le navigateur ?
|
||||
3. Modifier ce titre et rafraichir la page dans le navigateur (touche F5). Que constatez-vous ?
|
||||
4. Que se passe-t-il si vous supprimez la ligne `<meta charset="utf-8" />` ? (Testez puis remettez-la !)
|
||||
1. Reperer les lignes correspondant au conteneur d'en-tete (`<head>`).
|
||||
2. Quel est le titre de la page ? Ou apparait-il dans le navigateur ?
|
||||
3. Modifier ce titre et rafraichir la page dans le navigateur (touche F5). Que constatez-vous ?
|
||||
4. Que se passe-t-il si vous supprimez la ligne `<meta charset="utf-8" />` ? (Testez puis remettez-la !)
|
||||
|
||||
---
|
||||
|
||||
@@ -90,9 +90,9 @@ HTML propose 6 niveaux de titres, de `<h1>` (le plus grand) a `<h6>` (le plus pe
|
||||
<h3>Sous-sous-titre</h3>
|
||||
```
|
||||
|
||||
### Exercice 3.1
|
||||
!!! question "Exercice 3.1"
|
||||
|
||||
Dans le fichier `index.html`, changez le `<h1>` en `<h2>`. Observez le resultat dans le navigateur. Remettez `<h1>`.
|
||||
Dans le fichier `index.html`, changez le `<h1>` en `<h2>`. Observez le resultat dans le navigateur. Remettez `<h1>`.
|
||||
|
||||
### Les paragraphes et la mise en forme
|
||||
|
||||
@@ -111,9 +111,9 @@ Dans le fichier `index.html`, changez le `<h1>` en `<h2>`. Observez le resultat
|
||||
|
||||
> **Bonne pratique** : Utilisez `<strong>` plutot que `<b>` et `<em>` plutot que `<i>`. Ces balises sont plus modernes et accessibles.
|
||||
|
||||
### Exercice 3.2
|
||||
!!! question "Exercice 3.2"
|
||||
|
||||
Dans le fichier `index.html`, reperer la phrase avec "Le ciel est bleu comme la mer". Comment le mot "mer" est-il mis en gras ?
|
||||
Dans le fichier `index.html`, reperer la phrase avec "Le ciel est bleu comme la mer". Comment le mot "mer" est-il mis en gras ?
|
||||
|
||||
### Les listes
|
||||
|
||||
@@ -151,14 +151,14 @@ Les liens permettent de naviguer entre les pages. C'est le principe fondamental
|
||||
- `src` : chemin vers le fichier image
|
||||
- `alt` : texte alternatif (affiche si l'image ne charge pas, utile pour l'accessibilite)
|
||||
|
||||
### Exercice 3.3
|
||||
!!! question "Exercice 3.3"
|
||||
|
||||
Dans le fichier `index.html`, observez la section "Les grands noms de l'informatique" :
|
||||
Dans le fichier `index.html`, observez la section "Les grands noms de l'informatique" :
|
||||
|
||||
1. Combien de liens y a-t-il dans cette liste ?
|
||||
2. Cliquez sur un lien. Vers quelle page mene-t-il ?
|
||||
3. Quel attribut contient l'adresse du lien ?
|
||||
4. Quel attribut affiche une info-bulle au survol de la souris ?
|
||||
1. Combien de liens y a-t-il dans cette liste ?
|
||||
2. Cliquez sur un lien. Vers quelle page mene-t-il ?
|
||||
3. Quel attribut contient l'adresse du lien ?
|
||||
4. Quel attribut affiche une info-bulle au survol de la souris ?
|
||||
|
||||
### Les tableaux
|
||||
|
||||
@@ -196,10 +196,10 @@ Dans le `<head>` du fichier `index.html`, reperer cette ligne :
|
||||
|
||||
C'est elle qui relie la page HTML a sa feuille de style CSS.
|
||||
|
||||
### Exercice 4.1
|
||||
!!! question "Exercice 4.1"
|
||||
|
||||
1. Supprimez cette ligne dans Notepad++, sauvegardez, et rafraichissez la page. Que se passe-t-il ?
|
||||
2. Remettez la ligne et sauvegardez.
|
||||
1. Supprimez cette ligne dans Notepad++, sauvegardez, et rafraichissez la page. Que se passe-t-il ?
|
||||
2. Remettez la ligne et sauvegardez.
|
||||
|
||||
### Le fichier CSS
|
||||
|
||||
@@ -220,38 +220,38 @@ h1 {
|
||||
}
|
||||
```
|
||||
|
||||
### Exercice 4.2
|
||||
!!! question "Exercice 4.2"
|
||||
|
||||
1. Dans `style.css`, trouvez la regle qui s'applique aux balises `<h1>`. Quelle est la couleur du texte ?
|
||||
2. Modifiez la couleur du `<h1>` en bleu (`color: blue;`). Sauvegardez et rafraichissez.
|
||||
3. Dans le CSS, ajoutez une regle pour les paragraphes :
|
||||
1. Dans `style.css`, trouvez la regle qui s'applique aux balises `<h1>`. Quelle est la couleur du texte ?
|
||||
2. Modifiez la couleur du `<h1>` en bleu (`color: blue;`). Sauvegardez et rafraichissez.
|
||||
3. Dans le CSS, ajoutez une regle pour les paragraphes :
|
||||
|
||||
```css
|
||||
p {
|
||||
color: darkgreen;
|
||||
font-size: 16px;
|
||||
}
|
||||
```
|
||||
```css
|
||||
p {
|
||||
color: darkgreen;
|
||||
font-size: 16px;
|
||||
}
|
||||
```
|
||||
|
||||
4. Sauvegardez et observez le resultat.
|
||||
4. Sauvegardez et observez le resultat.
|
||||
|
||||
> **Pour choisir des couleurs** : vous pouvez utiliser des noms (`red`, `blue`, `navy`...) ou des codes hexadecimaux (`#FF0000`, `#0000FF`...). Voir : https://htmlcolorcodes.com/fr/
|
||||
> **Pour choisir des couleurs** : vous pouvez utiliser des noms (`red`, `blue`, `navy`...) ou des codes hexadecimaux (`#FF0000`, `#0000FF`...). Voir : https://htmlcolorcodes.com/fr/
|
||||
|
||||
---
|
||||
|
||||
## Partie 5 : Synthese (10 min)
|
||||
|
||||
### Exercice final : Completer le tableau des balises
|
||||
!!! question "Exercice final : Completer le tableau des balises"
|
||||
|
||||
Dans le fichier `tp/1/index.html`, vous trouverez un tableau intitule "Les balises HTML que j'ai decouvertes". Les deux premieres lignes sont deja remplies.
|
||||
Dans le fichier `tp/1/index.html`, vous trouverez un tableau intitule "Les balises HTML que j'ai decouvertes". Les deux premieres lignes sont deja remplies.
|
||||
|
||||
**Completez les lignes restantes** en vous aidant de ce que vous avez appris durant ce TP.
|
||||
**Completez les lignes restantes** en vous aidant de ce que vous avez appris durant ce TP.
|
||||
|
||||
Pour chaque balise, indiquez :
|
||||
- Sa **description** (a quoi elle sert)
|
||||
- Un **exemple d'utilisation** (un petit bout de code)
|
||||
Pour chaque balise, indiquez :
|
||||
- Sa **description** (a quoi elle sert)
|
||||
- Un **exemple d'utilisation** (un petit bout de code)
|
||||
|
||||
Les balises a completer : `<h1>` a `<h6>`, `<br />`, `<strong>`, `<ul>`, `<ol>`, `<li>`, `<dl>`, `<table>`, `<a>`, `<img />`, `<hr />`.
|
||||
Les balises a completer : `<h1>` a `<h6>`, `<br />`, `<strong>`, `<ul>`, `<ol>`, `<li>`, `<dl>`, `<table>`, `<a>`, `<img />`, `<hr />`.
|
||||
|
||||
### Aide
|
||||
|
||||
|
||||
@@ -34,28 +34,28 @@ Une bonne UX, c'est quand :
|
||||
| **Rapidite** | Le site charge-t-il vite ? | Pas d'attente excessive, images optimisees |
|
||||
| **Adaptabilite** | Le site s'affiche-t-il bien sur mobile ? | Design responsive, boutons assez grands |
|
||||
|
||||
### Exercice 1.1
|
||||
!!! question "Exercice 1.1"
|
||||
|
||||
Repondez aux questions suivantes :
|
||||
Repondez aux questions suivantes :
|
||||
|
||||
1. Citez un site web que vous trouvez agreable a utiliser. Pourquoi ?
|
||||
2. Citez un site web que vous trouvez penible a utiliser. Pourquoi ?
|
||||
3. Parmi les 4 criteres ci-dessus, lequel vous semble le plus important ? Justifiez.
|
||||
1. Citez un site web que vous trouvez agreable a utiliser. Pourquoi ?
|
||||
2. Citez un site web que vous trouvez penible a utiliser. Pourquoi ?
|
||||
3. Parmi les 4 criteres ci-dessus, lequel vous semble le plus important ? Justifiez.
|
||||
|
||||
---
|
||||
|
||||
## Partie 2 : Analyse de sites web (25 min)
|
||||
|
||||
### Consigne
|
||||
!!! question "Consigne"
|
||||
|
||||
Vous allez evaluer **3 sites web** en utilisant la grille d'evaluation ci-dessous. Pour chaque site, attribuez une note de 1 a 5 pour chaque critere.
|
||||
Vous allez evaluer **3 sites web** en utilisant la grille d'evaluation ci-dessous. Pour chaque site, attribuez une note de 1 a 5 pour chaque critere.
|
||||
|
||||
**Echelle de notation :**
|
||||
- 1 = Tres mauvais
|
||||
- 2 = Mauvais
|
||||
- 3 = Moyen
|
||||
- 4 = Bon
|
||||
- 5 = Tres bon
|
||||
**Echelle de notation :**
|
||||
- 1 = Tres mauvais
|
||||
- 2 = Mauvais
|
||||
- 3 = Moyen
|
||||
- 4 = Bon
|
||||
- 5 = Tres bon
|
||||
|
||||
### Sites a evaluer
|
||||
|
||||
@@ -65,45 +65,45 @@ Vous allez evaluer **3 sites web** en utilisant la grille d'evaluation ci-dessou
|
||||
| 2 | Site du lycee | https://charlotteperriand.etab.ac-lille.fr |
|
||||
| 3 | Un site de votre choix | (jeu video, sport, musique...) |
|
||||
|
||||
### Grille d'evaluation
|
||||
!!! question "Grille d'evaluation"
|
||||
|
||||
Recopiez et completez ce tableau pour **chacun des 3 sites** :
|
||||
Recopiez et completez ce tableau pour **chacun des 3 sites** :
|
||||
|
||||
**Site 1 : Wikipedia**
|
||||
**Site 1 : Wikipedia**
|
||||
|
||||
| Critere | Note /5 | Justification |
|
||||
|---------|---------|---------------|
|
||||
| Lisibilite | | |
|
||||
| Navigation | | |
|
||||
| Rapidite | | |
|
||||
| Adaptabilite (testez en redimensionnant la fenetre) | | |
|
||||
| **Total** | **/20** | |
|
||||
| Critere | Note /5 | Justification |
|
||||
|---------|---------|---------------|
|
||||
| Lisibilite | | |
|
||||
| Navigation | | |
|
||||
| Rapidite | | |
|
||||
| Adaptabilite (testez en redimensionnant la fenetre) | | |
|
||||
| **Total** | **/20** | |
|
||||
|
||||
**Site 2 : Site du lycee**
|
||||
**Site 2 : Site du lycee**
|
||||
|
||||
| Critere | Note /5 | Justification |
|
||||
|---------|---------|---------------|
|
||||
| Lisibilite | | |
|
||||
| Navigation | | |
|
||||
| Rapidite | | |
|
||||
| Adaptabilite | | |
|
||||
| **Total** | **/20** | |
|
||||
| Critere | Note /5 | Justification |
|
||||
|---------|---------|---------------|
|
||||
| Lisibilite | | |
|
||||
| Navigation | | |
|
||||
| Rapidite | | |
|
||||
| Adaptabilite | | |
|
||||
| **Total** | **/20** | |
|
||||
|
||||
**Site 3 : ..................**
|
||||
**Site 3 : ..................**
|
||||
|
||||
| Critere | Note /5 | Justification |
|
||||
|---------|---------|---------------|
|
||||
| Lisibilite | | |
|
||||
| Navigation | | |
|
||||
| Rapidite | | |
|
||||
| Adaptabilite | | |
|
||||
| **Total** | **/20** | |
|
||||
| Critere | Note /5 | Justification |
|
||||
|---------|---------|---------------|
|
||||
| Lisibilite | | |
|
||||
| Navigation | | |
|
||||
| Rapidite | | |
|
||||
| Adaptabilite | | |
|
||||
| **Total** | **/20** | |
|
||||
|
||||
### Questions de synthese
|
||||
!!! question "Questions de synthese"
|
||||
|
||||
4. Quel site a obtenu la meilleure note ? Pourquoi selon vous ?
|
||||
5. Pour le site le moins bien note, proposez **2 ameliorations concretes**.
|
||||
6. Pour tester l'adaptabilite mobile, vous avez redimensionne la fenetre. Connaissez-vous une autre methode ? (Indice : outils de developpement du navigateur, touche F12)
|
||||
4. Quel site a obtenu la meilleure note ? Pourquoi selon vous ?
|
||||
5. Pour le site le moins bien note, proposez **2 ameliorations concretes**.
|
||||
6. Pour tester l'adaptabilite mobile, vous avez redimensionne la fenetre. Connaissez-vous une autre methode ? (Indice : outils de developpement du navigateur, touche F12)
|
||||
|
||||
---
|
||||
|
||||
@@ -157,62 +157,62 @@ Le texte respire, on a envie de lire.
|
||||
|
||||
**Regle** : Plus de la moitie du trafic web se fait sur mobile. Un site **doit** s'adapter a toutes les tailles d'ecran.
|
||||
|
||||
### Exercice 3.1
|
||||
!!! question "Exercice 3.1"
|
||||
|
||||
Pour chaque situation, indiquez s'il s'agit d'une **bonne** ou **mauvaise** pratique :
|
||||
Pour chaque situation, indiquez s'il s'agit d'une **bonne** ou **mauvaise** pratique :
|
||||
|
||||
| Situation | Bonne / Mauvaise ? |
|
||||
|-----------|---------------------|
|
||||
| Un menu de navigation avec 25 liens | |
|
||||
| Un bouton "Retour en haut" sur une longue page | |
|
||||
| Du texte gris clair sur fond blanc | |
|
||||
| Des images qui mettent 10 secondes a charger | |
|
||||
| Un formulaire qui indique clairement les erreurs en rouge | |
|
||||
| Un site qui fonctionne uniquement sur ordinateur | |
|
||||
| Un lien qui change de couleur quand on l'a deja visite | |
|
||||
| Une page d'accueil avec 3 pop-ups publicitaires | |
|
||||
| Situation | Bonne / Mauvaise ? |
|
||||
|-----------|---------------------|
|
||||
| Un menu de navigation avec 25 liens | |
|
||||
| Un bouton "Retour en haut" sur une longue page | |
|
||||
| Du texte gris clair sur fond blanc | |
|
||||
| Des images qui mettent 10 secondes a charger | |
|
||||
| Un formulaire qui indique clairement les erreurs en rouge | |
|
||||
| Un site qui fonctionne uniquement sur ordinateur | |
|
||||
| Un lien qui change de couleur quand on l'a deja visite | |
|
||||
| Une page d'accueil avec 3 pop-ups publicitaires | |
|
||||
|
||||
---
|
||||
|
||||
## Partie 4 : Quiz recapitulatif (10 min)
|
||||
!!! question "Partie 4 : Quiz recapitulatif (10 min)"
|
||||
|
||||
Repondez aux questions suivantes :
|
||||
Repondez aux questions suivantes :
|
||||
|
||||
**Question 1** : Que signifie UX ?
|
||||
- a) Universal eXchange
|
||||
- b) User eXperience
|
||||
- c) Ultra eXpress
|
||||
- d) Unified eXtension
|
||||
**Question 1** : Que signifie UX ?
|
||||
- a) Universal eXchange
|
||||
- b) User eXperience
|
||||
- c) Ultra eXpress
|
||||
- d) Unified eXtension
|
||||
|
||||
**Question 2** : Quelle taille de police minimale est recommandee pour le texte d'un site web ?
|
||||
- a) 8px
|
||||
- b) 12px
|
||||
- c) 16px
|
||||
- d) 24px
|
||||
**Question 2** : Quelle taille de police minimale est recommandee pour le texte d'un site web ?
|
||||
- a) 8px
|
||||
- b) 12px
|
||||
- c) 16px
|
||||
- d) 24px
|
||||
|
||||
**Question 3** : Pourquoi est-il important qu'un site s'adapte aux mobiles ?
|
||||
- a) Parce que c'est plus joli
|
||||
- b) Parce que plus de la moitie du trafic web est sur mobile
|
||||
- c) Parce que Google l'exige
|
||||
- d) Ce n'est pas important
|
||||
**Question 3** : Pourquoi est-il important qu'un site s'adapte aux mobiles ?
|
||||
- a) Parce que c'est plus joli
|
||||
- b) Parce que plus de la moitie du trafic web est sur mobile
|
||||
- c) Parce que Google l'exige
|
||||
- d) Ce n'est pas important
|
||||
|
||||
**Question 4** : Lequel de ces elements ameliore la navigation ?
|
||||
- a) Supprimer le menu
|
||||
- b) Ajouter un fil d'Ariane
|
||||
- c) Mettre tous les liens en noir sans soulignement
|
||||
- d) Cacher le bouton retour
|
||||
**Question 4** : Lequel de ces elements ameliore la navigation ?
|
||||
- a) Supprimer le menu
|
||||
- b) Ajouter un fil d'Ariane
|
||||
- c) Mettre tous les liens en noir sans soulignement
|
||||
- d) Cacher le bouton retour
|
||||
|
||||
**Question 5** : Un bon contraste signifie :
|
||||
- a) Texte et fond de la meme couleur
|
||||
- b) Texte clair sur fond clair
|
||||
- c) Texte sombre sur fond clair (ou inversement)
|
||||
- d) Utiliser uniquement du noir et blanc
|
||||
**Question 5** : Un bon contraste signifie :
|
||||
- a) Texte et fond de la meme couleur
|
||||
- b) Texte clair sur fond clair
|
||||
- c) Texte sombre sur fond clair (ou inversement)
|
||||
- d) Utiliser uniquement du noir et blanc
|
||||
|
||||
**Question 6** : Quel outil du navigateur permet de simuler un affichage mobile ?
|
||||
- a) Le gestionnaire de telechargements
|
||||
- b) Les outils de developpement (F12)
|
||||
- c) Le mode navigation privee
|
||||
- d) Le gestionnaire de favoris
|
||||
**Question 6** : Quel outil du navigateur permet de simuler un affichage mobile ?
|
||||
- a) Le gestionnaire de telechargements
|
||||
- b) Les outils de developpement (F12)
|
||||
- c) Le mode navigation privee
|
||||
- d) Le gestionnaire de favoris
|
||||
|
||||
---
|
||||
|
||||
|
||||
+108
-108
@@ -38,20 +38,20 @@ Vous partirez d'un fichier HTML de base (`tp3_template.html`) et d'un fichier CS
|
||||
|
||||
Ouvrez le fichier `tp3_template.html`. Vous verrez une structure de base deja en place. Votre travail est de **remplir le contenu** selon votre theme.
|
||||
|
||||
### A faire
|
||||
!!! question "A faire"
|
||||
|
||||
1. **Modifiez le titre** de la page (balise `<title>`) avec le nom de votre sujet
|
||||
2. **Modifiez le titre principal** (`<h1>`) avec le nom de votre sujet
|
||||
3. **Redigez le premier paragraphe** : presentez votre sujet en 2-3 phrases
|
||||
4. **Completez la section "Pourquoi j'aime..."** :
|
||||
- Modifiez le sous-titre `<h2>`
|
||||
- Ajoutez au moins **3 elements** dans la liste `<ul>`
|
||||
5. **Ajoutez une image** :
|
||||
- Trouvez une image libre de droits sur Internet
|
||||
- Enregistrez-la dans le meme dossier que votre fichier HTML
|
||||
- Completez la balise `<img>` avec le bon chemin et une description
|
||||
6. **Ajoutez des liens** :
|
||||
- Dans la section "Pour en savoir plus", ajoutez au moins **2 liens** vers des sites en rapport avec votre sujet
|
||||
1. **Modifiez le titre** de la page (balise `<title>`) avec le nom de votre sujet
|
||||
2. **Modifiez le titre principal** (`<h1>`) avec le nom de votre sujet
|
||||
3. **Redigez le premier paragraphe** : presentez votre sujet en 2-3 phrases
|
||||
4. **Completez la section "Pourquoi j'aime..."** :
|
||||
- Modifiez le sous-titre `<h2>`
|
||||
- Ajoutez au moins **3 elements** dans la liste `<ul>`
|
||||
5. **Ajoutez une image** :
|
||||
- Trouvez une image libre de droits sur Internet
|
||||
- Enregistrez-la dans le meme dossier que votre fichier HTML
|
||||
- Completez la balise `<img>` avec le bon chemin et une description
|
||||
6. **Ajoutez des liens** :
|
||||
- Dans la section "Pour en savoir plus", ajoutez au moins **2 liens** vers des sites en rapport avec votre sujet
|
||||
|
||||
### Verifiez !
|
||||
|
||||
@@ -84,42 +84,42 @@ selecteur {
|
||||
|
||||
Le **selecteur** cible un element HTML. La **propriete** definit ce qu'on modifie. La **valeur** definit comment on le modifie.
|
||||
|
||||
### A faire
|
||||
!!! question "A faire"
|
||||
|
||||
Ouvrez `tp3_style.css` et effectuez les modifications suivantes :
|
||||
Ouvrez `tp3_style.css` et effectuez les modifications suivantes :
|
||||
|
||||
**1. Couleur de fond de la page**
|
||||
**1. Couleur de fond de la page**
|
||||
|
||||
Trouvez la regle `body` et modifiez la couleur de fond (`background-color`). Choisissez une couleur qui correspond a votre theme !
|
||||
Trouvez la regle `body` et modifiez la couleur de fond (`background-color`). Choisissez une couleur qui correspond a votre theme !
|
||||
|
||||
Exemples de couleurs :
|
||||
- `#f0f8ff` (bleu tres clair)
|
||||
- `#fff8dc` (creme)
|
||||
- `#f0fff0` (vert tres clair)
|
||||
- `#fff0f5` (rose tres clair)
|
||||
Exemples de couleurs :
|
||||
- `#f0f8ff` (bleu tres clair)
|
||||
- `#fff8dc` (creme)
|
||||
- `#f0fff0` (vert tres clair)
|
||||
- `#fff0f5` (rose tres clair)
|
||||
|
||||
> Outil pratique : https://htmlcolorcodes.com/fr/
|
||||
> Outil pratique : https://htmlcolorcodes.com/fr/
|
||||
|
||||
**2. Couleur et police du titre**
|
||||
**2. Couleur et police du titre**
|
||||
|
||||
Modifiez la regle `h1` :
|
||||
- Changez la couleur du texte avec `color`
|
||||
- Changez la police avec `font-family` (exemples : `Arial`, `Georgia`, `Verdana`, `"Trebuchet MS"`)
|
||||
Modifiez la regle `h1` :
|
||||
- Changez la couleur du texte avec `color`
|
||||
- Changez la police avec `font-family` (exemples : `Arial`, `Georgia`, `Verdana`, `"Trebuchet MS"`)
|
||||
|
||||
**3. Couleur du texte**
|
||||
**3. Couleur du texte**
|
||||
|
||||
Modifiez la regle `p` pour changer la couleur des paragraphes.
|
||||
Modifiez la regle `p` pour changer la couleur des paragraphes.
|
||||
|
||||
**4. Style des liens**
|
||||
**4. Style des liens**
|
||||
|
||||
Modifiez la regle `a` pour changer la couleur des liens. Essayez aussi d'enlever le soulignement :
|
||||
Modifiez la regle `a` pour changer la couleur des liens. Essayez aussi d'enlever le soulignement :
|
||||
|
||||
```css
|
||||
a {
|
||||
color: darkorange;
|
||||
text-decoration: none;
|
||||
}
|
||||
```
|
||||
```css
|
||||
a {
|
||||
color: darkorange;
|
||||
text-decoration: none;
|
||||
}
|
||||
```
|
||||
|
||||
### Verifiez !
|
||||
|
||||
@@ -147,53 +147,53 @@ En CSS, deux proprietes controlent l'espace autour des elements :
|
||||
+--------------------+
|
||||
```
|
||||
|
||||
### A faire
|
||||
!!! question "A faire"
|
||||
|
||||
**1. Ajoutez du padding au body** pour que le contenu ne colle pas aux bords :
|
||||
**1. Ajoutez du padding au body** pour que le contenu ne colle pas aux bords :
|
||||
|
||||
```css
|
||||
body {
|
||||
/* ... vos proprietes existantes ... */
|
||||
padding: 20px 40px;
|
||||
}
|
||||
```
|
||||
```css
|
||||
body {
|
||||
/* ... vos proprietes existantes ... */
|
||||
padding: 20px 40px;
|
||||
}
|
||||
```
|
||||
|
||||
**2. Ajoutez une bordure et un fond au titre** :
|
||||
**2. Ajoutez une bordure et un fond au titre** :
|
||||
|
||||
```css
|
||||
h1 {
|
||||
/* ... vos proprietes existantes ... */
|
||||
background-color: #333;
|
||||
color: white;
|
||||
padding: 15px;
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
```
|
||||
```css
|
||||
h1 {
|
||||
/* ... vos proprietes existantes ... */
|
||||
background-color: #333;
|
||||
color: white;
|
||||
padding: 15px;
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
```
|
||||
|
||||
**3. Mettez en forme l'image** :
|
||||
**3. Mettez en forme l'image** :
|
||||
|
||||
```css
|
||||
img {
|
||||
border: 3px solid #333;
|
||||
border-radius: 10px;
|
||||
max-width: 400px;
|
||||
}
|
||||
```
|
||||
```css
|
||||
img {
|
||||
border: 3px solid #333;
|
||||
border-radius: 10px;
|
||||
max-width: 400px;
|
||||
}
|
||||
```
|
||||
|
||||
`max-width: 400px` empeche l'image d'etre trop grande. `border-radius` arrondit les coins.
|
||||
`max-width: 400px` empeche l'image d'etre trop grande. `border-radius` arrondit les coins.
|
||||
|
||||
**4. Stylisez la liste** :
|
||||
**4. Stylisez la liste** :
|
||||
|
||||
Ajoutez cette regle dans votre CSS :
|
||||
Ajoutez cette regle dans votre CSS :
|
||||
|
||||
```css
|
||||
ul {
|
||||
background-color: #eee;
|
||||
padding: 15px 30px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
```
|
||||
```css
|
||||
ul {
|
||||
background-color: #eee;
|
||||
padding: 15px 30px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
```
|
||||
|
||||
### Verifiez !
|
||||
|
||||
@@ -216,53 +216,53 @@ HTML5 propose des balises qui donnent du **sens** a la structure de la page :
|
||||
|
||||
Ces balises fonctionnent comme des `<div>` mais elles indiquent clairement le role de chaque section.
|
||||
|
||||
### A faire
|
||||
!!! question "A faire"
|
||||
|
||||
Dans votre fichier HTML, reorganisez votre page avec ces balises :
|
||||
Dans votre fichier HTML, reorganisez votre page avec ces balises :
|
||||
|
||||
1. **Entourez votre titre `<h1>` avec `<header>`** :
|
||||
1. **Entourez votre titre `<h1>` avec `<header>`** :
|
||||
|
||||
```html
|
||||
<header>
|
||||
<h1>Mon sujet</h1>
|
||||
</header>
|
||||
```
|
||||
```html
|
||||
<header>
|
||||
<h1>Mon sujet</h1>
|
||||
</header>
|
||||
```
|
||||
|
||||
2. **Ajoutez un `<footer>` en bas de page** :
|
||||
2. **Ajoutez un `<footer>` en bas de page** :
|
||||
|
||||
```html
|
||||
<footer>
|
||||
<p>Page creee par [votre prenom] - SNT 2025</p>
|
||||
</footer>
|
||||
```
|
||||
```html
|
||||
<footer>
|
||||
<p>Page creee par [votre prenom] - SNT 2025</p>
|
||||
</footer>
|
||||
```
|
||||
|
||||
3. **Stylisez le footer** dans votre CSS :
|
||||
3. **Stylisez le footer** dans votre CSS :
|
||||
|
||||
```css
|
||||
footer {
|
||||
background-color: #333;
|
||||
color: white;
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
margin-top: 30px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
```
|
||||
```css
|
||||
footer {
|
||||
background-color: #333;
|
||||
color: white;
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
margin-top: 30px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Bonus : Creer une deuxieme page
|
||||
!!! question "Bonus : Creer une deuxieme page"
|
||||
|
||||
Si vous avez termine en avance, voici un defi supplementaire :
|
||||
Si vous avez termine en avance, voici un defi supplementaire :
|
||||
|
||||
1. **Creez un nouveau fichier** `page2.html` avec la meme structure de base (copiez `tp3_template.html`)
|
||||
2. **Liez-le au meme CSS** (`tp3_style.css`)
|
||||
3. **Ajoutez du contenu** sur un aspect precis de votre sujet (par exemple : les regles d'un sport, la discographie d'un artiste, les personnages d'un jeu video...)
|
||||
4. **Reliez les deux pages** avec des liens :
|
||||
- Dans `tp3_template.html`, ajoutez : `<a href="page2.html">Voir la page 2</a>`
|
||||
- Dans `page2.html`, ajoutez : `<a href="tp3_template.html">Retour a l'accueil</a>`
|
||||
1. **Creez un nouveau fichier** `page2.html` avec la meme structure de base (copiez `tp3_template.html`)
|
||||
2. **Liez-le au meme CSS** (`tp3_style.css`)
|
||||
3. **Ajoutez du contenu** sur un aspect precis de votre sujet (par exemple : les regles d'un sport, la discographie d'un artiste, les personnages d'un jeu video...)
|
||||
4. **Reliez les deux pages** avec des liens :
|
||||
- Dans `tp3_template.html`, ajoutez : `<a href="page2.html">Voir la page 2</a>`
|
||||
- Dans `page2.html`, ajoutez : `<a href="tp3_template.html">Retour a l'accueil</a>`
|
||||
|
||||
Felicitations, vous avez cree votre premier **site web** de plusieurs pages !
|
||||
Felicitations, vous avez cree votre premier **site web** de plusieurs pages !
|
||||
|
||||
---
|
||||
|
||||
|
||||
Reference in New Issue
Block a user