| Les deux révisions précédentes
Révision précédente
Prochaine révision
|
Révision précédente
|
clubinfo:premier_site_en_html [2023/07/15 21:48]
mrcjl [Exemple] |
— (Version actuelle) |
| ====== 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 ==== | |
| Revoir le cours [[clubinfo:HTML]] | |
| |
| ==== 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" />. | |
| |
| <WRAP round tip> | |
| ====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.) | |
| </WRAP> | |
| |
| ===Les différentes catégories d'informations ou de mises en forme=== | |
| 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 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 ou plusieurs mot(s) catégorisé(s) pour classifier nos pages (ex. par pays, équipes, marques ...) //class="..."// | |
| * 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===== | |
| {{:cours:cp.png?20 |}}++++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 ===== | |
| <code html 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> | |
| </code> | |
| |
| <code 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</source> | |
| </body> | |
| </html> | |
| </code> | |
| |
| <code 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</source> | |
| </body> | |
| </html> | |
| </code> | |
| |
| <code 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</source> | |
| </body> | |
| </html> | |
| </code> | |
| ++++ | |
| |
| <WRAP round download> | |
| * {{ :clubinfo:1er_site.zip |Le 1er site}} | |
| </WRAP> | |
| ===== 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. | |
| |
| |
