Se familiariser avec les balises HTML de mise en forme
Utiliser le validateur (html)
Savoir comment créer et inclure une feuille CSS
Comprendre le système de blocs et le positionnement CSS
Utiliser le validateur (css)
Comprendre les requêtes media
Rendu : Voir les consignes en fin de sujet.
Redoublants : Vous pouvez partir de votre rendu de l'an dernier,
mais vous devez l'améliorer.
Parcourez le sujet (il y a des petits changements),
réessayez ce que vous n'aviez pas réussi, consultez avec le chargé de TP.
Vous avez terminé en avance ? Apprenez des nouvelles choses !
Suggestions à la fin de la question 13.
Dans toute cette section, il ne faut pas trop se soucier du résultat affiché,
seulement s’assurer que vous appliquez les bons éléments (structure
html). On améliorera la présentation en CSS plus tard.
Créez un dossier dédié à ce TP dans lequel vous mettrez tous les fichiers
que vous créez.
Ouvrez notepad++ et créez un document cv.html.
Démarrez en reproduisant la structure de base d’un document html
(voir cours d'amphi).
Ajoutez un titre principal : CV de ....votre_nom.
(tags title et h1)
Ouvrez la page dans firefox pour constater le résultat.
Après chaque modification, pour constater le résultat,
n'oubliez pas de sauvegarder votre fichier (notepad++ : Ctrl+S)
et de recharger votre page (firefox : F5).
Si vos changements n’ont aucun effet, vérifiez que le document ouvert
dans l'éditeur est le même que celui ouvert dans le navigateur.
Nous allons commencer par définir les sections principales du CV.
Chaque section doit commencer par un titre de niveau 2.
Première section : à propos de vous
Écrivez quelques phrases sur votre parcours, votre âge,
votre formation actuelle, le métier auquel vous aimeriez
vous destiner, etc. (Vous pouvez inventer)
Séparez ces phrases en (au moins) deux éléments paragraphes.
Constatez l’effet sur l’affichage.
Dans les paragraphes, on ne doit pas utiliser
l'élément br (line break).
On verra plus loin des contextes où cet élément est bien utilisé.
Mettez en valeur un ou deux points qui vous paraissent importants
(par exemple, votre lieu de formation) à l’aide d’une balise adaptée.
Seconde section : vos études
Commencez la section par une phrase indiquant votre lieu de formation.
Elle contiendra un lien vers la description de la formation de l’IUT,
par exemple https://www.iut-orsay.universite-paris-saclay.fr/formations/.
Attention : là encore, vous devez vous placer au sein d'un paragraphe.
Faites une liste (non ordonnée) indiquant les cours que vous suivez à l’IUT.
Troisième section : langues parlées
Créez un tableau (table) qui indique vos compétences en différents
langages, avec années d’expérience et niveau d’expertise.
Le résultat final doit ressembler à :
Langage
Expérience
Niveau
Français
30 ans
Débutant
HTML
1h
Expert
中文
10 min
你好
Vous pouvez toujours inspecter le code html de cette page pour comparer avec votre réponse.
Remarquez qu'il n'y a pas de mise en page. On s’en occupera avec du css.
Quatrième section : informations de contact.
Cette section comprend les informations nécessaires pour vous contacter
(nom, téléphone, adresse email…)
Remarque : Vous pourrez trouver un tag sémantique approprié dans le cours
ou dans la documentation
En général, on fait les sauts de ligne en changeant de paragraphe (p).
Mais pour les lignes d’une adresse, qui ne sont pas des paragraphes différents,
on peut utiliser la balise de saut de ligne (br).
Relecture
Assurez-vous d'avoir placé chaque section (titre et texte) au sein
d'un élément sémantique section.
Il s'agit d'un exemple d’élément sans effet sur l’affichage.
Il aide à structurer le document, à organiser le style css,
et à guider les moteurs de recherche (quand ils sont malins...).
Si ce n'est déjà le cas, un titre serait le bienvenu pour chaque section.
Faites un premier passage à la validation
(validate by file upload), et corrigez si besoin.
Nous allons ajouter une photo en haut à gauche de la page. Vous pouvez utiliser
cette image ou bien une autre photo de votre choix.
Insérez l’image après le titre en utilisant l’élément img.
L’attribut src désigne le chemin vers l’image,
depuis là où votre document HTML est enregistré.
Créez un sous-répertoire (par exemple img/) ;
placez votre portrait dans ce répertoire ;
et adaptez le chemin d'accès.
img est une balise sans contenu (unaire). (consultez le cours)
Utilisez attributs width et height de la balise
pour indiquer la taille de celle-ci.
Pour obtenir la taille de l’image, dans l'explorateur de fichiers windows,
faites clic droit > Propriétés > Détails .
Ces tailles sont en pixels, mais ces attributs (html) n'attendent pas d'unité.
Remarque : Le but des informations est de permettre au navigateur
de reserver la bonne place pour l’image, pendant qu'il la télécharge.
Cela lui facilite donc le calcul de la mise en page.
Le bon endroit pour spécifier cette information sera en fait le CSS.
Pour des questions de copyright, il faut indiquer sous la photo son origine :
par exemple pour l'image proposée,
"Portrait de l’artiste, Vincent Van Gogh, Musée d’Orsay (domaine public)".
Pour cela, encapsulez la photo dans une balise figure
et ajoutez une légende (figcaption).
De même qu’une table des matières sert à se retrouver dans un document texte,
les documents HTML ont différents outils qui aident à la navigation dans le document.
Nous allons utiliser l’attribut générique id pour permettre la navigation
dans la page, avec des liens internes. (voir cours)
Associez un attribut id à chaque élément
section, avec une valeur différente.
Supposons que vous avez choisi la valeur Contact
pour l'attribut id de la section contenant l'adresse (4eme).
Dans ce cas, au niveau de la barre d’adresse, ajoutez à la fin de l’url de la page
un dièse et ce nom d’identifiant (quelque chose comme .../cv.html#Contact).
Que se passe-t-il ?
S’il ne se passe rien, c'est que vous avez peut-être un portrait de taille réduite.
Zoomez sur la page (Ctrl+molette_de_la_souris) et réessayez.
(Pour désactiver un zoom/dezoom, cliquez sur l'indication de pourcentage apparue
tout à droite de l'url dans la barre de navigation).
Vous pouvez aussi temporairement rajouter du texte arbitraire pour tester
(de longues suite blah blah... par exemple)
Créez un élément sémantique d'entête (voir cours) et placez dedans
un menu de navigation (par exemple une liste de liens).
Pour chaque lien vers une section, utilisez des dièses
combinés aux valeurs d'attributs que vous avez choisies.
Avec l'explorateur de fichiers, créez un sous-répertoire css/
(Ctrl+Shitf+N) ; on y stockera toutes les feuilles de style.
Avec notepad++, créez un nouveau fichier pour la feuille de style
portant l'extension .css : titres.css
Reliez cette feuille de style à votre page HTML
en ajoutant dans l’élément head
la balise link (voir cours).
Le chemin (url) part de l’endroit où est rangé
votre document html (chemin relatif).
Il devrait donc ressembler à ./css/cv.css.
Choisissez une couleur pour le titre principal,
et mettez la en place en ajoutant au fichier css une ligne
du type h1 {color:valeur;}.
(vous pouvez vous avancer dans le cours jusqu'à la section
Formattage" > couleurs > couleurs nommées).
Modifiez la présentation des titres.
Vous pouvez piocher parmi les attributs de la section Formattage.
Vous pouvez choisir une font.
Question 6 : Image, redimensionnement et positionnement
Nous allons redimensionner l’image, modifier l’apparence de la légende, et la déplacer.
Créez une nouvelle la feuille de style css/portrait.css.
Remplacez le lien vers la précédente feuille par un lien vers celle-ci.
Retirez les attributs de taille de la balise image (dans le fichier html donc).
Dans le css, choisissez une largeur pour l'image (par exemple 3cm),
et laissez le navigateur ajuster la hauteur en proportion.
Modifiez la légende pour que la police soit plus petite que la normale
et en italique. (regardez les propriétés de formatage du texte dans le cours)
A l'aide de la propriété position, sortez le portrait du flux,
et placer le à droite, avec un peu de marge par rapport au bord.
(en survolant l'élément, et avec l'inspecteur,
remarquez que le navigateur affecte des marges par défaut à certains éléments.
Modifiez les marges selon vos besoins)
Si vous avez lu le tutoriel, tentez aussi avec la propriété float.
Cependant, pour le rendu, vous n'utiliserez pas cette propriété.
Dans les deux questions précédentes nous avons créé deux fichiers css séparés
pour s'occuper de deux aspects distincts.
C'est un peu artificiel, et ces deux fichiers auraient pu être fusionnés
en un seul.
Nous allons cependant profiter de cette séparation pour expérimenter avec
l'inclusion sélective des règles css.
Créer une nouvelle feuille de style : /css/cv.css
et rediriger le document html uniquement vers celle-ci.
En utilisant la directive d'importation, demandez dans cv.css
l'utilisation de titres.css et portrait.css
En ajoutant aux directives d'import une condition de media query,
faites en sorte que seul portrait.css soit actif
pour une largeur de fenêtre inférieure ou égale à 900px,
et que seul titres.css le soit au-delà.
Vous pouvez tester en plaçant l'inspecteur à droite de la fenêtre,
et en modifiant sa largeur à la souris.
Affiner encore la/les condition, pour que les deux feuilles soient actives
lorsque la largeur atteigne ou dépasse les 1000px.
Attention, la syntaxe des conditions est capricieuse,
au niveau des espaces ou des parenthèses notamment.
La technique que nous venons de tester n'a que peu d'intérêt tel que nous l'avons
utilisée.
Son véritable intérêt sera de permettre de choisir la bonne mise en page
(donc le bon css) selon que le document s'affiche sur un écran plus ou moins grand,
un portable, une tablette, un pc, une imprimante, en couleurs ou monochrome, etc...
De façon plus générale, elle permet de découper le travail du css, pour que chaque
fichier n'ait à traiter qu'un aspect.
Créez une nouvelle feuille de style : /css/tables_et_listes.css
et importez la via /css/cv.css
Dans la liste des cours suivis, remplacez les puces de base par votre option
préférée en appliquant le CSS à l’élément ul.
consultez les valeurs disponibles pour les propriétés des listes,
par exemple sur mdn
Grâce à l'attribut class, choisissez dans le document html,
un ou plusieurs cours de la liste. Grâce à une règle css, donnez-leur
une puce particulière et un nom mis en valeur
(en modifiant une autre propriété de votre choix).
Améliorez le rendu visuel de la table grâce aux propriétés
text-align et padding.
(Remarque : il y a 4 paddings)
Réalisez la mise en forme du tableau en rajoutant des bordures à certains endroits
mais pas partout (il y a aussi 4 borders aussi). Par exemple :
Réfléchissez bien à l'élément sur lequel agissent vos modifications :
table, tr, th, td ?
Pour éviter des bordures en double, regardez la propriété
border-collapse
Validez/Corrigez (html
et css)
(rappel: vous avez modifié deux fichiers css)
Les liens du menu de navigation ressemblent à des liens normaux.
On veut améliorer ça : chaque lien dans une boîte,
et toute la boîte est cliquable (pas juste le texte).
Créez une nouvelle feuille de style : /css/nav.css
et importez la via /css/cv.css
Modifiez le style des liens pour qu’ils ne soient ni soulignés, ni en bleu.
Ajouter une boîte visible avec border et background-color
Assurez-vous que seuls les liens du menu de navigation sont affectés.
Modifiez les dimensions (width et height)
pour rendre les boîtes plus esthétiques.
(rappels : il y a les block, les inline-block, et ... ?)
Améliorez l’apparence de votre menu en donnant une bordure et une couleur de fond
au menu de navigation, et en utilisant les propriétés :
margin et/ou padding, ainsi que text-align.
Ajustez aussi width et height
Tirez profit de la pseudo class hover (voir cours)
Il se pourrait bien en fait que la liste ne soit plus nécessaire dans le document html...
mais attention aux effets des whitespaces sur le flot des inline !
On va retoucher la présentation et ajouter un pied de page (footer) ;
vous pourrez y annoncer que le html et le css sont valides.
Créer les nouvelles feuilles de style nécessaires au fur et à mesure
Définissez élément footer dans le document html.
Ajoutez-y le lien et l'image proposée par le validateur css en cas de réussite.
Copiez et adaptez cela pour le html
(avec par exemple cette image).
Dans le css, choisissez une couleur de fond pour le footer ; dimensionnez-le ;
ranger son contenu.
Donnez à certains de vos blocs des bordures arrondies grâce à la
propriété border-radius.
(Attention à intervenir sur le bon fichier, dans la bonne règle)
Centrez la table et l'adresse.
(vous re-découperez la taille de l'adresse si besoin, et lui donnerait
une couleur de fond)
Pour centrer un bloc, text-align ne marche pas car
il ne s’agit pas d’un texte (élément inline).
À la place, testez margin:auto;.
Retravaillez les marges, paddings, et espacement de vos titres et paragraphes.
Faites en sorte que la navigation reste toujours visible en utilisant la propriété position.
Pour constater le résultat, vous devrez peut-être remplir plus la page,
ou zoomer (ctrl+molette)
Comme le bloc de navigation a été sorti du flot normal,
il n'y a plus d’espace réservé pour lui.
Le titre a donc pu se décaler.
Pour résoudre ce problème, on va rajouter l'élément sémantique main,
et y placer tout le contenu (i.e tout saufnav et footer).
On lui donne ensuite un margin-top suffisant pour qu'il démarre après les liens de navigation.
Validez/Corrigez (html
et css)
(rappel: vous avez du modifier beaucoup de fichiers ; revalidez tout)
Dans cette partie vous devez adapter votre site pour différentes tailles d’écran.
Nous allons cibler trois gammes de formats :
Version mobile : jusqu'à 640 pixels de largeur
Version tablette : de 641 à 1000 pixels
Version bureau : plus de 1001 pixels
Nous allons remodeler la structure de nos fichiers css.
Le document html liera encore un unique fichier css/cv.css.
Celui-ci re-dirigera vers les trois feuilles correspondant à chaque cas :
css/mobile.css, css/tabelette.css et css/desktop.css.
Chacun de ces fichiers contiendra toutes les règles nécessaires
pour la taille visée (i.e. fusionnera les anciens nav.css,
footer.css, etc)
On se concentrera sur deux aspects :
la gestion de la navigation et la gestion de l'image de portrait.
Vous pouvez améliorer d'autres aspects pour votre rendu final.
Dans ce cas, joignez un texte explicatif de ce que vous avez voulu faire, et pourquoi.
Commencer par mettre en place les fichiers css, et regrouper ce qui a déjà été fait
afin de l'utiliser pour le cas desktop.
Concernant la navigation :
Dans la version mobile, les liens doivent apparaître en colonne,
c'est-à-dire les uns sur les autres, et non plus les uns à côté des autres.
Dans la version tablette, les liens doivent apparaître deux par ligne,
c'est-à-dire deux sur la première ligne, puis deux sur une seconde ligne.
Attention, la partie main doit être positionnée en conséquence.
Concernant le portrait :
Ses dimensions doivent passer en pourcents.
Dans la version mobile, elle doit occuper une pleine largeur,
seule, juste après le titre, sans caption
puis doit suivre le reste du contenu.
Dans la version tablette, elle ne doit jamais masquer les textes
à sa gauche. Il sera peut-être utile de consulter max-width
et max-height.
Si vous avez fini en avance, et que votre rendu est prêt...
On va créer une version sombre du CV.
Créez une copie de votre CV à l’identique. Dans chaque version, placez un lien qui dirige vers l’autre page
quand on clique sur le portrait. Il suffit de placer des balises
<a> autour de l’image.
Créez une nouvelle feuille CSS vide pour votre deuxième version (ne copiez pas le contenu de la première feuille)
qui donne un arrière-plan très sombre et du texte clair.
Reliez les deux feuilles CSS à la version sombre. Essayez de le faire dans un sens et dans l’autre pour voir celui
qui convient.
Si vous avez terminé le reste du TP, vous pouvez aller vous renseigner sur Flexbox et faire une deuxième version du
menu de navigation (sur le CV secret) pour que les différents liens soient bien répartis horizontalement. Vous pourrez
utiliser ce que vous avez appris lors du projet.
