Html+css 1 : présenter un texte

Ce premier exercice a pour but de vous familiariser avec le codage html et css. On y matraquera la notion de sémantique, et on en profitera pour voir ce qu’on nomme les bonnes pratiques et quelques trucs.

Du texte brut à la sémantique

On l’a dit plusieurs fois, coder du html c’est faire de l’identification sémantique. Le texte qui vous est fourni est un texte brut. La première tâche sera de lui donner un balisage sémantique correct, en plus du code standard d’une page html vide.

On s’aidera pour ce balisage du plugin "html skeleton" de Brackets, et on en profite pour télécharger le plugin "Indentator" qui permet de réindenter le code au fur et à mesure du travail.

Dans le document, seuls les liens, pour des raisons de facilité, ont été gardés.
Les tags section, article, header, h1, p, blockquote, figure, img, figcaption, em, i,etc. seront notamment utilisés pour faire de ce texte une page web.

Ancre et images

Le document possède un lien interne, qu’il faudra relier avec un tag a.
Il est aussi demandé d’ajouter trois images de votre choix pour illustrer ce texte.

Css

Un habillage css sera ensuite utilisé pour rendre ce document agréable à lire.

Javascript

L’unique lien interne (une notre de bas de page) doit faire l’objet d’une amélioration ergonomique grâce au javascript. Une démo sera faite à ce propos.

Enfin, les images ajoutées doivent elles aussi faire l’objet d’une amélioration : on doit pouvoir avoir accès à une version de plus grande taille sans quitter la page.

3 séances de cours seront utilisées pour faire cette mise en page, entrecoupées d’une démo javascript.