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.
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 ».
<!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>