5: Exercice libre : pages en HTML

Maintenant, on va mettre tout ça en pratique.

Créez trois pages HTML dans le répertoire ~/public_html/tp1/ :

  • accueil.html
  • musique.html
  • liens.html

⚠ Attention à l'endroit où vous allez sauvegarder vos fichiers. La meilleure disposition, à ce stade, est que tous les fichiers soient dans le même répertoire. Vérifiez bien pour la sauvegarde de vos images, pour les fichiers que vous visualisez, pour les éditeurs texte pour les fichiers.

Utilisez la structure suivante pour chacune des pages:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title>...</title>    
  </head>
  <body>
     ....
  </body>
</html>

et ajoutez votre contenu à l'intérieur de <body>...</body>

accueil.html

  1. allez sur http://images.google.fr/ , recherchez une image
  2. enregistrez l'image et déplacez-là dans le même répertoire que accueil.html. Pour enregistrer une image que vous trouvez sur le web, cliquez sur l'image avec le bouton droit et sélectionnez "Enregistrer l'image sous..."
  3. rajoutez une balise img dans accueil.html faisant référence à l'image
  4. vérifiez que l'image s'affiche bien
  5. ajoutez un peu de texte dans la page et des liens vers les pages musique.html et liens.html
  6. essayez toutes les balises qu'on a vues : strong, br, hr
  7. VALIDEZ!

musique.html

  1. ajoutez des liens vers accueil.html et liens.html
  2. ajoutez un peu de texte et une autre image
  3. VALIDEZ!

liens.html

  1. ajoutez des liens vers accueil.html et musique.html
  2. ajoutez un peu de texte
  3. ajoutez des liens vers vos sites webs préférés
  4. VALIDEZ!

Indications:

Les balises a, img, br ne peuvent pas être mises directement dans body. Vous devez les mettre dans un p,h1, h2,...

Pour les URL des images (img) et des liens (a) essayez d'utiliser les noms de fichier (exemple.html) et les URL complètes (http://aquanux/..../exemple.html).

Avertissement: Ce n'est pas parce qu'une image est accessible sur le web qu'il est autorisé de la recopier et de la réutiliser. Il faut forcément l'accord du créateur de l'image (une licence d'utilisation).