05 Mise en forme d'un document

Ce tp a pour but de récapituler l'ensemble des premiers tps vus ensemble. Nous allons ainsi revoir HTML et CSS.

Structure de notre projet

Avant de poursuivre notre découverte du monde du web, il convient de s'attarder quelque peu sur la structuration de nos projets.

Créons ensemble une structure squelette pour l'ensemble de nos projets web:

1. index.html, ce fichier contient comme vous le savez déjà le contenu de la page d'accueil de notre site,
2. un dossier imgs/, ce dossier contiendra l'ensemble des images utilisées sur notre site,
3. un dossier styles/, ce dossier contiendra le code CSS utilisé pour la mise en forme du contenu.

Document HTML

Nous allons créer plusieurs éléments HTML au sein de notre document:

Est-il utile de rappeler qu'il faut toujours commencer par le squelette HTML5 ?

Créer une section contenant:

• Un titre de niveau 1 avec le texte suivant: Jurassic World Evolution
• Une image avec cette ressource
• Un titre de niveau 2 avec le texte suivant: Imaginez votre propre Jurassic World
• Un titre de niveau 3 avec le texte suivant: Caractéristiques
• Une liste non ordonnée contenant les éléments suivants: Vos dinosaures, Vos choix, Vos rêves.

• Créer trois titre de niveau 3 et 3 paragraphes qui les suivent avec les contenus respectifs suivant: Ramenez les dinosaures à la vie Créez par bio-ingénierie des dinosaures qui pensent, ont des émotions et interagissent intelligemment avec le monde que vous construisez. Choisissez votre propre voie Travaillez dans l'intérêt de la science, des loisirs ou de la sécurité dans un univers incertain où la vie trouve toujours son chemin. et Une nouvelle légende Jurassic Plongez dans un tout nouveau scénario qui place au bout de vos doigts des personnages emblématiques et des décennies de tradition Jurassic.

• Enfin créer un lien qui renvoie vers le site officiel du jeu avec en intitulé de lien En savoir plus

Vous devriez arriver à un résultat équivalent

Mettre en forme notre document

Mettez en forme votre document HTML via CSS pour obtenir un résultat équivalent:

Voici les codes couleurs utilisés au sein de la feuille de style:

#001d37
#0b2849
#a8faff
#00d6ea

Vous devriez arriver à un résultat équivalent