Documentation technique

TP CSS
L'objectif de ce TP était de se familiariser avec le HTML
et avec l'application de styles CSS. Il fallait réaliser un
petit site nous présentant avec des caractéristiques
visuelles imposées.
Les étapes (imposées par le TP) :
1. Ecrivez la page ini0ale (index.html) qui con0endra :
o Votre nom, adresse et état civil.
o Le logo du lycée St Vincent (logoStVincent.png) avec un lien hypertext.
o Un fichier photo (.gif ou .jpg) que vous allez télécharger ou créer.
o Un menu sous la forme d'une liste de liens hypertext vers les pages (qui seront faites par la suite) : études, loisirs, liens favoris, image, diaporama. Validez votre page et insérez un logo de valida0on. 2. Ecrivez et importez le fichier style.css qui con0ent des défini0ons de style pour afficher toutes vos pages html avec une même apparence. La page sera affichée avec :
︎ une marge gauche de 60 pixels
︎ une bordure grise d’un pixel
︎ une image de fond (spirale.gif) qui se répète ver0calement o
En plus, les 0tres importants (h1) seront affichés en blanc avec un fond gris
o Vous aurez besoins des propriétés de style suivantes : margin-­‐le; border, background-­‐image, background-­‐repeat, color, background-­‐color. o
3. Ecrivez la page etudes.html qui conAent une descripAon de vos études précédentes et de vos études en cours. UAlisez des listes imbriquées et des liens hypertext vers l'extérieur (par exemple vers le site web de votre lycée). Validez votre page et insérez un logo de validaAon. 4. Ecrivez la page loisirs.html en u0lisant des tableaux pour organiser la présenta0on des informa0ons. Définissez et importez des propriétés de style pour une mise en forme qui vous convient. Validez votre page et insérez un logo de valida0on. 5. Ecrivez la page favoris.html qui con0endra sous la forme des listes imbriquées (par thème) les liens hypertexts vers vos sites favoris. Validez votre page et insérez un logo de valida0on. 6. Ecrivez la page image.html qui con0endra une page avec une image avec des zones réac0ves. Une image de l'Europe poli0que que vous la placerez dans le même répertoire que image.html. o
Vous insérerez ceSe image avec deux zones réac0ves : une pour la France et l'autre pour le Royaume-­‐Uni. Ces zones réac0ves auront des liens hypertext vers deux journaux na0onaux. o
Pour simplifier faites une approxima0on grossière des zones réac0ves. Vous pouvez obtenir les coordonnés des zones réac0ves avec un logiciel tel que Paint. o
7. Ecrivez les pages diaporama_i.html qui présenteront en boucle automa0que une série (3 ou 4, d'où le i de diaporama_i.html) de photos. Chaque photo sera accompagnée (dans sa page web) par un texte de commentaire et par un lien hypertext vers index.html vous permeSant de sor0r du diaporama. Validez votre page et insérez un logo de valida0on. 8. U0lisez systéma0quement des balises meta dans toutes vos pages pour signaler : l'encodage, l'auteur de la page et un ensemble de mots clés. Les technologies que j’ai u0lisé : Les documents que j’ai utilisé :
http://openclassrooms.com