TP1 - Un peu de HTML

Inès de Courchelle

Durée : 3h

Consignes :

  • Durant ce TD l’utilisation d’un papier et d’un crayon est fortement conseillé !
  • Durant ce TD l’utilisation de la matière grise est fortement conseillée !

Objectifs :

  • Structurer une page HTML
  • Créer sa première page web
  • Comprendre le processus de dev web

Attention :

  • L’ensemble des exercices ci-dessous ne seront pas tous corrigés en cours !
  • Les éléments de correction seront donnés en TD, EN AUCUN CAS, des corrections toutes faites vous serons données ou distribuées. Vous devez prendre des notes !

Exercice 1 : Faisons joujou avec les balises

Nous allons commencer par créer notre première page HTML où nous testerons un certain nombre de balises :

  1. Donnez-lui un titre à l’aide de la balise <title>
  2. Écrivez un peu de contenu.
  3. Agrémentez ce contenu de caractères gras (<b>), italiques (<i>) et soulignés (<u>),de paragraphes (<p>), et de traits horizontaux (<hr>), etc.
  4. Ajoutez des titres de chapitres et de sections (balises <h1>, <h2>, <h3>…).
  1. Récupérez le logo de CYTech, et affichez le sur votre page (<img>).
  2. Créez un lien sur cette image, renvoyant vers le site de CYTech. Vous utiliserez la balise <a> et l’attribut href : CYTech (https://cytech.cyu.fr/).
  3. Testez les différents types de listes, ordonnées (<ol>) ou pas (<ul>).
  4. Créez un tableau, en testant toutes ses possibilités (cases vides, fusion de cellules, etc…). <table>
  5. Amusez-vous avez d’autres balises : explorez les sites W3Schools et HTML- Dog et testez les balises présentées.
  6. Testez vos pages grâce au Validateur de W3C.

Travail attentdu

Exercice 2 : Site de vente de DVD

La société All4DVD loue et vend TOUJOURS des DVDs à des particuliers. Il s’agit d’un négociant important et sa clientèle est essentiellement composée d’étudiants.

Monsieur Blaise, directeur de la société All4DVD souhaite mettre en ligne le catalogue afin d’afficher un peu plus ce qu’il a dans son enseigne. Il souhaite également faire apparaître sur son site le TOP 10 des films les plus loués et vendus, les prochaines sorties, et les informations pour contacter l’entreprise.

Travail attentdu

Voici un exemple de ce à quoi le site ressemblerait. Complétez les données avec les films et séries que vous voulez.