• Votre ordinateur portable doit posséder :
  • un navigateur WEB de votre choix (Edge, IE, FireFox, Chrome, Opéra, Safari, ...)
  • un éditeur de textes. L'éditeur de textes préconisé est le logiciel libre "Sublime Text".
• Pour les utilisateurs Windows, vous devez connaitre comment afficher l'extension des fichiers (Cf. annexe)

• Créer sur votre disque dur un répertoire nommé tdweb

Pour éviter tout problème, placer ce répertoire à la racine de votre disque dur (C:\ pour les utilisateurs windows).
EVITER les noms de répertoires avec des espaces ou contenant des lettres accentuées !!!

• Ouvrir l'éditeur de textes. Créer un nouveau document et enregistrer-le sous le nom accueil.html dans le répertoire tdweb
• Intégrer dans ce document le contenu suivant (en le personnalisant) :
  • la structure générale d’un fichier HTML
  • le titre de la page « Petites Annonces - hxxxxx »¹
  • le jeu de caractères européen « iso-8859-1»
  • un paragraphe contenant votre nom et votre prénom dans le corps de la page.
• Enregistrer les modifications (Touche raccourci : CTRL+S)
• Pour visualiser le résultat sur votre navigateur WEB, deux possibilités:
  • Dans l’explorateur, double-cliquer sur le fichier accueil.html
  • Dans Sublime Text, clic-droit dans l'éditeur et choisir "Open in browser"

_________________
1: mettre votre login HEI

• Créer un nouveau paragraphe à la suite de votre nom-prénom dans lequel vous ajoutez une description rapide du site que vous créez comme : "Bienvenue sur le site de petites annonces. Ce site vous propose de consulter les annonces, publier une annonce, gérer vos annonces, ... "
• Mettre en forme les contenus de la façon suivante :
  • votre nom-prénom sera en taille +3 , de police Helvetica et centré à l'écran
  • La description du site sera en italique de taille +1
• Modifier le corps du document afin que le fond d’écran soit d'une couleur de votre choix (voir couleur)

• Reprendre la description du site que vous venez de faire pour mettre en évidence, sous forme de liste à puces, les différentes fonctionnalités que propose le site :

  Bienvenue sur le site de petites annonces.
  Ce site vous propose de :

• Consulter les annonces
• Publier une annonce
• Gérer vos annonces
• ...
  
  
• Ajouter à la suite le texte Page créée le : date du jour et séparer ce texte du reste du contenu par une ligne horizontale de dimension égale à 75% de l’écran

• A côté de la date du jour, insérer votre email avec un lien hypertexte ouvrant votre outil de messagerie personnel avec votre adresse comme destinataire du message.
• En dessous de votre nom-prénom, mettre une référence à l'école HEI avec un lien hypertexte ouvrant le site d’HEI « https://www.junia.com/fr/junia/programme-grande-ecole-hei/ » dans une nouvelle fenêtre.

• Créer dans le répertoire tdweb un répertoire nommé images . Ce répertoire contiendra toutes les images que l'on souhaite insérer ultérieurement dans les pages WEB
• Insérer votre photo d'identité dans le répertoire images en la nommant par votre login HEI hxxxxx.yyy ²
  
• Ajouter dans la page WEB la photo d'identité juste après le nom-prénom en lui affectant une largeur de 150 px.
• Visualiser le résultat dans le navigateur

On désire "maintenir" la photo à côté du nom-prénom quelle que soit la largeur du navigateur. Pour cela, la solution rapide est de créer un tableau horizontal à 2 cases dans lequel on va disposer les informations

• Créer un tableau comportant 1 ligne et 2 colonnes d'une largeur de 500px possédant une épaisseur de trait de 1px
• Insérer le paragraphe correspondant à votre nom-prénom dans la 1^ère cellule du tableau.
• Mettre votre photo d'identité dans la seconde cellule du tableau
• Visualiser le résultat dans le navigateur
• Rendre maintenant le tableau invisible avec une épaisseur de trait de 0px
• Récupérer l'image Fond_HEI.jpg ci-dessous et insérer-la dans le répertoire images. Modifier le code HTML pour que cette image apparaisse en fond d’écran à la place de la couleur de fond.
• Récupérer l'image petites-annonces.jpg ci-dessous et insérer-la dans le répertoire images. Dans cette première page Web, insérer cette image avant le tableau en haut à droite en lui fixant une largeur de 200px.

___________________________________________
2 : yyy est le format de l'image : jpg, png, gif, bmp, ...
C'est aussi l'extension des fichiers images sous windows

Images à récupérer :

h99999.jpg	Fond_HEI.jpg	petites-annonces.jpg

• On va modifier le code afin que la page produite apparaisse correctement sur tout poste informatique dans le monde :
  • Modifier le jeu de caractères de la page et utiliser le jeu international Unicode « utf-8 »
  • Corriger en conséquence les caractères accentués afin que la page s’affiche correctement