Florian/SNT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Web : questions et exercices dans des blocs question

Browse Source
This commit is contained in:
admin
2026-10-02 10:15:08 +02:00
parent cb4ac95f50
commit cd73524086
10 changed files with 556 additions and 467 deletions
Download Patch File Download Diff File Expand all files Collapse all files
sequences/web/tp/tp1_decouverte_html.md
+41 -41
View File
@@ -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