Exercice Bob l'éponge

Bien démarrer

1. Crée un nouveau dossier appelé « Bob » dans le dossier du cours « informatique / html / travaux » que tu as créé.
2. Dans ce dossier, crée un dossier « images » qui contiendra toutes les images de ton site.
3. Ensuite, télécharge les fichiers associés (index.html et les images). Pour ce faire fais un clic droit sur chacun des fichiers et sélectionne « enregistrer le lien sous… ». Enregistre les fichiers dans le dossier que tu viens de créer. Les images doivent aller dans le dossier « images ».
4. Renomme le fichier « index.html » en remplaçant PRENOM par ton prénom (ex : bob_Matis.html).

Le fichier HTML te permet de démarrer le projet rapidement.

Codes couleur

Voici les couleurs utilisées dans la page et leur code correspondant :

• Jaune : #fef66b
• Bleu foncé : #005da4
• Bleu clair : #26baca -> #2dddf0
• Rouge : #ef5323

Polices de caractères

Pour le titre principal, vous pouvez utiliser la police "SpongeBob Font Wide". Pour les titres de niveau 2, vous pouvez utiliser la police 'Krabby Patty'.

Ces polices de caractères ne sont pas disponibles sur ton ordinateur. Pour pouvoir les utiliser dans ta page web, ajoute les 2 lignes suivantes directement après la balise <style> de ta page:

    @import url('http://fonts.cdnfonts.com/css/spongebob-font-condensed');
    @import url('http://fonts.cdnfonts.com/css/krabby-patty');

Le fichier HTML contient un contenu avec certains éléments html et css préremplis. C’est cadeau. !

Consignes

Un clic sur le logo doit ouvrir la page https://bob-leponge.fandom.com/fr/wiki/Accueil dans une nouvelle fenêtre/onglet.

Pour centrer cette image, applique-lui la class « centre ». Profites-en pour regarder comment centrer une image sur une ligne.

Le nom des personnes cités doit apparaître en rouge et doit être surligné en jaune quand la souris passe dessus.

Le nom des personnages cités doit apparaître en bleu foncé et doit être surligné en jaune quand la souris passe dessus.

Pour savoir comment surligner un texte quand la souris passe dessus... demande à Google.

La section "informations générales" peut être réalisée à l'aide d'un tableau:

Pour centrer les tables, applique-leur la déclaration CSS suivante :

margin : 0 auto ; /* Appliquer une marge automatique à gauche et à droite */

La section photos des personnages est réalisée à l'aide d'une table de 2 lignes / 5 colonnes :

Tu devrais avoir téléchargé les images dans le dossier « images », leur nom de fichier consiste en « [prénom du personne].png ».

Bonus : chaque image est un lien qui ouvre la page du personnage sur le site https://bob-leponge.fandom.com/fr/wiki/Accueil