| 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 [2017/12/10 12:49]
mrcjl |
— (Version actuelle) |
| ====== Premier site en HTML ====== | |
| |
| ===== But ===== | |
| Découvrir le HTML qui est le langage de base des sites internet. \\ | |
| Créer la structure minimale d'une page web et réaliser une page d'accueil et 3 pages de contenu. | |
| |
| ===== Connaissances de base ===== | |
| |
| ==== Les balises ==== | |
| * Le contenu du site doit être placé entre des balises qui en organise les différentes parties. //**<BALISE_début>Parti du site</BALISE_fin>**// | |
| * Des précisions sur les balises peuvent être données au début //**<BALISE_début attribut='Précision'>**.// | |
| * Parfois, une balise peut ne pas avoir de contenu //**<BALISE_vide />**// | |
| * Il existe des sites expliquant les nombreuses balises, exemple : [[http://www.w3schools.com]] | |
| * Une __indentation__ (décalage du début de la ligne) est utilisé pour faciliter la lecture des balises. | |
| |
| ==== La structure minimale ==== | |
| Une page HTML comprend un entête (informations non affichés à l'écran) et un corps (contenu affiché). \\ L'affichage comporte principalement des titres //<Hx>//, des textes //<P>// et des images //<IMG>//. \\ | |
| On trouve aussi des liens vers d'autres pages //<A href='nouvelle_page'>Lien à cliquer</A>//. \\ | |
| Des commentaires, qui ne seront pas affichés, peuvent être utilisés //<!-- Commentaire -->//. | |
| <code html > | |
| <!DOCTYPE html> <!--Déclaration de la page HTML --> | |
| <html> <!-- Début de page --> | |
| <head> <!-- Début entête --> | |
| <meta charset="UTF-8"> <!-- Codage des caractères (important mais sera vu plus tard) --> | |
| <title>Titre de la page</title> | |
| </head> <!-- Fin de entête --> | |
| <body> <!-- Début du corps --> | |
| <h1>Titre du chapitre le plus haut</h1> | |
| <p>Texte du chapitre</p> | |
| <img src='adresse de image' /> | |
| </body> <!-- Fin du corps --> | |
| </html> <!-- Fin de la page --> | |
| </code> | |
| |
| ===== 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, il y aura une page d'accueil et 3 pages de contenu. | |
| * 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. | |
| * La page d'accueil aura un menu vers les autres pages. Une liste d'item //<UL>// dont chaque ligne //<LI>// pointe vers une autre page. | |
| * Chacune des autres pages a au minimum : | |
| * un lien vers la page d'accueil, | |
| * un titre de chapitre, | |
| * un texte pour indiquer une catégorie (catégorie, pays, type de jeux ...) | |
| * un texte pour la description, | |
| * une image, | |
| |
| Pour préparer les activités suivantes, les pages sont créées dans un dossier "siteHTML" à la racine de votre serveur web. Les images sont dans un sous dossiers "images". | |
| |
| //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> | |
| <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 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> | |
| </code> | |
| |
| <code 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 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> | |
| </code> | |
| |
| <code 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 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> | |
| </code> | |
| |
| ===== 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 (des catégories) n'est pas facile à identifier. ... | |
| * 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 ... | |
| |
| La mise en forme va être améliorée avec le [[CSS]]. Puis la simplification des pages et du menu seront obtenus par le [[PHP]]. Dans un premier temps, nous allons modifier ce site en [[premier site avec CSS]] pour utiliser des mises en forme. | |
| |
| |
