TP2 pdf - geekoon

Introduction aux langages de l’internet TP2 : Site CV Mohamed SALLAMI 1. Introduction : Le but de ce TP est de créer votre premier site web HTML et CSS. Pour cela, vous allez écrire votre CV en HTML et CSS, à l'aide de plusieurs pages Web. Ces différentes pages correspondent à des "rubriques" et sont décrites ci-­‐dessous. Elles seront reliées entre elles par un menu. A chaque étape : pensez à enregistrer vos fichiers HTML et CSS et de les valider auprès du W3C. HTML : http://validator.w3.org/. CSS : http://jigsaw.w3.org/css-­‐validator/ 2. Partie 1 Exercice 1 Créez la page principale index.html comportant : • Une entête qui contient : o Un titre principal contenant votre nom. o Des paragraphes indiquant votre état civil, votre adresse, etc. o Un titre de niveau 2 indiquant votre profession. o Une photo. • Un menu qui contient au moins les liens vers les pages "Accueil", "Expériences", "Compétences", "Formations", "Langues", "Loisirs" et "Contact". • Un bloc de texte principal, destiné à contenir les informations présentées dans la page. • Un footer qui contient le texte suivant : Copyright "CPE 4ETI" 2013, tous droits réservés. Page "Expériences" Copiez votre page de structure dans un fichier nommé "experiences.html". Complétez le bloc principal pour qu'il contienne vos expériences professionnelles. Pour chaque expérience il faut indiquer : • la date ou la période. • L’intitulé de la position occupée. • Le nom de l'entreprise ou organisme. Page "Compétences" Copiez votre page de structure dans un fichier nommé "competences.html". Complétez le bloc principal pour qu'il contienne une liste de vos compétences. Page "Formations" Copiez votre page de structure dans un fichier nommé "formations.html". Complétez le bloc principal pour qu'il contienne une liste des vos formations. Pour chaque formation il faut indiquer: • la date ou la période. • l'intitulé de la formation suivie. • Le lieu de la formation. Page "Contact" Copiez votre page de structure dans un fichier nommé "contact.html". Complétez le bloc principal pour qu'il contienne vos coordonnées et un formulaire de contact qui contient : Mohamed SALLAMI 1 • Un nom. • Une adresse émail. • Un objet de message. • Une zone de texte pour le message. • le bouton envoyer. Créez aussi les pages "langues.html" et "loisirs.html ". N’oubliez pas à enregistrer les différentes pages en UTF8 et corriger les erreurs jusqu'à obtenir la validation du W3C. Exercice 2 •
•
•
•
•
•
•
Créez un fichier CSS minimal et l'associez à chaque page HTML déjà créée. Reprenez le contenu de chacune de ces pages pour faire disparaître tout élément de mise en forme et associez un style à chaque élément sémantique. Validez la feuille CSS auprès du W3C. Validez chaque page HTML auprès du W3C. Vérifiez le résultat. Ajoutez du CSS, afin d’avoir la bonne mise en page. Appliquez ces changement sur les autres pages afin d’harmoniser vos pages. Exercice 3 •
Utilisez des propriétés CSS 3 pour obtenir : o Un arrière plan dégradé. o Les arrondis sur les coins des bordures et sur les éléments du menu. o Un ombre porté pour les titres. Validez vos pages web et feuilles CSS auprès du W3C. Exercice 4 (Media Queries) Rappel : les Media queries vous permettent de spécifier des feuilles de style différentes en fonction du mode de rendu de votre document (écran, impression, téléphone, lecteur braille, etc.). (Voir le cours) • Dupliquez votre feuille de style dans un second fichier CSS (par exemple : "CV_print.css"). • Dans ce deuxième fichier, supprimez le menu, le footer, élargissez au maximum la largeur du bloc principal, réduisez l'espacement entre les lignes et supprimez les éléments non informationnels (image de validation de la page, etc.). • Liez cette feuille de style à vos pages Web et faites en sorte qu'elle ne soit appliquée que pour l'impression ("print"). Testez le comportement avec l'aperçu avant impression de votre navigateur. Exercice 5 (travail en autonomie) Créez une version HTML 5 de votre site web. 3. Rendu du TP •
Le répertoire TPWEB2 contient : o Un répertoire CV_XHTML qui contient la version XHTML de votre site. o Un répertoire CV_HTML5 qui contient la version HTML5 de votre site. o Le répertoire CV_ … doit contenir :  Un répertoire IMAGES.  Un répertoire CSS.  Les différents fichiers .html. Mohamed SALLAMI 2 Zip final à déposer : <Nom1>-­‐<Nom2>-­‐TPWEB2.zip Déposez le fichier zippé sur CPE COMPUS. Attention : vérifiez bien que les liens entre les différents fichiers que vous allez rendre ne font pas référence à votre système de fichiers propre. •
•
4. Références Quelques références qui peuvent vous être utiles : • Le validateur W3C sur : http://validator.w3.org. • W3C Spécifications sur http://www.w3.org/html/wiki/Specifications • SELFHTML sur http://fr.selfhtml.org/html • ALLHTML sur http://www.allhtml.com/ • http://www.w3schools.com/tags/default.asp • http://www.w3schools.com/cssref/default.asp • Sites aidant à des choix de couleurs harmonieux : o http://colorschemedesigner.com/ o http://www.colorschemer.com/online.html
Mohamed SALLAMI 3