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) OU BIEN avec l'éditeur VisualStudio Code (téléchargable ici).

Memento de balises

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

Manipulation de balises simples​

  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, 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 hyperlien 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

    Le mieux serait que l'image soit au même endroit que la page web sur votre ordinateur.

  12. À l'aide d'un paragraphe, donner une définition pour les cookies en informatique.

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.