Retour à la page d'accueil

Exercices de mise en page html 5

---

Aller en bas de la page

Traitement des images

3 attributs possibles d'une img : src, alt, et title :

Voici une photo que j'ai trouvée dans les échantillons d'images de Windows :

Pour ouvrir l'image en grand format, il suffit de cliquer dessus !

Idem :

Pour mettre des légendes à mes photos : utilisation de "figcaption" (cours sur les figures) :

Une "figure" peut comporter plusieurs images et une légende :

CSS : créer une feuille de style

Mettre en favoris :
www.caniuse.com (notamment http://caniuse.com/#cats=CSS)
normansblog.de

Lien vers le 1er cours de CSS avec les liens précités

Utilisation de la balise span

(pour indiquer une dérogation à une règle, ici de couleur de texte) :

Bonjour et bienvenue sur mon site !

Sélectionner titre + paragraphe (h3+p : la 1e balise p qui suit le h3 sera en vert) :

Paragraphe

Sélectionner le premier lien (balise a) qui a un title (infobulle) :
lien vers un site qui n'existe pas

Sélectionner le premier lien (a) dont le title (infobulle) dit "cliquez ici" :
lien vers le même site qui n'existe pas

Sélectionner le premier lien (a) dont le title (infobulle) contient le mot "là" :
lien vers le même site qui n'existe pas

Mise en pratique pour 2 liens permettant d'en savoir plus :

lien vers le site w3schools : liste des propriétés CSS

lien vers le site w3schools : attribut STYLE en HTML

TAILLE (absolue) DE LA POLICE : les pixels ne sont pas très fiables car les caractères peuvent devenir trop petits pour certains lecteurs. On peut utiliser les cm ou les mm mais le problème est le même.

TAILLE (relative) DE LA POLICE : plusieurs méthodes

(Mise en page des listes suivantes réalisée avec une aide extérieure ainsi que le CSS correspondant dans l'entête) :

1. Méthode des tailles anglo-saxonnes :
   • style="font-size : xx-small" (=>minuscule)
   • style="font-size : x-small" (=>très petit)
   • style="font-size : small" (=>petit)
   • style="font-size : medium" (=>moyen)
   • style="font-size : large" (=>grand)
   • style="font-size : x-large"(=>très grand)
   • style="font-size : xx-large"(=>gigantesque)
2. Méthode des em :
   • 1em est la taille normale de police.
   • On peut indiquer une taille de 2em, 3em, etc.
3. Idem pour la méthode des ex (seule différence : plus petite que les em) :
   • NB : on ne met pas une virgule pour les décimales mais des points (à l'anglaise).
4. Ou encore pour le système des pourcentages :
   • On peut indiquer par exemple 50%, 130%, etc.

Remonter en haut de la page

...Ou bien rendez-vous pour la suite des exercices, Page 3 !