Lilapuce
 

exercices (lundi 5 novembre 2007)

Html - Css [1]

Mode d’emploi de l’exercice

Cette page correspond à la première étape d’un exercice qui en compte 8 au total.

Pour la plupart des étapes, vous trouverez un fichier en pièce jointe, au format ZIP, en bas de page.

Par exemple, pour cette première étape Html - Css [1], en cliquant sur le fichier joint intitulé Projet RECETTE [1] (bas de page), vous téléchargerez une archive au format ZIP portant le nom suivant : projet_web_1.zip. Une fois décompressée, cette archive fournit un dossier intitulé projet web_1.

Si vous cliquez dans le menu ci-contre, par exemple, pour voir l’étape 5 du projet, vous retrouverez exactement la même logique de dénomination, où 1 sera remplacé par 5.

Vous pourrez ainsi comparer les étapes successives des fichiers.

Je vous conseille donc de créer (sur votre ordinateur) un dossier intitulé "Modèles Exercice Html - Css" afin d’y entreposer tous ces fichiers joints.

Il est normal que les étapes 2 et 3 de cet exercice ne comportent pas de fichiers joints (rien de nouveau à fournir depuis "projet web_1"). Par conséquent, les seuls fichiers joints à récupérer correspondent à l’étape 1 et de l’étape 4 à la 8.

Dernière précision : je vous recommande évidemment de saisir vous-même toutes les lignes de code décrites sur cet exercice. Afin d’éviter toute confusion entre les fichiers joints depuis ce site et vos propres fichiers, je vous recommande vivement, pour ces derniers, de créer un dossier portant un autre nom, sur un autre volume. Par exemple : "Projet Web", directement sur votre clé USB.

L’exercice HTML-CSS, étape 1 : vue globale.

Quelques éléments pour situer le contexte : vous vous apprêtez à réaliser un fichier HTML ; il vous faudra donc :

- un éditeur texte pour le fichier HTML ; par exemple, NotePad++.

- un éditeur pour le fichier CSS ; par exemple, TopStyle lite,

- des navigateurs pour afficher le résultat ; par exemple, Firefox et Internet Explorer.

Téléchargez NotePad++

Concernant TopStyle Lite : débrouillez-vous. Plutôt que vous indiquer un lien mort, mieux vaut effectuer une recherche sur un moteur (évitez les sites de téléchargement commerciaux qui vous demandent de laisser votre e-mail).

Téléchargez Firefox (si ce n’est pas encore fait).

Internet Explorer, a priori vous l’avez si vous êtes sur Windows. Si vous êtes sur Mac, Safari fera l’affaire.

Voici, d’abord, une vue sur le source du fichier index.html. De l’intérêt d’avoir un éditeur pour la coloration syntaxique et l’indentation :

Voici le code du fichier styles.css :

JPEG - 80.6 ko

Voici une vue de l’arborescence (complète !) de notre projet :

Voici le résultat sur un navigateur :

Passons, à présent, le code HTML de cette page à la loupe.

 

Projet RECETTE [1]