Durée : 6h
Système d’exploitation : au choix.
Objectifs du TP :
Comprendre la structure d’une page HTML ;
Se familiariser avec les balises HTML de mise en forme ;
Savoir comment créer et inclure une feuille CSS ;
Comprendre le système de blocs et le positionnement CSS ;
Utiliser le validateur W3C ;
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 (la bonne structure). 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.
Choisissez un éditeur de texte brut (gedit, notepad…) ou votre IDE préfére et créez un document cv.html
.
Lisez les parties 4.2 et 4.3 du polycopié et reproduisez la structure de base d’une page Web (avec éléments html
, head
, body
et l’encodage indiqué dans <meta charset ="..." />
.
Créez un titre principal CV de (votre nom). Ce sera un élément h1
(c’est-à-dire du texte compris entre des balises <h1>
et </h1>
).
Ouvrez la page dans un navigateur pour constater le résultat.
Il faudra recharger cette page à chaque fois pour constater le résultat des changements faits dans le document HTML. Si vos changements n’ont aucun effet, vérifiez que :
vous avez bien sauvegardé votre document HTML ;
le document ouvert dans l'éditeur est le même que dans le navigateur.
Nous allons commencer par définir les sections principales du CV. Chaque section doit commencer par un titre de niveau 2.
Écrivez quelques phrases sur votre origine, âge, votre formation actuelle, le métier auquel vous aimeriez vous destiner, etc. Vous pouvez tout inventer.
Séparez ces phrases en (au moins) deux éléments paragraphes. Constatez l’effet sur l’affichage.
Pour des paragraphes de texte normaux, 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’un élément adapté.
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 : cette phrase est un paragraphe.
Faites une liste (non numérotée) indiquant les cours que vous suivez à l’IUT.
Créez un tableau (élément 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 inspecter le code HTML du TP pour voir comment j'ai fait...
Pour le moment votre tableau n’a pas de bordure. On s’en occupera en CSS.
Cette section comprend les informations nécessaires pour vous contacter (nom, téléphone, adresse email…)
Trouvez un élément HTML servant à indiquer les indications de contact pour l’auteur de la page dans un site de référence tel que (https://developer.mozilla.org/fr/docs/Web/HTML/Element).
En général, on fait les sauts de ligne en changeant de paragraphe : </p> <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 />
(line break).
Placez chaque section (titre et texte) au sein d'un élément section
.
section
est un premier exemple d’élément sans effet sur l’affichage. Il donne la structure du document et leur présentation pourra être changée plus tard en CSS (séparation structure / présentation). Parfois, ces éléments servent aussi pour l’extraction automatique d’informations (moteurs de recherche…)
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é.
img
est une balise sans contenu ; elle vient seule. Aussi, on écrit <img />
au lieu de <img> </img>
.
Indiquez la taille originale (en pixels) de l’image via les attributs width
et height
. Pour obtenir la taille de l’image, faites clic droit 🠪 Propriétés
dans l’explorateur de fichiers.
Ces attributs ne sont pas là pour changer la taille de l'image : on fera ça en CSS. Le but est que le navigateur connaisse la taille de l’image avant de la télécharger, pour éviter que la page bouge lors du chargement.
Indiquez sous la photo son origine : par exemple "Portrait de l’artiste, Vincent Van Gogh, Musée d’Orsay (domaine public)". Pour cela, placez après la photo un élément figcaption
(légende). L'image et sa légende vont dans un élément figure
.
De même qu’une table des matières sert à se retrouver et à naviguer 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.
Associez un attribut id
différent à chaque élément section
, avec un nom descriptif.
Dans la barre d’adresse, ajoutez à la fin de l’url de la page un dièse et un nom d’identifiant (par exemple : …file.html#Contact
). Que se passe-t-il ?
S’il ne se passe rien, essayez de zoomer sur la page (Ctrl
-+
) et réessayez.
Créez un menu de navigation placé dans l’en-tête (en trouvant les éléments correspondants). Dans ce menu, créez des liens vers les différentes sections de votre CV : utilisez des dièses dans les attributs href
(par exemple href="#Formation"
).
Créez une feuille de style vide au format CSS (texte brut avec extension .css
). Reliez cette feuille de style à votre page HTML en utilisant dans l’élément head
la balise <link rel="stylesheet" href="chemin/vers/votre/feuille/CSS"/>
.
Le chemin part de l’endroit où est rangé votre document HTML (chemin relatif). Si la feuille CSS est dans le même dossier, il suffira d’écrire href="titre.css"
.
Dans la feuille CSS, ajoutez une ligne h1 {color:valeur;}
, où valeur
est un nom de couleur. Constatez le résultat.
Pour choisir une valeur pour color
, vous pouvez vous référer à cette liste de noms de couleurs prédéfinies : https://developer.mozilla.org/fr/docs/Web/CSS/Type_color. Sinon, vous pouvez utiliser un code hexadécimal.
Modifiez la police utilisée dans certains titres (h1
ou h2
, à votre choix). Vous pouvez choisir une police possible sur https://www.w3schools.com/cssref/css_websafe_fonts.asp. Fixez aussi la taille que vous désirez avec font-size
.
float
Nous allons redimensionner l’image et modifier l’apparence de la légende.
Appliquez à l’image les propriétés width:x; height:auto;
en choisissant une bonne valeur pour x (en cm, ou px…). La valeur pour height
garantit que l’image n’est pas déformée.
Modifiez la légende pour que la police soit plus petite que la normale et en italique. Utilisez l’aide ou cherchez sur Internet pour trouver les propriétés CSS correspondantes.
Utilisez la propriété CSS float
avec une valeur left
ou right
pour placer l'image et sa légende sur le coté du texte.
Réflechissez bien à quel élément il vaut mieux appliquer ces changements.
Si vous voulez rajouter une marge entre l’image et le texte, on peut appliquer la propriété CSS margin-right
ou margin-left
à la figure pour lui donner un peu de place.
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>
. Allez vous renseigner sur la propriété CSS list-style-type
et les valeurs qu’elle peut prendre sur https://developer.mozilla.org/fr/docs/Web/CSS/list-style-type.
Choisissez un ou plusieurs cours que vous préférez, et donnez-leur une puce particulière et un nom mis en valeur. Pour cela, on donnera à l’élément li
correspondant un attribut class
pour pouvoir le sélectionner dans le CSS.
Si vous êtes perdus, allez lire dans le polycopié la section 4.3.2 sur les sélecteurs.
Terminez la mise en forme du tableau en rajoutant des bordures à certains endroits (pas partout). Par exemple :
Pour créer ces bordures, utilisez les propriétés border-bottom, border-top, border-right
...
Réflechissez bien à l'élément sur lequel agissent les modifications ! table, td
ou th
?
Pour ne pas avoir de bordures en double, appliquez la propriété border-collapse:collapse;
à la table.
Améliorez le rendu visuel de la table grâce aux propriétés text-align
, padding-right
et padding-left
.
Le W3C propose un validateur HTML et CSS en ligne pour vérifier que votre code respecte les standards.
Allez sur https://validator.w3.org/ et choisissez Validate by File Upload
pour faire valider votre CV. Tentez de comprendre les erreurs affichées et faites les corrections nécessaires, puis recommencez jusqu’à ce qu’il n’y ait plus d’erreurs.
Faites la même opération avec votre feuille CSS sur https://jigsaw.w3.org/css-validator/.
Le code HTML et CSS que vous rendrez pour ce TP, ainsi que pour le reste de l’année, devra passer cette validation sans erreur.
display
Les liens du menu de navigation ressemblent à des liens normaux. On voudrait maintenant le faire ressembler à un vrai menu : chaque lien est entouré de sa boîte, et que le lien soit suivi quand on clique dans la boîte.
Modifiez le style des liens pour qu’ils ne soient pas soulignés ni en bleu ; pour créer une boîte visible, donnez-leur une border
et une background-color
de votre choix. Choisissez le bon sélecteur pour vous assurer que seuls les liens du menu soient affectés.
Comme border
est une propriété raccourcie, elle permet de modifier plusieurs propriétés : border-width
, border-style
et border-color
. N’hésitez pas à regarder la page des propriétés raccourcies pour voir les valeurs possibles.
Attention au contraste entre la couleur du texte et celle du fond. Ça ne s’applique pas qu’aux Powerpoint !
Modifiez leurs propriétés width
et leur height
pour faire des boîtes d’une taille agréable. Que se passe-t-il ? Et si vous leur appliquez les propriétés display:block
ou display:inline-block
?
Pour résumer, la propriété display
permet de changer le comportement des éléments entre inline
(texte normal), block
(bloc normal), inline-block
(se comporte comme inline mais garde des propriétés de bloc), et none
(non affiché).
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 suivantes :
margin
et padding
dans chaque boîte a
, pour ajouter de l’espace dans et entre les boîtes ;
text-align
pour centrer le menu ;
width
et height
pour fixer la hauteur des boîtes.
margin
comme padding
sont des propriétés raccourcies qui contiennent quatre valeurs : margin-top
, margin-bottom
, margin-left
et margin-right
. On peut aussi modifier les valeurs individuellement. Essayez de comprendre la différence entre les deux effets et trouvez des valeurs qui vous conviennent.
fixed
Dans le pied de page (footer
), tout en bas de la page, on va rajouter un petit bloc centré, d’une couleur différente. Vous y mettrez un message personnel, par exemple, votre Pokémon préféré.
Définissez un bloc et ajoutez-y un contenu Powered by HTML (ou autre chose). Choisissez une couleur de fond. Donnez-lui une largeur et une hauteur égales, soit absolue (px, em, cm), soit en pourcentage.
Pour améliorer la mise en page, vous pouvez choisir un alignement (text-align
).
Donnez à certains de vos blocs (celui-ci ou dans le menu de navigation) des bordures arrondies grâce à la propriété border-radius
.
Pour centrer le bloc, text-align
ne marche pas car il ne s’agit pas d’un texte (élément inline
). À la place, il faut appliquer au bloc margin:auto;
qui place des marges égales des deux cotés.
Vous pouvez ajouter du padding
pour centrer le texte dans le bloc. Centrer verticalement le texte "proprement" est un problème notoirement difficile à résoudre en CSS pur.
Nous allons maintenant faire en sorte que l’en-tête de navigation soit toujours visible. C’est une méthode courante pour les sites avec beaucoup de contenu.
Appliquez la propriété position:fixed
au header. Pour voir le résultat, zoomez sur la page avec Ctrl-+
et faites défiler la page.
Comme le bloc a été sorti du flot normal, l’espace qui lui était réservé a été enlevé. Pour résoudre ce problème, une méthode est de:
ajouter de la marge supérieure (margin-top
) au bloc body
contenant toute la page, puis ;
positionner le menu avec top
dans l’espace libéré.
Suivant l’ordre dans lequel les blocs sont introduits, l’en-tête peut passer sous certaines images. Ce problème peut être corrigé en lui attribuant un z-index
de 1 ou plus (le z-index correspond à la hauteur de l’élément).
absolute
Le positionnement absolu (position:absolute
) permet de sortir un bloc de sa position normale et de le placer à un endroit quelconque de la page. On va l’utiliser pour ajouter une petite image de votre choix - par exemple celle-ci - par-dessus votre portrait.
Il ne faut pas mettre ce positionnement partout, car en plus de rendre les blocs pénibles à placer précisément, cela cassera l’adaptativité du site. On l’utilise souvent pour placer un objet par-dessus un autre.
Insérez après votre portrait l'image choisie et redimensionnez-la en CSS pour qu’elle soit assez petite.
Appliquez à cette image les propriétés CSS position:absolute; top:10px; left:20px;
(positionnement à 10 pixels du bord haut et 20 pixels du bord gauche), et regardez le résultat. Modifiez les valeurs de top
et left
(ou (bottom
et/ou right
)) de sorte que la nouvelle image vienne sur votre portrait.
Déplacez la figure (par exemple en lui appliquant float:right
). Constatez le problème. Pour améliorer la situation :
Placez l’image dans la même figure que le portrait ;
Appliquez position:relative
à la figure ;
Choisissez des bonnes valeurs pour top, left, bottom, right
pour placer votre figure.
La raison pour l’étape 2 est que le positionnement absolu se fait par rapport à l’élément parent si cet élément est en positionnement relatif ; sinon, il se fait par rapport à la page entière. Le positionnement relatif sert (en dehors de ce cas-là) à décaler légèrement un élement depuis son emplacement normal, toujours avec top, left, bottom, right
.
Cette partie vous fait utiliser du CSS pour que votre site s’adapte correctement à toutes les tailles d’écran. Nous utiliserons les requêtes media, qui sont expliquées dans la partie 4.6.3 du polycopié.
Nous allons améliorer la manière dont l’image s’affiche à toutes les tailles. Dans le CSS, donnez à l’image une largeur en pourcentage et utilisez les propriétés min-width
et max-width
pour que l’image se redimensionne et reste à une taille appropriée pour toutes les tailles d’écrans.
Faites en sorte que, pour les très petits écrans (mobiles), l’image n’ait pas de texte à sa gauche ou à sa droite ; autrement dit, désactivez sa propriété float
.
En utilisant les requêtes media, on peut afficher une information différente pour chaque taille. Sous le titre, mettez un texte qui indique :
"Version mobile" si l’écran fait moins de 640 pixels ;
"Version tablette" si l’écran est entre 641 et 1000 pixels ;
"Version bureau" si l’écran fait plus de 1001 pixels.
Indice : Utilisez la propriété CSS display:none
pour cacher un bloc.
Pour terminer, améliorons l’affichage du menu de navigation. Faites en sorte que les liens dans le menu soient l’un au-dessus de l’autre dans la version mobile et sur la même ligne pour la version tablette et bureau.
Puis, en utilisant les pourcentages, arrangez les propriétés de padding
et de margin
pour que l’affichage soit bon à toutes les tailles.
Question bonus : comment faire pour que le menu contienne deux lignes de deux liens en version tablette ?
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.
Penser à valider votre site avec le validateur W3C (HTML et CSS) avant le rendu.
Mettez en ligne votre site en suivant les instructions sur https://webdev.iut-orsay.fr/.
Vérifiez que le site est bien déposé en allant à l'adresse https://webdev.iut-orsay.fr/~login (avec votre login).
Déposez également le site sur Moodle sous la forme d’un dossier compressé S1-NomPrenom.zip
qui contient votre site entier (HTML, CSS, ressources). Votre site doit fonctionner sans modifications.
Pour le sens et l’usage des mots balise, élément, attribut, propriété…, allez lire la section 4.2.1 du polycopié.
Balises HTML utilisées durant ce TP :
Élement | Effet | Attributs utiles | Type |
---|---|---|---|
h1 , h2 … |
Titres | block | |
section |
Section du document | block | |
p |
Paragraphe | block | |
br |
Saut de ligne (hors p ) |
inline | |
a |
Lien | href : cible du lien |
inline |
strong |
Mise en valeur | inline | |
img |
Image | src : chemin vers l’image |
block |
alt : description textuelle |
|||
width, height : dimensions d’image |
|||
figure |
Environnement | block | |
figcaption |
Légende d’image | block | |
ul |
Liste | block | |
ol |
Liste numérotée | block | |
li |
Élément de liste | block | |
link |
Ressource externe | rel : type de ressource | |
href : chemin vers la ressource | |||
header |
En-tête | ||
footer |
Pied de page | block | |
nav |
Menu de navigation | block | |
table |
Tableau | block | |
tr |
Ligne de tableau | ||
th |
Case d’en-tête de tableau | ||
td |
Case de tableau | ||
address |
Informations de contact | block | |
div |
Élement générique | block | |
span |
Élément générique | inline |
Listes : Les balises ul
ou ol
doivent contenir toute la liste. Chaque élément individuel est marqué par une balise li
.
Tableau : Un tableau (table
) contient des lignes (tr
ou table row) et chaque ligne contient des cases (th
ou td
).
<table>
<tr> <th>Première</th> <th>ligne</th> </tr>
<tr> <td>Deuxième</td> <td>ligne</td> </tr>
...
</table>
Propriétés CSS utilisées durant ce TD :
Propriété | Effets |
---|---|
color |
Couleur du contenu |
background-color |
Couleur du fond |
font-size |
Taille de police |
font-style |
Italique, oblique… |
font-weight |
Gras |
text-decoration |
Texte souligné, rayé… |
text-align |
Alignement du texte dans ce bloc |
width |
Largeur du contenu |
height |
Hauteur du contenu |
min-width, min-height |
Largeur (absolue) minimales. |
margin |
Espace autour du bloc (versions -top , -left …) |
padding |
Espace dans le bloc (versions -top , -left …) |
list-style-type |
Type de puce |
border |
Largeur, type et couleur de bordure (versions -top , -left …) |
float |
Place le bloc à gauche ou à droite de la page |
display |
Comportement block ou inline |
position |
Type de positionnement |
top, left, right, bottom |
Valeurs utiliés pour le positionnement |
z-index |
Hauteur (pour savoir qui est au-dessus) |