TP 1 - HTML/CSS

 

Objectif : Créer une page WEB statique en manipulant le langage HTML et la mise en forme CSS.
Bien comprendre les styles et le positionnement des blocs en CSS.

0. Préparatifs (si le TP se fait en Salle de TP)

  1. Lancer la machine virtuelle (VM) depuis le raccourci sur le bureau (dans le répertoire OMI : VM-Pole-Info)
  2. Vider tout le contenu du répertoire www du dossier Home de la VM
    (voir note explicative ci-après)
  3. Dans le répertoire www
    • créer un répertoire "pages" qui contiendra les pages HTML produites
    • créer un répertoire "images" qui contiendra toutes les images de la page WEB
    • créer un répertoire "styles" qui contiendra les feuilles de styles
  4. A partir du dossier Importer de la VM, sélectionner tous les fichiers du répertoire :
    HEI3_NDC1_TP_CommWEB/TP1/images qui se trouvent dans le dossier  importer de la VM et copier-les dans le répertoire images de www de la VM.
  5. Vérifier et faire en sorte que tous les fichiers soient accessibles en « lecture & écriture » (Sélectionner tous les fichiers, clic droit sur les fichiers > propriétés > permissions > Accès > Lecture & Ecriture). Cette manipulation supprime le cadenas sur le fichier et vous permet de modifier les fichiers.

IMPORTANT

Le dossier www est le dossier par défaut du serveur WEB.
Lorsque vous lancez le navigateur à l'adresse http://localhost, le serveur WEB "regarde" le contenu du répertoire www.

Si, dans ce dossier www, il existe un fichier par défaut comme index.html, index.php...., celui-ci sera lancé systématiquement.

Si ce fichier par défaut n'existe pas, vous visualiserez alors l'arborescence du contenu du répertoire www

Vous enregistrez donc par la suite, dans ce dossier www, tous les fichiers WEB que vous créerez ainsi que les éléments attachés s'ils existent (images, photos,...)

0. Préparatifs (si le TP se fait sur https://tponline.hei.fr)

  1. Via un navigateur (Chrome ou Firefox) connectez-vous à une machine virtuelle du site https://tponline.hei.fr
  2. Vérifier que le répertoire etudiant du raccourci Home présent sur le bureau de la VM est vide
    (voir note explicative ci-après)
  3. Dans le répertoire etudiant
    • créer un répertoire "pages" qui contiendra les pages HTML produites
    • créer un répertoire "images" qui contiendra toutes les images de la page WEB
    • créer un répertoire "styles" qui contiendra les feuilles de styles
  4. A partir du dossier input du raccourci Home présent sur le bureau de la VM, sélectionner tous les fichiers et copier-les dans le répertoire images de etudiant dans la VM.
  5. Vérifier et faire en sorte que tous les fichiers soient accessibles en « lecture & écriture » (Sélectionner tous les fichiers, clic droit sur les fichiers > propriétés > permissions > Accès > Lecture & Ecriture). Cette manipulation supprime le cadenas sur le fichier et vous permet de modifier les fichiers.

IMPORTANT

Le dossier etudiant du raccourci Home est le dossier etudiant du serveur WEB.
Lorsque vous lancez le navigateur à l'adresse http://localhost/etudiant, le serveur WEB "regarde" le contenu de ce répertoire.

Si, dans ce dossier etudiant, il existe un fichier par défaut comme index.html, index.php...., celui-ci sera lancé systématiquement.

Si ce fichier par défaut n'existe pas, vous visualiserez alors l'arborescence du contenu du répertoire etudiant

Vous enregistrez donc par la suite, dans ce dossier etudiant, tous les fichiers WEB que vous créerez ainsi que les éléments attachés s'ils existent (images, photos,...)

1. Structure de la page HTML

ATTENTION :

Fichier index.html à créer et à compléter :

<!DOCTYPE html>
<html>

<head>
  <title>...</title>
</head>

<body>
	
		<div id="bloc_page">

			<header>    			

				... A COMPLETER ...

			</header>  <!-- fin header -->
		
			<div id="banniere_image">

				... A COMPLETER ...

			</div>  <!-- fin div banniere_image -->
    
			... A COMPLETER ...

		</div>  <!-- fin bloc_page -->

</body>

</html>

2. Contenu de la page HTML

Les images ont été placées dans le répertoire images

 

La suite du TP s'intéresse maintenant à la mise en forme du contenu créé et du positionnement des blocs

Le schéma ci-dessous montre globalement comment seront positionnés les blocs dans la page WEB.

3. Mise en forme du contenu et positionnement

Le but est maintenant de compléter la feuille de styles pour réaliser la charte graphique du site (mise en forme du contenu et positionnement)

Créer tous les styles suivants (aidez-vous de l'annexe CSS du site)

Styles principaux

En-tête

Liens de navigation

La banniere_image

Le corps (<section>)

Le pied de page (<footer>)

4. Liens

5. Résultat final

6. Barème de correction

Ci-dessous le barème des points attribués par question.

La note tiendra compte de la "propreté" du code à savoir le respect des indentations, les commentaires utiles à la compréhension, l'organisation de la structure du site et la justesse des réponses attendues

Partie Points
1. Structure de la page HTML

2
2. Contenu 7

3. Mise en forme du contenu et positionnement

  • Styles principaux,
  • En-tête,
  • Liens de navigation,
  • bannière image,
  • le corps <section>,
  • Le pied de page <footer>.
 9

4. Liens (images, Photos)

 2