21 - Web (1)

Cours associés : 11 - HTML , 12 - CSS .

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 24 - 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.

    Indice

    Une règle CSS commence par un sélecteur, suivi d’accolades qui contiennent des couples propriété: valeur;. Le sélecteur p, par exemple, désigne toutes les balises <p> de la page.

  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).

    Indice

    Ajouter une bordure (border: 1px solid black) pour voir la boîte de l’élément. text-align: center déplace le texte à l’intérieur de cette boîte ; margin: auto répartit l’espace libre de part et d’autre de la boîte elle-même.

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).

    Indice

    Comparer un texte noir sur fond blanc avec un texte jaune sur fond blanc : lequel se lit le mieux, et pourquoi ?

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.

    Indice

    Combien d’éléments d’une page peuvent porter le même identifiant ? Et la même classe ?

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).

    Indice

    Que se passe-t-il si la première police de la liste n’est pas installée sur l’ordinateur du visiteur ?

  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 .

    Indice

    Chercher dans le code HTML un attribut dont le nom commence par on, comme onclick, ou dans le code JS un appel à addEventListener.


20 - Assembleur 22 - Web (2)