CSS - Formater du texte.
Réponse AJAX

L'exemple de test

Voici l'exemple sur lequel nous allons travailler. Dans la suite de ce TP, nous allons modifier uniquement les balises a. Toutefois, toutes les mises en forme que nous allons voir ici peuvent s'appliquer à toutes les balises HTML.

Le résultat doit ressembler à ça :

Copiez ce code, collez-le dans NotePad++, sauvegardez avec l'extension .html puis ouvrez-le dans un navigateur (par exemple avec Exécution --> Launch in Chrome). Faites une capture d'écran du résultat puis postez ici cette capture d'écran.

Votre réponse n°1

Est-ce que ce code est validé par le W3C ou est-ce que le prof code comme un gros dégueulasse ? Collez ce code dans le validateur HTML du W3C, testez, faites une capture d'écran du résultat et postez-là ici :

Votre réponse n°2

Le code HTML était-il valide, oui ou non ?

Votre réponse n°3

color, font-decoration

Commençons par annuler la mise en forme par défaut faite par le HTML.

Par rapport à du texte par défaut, quelle est la mise en forme que le HTML rajoute aux textes contenus dans les balises a ?

Votre réponse n°4

Grâce à la propriété CSS color, remettez le texte en noir. Vous pouvez utiliser des codes couleurs (color:black) ou des valeurs hexadécimales (color:#000). Voici par exemple les codes couleurs red, green, yellow, purple, et d'autres codes couleur.

Grâce à la propriété CSS text-decoration, supprimez le soulignage par défaut des liens HTML. text-decoration peut prendre les valeurs suivantes :

Le résultat doit ressembler à ça :

Collez ici le code source modifié (ou seulement sa partie CSS) qui annule la mise en forme par défaut des liens HTML.

Votre réponse n°5

background-color : la couleur d'arrière-plan

Pour mieux faire ressortir les liens, mettons-les sur fond gris grâce à la propriété CSS background-color qui accepte comme valeur n'importe quelle couleur valide. Le résultat doit ressembler à ça :

Le résultat doit ressembler à ça :

Collez ici le code source modifié (ou seulement sa partie CSS) qui met les liens HTML sur fond gris.

Votre réponse n°6

font-style : mettre en italique

Donnons du style en les mettant en italique grâce à la propriété CSS font-style. Cette propriété peut prendre les valeurs normal ou italic.

Le résultat doit ressembler à ça :

Collez ici le code source modifié (ou seulement sa partie CSS) qui met les liens HTML en italique.

Votre réponse n°7

font-size : changer la taille des textes

Mettons les liens en valeur en les agrandissant grâce à la propriété CSS font-size. Cette propriété prend une valeur numérique suivi des unités :

Agrandissez le texte des liens de 30%. Le résultat doit ressembler à ça :

Collez ici le code source modifié (ou seulement sa partie CSS) qui agrandit le texte des liens HTML (différentes réponses sont valables).

Votre réponse n°8

font-weight : mettre en gras

Rien de tel que tu texte en gras pour le faire ressortir, grâce à la propriété CSS font-weight. Cette propriété peut prendre les valeurs normal ou bold, ou d'autres valeurs décrites ici.

Le résultat doit ressembler à ça :

Collez ici le code source modifié (ou seulement sa partie CSS) qui met les liens HTML en gras.

Votre réponse n°9

font-variant : mettre en Petites Majuscules

Moins importante, la propriété CSS font-variant met le texte en Petites Majuscules. Cette propriété peut prendre les valeurs normal ou Small-Caps.

Le résultat doit ressembler à ça :

Collez ici l'intégralité du code source modifié (car vous devez ajouter une majuscule sur chaque lien) qui met les liens HTML en Petites Majuscules.

Votre réponse n°10

font-family : changer la police de caractères

Apprenez à changer la police de caractères grâce à l'attribut font-family. Voyez le site du w3schools.com pour une description de cette propriété.

Changez la fonte des liens pour de l'Arial (remarque : tous mes TP sont en Arial, et pas en Times New Roman qui est le style par défaut de la plupart des navigateurs). Le résultat doit ressembler à ça :

Collez ici le code source modifié (ou seulement sa partie CSS) qui met les liens HTML en Arial.

Votre réponse n°11

Validation W3C : est-ce que votre code est toujours compatible HTML 5 ?

Est-ce que ce code est toujours validé par le W3C ou est-ce que vous avez fait ça comme des gros dégueulasses ? Collez ce code dans le validateur HTML du W3C, testez, faites une capture d'écran du résultat et postez-là ici :

Votre réponse n°12