26 - WEB (1)

Six activités hébergées sur CodePen, un éditeur en ligne qui affiche côte à côte le code HTML, le code CSS et le résultat. Pour chaque activité : ouvrir le pen dans un nouvel onglet (lien « Activité HTML n »), lire le code des onglets HTML et CSS, puis réaliser les modifications demandées dans une copie (bouton « Fork » si vous avez un compte CodePen, ou copie du code dans un fichier .html local). Les deux activités qui utilisent JavaScript se trouvent en fin de la fiche 29 - JavaScript .

Activité 1 : exemple basique de CSS

See the Pen Activité HTML 1 by Razik (@RazikSF) on CodePen.

  1. Dans l’onglet CSS, relever chaque règle et dire à quelle balise HTML elle s’applique.
  2. Changer la couleur du texte du paragraphe, puis la taille de la police du titre.
  3. Ajouter une règle qui écrit le titre en majuscules (text-transform: uppercase).

Activité 2 : centrer du texte avec CSS

See the Pen Activité HTML 2 by Razik (@RazikSF) on CodePen.

  1. Quelle propriété CSS centre le texte ? Sur quel élément est-elle posée ?
  2. Remplacer le centrage par un alignement à droite, puis revenir au centrage.
  3. Expliquer la différence entre text-align: center (le texte dans sa boîte) et margin: auto (la boîte dans la page) en testant chacune sur un élément de largeur fixée (width: 300px).

Activité 3 : changer la couleur d’un texte avec CSS

See the Pen Activité HTML 3 by Razik (@RazikSF) on CodePen.

  1. Écrire la couleur utilisée de trois façons : par son nom (red, steelblue…), en hexadécimal (#ff0000) et avec rgb(255, 0, 0). Vérifier que le rendu est identique.
  2. Donner une couleur de fond (background-color) au paragraphe, puis à la page entière (body).
  3. Choisir un couple texte et fond lisible et un couple illisible ; expliquer ce qui fait la différence (contraste).

Activité 4 : du CSS un peu plus avancé

See the Pen Activité HTML 5 by Razik (@RazikSF) on CodePen.

  1. Relever trois propriétés CSS que vous ne connaissez pas et chercher leur rôle dans la référence CSS de MDN .
  2. Modifier la valeur de chacune et décrire l’effet obtenu.
  3. Identifier les sélecteurs utilisés (balise, classe .nom, identifiant #nom) et dire pourquoi une classe est préférée à un identifiant quand plusieurs éléments partagent la même mise en forme.

Activité 5 : polices de caractères

See the Pen Activité HTML 7 by Razik (@RazikSF) on CodePen.

  1. La propriété font-family reçoit une liste de polices : expliquer pourquoi on en indique plusieurs et à quoi sert le dernier mot-clé (serif, sans-serif ou monospace).
  2. Remplacer la police par une police avec empattement, puis augmenter la taille de 2 px (font-size).
  3. Mettre un mot en gras et un autre en italique avec font-weight et font-style, sans utiliser les balises <b> et <i>.

Activité 6 : jeu du taquin

See the Pen Activité HTML 9 by Razik (@RazikSF) on CodePen.

  1. Jouer une partie. Dans l’onglet HTML, compter les cases du taquin et repérer la balise qui représente une case.
  2. Dans l’onglet CSS, trouver la règle qui dessine une case (taille, bordure, couleur) et changer ses couleurs.
  3. Dans l’onglet JS, trouver la fonction exécutée quand on clique sur une case et repérer l’attribut ou l’instruction qui la relie au clic : c’est un gestionnaire d’événement, étudié dans le cours 14 - HTML DOM .

25 - Assembleur 27 - WEB (2)