Exercice 1 : Première page Web

Pour chaque question, vous vérifierez que le code HTML est valide avec le validateur du W3C.

1. Écrivez une première page en HTML nommée exercice1.html contenant un titre de niveau 1 et un paragraphe et affichez-la avec le navigateur Firefox.
2. Ajoutez une liste ordonnée contenant 3 items et une liste non ordonnée contenant 2 items.
3. Ajoutez un tableau contenant 3 lignes et 2 colonnes, la première ligne devant contenir des cellules d’en-tête.

Exercice 2 : Arbre de représentation

Accédez à la page Web exercice2.html et affichez son code source dans le navigateur à l’aide du raccourci Ctrl+U.

Dessinez sur une feuille l’arbre de représentation du code HTML.

Exercice 3 : Onglet Réseau du module de développement Web

Accédez à la page Web exercice2.html et ouvrez l’onglet réseau du module développement Web de Firefox (raccourci Ctrl+Maj+E). Rafraîchissez la page à l’aide du raccourci (Ctrl+R) et répondez aux questions suivantes (utiliser la documentation de Firefox si besoin).

1. Combien de requêtes ont été faites pour afficher cette page Web ?
2. Quelle est la taille totale de la page Web ? la taille transférée ? Pourquoi ces deux valeurs sont-elles différentes ?
3. Pourquoi y a-t-il plus d’images téléchargées qu’il n’y a de balises img dans le document HTML ?
4. Les requêtes ont-elle été faites toutes en même temps ?
5. Combien de temps a mis Firefox pour charger/analyser le code HTML ?
6. Quel est le temps mis par Firefox pour afficher entièrement la page ?
7. Recharger la page avec le raccourci F5. Qu’est-ce que cela change ?

Accédez à la page de l’Institut Galilée et répondez aux questions.

1. Combien de requêtes sont effectuées pour afficher la page ?
2. Combien de scripts javascript ont été chargés ? Combien d’images ?
3. Combien de temps faut-il pour charger complètement la page ?

Exercice 4 : Liens hypertextes

1. Téléchargez l’archive contenant les sources (html, css, images) de la page Web de l’exercice 2 et extrayez-la dans le répertoire contenant le fichier exercice1.html. Ajoutez un deuxième sous-répertoire nommé TEST dans lequel vous créerez un fichier hello_world.html qui contiendra uniquement un titre de niveau Hello World! (ce fichier devra quand même être un fichier HTML valide). Dans le même répertoire, vous devez avoir le fichier exercice1.html et les deux répertoires Exercice2 et TEST.
2. Dans le fichier hello_world.html, ajouter 3 liens hypertextes :
   • un sur le fichier exercice1.html,
   • un sur le fichier exercice2.html,
   • un sur le site Web de l’institut Galilée.

Exercice 5 : Premier CSS

Modifier le code du fichier style.css dans le répertoire Exercice (et uniquement celui-ci) pour que la page Web exercice2.html ressemble à .

Pour cela, vous devez notamment :

• changer la couleur d’écriture des paragraphes en rosybrown,
• ne pas afficher les lignes horizontales,
• pour le body :
  • lui ajouter des bordures, le centrer et lui ajouter une marge interne de 50 pixels,
  • modifier son image de fond pour qu’elle s’affiche centrée en bas avec une taille de 200px background-size,
• pour le titre et le premier paragraphe (pseudo classe :nth-child(1)) :
  • supprimer les marges extérieures (basse pour le titre, hautre pour le paragraphe),
  • les centrer,
  • modifier certains arrondis de bordure (propriétés border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius),
• pour les items de la liste :
  • supprimer les puces,
  • les afficher sous forme inline-block pour avoir des marges mais ne pas faire de retour à la ligne,
  • leur fixer une hauteur de 50 pixels et une marge intérieure de 5 pixels sauf pour la marge intérieure haute qui est de 30 pixels,
  • alterner leur couleurs de fond rgb(255,228,196) rgb(222,184,135) en utilisant la pseudo class :nth-child(2n+1),
• modifier la couleur des éléments mis en valeurs dans les paragraphes (et uniquement eux) en #8a2be2.

Vous devez vérifier à la fin que votre code CSS est valide à l’aide du validateur W3C.

Exercice 6

