Projet HTML

Construction progressive d'un site Web représentant votre CV

L'objectif de ce projet est de se familiariser avec toutes les balises HTML vues en cours. Pour cela, vous allez développer vos propres pages HTML comportant, au minimum, une page personnelle pointant vers un curriculum vitae.

Pour cela, vous utiliserez le bloc-notes de Windows pour taper le code HTML et Netscape et son bouton Recharger pour visualiser le résultat à chaque étape (pensez à enregistrer votre fichier HTML à chaque fois pour que les modifications soient effectives).

Le projet sera fait en séances de TD, étape par étape.

Etape 1

Taper le code HTML d'une page ne contenant qu'un titre dans l'en-tête et quelques mots dans le corps.
Définir les différentes couleurs du document.
Faire apparaître le titre de la page dans le corps du document.
Compléter le texte de la page en utilisant les différentes balises typographiques vues en cours.
Ajouter un lien vers le site de l'université de Nancy 2.
Ajouter un lien pour que l'on puisse vous envoyer un mail depuis cette page.
Faire que ce lien porte sur une image et non plus sur du texte. Vous pourrez pour cela récupérer une image sur le web, par exemple en utilisant le moteur d'images de Google :
http://images.google.fr/.
Créer une nouvelle page HTML pour y placer votre curriculum vitae et un lien vers celui-ci depuis votre page principale.
Cette nouvelle page devra contenir au minimum les sections suivantes : état civil, formation, expérience professionnelle, compétences et divers.
Utiliser les différents types de listes vus en cours pour remplir ces sections.
Créer des liens internes depuis le haut de la page vers chacune de ces sections.
Ajouter une image de fond à vos pages. À nouveau, vous pouvez trouver de telles images sur le web.
Modifier éventuellement les couleurs du texte et des liens pour que votre texte reste lisible sur le fond choisi.
Ajouter des pages à votre convenance et les lier entre elles.

Etape 2 : Tableaux HTML et Images réactives

Tableau complexe

Définir des tableaux plus complexes, par exemple pour la section état civil de votre curriculum vitae.
Utiliser toutes les possibilités vues en cours : définir des cases d'en-tête et des cases de données, changer la couleur de fond des cases, étendre certaines cases sur plusieurs lignes ou plusieurs colonnes, ajuster la taille du tableau et les alignements des cases.
Placer une photo en vis-à-vis du texte grâce au tableau.

Tableau - Titre

Définir un tableau à une seule case contenant un texte quelconque.
Modifier la couleur du fond de ce tableau, ainsi que la couleur du contenu, sa taille et la police utilisée.
Décider de la meilleure apparence de ce tableau, cela en ajustant :
- l'espace entre le contenu de la case et la limite du tableau,
- l'épaisseur des bords du tableau (éventuellement nulle),
- la taille du tableau,
- l'alignement du contenu dans la case.
Utiliser ce style pour redéfinir les titres de section de votre curriculum vitae et, éventuellement, les titres de page.

Tableau - Navigation

Réaliser un tableau à deux colonnes contenant l'ensemble d'un document : la colonne de gauche contiendra le menu permettant d'aller sur d'autres pages, celle de droite présentera le contenu du document lui-même.

Images réactives

Récupérer une image à l'adresse suivante :
http://www.grappa.univ-lille3.fr/~torre/Enseignement/Images/Reactives/
Sauver cette image dans le répertoire de travail et l'inclure dans un document HTML.
Obtenir la taille de l'image en l'ouvrant seule dans Netscape (les dimensions de l'image apparaissent alors dans le bandeau du navigateur).
Définir des zones réactives et associer celles-ci à des adresses quelconques en utilisant les balises et attributs vus en cours.
Vérifier le bon fonctionnement de cette image réactive.

Formulaires

Choisir un thème de votre CV et définir quelques questions sur ce thème à travers un formulaire HTML.
Utiliser les composantes : textes (en ligne ou en région), boutons (à choix unique ou multiple) et listes.
Utiliser les fonctionnalités JavaScript pour rendre réactif votre formulaire

Définition de frames

Réorganiser votre CV en frames :

une page HTML décrivant un menu, par exemple sous forme de liste. Y inclure des liens vers les pages déjà réalisées (page principale, curriculum vitae, etc.) et des liens externes (université, moteurs de rechercher, etc.).
Dans une page séparée, définir un frameset (ce type de page possède une en-tête mais pas de corps, la balise BODY est remplacée par la balise FRAMESET).
Spécifier une frame horizontale en haut pour placer le titre, une frame verticale sur la gauche destinée à recevoir le menu et une dernière frame occupant l'espace restant.
Adapter la taille des différentes zones pour que le résultat soit agréable à regarder (tester la spécification des tailles en pixels et par pourcentage).
Changer la couleur de fond de la page de menu et utiliser la même couleur pour la page de titre.
Tester les liens définis dans le menu. Adapter l'attribut TARGET des balises A en conséquence.
Placer des signets sur quelques unes de vos pages, puis utiliser ces signets.