Premier TD sur le langage HTML

TP de base sur HTML

Objectifs

Pré-requis : utilisation d'un navigateur

A faire

Exercice 1 :

Construire une page HTML avec une entête et un corps de document, contenant

Méthode

  1. Ouvrir cette page dans le navigateur Mozilla
  2. Dans le menu Affichage (ou View en anglais), demander à voir le "code Source"
  3. Lorsque la fenêtre de code source est la fenêtre active (celle du dessus), dans le menu Fichier (ou File en anglais), choisir le sous-menu Nouveau puis Composer
  4. Dans la fenêtre du "composer", essayer les différents types d'affichage (onglets proposés en bas de la fenêtre), et s'arrêter sur l'onglet "Source"
  5. Travailler sur ce type d'affichage pour faire des essais
  6. Sauvegarder localement votre document de travail dans un fichier
  7. Tester votre fichier dans plusieurs navigateurs (Mozilla, Internet explorer, Safari, Firefox...)

Exercice 2 :

Contruire plusieurs pages qui se renvoient les unes aux autres. Pour cela, vous devez

  • Récupérer un code et les faire marcher localement. Les pages à récupérées sont celles-ci.
  • Créer un dossier et mettre dedans une copie de votre fichier de tests et une image
  • Continuer de faire évoluer votre page initiale et sa copie en utilisant les balises
    • <img>, avec l'attribut src et d'autres attributs appropriés (à vous d'en trouver)
    • <a>, avec les attributs href, target,name,
    • <img> et <map> avec les attributs appropriés
  • Vous devez en particulier mettre un lien de retour dans les pages 1 et 2 qui s'appuient respectivement
    • pour la page 1 sur une texte
    • pour la page 2 sur une image

Vous pouvez

Plus...

Pour aller plus loin, vous pouvez essayer d'utiliser des "frames" (voir ../materiel/Navigation ).

Conseils d'organisation

  • Travailler localement,
  • mais sauvegarder systématiquement vos travaux sur le serveur de l'école en fin de séance

A me rendre (note)

Pour le vendredi de la fin de la semaine courante :

  • faire un Compte Rendu de TP qui
    • résume en quelques lignes ce qu'est le langage HTML
    • décrit la "syntaxe" d'une balise (balise ouvrante et fermante, balise simple ou balise unaire, attributs et valeurs)
    • explique ce qu'est un arbre du document
    • liste des différentes balises testées et décrit ce qu'elles font
    • décrit les attributs de la balise <a>
    • fait la différence entre les termes : ancre, lien interne et externe, lien relatif et absolu
    • explique comment on insère une image

    et éventuellement si vous avez eu le temps de les utiliser

    • explique ce qu'est une "frame" (mot anglais) et comment on en utilise
    • explique ce qu'est une "map" (mot anglais) et comment on en utilise
  • faire un dossier zippé avec vos travaux
  • le nommer avec votre nom de famille (deux noms si par binome)
  • et me l'envoyer en courrier électronique

Les exercices sont à terminer pendant la semaine, avant la prochaine séance