Dans ce TP, vous allez écrire votre CV en HTML, à 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.
Dans votre dossier de travail, Créez un dossier "CV-HTML", dans lequel vous enregistrerez les fichiers produits dans ce TP.
À partir de la structure d'une page donnée en cours, créez une page simple comportant :
À faire : placez des liens sur les lignes du menu, pointant respectivement vers les pages (locales) "index.html", "formation.html", "experience.html", "divers.html". Ces pages n'existent pas encore, les questions suivantes vont vous permettre de les créer.
Copiez votre page de structure dans un fichier nommé "index.html". Complétez le bloc principal pour qu'il contienne :
Copiez votre page de structure dans un fichier nommé "formation.html". Complétez le bloc principal pour qu'il contienne une liste indiquant votre formation. Chaque item de cette liste comportera :
Copiez votre page de structure dans un fichier nommé "experience.html". Complétez le bloc principal pour qu'il contienne un tableau indiquant votre expérience professionnelle. Chaque ligne du tableau comportera :
Copiez votre page de structure dans un fichier nommé "divers.html". Complétez le bloc principal en laissant libre cours à votre imagination. La structuration devra toutefois être en accord avec le contenu...
Dans cette section, vous allez réaliser votre feuille de style, afin d'apprendre à manipuler les différents éléments du langage CSS. Pour cela, rajoutez une référence à une feuille de style "CV.css" à chaque page composant votre CV en XHTML.
La première étape est de définir les caractéristiques qui seront communes à l'ensemble des éléments des pages. Écrivez une règle de style pour l'élément body contenant :
Enregistrez votre feuille de style et testez plusieurs possibilités sur plusieurs navigateurs et plusieurs types d'appareils. Essayez de maximiser la lisibilité des pages...
Pour chaque type d'élément contenant du texte utilisé dans vos pages, définissez les caractéristiques de style des polices de caractères : type, taille, poids, couleur, décoration...
Pour les titres principal et de niveau 2, centrez le texte et spécifiez une taille et une couleur de police, un type de bordure, des marges, un type d'alignement, etc.
Remarque : utilisez Firebug / la console JavaScript de votre navigateur pour visualiser la position des blocs et comprendre les problématiques d'alignement et spécification des marges.
Spécifiez une largeur et une position pour les blocs menu et principal. Tant qu'à faire, évitez les collisions au redimensionnement de la page...
Un autre exercice pour bien comprendre les problématiques de positionnement est d'afficher votre photo à côté de votre présentation, à l'aide de la propriéé float (aide : http://w3schools.com/css/css_float.asp).
Rajoutez les règles nécessaires pour avoir un rendu digne d'un site Web "normal" : bordure autour du menu, types de puces, mise en forme du tableau, etc. Bref, faites-vous plaisir et "faites dans le beau" (cette partie peut être fignolée chez vous).
Dans cette partie, vous allez expérimenter quelques fonctionnalités de base du langage CSS niveau 3. W3Schools est votre ami : testez ces fonctionnalités sur le site. Gardez à l'esprit qu'elles peuvent être différemment prises en charge par les navigateurs.
Arrondissez les bordures des blocs, jouez sur leur transparence et rajoutez-leur des ombres.
Définition : 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 aural, lecteur braille, etc.). Elles consistent à rajouter un attribut media à l'élément link qui relie la page Web à la feuille de style pour permettre de choisir dans quelles conditions utiliser une feuille de style ou une autre.
Fonctionnement : si vous n'utilisez pas cet attribut dans un élément link, la feuille de style liée sera chargée de toutes façons. Si vous l'utiliez, la feuille de style liée ne sera chargée que si le mode de rendu de votre client correspond à la valeur de cet attribut. Plusieurs feuilles de style peuvent donc être appliquées à un même document.
Référence pour l'aide à l'utilisation : http://www.w3schools.com/html5/att_link_media.asp
Exemple d'utilisation : voir le code source de cette page...
Testez le comportement avec l'aperçu avant impression de votre navigateur.
Question subsidiaire : faites des feuilles destinées à l'affichage sur un écran plus petit (device-width et device-height) ou qui repositionnent les éléments à chaque changement d'orientation (portrait ou paysage) de l'écran (orientation).
Remarque : vous devrez utiliser des opérateurs logiques pour spécifier plusieurs caractéristiques en même temps.
Faites en sorte que le bloc de menu "s'allonge" lorsque l'on passe la souris dessus.
Définition : Un fragment est un élément ou un sous-arbre constitué par un élément et ses sous-éléments. Lorsque'un fragment est identifié par l'attribut id d'un élément, on peut définir des liens vers ce fragment, plutôt que la totalité de la page qui le contient. Pour cela, il suffit de rajouter le caractère "#" (dièse) à la fin de l'URL, suivi de l'id de l'élément visé. Cela indique au navigateur qu'il doit défiler dans la page pour que cet élément se retrouve en haut de l'écran (si possible).
Exemple : la balise de lien <a href="#css+js"> permet de se positionner dans cette section (voir code source de la page).
Attention : vérifiez bien que les lien entre les différents fichiers ne font pas référence à votre système de fichiers propre.