Exercice 02 - Portfolio
Dans votre répertoire designweb créez un nouveau répertoire nommé ex02_portfolio. Dans ce répertoire allez créer un fichier nommé index.html et y reproduire cette maquette.
Découpage de la page
- Le texte de l'onglet doit être votre nom (balise
title
) - Pour l'entête de la page, vous allez utiliser la balise
header
, la balisenav
pour les liens et la balisesection
pour chacune des sections suivantes (Présentation, Mes loisirs, Liens utiles, Mes voisins de tables, Une petite image pour finir). - Le titre de chaque section utilise la balise
h2
- Voici une image de la maquette avec un découpage des sections : maquette avec découpage.
Entête
- Votre nom doit être dans une balise
h1
- Ajoutez une citation qui vous plait et essayez de reproduire le mieux possible le résultat de la maquette. (J'ai utilisé une combinaison des balises
blockquote
,p
etcite
) - Votre avatar doit avoir une largeur de 200 pixels. (Il y a un attribut de la balise
img
que vous pouvez utiliser) - La ligne sous l'image est produite par une balise html
Navigation
- À l'aide d'une liste à puce, ajoutez des liens vers les sections suivantes de votre page : Mes loisirs, Liens utiles et Mes voisins de tables. (Vous allez devoir utiliser la balise
a
ainsi que l'attribut id)
Présentation
- Écrivez un court texte qui vous présente. Si vous n'êtes pas inspiré, utilisez du lorem ipsum. Le texte doit être dans une balise
p
Mes loisirs
- Listez au moins trois de vos loisirs à l'aide d'une liste ordonnée
Liens utiles
- À l'aide d'une liste à puce, ajoutez au minimum deux liens.
- Pour le premier lien, copier le fichier index.html de l'exercice 1 dans ce nouveau projet et renommez-le helloworld.html. Le lien doit rediriger vers cette page.
- Pour les autres liens, utilisez n'importe quel url qui pointe vers un autre site. Utiliser la balise
target
avec la bonne valeur pour que la page s'ouvre dans un nouvel onglet.
Mes voisins de tables
- Créez un tableau qui va contenir les informations demandées d'au moins trois de vos voisins de tables.
- La colonne Équipe est une colonne fusionnée. Inscrivez-y un nom pour votre équipe.
Une petite image pour finir
- Allez sur le site Unsplash pour trouvez une image à votre goût. Ajoutez ensuite l'image dans cette section. Téléchargez la version la plus adéquate pour de l'image car elle devra avoir une largeur de 400 pixels (aidez-vous encore une fois des attributs de la balise
img
). N'oubliez pas aussi de bien renseigner les attributs alt et title.
Retour en haut
- Créez un lien qui va vous retourner au début de la page. La technique est la même que pour la section des liens.