Web : questions et exercices dans des blocs question
This commit is contained in:
+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