docTD : Initiation à la création de sites Web - Jean
download 
Plainte Transcription
TD : Initiation à la création de sites Web - Jean
Université Stendhal - Département Informatique Pédagogique - Copyright Jean-Philippe Pernin TD : Initiation à la création de sites Web OBJECTIFS : • Comprendre la nature des différents composants permettant la création d'un site Web • Comprendre la structure du langage HTML 1 MANIPULATION D'UN FICHIER HTML A L'AIDE D'UN EDITEUR DE TEXTE Copiez les fichiers fournis dans le dossier de votre choix. 1.1 Visualisation d'un document HTML A l'aide du navigateur <Mozilla Firefox>, ouvrez le document <exemple.html> (menu <File> <Open> <Browse>). Cette page Web est très simple. Le travail demandé consiste à modifier et à enrichir progressivement cette page. Dans les manipulations qui suivent, ne fermez pas votre navigateur 1.2 Edition et modification du contenu d'un document HTML Un document HTML est un simple fichier texte obéissant à un certaine syntaxe. On peut donc le modifier avec n'importe quel logiciel traitant du texte simple (Notepad par exemple sous Windows). On peut également utiliser un éditeur de texte avec coloration syntaxique qui permet de mieux visualiser l’organisation du document (tel que Scite ou Notepad++). • Démarrer le logiciel Scite ou NotePad++ et ouvrez le document <exemple.html> de votre disque dur • Consultez successivement la syntaxe du fichier HTML et l'affichage dans le navigateur. Quelles sont les informations que vous retrouvez affichées ? • Réduisez la taille de la fenêtre du navigateur. L'affichage reste-t-il le même ? REMARQUE : HTML n'est pas un format d'affichage de données. C'est un langage de description de données. C'est le navigateur qui a pour rôle d'interpréter le langage HTML et d'assurer l'affichage des données décrites. • A l'aide de Scite ou Notepad++, modifiez le contenu du fichier HTML, en précisant votre nom et votre prénom. Sauvegardez le fichier puis visualisez le résultat produit à l'aide du navigateur. Pour visualiser et prendre en compte les modifications effectuées, pensez à activer le menu <Actualiser> (ou Reload ou Refresh, cela dépend des navigateurs). La touche F5 est également équivalente. HTML permet également de mettre en forme du texte en appliquant un certain nombre d'attributs prédéfinis. Par exemple, si vous voulez mettre en gras votre nom : • Remplacez la ligne : <p>Nom : Ansedeux </p> • Par la ligne suivante : <p style="font-weight:bold">Nom : Ansedeux </p> 1.3 Insertion d'un lien dans un document HTML vers une autre page Toujours à l'aide du bloc-notes, insérez un lien entre le texte <Appuyer ici pour voir les consignes> et une autre page HTML appelée <Consigne.htm>. Pour faire cette opération : • Remplacez la ligne : <p>Appuyer ici pour voir les consignes</p> • Par la ligne suivante : <p><a href="consigne.htm">Appuyer ici pour voir les consignes </a> </p> • Sauvegardez le fichier puis visualisez le résultat produit à l'aide du navigateur. Vérifiez la création du lien en cliquant sur le texte <Appuyer ici pour voir les consignes> 1.4 Insertion d'un lien au sein d’une même page Toujours à l'aide du bloc-notes, insérez un lien pour réaliser un lien interne à la page. Pour faire cette opération : • Juste au dessous de la ligne <BODY> ajouter -1/4- Université Stendhal - Département Informatique Pédagogique - Copyright Jean-Philippe Pernin <a name="debut"> • Juste avant la ligne </BODY> (à la fin du document), ajouter la ligne <p><a href="#debut">Haut de la page </a> </p> • Sauvegardez le fichier puis visualisez le résultat produit à l'aide du navigateur. Vérifiez la création du lien en cliquant sur le texte <Appuyer ici pour voir les consignes> 1.5 Insertion d'une image dans un document HTML Le langage HTML permet d'incorporer dans une page, des ressources autres que du simple texte. En particulier, il est possible d'intégrer des images à la condition qu'elles soient codées sous un format acceptable par les navigateurs (format GIF et format JPEG). • A l'aide du Bloc-notes, modifiez le contenu du fichier HTML, en insérant un image à la suite du texte <Ma photo préférée>. • Ajoutez après la ligne : <p>Ma photo préferée :</p> la ligne suivante : <p><img src="photo1.gif"></p> • Sauvegardez le fichier puis visualisez le résultat produit à l'aide du navigateur. 1.6 Insertion d'un son dans un document HTML Le langage HTML permet d'incorporer un son dans une page. Il faut pour cela que le son soit codé dans un format reconnu par tous les navigateurs (le format MP3 en particulier) • A l'aide de Scite, modifiez le contenu du fichier HTML, en insérant un son à la suite du texte < Mon morceau de musique préféré>. • Ajoutez après la ligne : <p>Mon morceau de musique préféré</p> la ligne suivante : <a href="musique.mp3">Cliquer ici</a> • Sauvegardez le fichier puis visualisez le résultat produit à l'aide du navigateur. 1.7 Résumé sur HTML HTML est un langage permettant de décrire des données affichables sous forme de page par un navigateur Web. • HTML peut être édité à l'aide de n'importe quel traitement de texte. Il doit être sauvegardé en tant que texte seul. • HTML permet de mettre en forme du texte selon des normes prédéfinies • HTML permet d'établir des liens de navigation entre plusieurs pages Web • HTML est également un langage d'intégration. Il permet, à l'aide de commandes spécialisées, d'incorporer des éléments non purement textuels (graphismes mais également formulaires, programmes interactifs, animations, etc.) • HTML seul ne permet pas d'intégrer directement un son dans une page. Il ne permet que de faire un "lien" vers une nouvelle page dans laquelle le son sera lu avec un programme spécifique ou "player son" propre à votre ordinateur. De plus, tous les postes utilisateurs n'ont pas les mêmes players sons (Quicktime, Windows MediaPlayer, Real Player, etc.). Pour intégrer efficacement un son dans une page web, il faudra utiliser un mécanisme plus complexe en intégrant un lecteur Flash dans notre page. (voir plus bas) -2/4- Université Stendhal - Département Informatique Pédagogique - Copyright Jean-Philippe Pernin 2 LES PRINCIPALES BALISES 1. L’organisation d’une page HTML Une page HTML est toujours organisée en deux sections imbriquées entre les balises <HTML> et </HTML> : la section HEAD précise l’entête du fichier La section BODY définit le contenu de la page à afficher Travail demandé : remplir avec vos données propres l’intérieur des balises <TITLE> et <BODY> Code HTML à tester Vos remarques, questions, réflexions, corrections Cette première ligne est indispensable pour que le <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" document soit reconnu par tous les navigateurs. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <HTML> <HEAD> <TITLE> </TITLE> </HEAD> <BODY> </BODY> </HTML> 2. L’utilisation de styles HTML permet de définir les styles suivants le style <P> permet de définir un paragraphe les styles <H1>, <H2>, …<H6> permettent de définir des niveaux de titre du plus élevé au moins élevé. Travail demandé Utiliser les styles H1, H2, P pour obtenir le résultat suivant 3. L’utilisation des listes HTML permet de définir des listes Une liste numérotée est délimtée par les balises <OL> et </OL>. Entre ces balises, chaque élément de la liste est repéré par la balise LI Une liste non numérotée est délimtée par les balises <UL> et </UL>. Entre ces balises, chaque élément de la liste est repéré par la balise LI Travail demandé Transformez l’exemple ci-dessous pour obtenir le résultat suivant Code HTML à tester ou modifier Vos remarques, questions, réflexions, corrections <ol> <li>Nom : Ansedeux</li> <li>Prénom : Lise</li> -3/4- Université Stendhal - Département Informatique Pédagogique - Copyright Jean-Philippe Pernin <li>Etudiante en Langues</li> </ol> <hr> <ul> <li>Nom : Beyle</li> <li>Prénom : Henri</li> <li>Ecrivain</li> </ul> 3 3.1 L'INTEGRATION DES SONS ET DE VIDEOS DANS UNE PAGE HTML Le son : lecteur dewplayer Nous avons vu plus haut qu'un simple lien n'était pas suffisant pour intégrer un son correctement au sein d'une page HTML. Pour être plus facilement lu au sein de votre page, le document sonore doit être au format MP3. Pour lire ce fichier, il est recommandé d'utiliser un lecteur Flash "léger", qui va être reconnu sans problème par la très grande majorité des navigateurs. Par exemple, le lecteur dewplayer.swf permet spécifiquement de lire les sons en occupant un mimimum d'espace mémoire (12 k0). Le lecteur se présente en plusieurs versions (mini, normal, multi et playlist). Pour télécharger toutes les versions de dewplayer dans un seul format ZIP et accéder à la documentation http://www.alsacreations.fr/dewplayer Voir aussi le document fourni. 3.2 La vidéo : lecteur flv-player Pour être plus facilement lu au sein de votre page, le document vidéo doit être au format FLV. Pour lire ce fichier, il est recommandé d'utiliser un lecteur Flash "léger", qui va être reconnu sans problème par la très grande majorité des navigateurs. Par exemple, le lecteur flv-player permet spécifiquement de lire les vidéos en occupant un minimum d'espace mémoire (16 k0). Le lecteur se présente en plusieurs versions (mini, maxi et multi). Pour télécharger toutes les versions de flv-player et accéder à la documentation http://flv-player.net/fr/ Voir aussi le document fourni. 4 GESTION DE LIENS COMPLEXES AU SEIN D'UN ARBORESCENCE On vous fournit l'arborescence suivante. Le travail demandé consiste à créer des liens vers des images, des sons ou des vidéos, SANS CHANGER DE PLACE AUCUN FICHIER. Les liens sont indiqués dans chacun des fichiers html fournis. La page d'accueil du site se nomme <index.html> NOTE : On prendra soin de : Utiliser les balises H1….H6, P, HR pour rendre votre page lisible produire un code HTML lisible remplir la partie header et donner un titre à votre page -4/4-
