27 - WEB (2)

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’interieur, 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.

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.

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.

Exercice 5

Ajouter dans votre menu, une image et une adresse email de contact.

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.

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 etre 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.
• 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.
• Le lien « En savoir plus » doit etre 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 .

Animations

Exercice 8

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

Vue adaptive

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.

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.