3. Développement Web - TP3

Résultat attendu :

3.1. Page de garde

On désire créer une page de garde ou page d'accueil, ce que l'on appelle également landing page en anglais et qui sera nommée index.html.

3.1.1. Entête (head)

L'entête de la page doit définir les éléments suivants :

• l'encodage des caractères en utf-8
• le nom de l'auteur de la page
• une description de la page
• le titre de la page : "Page Web de #Prenom_Nom", où vous remplacerez le terme #Prenom_Nom par votre prénom suivi de votre nom

3.1.2. Contenu (body)

Le contenu de la page est à son tour composé des éléments suivants :

1. un entête (header) qui contient un titre h1 avec le texte "Page web de #Prenom_Nom"
2. une barre de navigation (nav) qui contiendra un menu sous forme de liste non numérotée comprenant trois éléments :
   • accueil
   • mon CV
   • mes résultats
   chaque élément sera doté d'une balise avec un hyperlien permettant d'atteindre respectivement les pages suivantes : index.html, mon_cv.html, mes_resultats.html
3. le contenu principal de la page (main) sera composé d'un titre h2 dont le texte est "Bienvenue sur ma page"
4. le bas de page (footer) est composé d'un paragraphe contenant comme texte un copyright de la forme : © 2023 #Votre_Nom

3.2. Page Mon CV

Reprendre le fichier index.html et le sauvegarder sous mon_cv.html.

Modifier le titre de la page dans la section head en : "Mon CV".

On va modifier le contenu principal (main) de manière à disposer de trois sections situées l'une à la suite de l'autre.

• la première section contient deux éléments :
  • une image de hauteur et largeur 200 pixels, on pourra utiliser l'image : photo
  • un paragraphe "né le #Votre_Date_De_Naissance à #Ville_De_Naissance, #Departement_De_Naissance"
• la seconde section contient un titre (h2) intitulé "Formation", suivi d'une liste de description pour laquelle le terme est une année ou une période (par exemple 2020-2023) et la définition est l'établissement dans lequel vous vous trouviez ainsi que les classes
• la troisième section contient un titre (h2) intitulé "Mes Hobbies", suivi d'une liste numérotée dans laquelle vous placerez vos hobbies par ordre de préférence décroissante