Aller au contenu

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 balise nav pour les liens et la balise section 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 et cite)
  • 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
  • À 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.