Ceci est une ancienne révision du document !
Premier site en HTML
Présentation
But
Découvrir le HTML qui est le langage de base des sites internet. Pour cela, créer la structure minimale d'un site web en réalisant une page d'accueil et 3 pages de contenu.
Connaissances de base
Activité
Créer un site qui doit parler, d'une passion, d'une collection …, se déclinant sur plusieurs pages (exemples. jeux vidéo, d'équipe de foot, de motos …). Pour débuter, nous nous limiterons à une page d'accueil et 3 pages de contenu.
Déroulement
Les différents fichiers
La page d'accueil doit toujours être enregistrée avec le nom “index.html”. Les autres pages peuvent avoir n'importe quel nom (sans espaces, accents et caractères spéciaux) terminé par “.html”. Pour nous se sera : page1.html, page2.html et page3.html.
Les pages
HTML seront d’abord utilisées en mode local. Nous les enregistrerons donc dans un dossier “1er_site” sur notre clé USB.
Les images seront dans un sous dossiers “images”.
Dans les pages web, les liens sont relatifs au fichier courant ex. <a href=“page1.html”> ou <img src=“images/img1.jpeg” />.
Les nouvelles balises
Les listes
Il existe des listes non ordonnées <UL> et ordonnées/numérotées <OL>. Chaque élément de la liste figure dans une balise <LI>.
Passer à la ligne
Les paragraphes sont séparés avec un espacement mais le texte à l'intérieur est écrit en continu. Pour forcer un passage à la ligne dans un paragraphe, il faut utiliser la balise <BR />. La balise <HR /> provoque un passage en dessous d'une ligne horizontale.
Les mises en évidences
Certaines parties de texte peuvent être mises en évidences comme les citations <CITE>, des parties importantes <STRONG>, <EM>, <MARK> … (ATTENTION à ne pas en abuser ni confondre avec les mises en forme CSS.)
Contenu de la page d'accueil
Un titre pour la collection <H1>
Un menu vers les autres pages. Liste d'items <UL> dont chaque ligne <LI> pointe vers une autre page <A>.
Une présentation/description sommaire du contenu de la collection <P> pouvant contenir des passages à la ligne <BR/>
Une présentation sommaire de l'auteur du site et de ses motivations <P> pouvant contenir des passages à la ligne <BR/>
Contenu des autres pages
Le titre de la collection <H1> comprenant un lien vers de retour vers la page d'accueil <A>
Un titre pour la page <H2>
Un texte pour la description <P> pouvant contenir des passages à la ligne <BR/>
Une image <IMG>
La citation de la source des informations et/ou de l'image <CITE>
Exemple
Coup de pouce
Mon exemple va porter sur des présentations de ponts. Les images sont récupérées sur le site “Wikipédia” et renommées en “pontx.jpg”.
Code des page
- index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ponts du monde</title>
</head>
<body>
<h1>Ponts du monde</h1>
<p>Ce site présente les pont les plus remarquables dans le monde. Il est destiné à s'agrandir en fonction de mon temps et de mes connaissances en programmation de site.</p>
<h2>Liste des ponts</h2>
<ul>
<li><a href="page1.html">Le viaduc de Millau</a></li>
<li><a href="page2.html">Le viaduc de Gavarnie</a></li>
<li><a href="page3.html">Le Royal Gorge Bridge</a></li>
</ul>
</body>
</html>
- page1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Ponts du monde</title>
</head>
<body>
<a href='index.html'><input type='button' value='Retour' /></a>
<h1>Le viaduc de Millau</h1>
<img class='grandeimg' src='images/pont_1.jpg' alt='Viaduc de Millau' />
<p class='lieu'>Lieu : Millau (Aveyron France)</p>
<p class='categorie'>Catégorie : Pont haubans - Béton et métal</p>
<p>.</p>
<p class='description'>Le viaduc de Millau est un pont à haubans franchissant la vallée du Tarn, dans le département de l'Aveyron, en France. Portant l’autoroute A75, il assure la jonction entre le Causse Rouge et le Causse du Larzac en franchissant une brèche de 2460 mètres de longueur et de 343 mètres de profondeur au point le plus haut, dans un panorama de grande qualité et avec des vents susceptibles de souffler à plus de 200 km/h.</p>
</body>
</html>
- page2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Ponts du monde</title>
</head>
<body>
<a href='index.html'><input type='button' value='Retour' /></a>
<h1>Le viaduc de Garabit </h1>
<img class='grandeimg' src='images/pont_2.jpg' alt='Viaduc de Garabit' />
<p class='lieu'>Lieu : (Cantal France)</p>
<p class='categorie'>Catégorie : Pont en arc - Métal</p>
<p>.</p>
<p class='description'>Le viaduc de Garabit est un viaduc ferroviaire français, ouvrage d'art de la ligne de Béziers à Neussargues (dite aussi ligne des Causses), permettant le franchissement des gorges de la Truyère. Il est situé sur le territoire des communes de Ruynes-en-Margeride et Val d'Arcomie dans le département du Cantal en région Auvergne-Rhône-Alpes. Ce viaduc est un projet de l'ingénieur des ponts et chaussées Léon Boyer qui en a confié la finalisation et la réalisation à Gustave Eiffel et sa société. Le chantier de sa construction ouvert en janvier 1880 se termine en septembre 1884 et sa mise en service est effectuée en 1888 par la Compagnie des chemins de fer du Midi et du Canal latéral à la Garonne concessionnaire de la ligne. Cet ambitieux ouvrage métallique, long de 565 m, qui culmine à 122 m au-dessus de la rivière, est alors le « plus haut viaduc du monde ».</p>
</body>
</html>
- page3.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Ponts du monde</title>
</head>
<body>
<a href='index.html'><input type='button' value='Retour' /></a>
<h1>Le Royal Gorge Bridge</h1>
<img class='grandeimg' src='images/pont_3.jpg' alt='Royal Gorge Bridge' />
<p class='lieu'>Lieu : (Colorado - État-Unis)</p>
<p class='categorie'>Catégorie : Pont suspendu - Métal</p>
<p>.</p>
<p class='description'>Le Royal Gorge Bridge est un pont suspendu près de la ville de Cañon City (État du Colorado, États-Unis) qui surplombe la rivière Arkansas. La construction du pont a commencé le 5 juin 1929, et s'est terminée en novembre. La faible largeur du pont (5 mètres) n'autorise qu'une voie de circulation, le site est devenu une attraction touristique et seuls des véhicules de service sont maintenant autorisés à le franchir. Le tablier est constitué de 1000 traverses en bois. Avec une hauteur maximum de 291 mètres entre la chaussée et la rivière, le Royal Gorge Bridge fut le pont le plus haut du monde de 1929 jusqu'en 2001, record actuellement détenu par le pont Siduhe en Chine avec une hauteur libre de 496 mètres. En comparaison, la chaussée du viaduc de Millau est à 277 mètres maximum au-dessus du Tarn. Ce dernier contient cependant les piles les plus hautes du monde, avec 343 m, contre seulement 46 m pour les pylônes du Royal Gorge Bridge.</p>
</body>
</html>
Inconvénients et amélioration
La mise en forme de la page est limitée. Les images n'ont pas toujours la même taille. Le texte n'a pas de mise en forme particulière.
Les pages des différents ponts sont récrite à chaque fois et plus de la moitié du code est identique
Le menu de la page d'accueil doit être modifié à chaque nouvelle page d'un pont et il n'est pas possible de sélectionner les ponts par pays ou catégorie …
Pour cela nous allons voir :
le
CSS qui va améliorer la mise en forme.
le
PHP qui va simplifier la création des pages répétitives et les rendre dynamiques (ajouts d'informations spécifiques au visiteurs ou à la visite.
Dans un premier temps, nous allons modifier ce site en premier site avec CSS pour utiliser des mises en forme.
