Bienvenue dans l'activité HTML

Vous êtes chargés de créer un site internet en vous aidant d'un gabarit de départ (fig. 1). Pour le contenu, vous devrez présenter un produit technologique en lien avec la filière STI2D SIN. Avant de créer votre site, vous devrez suivre les activités suivantes.

Présentation de l'activité

Ce travail va vous permettre de découvrir les notions de bases et les principes de la création de pages web. Dans ce TP, vous travaillez en local, c'est à dire qu'il n'y a pas besoin de connexion internet. Votre ordinateur se comporte à la fois en serveur et en client.

Remarque : afin de mettre en ligne votre site internet, vous devez disposer d'un serveur web. Dans ce cas, les fichiers sont copiés dans l'arborescence du serveur (par ftp ou scp). Voir Publication.

Avant de vous lancer dans l'activité, vous devez maîtriser des connaissances autour d'internet. Lire la ressource au format pdf.

Site

Fig.1 : Gabarit du site internet servant de départ à l'activité

Mise en place des outils

Ressources initiales

Télécharger l'archive contenant le gabarit du site internet.

Un dossier nommé « template » (gabarit en anglais) contenant le gabarit de votre site internet constitue votre point de départ. Ce dossier comprend un fichier de lancement de votre site internet « index.html », une ou plusieurs pages du type « page1.html », un fichier de style « style.css » et un dossier pour les images « img ».

Visualisation du site internet (en local)

Ouvrir le fichier « index.html » avec le navigateur Firefox. Visualiser le code HTML correspondant en effectuant un clic droit « code source de la page ».

Site

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <link media="screen" rel="stylesheet" href="style.css" type="text/css" />
    <title>TP HTML</title>
  </head>

  <body>


  <!-- Bloc du menu de navigation -->
    <div id="nav">
      <ul>
        <li id="actif"><a href="index.html">Accueil</a></li>
        <li><a href="page1.html">Menu page 1</a></li>
        <li><a href="page2.html">Menu page 2</a></li>
        <li><a href="page3.html">Menu page 3</a></li>
      </ul>
    </div> <!-- menu -->

    <div id="bandeau"></div>

    <div id="page">   
      <div id="content">
<!-- Début -->



        <h1>Un titre de niveau 1</h1>
        <h2>Titre de niveau 2</h2>
        <p>Voici les options de STI2D, <br />sous la forme d'une liste</p>
        <ul>
          <li>AC</li>
          <li>EE</li>
          <li>SIN</li>
          <li>ITEC</li>
        </ul>


<p class="center">

<img src="img/sti2d.jpg" alt="STI2D" title="Logo STI2D" />
</p>

<!-- Fin -->
      </div> <!-- content -->
      <div id="footer">Philippe LAWRENCE</div>
    </div> <!-- page -->
  </body>
</html>