Activité 2 : découverte du CSS

Différence entre HTML et CSS :

Pour faire simple, le code HTML définit le fond d'une page et le code CSS la mise en forme (voir ci-dessous un exemple d’une même page Web sans CSS et avec CSS) :

Exercice 1 :

Lire les paragraphes HTML et CSS de votre synthèse Synthese_Web(2)

Avec uniquement du code HTML, la page Web est assez "fade" ; heureusement le code CSS permet d'y apporter de la couleur et pas que !

Le code CSS peut être écrit dans le fichier contenant le code HTML mais cela n'est pas conseillé ; il est préférable de créer un fichier CSS avec l'extension ".css" contenant uniquement le code CSS et en parallèle le fichier HTML avec l'extension ".html" contenant uniquement le code HTML !

Exercice 2 :

a) Ouvrir un nouveau document sur Notepad++ et écrire le code CSS suivant :

b) Sauvegardez-le en le nommant "style.css" dans votre dossier Web_ NomsEleves.

Exercice 3 :

Modifiez votre code HTML en ajoutant la ligne suivante <link rel="stylesheet" href="style.css"> :

Enregistrer et observer le résultat en rafraîchissant votre page dans le navigateur.

Exercice 4 :

a) Prenez le temps d'étudier le code CSS précédent en lisant les commentaires et en lisant le paragraphe principales propriétés du CSS de votre synthèse.

b) Modifier votre code CSS afin de rendre le plus joli possible votre page web.

Exercice Bonus pour les plus rapides :

Ajouter une image de fond à votre page à l’aide d’une propriété du CSS (faire une recherche sur le web).

TACHE FINALE A RENDRE

Sur le serveur pédagogique, mettre une copie complète de votre dossier Web_ NomsEleves

Votre travail sera évalué selon le tableau de critères suivant :