Conception de documents et d'interfaces numériques
TP n°1 : Bases du HTML / CSS

Durée : 6h

Système d’exploitation : au choix.

Objectifs du TP :

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.

Question 1 : Commençons le HTML

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.

  1. Créez un dossier dédié à ce TP dans lequel vous mettrez tous les fichiers que vous créez.

  2. Choisissez un éditeur de texte brut (gedit, notepad…) ou votre IDE préfére et créez un document cv.html.

  3. 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 ="..." />.

  4. 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>).

  5. 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.

Question 2 : Ecriture du CV

Nous allons commencer par définir les sections principales du CV. Chaque section doit commencer par un titre de niveau 2.

  1. Première section "A propos de moi"
    1. Écrivez quelques phrases sur votre origine, âge, votre formation actuelle, le métier auquel vous aimeriez vous destiner, etc. Vous pouvez tout inventer.

    2. 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é.

    3. Mettez en valeur un ou deux points qui vous paraissent importants (par exemple, votre lieu de formation) à l’aide d’un élément adapté.

  2. Deuxième section sur vos études.
    1. 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.

    2. Faites une liste (non numérotée) indiquant les cours que vous suivez à l’IUT.

  3. Trosième section "Langues parlées".
    1. 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 à :

      LangageExpérienceNiveau
      Français30 ansDébutant
      HTML1hExpert
      中文 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.

  4. Quatrième section : informations de contact.

    Cette section comprend les informations nécessaires pour vous contacter (nom, téléphone, adresse email…)

    1. 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).

  5. 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…)

Question 3 : Ajout d'une photo

Nous allons ajouter une photo en haut à gauche de la page. Vous pouvez utiliser cette image ou bien une autre photo de votre choix.

  1. 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>.

  2. 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.

  3. 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.

Question 4 : Navigation

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.

  1. Associez un attribut id différent à chaque élément section, avec un nom descriptif.

  2. 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.

  3. 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").

Question 5 : Passons au CSS

  1. 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".

  2. 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.

  3. 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.

Question 6 : Image et positionnement float

Nous allons redimensionner l’image et modifier l’apparence de la légende.

  1. 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.

  2. 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.

  3. 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.

Question 7 : Modifications liste et tableau

  1. 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.

  2. 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.

  3. Terminez la mise en forme du tableau en rajoutant des bordures à certains endroits (pas partout). Par exemple :

    1. Pour créer ces bordures, utilisez les propriétés border-bottom, border-top, border-right...

    2. Réflechissez bien à l'élément sur lequel agissent les modifications ! table, td ou th ?

    3. Pour ne pas avoir de bordures en double, appliquez la propriété border-collapse:collapse; à la table.

    4. Améliorez le rendu visuel de la table grâce aux propriétés text-align, padding-right et padding-left.

Question 8 : Validation W3C

Le W3C propose un validateur HTML et CSS en ligne pour vérifier que votre code respecte les standards.

  1. 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.

  2. 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.

Question 9 : Marges et propriétés 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.

  1. 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 !

  2. 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é).

  3. 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.

Question 10 : Pied de page, en-tête et positionnement 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é.

  1. 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).

  2. Donnez à certains de vos blocs (celui-ci ou dans le menu de navigation) des bordures arrondies grâce à la propriété border-radius.

  3. 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.

  4. 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.

  5. 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é.

  6. 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).

Question 11 : Positionnement CSS 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.

  1. Insérez après votre portrait l'image choisie et redimensionnez-la en CSS pour qu’elle soit assez petite.

  2. 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.

  3. Déplacez la figure (par exemple en lui appliquant float:right). Constatez le problème. Pour améliorer la situation :

    1. Placez l’image dans la même figure que le portrait ;

    2. Appliquez position:relative à la figure ;

    3. 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.

Question 12 : Conception adaptative

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é.

  1. 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.

  2. 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.

  3. 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.

  4. 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.

  5. Question bonus : comment faire pour que le menu contienne deux lignes de deux liens en version tablette ?

Question 13 : CV secret & bonus

On va créer une version sombre du CV.

  1. 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.

  2. 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.

  3. 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.

Mise en ligne et rendu :

Penser à valider votre site avec le validateur W3C (HTML et CSS) avant le rendu.

  1. Mettez en ligne votre site en suivant les instructions sur https://webdev.iut-orsay.fr/.

  2. Vérifiez que le site est bien déposé en allant à l'adresse https://webdev.iut-orsay.fr/~login (avec votre login).

  3. 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.

    https://validator.w3.org/

    https://jigsaw.w3.org/css-validator/

Quelques balises et propriétés utiles pour ce TP

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)