22 - Web (2)

Cours associés : 11 - HTML , 12 - CSS .

L’objectif de ce TP est de créer un site web contenant des articles de vulgarisation scientifique. On pourra utiliser un éditeur de texte (VS Code, Notepad++) pour éditer les fichiers .html et .css et un navigateur Firefox ou Google Chrome pour visualiser les fichiers .html.

Le contenu

Exercice 1

Créer un dossier intitulé projet, puis, à l’intérieur, les fichiers index.html, style.css et un dossier Images.

Exercice 2

Compléter votre fichier index.html au minimum pour que votre navigateur comprenne que c’est une page HTML et qu’il y ait un titre.

Indice

Reprendre la structure minimale du cours : la déclaration <!DOCTYPE html>, puis une balise <html> qui contient l’en-tête <head> et le corps <body>. Le titre de l’onglet se place dans <title>, le titre affiché dans <h1> ; la balise <link> relie la page à la feuille de style.

Code à copier puis compléter
<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8">
    <title>...</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>...</h1>
  </body>
</html>

Exercice 3

Toujours dans le fichier index.html, créer un menu (balise <nav>, voir exemple ) sous forme d’une liste de liens vers trois fichiers HTML (« Accueil », « Tech » et « Science »). On pourra créer ces fichiers plus tard dans le TD.

Indice

Une liste à puces s’écrit avec <ul>, chaque élément avec <li>, et chaque élément contient un lien <a> dont l’attribut href donne le nom du fichier visé.

Code à copier puis compléter
<nav>
  <ul>
    <li><a href="index.html">Accueil</a></li>
    <li><a href="...">Tech</a></li>
    <li><a href="...">...</a></li>
  </ul>
</nav>

Exercice 4

Ajouter une section (balise <section>) contenant un extrait d’un des articles (balise <article>) et un lien pour consulter l’article entier (« En savoir plus »). Cet article se trouve, lui aussi, dans un fichier HTML.

Indice

La balise <section> contient la balise <article>, qui contient elle-même un titre et un paragraphe. Le lien « En savoir plus » est une balise <a> dont l’attribut href donne le nom du fichier de l’article complet.

Exercice 5

Ajouter dans votre menu une image et une adresse électronique de contact.

Indice

L’image s’insère avec <img src="Images/nom.png" alt="description">. Un lien dont l’attribut href commence par mailto: ouvre la messagerie : <a href="mailto:contact@exemple.fr">Contact</a>.

Exercice 6

Créer dans votre dossier projet les pages des articles. Chaque article contiendra un titre, une image illustrative et le texte. Ces pages contiendront le menu de la page d’accueil.

Indice

Copier index.html sous un autre nom pour garder la structure et le menu, puis remplacer le contenu de la section par l’article.

La mise en forme

Exercice 7

Compléter le fichier style.css afin de respecter les règles suivantes :

  • La police de caractère doit être une police sans empattement de taille 16px.
  • Le site doit s’étendre sur une largeur de 1130px.
  • Le site doit avoir un fond d’une couleur très claire au choix (exemples de couleurs nommées ).
  • Le titre doit être de grande taille (entre 36px et 48px), d’une police avec empattement et en italique.
  • Le menu doit être placé verticalement à gauche de la page avec une largeur convenable (en px ou en %). Il doit avoir une couleur de fond différente du reste de la page. Pour placer côte à côte le menu (nav), le contenu (section) et la barre latérale (aside), on les regroupe dans un même conteneur, par exemple une balise <div>, auquel on donne la règle display: flex;, puis on fixe la largeur de chacun avec width (voir les concepts de base des boîtes flexibles ).
  • Chaque élément du menu doit être centré horizontalement.
  • Au survol, chaque élément du menu doit être centré et passer en bleu foncé. Voir ce lien .
  • Le soulignement des liens hypertextes de tout le document doit disparaître : on applique la règle text-decoration: none; au sélecteur a.
  • Le lien « En savoir plus » doit être en bleu et aligné à droite sous l’article.
  • Créer une barre latérale, à droite de la page, contenant la liste de tous les articles. Chaque lien doit renvoyer vers l’article correspondant.
  • L’image sera en haut de la barre de menu et arrondie grâce à du code css .
Indice

Traiter les règles une par une, en rechargeant la page après chacune. Quelques propriétés utiles : font-family: sans-serif; pour une police sans empattement, width pour une largeur, margin: auto; pour centrer une boîte de largeur fixée, le sélecteur a:hover pour un lien survolé, et border-radius: 50%; pour arrondir une image jusqu’au cercle si elle est carrée.

Animations

Exercice 8

En vous aidant de ce site , créer des effets d’animations.

Indice

Commencer par une transition simple, par exemple transition: color 0.5s; sur les liens du menu, pour que le changement de couleur au survol soit progressif ; passer ensuite à une animation @keyframes sur le titre.

Vue adaptative

Exercice 9

  1. Lire cet article puis mettre en place la balise viewport.
  2. Pour les tablettes et les smartphones, il est nécessaire de faire des ajustements afin que l’affichage soit optimisé. Le code css suivant permet de le faire.
@media screen and (max-width: 630px) {
  body {
    font-size: 6px;
  }
  nav {
    display: none;
  }
}

Quels sont les deux effets du code ci-dessus ? S’en inspirer pour adapter votre site aux écrans des tablettes et des smartphones.

Indice

Les règles placées dans @media screen and (max-width: 630px) ne s’appliquent qu’aux écrans de 630 pixels de large au plus : réduire la largeur de la fenêtre du navigateur pour les voir agir.

Exemple de site

Modèle de site

Télécharger ce fichier modèle dans vos documents puis le décompresser (l’option s’affiche en cliquant droit sur le fichier). Un dossier apparaît alors : explorer l’ensemble des fichiers et s’en inspirer pour votre projet de site web.


21 - Web (1) 23 - Formulaire Web