Considérons les codes HTML et CSS suivants.

<p> 
  a <strong> b <a href="doc.html"> c </a> d </strong> e  
  <strong class="a"> f <a href="doc.html" class="a"> g </a> h </strong> i 
  <strong class="a"> j <a href="doc.html"> k <em class="a"> l </em>  m  <em> n </em> o </a> p </strong> q 
</p>

strong { color : yellow; }

p { color : red; }

strong.a { color : blue; }

strong .a { color : purple; }

strong > .a { color : silver; }

strong a { color : olive; }

Répondez aux questions suivantes.

1. Pour chaque règle, indiquez quelle est la cible du sélecteur (quels éléments sont modifiés par cette règle).

2. Donnez la priorité de chaque règle. Que se passe-t-il si l’on inverse les règles 4 et 5 dans le code CSS ?

3. Pour chaque lettre, indiquez quelle(s) règle(s) s’applique(nt).

4. Prédisez la couleur de chaque lettre.

5. Vérifiez si vous n’avez pas fait d’erreur de prédiction en vérifiant sur CodePen.

Exercice 7 : Premiers pas avec la propriété position

Pour avoir un aperçu rapide du fonctionnement de la propriété position, vous allez effectuer quelques tests sur CodePen. CodePen est un site Web permettant de tester très rapidement du code HTML, CSS et JS, ainsi que de partager votre code. Vous pouvez l’utiliser en vous inscrivant (gratuitement) ou de manière anonyme (vous ne pourrez juste pas sauvegarder votre code).</p>

Accédez à cette page et suivez les instructions en analysant à chaque fois le résultat obtenu.

1. Décommentez la ligne 4 de la partie CSS.
2. Décommentez les lignes 5 et 6 de la partie CSS.
3. Commenter les lignes 5 et 6 et remplacer la valeur absolute de la ligne 4 par relative.
4. Décommentez les lignes 5 et 6 de la partie CSS.

Accédez maintenant à cette page et suivez les instructions en analysant à chaque fois le résultat obtenu.

1. Décommentez la ligne 10 de la partie CSS.
2. Décommentez les lignes 11 et 12 de la partie CSS.
3. Décommenter la ligne 4.

Exercice 8 : propriété position

Téléchargez le fichier HTML exercice8.html. Sans le modifier, en créant uniquement un fichier style_exercice8.css, modifiez l’affichage de la page Web pour qu’elle corresponde à la photo suivante : .

Indications

• le body fait 1200 pixels de large et est centré sur la page,
• les sections font 400 pixels de large et sont éloignées horizontalement de 100 pixels du bord du body,
• les articles font 200 pixels de large et ont une marge intérieure de 20 pixels.

Exercice 9 : Premiers pas avec le positionnement par grille

Accédez à cette page et suivez les instructions en analysant à chaque fois le résultat obtenu.

1. Commentez la ligne 20 de la partie CSS puis décommentez-la après avoir compris le résultat.

2. Commentez les lignes 22 à 24 et décommentez les lignes 26 à 29 de la partie CSS.

3. Commentez les lignes 26 à 29 et décommentez les lignes 31 à 34 de la partie CSS.

4. Modifier la valeur de grid-template-areas pour obtenir le positionnement suivant :

5. Modifier les valeurs de grid-template-columns et grid-template-areas pour obtenir le positionnement suivant :

Exercice 10 : Responsive Design - part 1

Cet exercice et les deux suivants ont pour objectif de créer une page Web Responsive correspondant à un CV.

Téléchargez l’archive CV.zip. Sans modifier le fichier HTML, modifiez l’apparence du site pour qu’il ressemble à :

Indications :

• le body fait entre 480 et 959 pixels de large (l’affichage doit fonctionner pour n’importe laquelle de ces largeurs) et est centré sur la page,
• le body a code.jpg comme image de fond et les propriétés background-size: 100%; background-attachment: fixed;.

Exercice 11 : Responsive Design - part 2

Modifier le CSS de l’exercice précédent pour que le CV, lorsque l’écran fait au minimum 960 pixels, ressemble à :

Exercice 12 : Responsive Design - part 3

Modifier le CSS de l’exercice précédent pour que le CV, lorsque l’écran fait au minimum 1680 pixels, ressemble à :