Aller au contenu principal

TP1 - HTML

Objectifs
  1. Comprendre la structure des pages web ;
  2. Manipuler différentes balises.
TP

L'ensemble du TP se fait sur le logiciel Notepad++, téléchargeable ici.

Memento de balises

Un mémento sur les balises à utiliser ainsi que leurs attributs est disponible sur ce lien.

Prise en main de Notepad++ pour le HTML​

Notepad++ est un éditeur de texte : il permet d’écrire du code, mais n’exécute rien tout seul.
C’est le navigateur web (Chrome, Firefox, Edge…) qui affichera le résultat.

  1. Ouvrir Notepad++
  2. Cliquer sur Fichier → Nouveau
  3. Cliquer sur Fichier → Enregistrer sous
  4. Donner un nom au fichier Exemple : page_snt
  5. Chercher dans le menu déroulant Type l’option HyperText Markup Language
  6. Choisir un dossier où vous retrouverez facilement votre fichier
Important

Le fichier doit obligatoirement se terminer par .html.

À retenir
  • Notepad++ sert à écrire le HTML
  • Le navigateur sert à afficher la page
  • Modifier → Enregistrer → Actualiser : c’est la boucle du développeur web

Manipulation de balises simples​

Dossier
  • Créer un dossier nommé Web
  • Dans ce dossier, créer un dossier nommé TP1_HTML
  • Tous les fichiers HTML que vous allez créer dans ce TP doivent être enregistrés dans ce dossier
  1. Créer un fichier HTML et écrire la structure minimale d'une page Web, comprenant les balises <!DOCTYPE html>, <html>, <head>, <title> et <body> (voir partie cours).
  2. Ajouter comme titre "Page SNT".
  3. Ajouter à la page un titre de niveau h1 où il est écrit "Web".
  4. Ajouter à la page un titre de niveau h2 où il est écrit "Moteur de recherche".
  5. Ajouter à la page un titre de niveau h3 où il est écrit "Fonctionnement".
  6. Ajouter une balise paragraphe avec pour texte : "Voici les 3 étapes au fonctionnement d'un moteur de recherche".
  7. Ajouter une balise liste non ordonnée, qui possédera 3 éléments expliquant les étapes du fonctionnement d'un moteur de recherche.
    Liste

    La balise <ul> définit une liste. Pour définir un élément d'une liste, il faut utiliser la balise <li> dans la balise <ul>.

  8. Ajouter à la page un titre de niveau h3 où il est écrit "Différents moteurs".
  9. Ajouter une nouvelle liste où chaque élément contient le nom d'un moteur de recherche, ainsi qu'un lien hypertexte permettant d'accéder au moteur en cliquant dessus.
  10. Ajouter à la page un titre de niveau h2 où il est écrit "Les cookies".
  11. Télécharger cette image et l'ajouter à la page.
    Attention

    Il faut que l'image soit dans le même dossier que la page web sur votre ordinateur.

  12. À l'aide d'un paragraphe, donner une définition pour les cookies en informatique.
À vérifier avant de continuer
  • La page s’affiche sans erreur
  • Les titres sont bien hiérarchisés
  • Les liens sont cliquables
  • L’image s’affiche correctement

Reproduction de pages​

On souhaite créer une page pour le menu d'un restaurant.
La page devra avoir pour titre le nom du restaurant (de votre choix), une image le caractérisant, une liste des horaires d'ouverture, ainsi qu'un tableau contenant le nom des plats, une image, et le prix.

  1. Créer le fichier restaurant.html.
  2. Écrire la structure minimale d'une page Web, comprenant les balises <!DOCTYPE html>, <html>, <head>, <title> et <body> (voir partie cours).
  3. Mettre le titre du restaurant, ainsi que son image.
  4. Rajouter la liste des horaires d'ouverture.
  5. Créer le tableau des plats.
    Tableau

    Un tableau est représenté par la balise <table>.
    Ensuite, on utilise la balise <tr> pour créer une ligne, et dans cette balise, on utilise la balise <td> pour créer une colonne.
    Cela pourrait donner ceci :

    <table>
        <tr>
            <td>Premère ligne, première colonne</td>
            <td>Premère ligne, deuxième colonne</td>
        </tr>
        <tr>
            <td>Deuxième ligne, première colonne</td>
            <td>Deuxième ligne, deuxième colonne</td>
        </tr>
    </table>

Blog​

On souhaite faire un ensemble de page reprenant le concept d'un blog.
Vous pouvez choisir le thème de votre blog.

  1. Créer les fichiers accueil_blog.html, blog1.html et blog2.html.
  2. Écrire la structure minimale dans chacune de ces pages, comprenant les balises <!DOCTYPE html>, <html>, <head>, <title> et <body> (voir partie cours).
  3. Dans le fichier accueil_blog.html :
    • Créer le titre Accueil ;
    • Mettre dans une liste des liens menant à blog1.html et blog2.html ;
    • Créer le contenu que vous voulez sur la page d'accueil.
  4. Pour chacune des pages blog1.html et blog2.html, vous allez écrire un cours article selon votre thème (ex : vous faites un blog sur le foot, vous allez écrire 2 articles sur les dernières actualités) avec :
    • Un titre pour l'article du blog ;
    • Le contenu dans un paragraphe, avec des liens et des images ;
    • À la fin, une date pour l'écriture de l'article, et un auteur.