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. des jeux vidéos, des équipes de foot, des motos …). Pour débuter, nous nous limiterons à une page d'accueil et 3 pages de contenu.
Déroulement
Organisation
Sur notre clé USB (dossier “PortableZMWS\ZMWS\_web.zmwsc”) nous allons :
Enregistrer les pages
HTML dans un sous-dossier “site1_v1”
La page d'accueil doit avoir pour 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 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.jpg” />.
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 ou regrouper
Les paragraphes <P> sont séparés par 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.
Il est possible de regrouper avec la balise <DIV> différentes balises ayant un lien ensembles comme le contenue d'un chapitres.
Par exemple <Div><h2>…</h2><p>…</p><p>…<br />…</p><p>…</p></div>.
Les mises en évidences
Avant l'apparition du CSS, il existait des balises spécifiques à la mise en forme de leur contenu (<U><B><I> …). Elles sont à oublier.
D'autres (comme les titres <Hx>) permettent de décrire un contenu spécifique et sont associées à une mise en forme par défaut. On trouve les citations <CITE>, des parties importantes <STRONG>, <EM>, <MARK> … (ATTENTION à ne pas en abuser et à les associer avec une mises en forme CSS.)
Un type d'information ou de mise en forme peut être défini en utilisant l'attribut class=“categorie” sur une balise. (Nous l'utiliserons pour les mises en forme CSS.)
Contenu de la page d'accueil
Un titre pour la collection <H1>
Un menu/liste 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> suivi par un lien vers de retour vers la page d'accueil <A>
Un titre pour la page <H2>
Un résumé/biographie/classification/… du contenu de la page <P class=“resume”>
La présentation détaillé
<DIV class=“details”> pouvant contenir des paragraphes <P> avec 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>
<h1><a href='index.html'>Ponts du monde</a></h1>
<h2>Le viaduc de Millau</h2>
<p class='lieu'>Lieu : Millau (Aveyron France)</p>
<p class='type'>Type: Pont haubans - Béton et métal</p>
<hr />
<img class='grandeimg' src='images/pont_1.jpg' alt='Viaduc de Millau' />
<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.<br /> Il se situe dans un panorama de grande qualité. Il est susceptibles d'affronter des vents pouvant souffler à plus de 200 km/h.</p>
<cite>Source Wikipédia</cite>
</body>
</html>
- page2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Ponts du monde</title>
</head>
<body>
<h1><a href='index.html'>Ponts du monde</a></h1>
<h2>Le viaduc de Garabit </h2>
<p class='lieu'>Lieu : (Cantal France)</p>
<p class='type'>Type: Pont en arc - Métal</p>
<hr />
<img class='grandeimg' src='images/pont_2.jpg' alt='Viaduc de Garabit' />
<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>
<cite>Source Wikipédia</cite>
</body>
</html>
- page3.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Ponts du monde</title>
</head>
<body>
<h1><a href='index.html'>Ponts du monde</a></h1>
<h2>Le Royal Gorge Bridge</h2>
<p class='lieu'>Lieu : (Colorado - État-Unis)</p>
<p class='categorie'>Catégorie : Pont suspendu - Métal</p>
<hr />
<img class='grandeimg' src='images/pont_3.jpg' alt='Royal Gorge Bridge' />
<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>
<cite>Source Wikipédia</cite>
</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.
Créer un site qui doit parler, d'une passion, d'une collection …, se déclinant sur plusieurs pages (exemples. des jeux vidéos, des équipes de foot, des motos …). Pour débuter, nous nous limiterons à une page d'accueil et 3 pages de contenu.
