UE8.III - TD algorithmique 1/6

Transcription

1 TD 12.1 HTML Construction de page Web 1- On propose de construire une nouvelle page web. Pour cela, on crée un nouveau document avec le "Bloc-notes" et on saisit les éléments suivants : <h2>un premier test HTML</h2> <hr></hr> <br></br><br></br> Test du vendredi 13 mai 2011 réalisé en salle <b>audio</b>. On enregistre ce document au format HTML. Pour se faire, on va dans "Enregistrer sous" et dans le champ "Nom du fichier", on met exactement : "mapage.html" Le fait de mettre le nom du fichier entre guillemets garantit que celui-ci sera bien enregistré comme un fichier au format html. On va dans le répertoire dans lequel on a enregistré le fichier et on double clic sur le fichier mapage.html. Le document doit normalement être ouvert dans le navigateur et dans le bloc note. Pour l'affichage dans le "Bloc-Notes", on parlera de code source de la page. 2- Dans le On peut alors tenter des modifications : rajouter une ligne de code supplémentaire dans le fichier source : <br></br><a href=" vers google</a> Enregistrer le code source puis actualiser l'affichage du navigateur. Que constate t-on? 3- On procéde de la façon suivante désormais : pour chaque balise ouvrante du document : on supprime cette balise on enregistre le code source on actualise l'affichage du navigateur. on rétablit la balise que l'on a ôtée En faisant cela et en voyant les modifications qui se produisent, expliquer le rôle de chacune des balises qui sont présentes sur le document actuel. 4- Proposer un code source permettant de réaliser l'affichage d'une page contenant au moins 1 titre (balises <h1> ou UE8.III - TD algorithmique 1/6

2 <h2> ou <h3> etc...), une partie de texte en gras (balise <b>), des sauts de ligne (balise <br>), des parties de texte non soulignées et des parties de texte soulignées (balise <u>). Le thème est absolument libre. Balises usuelles Choisir un thème de page quelconque. Ce thème devra juste permettre d'intégrer un tableau et une image dans la page le développant. 5- Créer votre page en mettant un tableau. L'ensemble des instructions qui définissent le tableau doivent être comprises entre <table> et </table>. Pour définir une ligne, on utilise <tr></tr>, pour définir une colonne, on utilise <td></td>. Tester ce qu'affiche ce code : <h2>liste des matières de première année</h2> <table border="1"> <tr><td>matière</td><td>professeur</td><td>examen final</td></tr> <tr><td>economie</td><td>desroinne</td><td>oui</td></tr> <tr><td>comptabilité</td><td>liard</td><td>oui</td></tr> <tr><td>introduction au droit</td><td>giraud</td><td>oui</td></tr> <tr><td>anglais</td><td>lehain</td><td>oui</td></tr> <tr><td>sig</td><td>dorat</td><td>non</td></tr> </table> Expliquer 6- Ajouter un tableau à votre page. 7- Pour ajouter une image, on met cet image dans le répertoire contenant le fichier de la page Web et on ajoute une instruction dans le code source de la page. Par exemple, si le fichier contenant la photo a pour nom maphoto.jpg, on met dans le code source : <img src="maphoto.jpg"></img> A noter que l'on peut jouer sur la taille de la photo affichée : <img src="maphoto.jpg" height=100 width=100 ></img> UE8.III - TD algorithmique 2/6

3 Ajouter une photo à votre page. 8- Faites apparaître des liens sur votre page. 9- Créer une deuxième page. Trouver le code de manière à ce que la première page pointe sur la deuxième, ie de manière à ce qu'il y ait un lien de la page 1 à la page 2. Prévoir également un ligne vers google sur la page. Pour le lien vers google, voir le code de la question 7). Pour le lien vers une page qui est dans le même répertoire et qui s'appelle par exemple mapage2.html, il suffit de faire : <a href="mapage2.html">lien vers la deuxième page du site</a> 10- Que se passe t-il si on place la seconde page dans un répertoire, lorsque l'on clique le lien qui pointe cette page? Modifier le lien de manière à ce que cela fonctionne de nouveau et alors que la deuxième page reste dans le répertoire. C'est le système des liens qui fait que l'on parle d'hyper-texte : toute l'information n'est pas contenue dans un document, mais dans plusieurs reliés par des liens. N'importe qui peut construire un site avec des pages qui référencent de l'information du Net; Balises méta De manière générale, tout ce que l'on a vu jusqu'à maintenant correspond à des instructions décrivant le corps de la page Web. Dans une page bien faite, ce code est compris entre les balises <body> et </body> et la structure globale du document est la suivante : <html> <head> </head> <body> </body> </html> UE8.III - TD algorithmique 3/6

4 Tout le code que l'on a vu jusqu'à maintenant doit se trouver entre les balises <body> et </body>. 11- Voir à partir de pages html récupérées sur le net le type des instructions que l'on peut mettre dans la balise <head>. Quelques exemples suffisent. Mise en ligne et développements complémentaires Pour finir la conception du site et sa mise en ligne, les étapes suivantes se succèdent : On crée le site en local (cf les opérations que l'on vient de voir plus haut) On loue une adresse IP fixe. On installe le serveur qu'on configure avec l'adrese IP fixe publique obtenue. On obtient un nom de domaine (une url) et l'on déclare l'équivalence entre l'adresse IP et l'url. Les serveurs DNS pourront ensuite faire le lien entre l'url et l'ip, c'est à dire indiquer à quelle IP correspond une URL donnée. On met le site sur le serveur. A noter que la procédure est la même si on développe le site sur un serveur qui n'est pas local. Dans ce cas, on updload à distance le site. Découverte du code source d'une page Web 12- Choisir une page Web quelconque et l'afficher dans le navigateur. 13- A partir du menu Affichage, selectionner l'option, "Code Source de la Page" ou "Source". Un code apparaît avec des baslises. Identifier quelques unes des balises qui apparaissent (on pourra éventuellement s'aider du cours HTML pour se remémorer la notion de balise). Retrouve t'on la structure globale d'une page Web telle qu'annoncée dans le cours? 14- On récupère la page en local. Pour se faire, alors que la page est affichée dans le navigateur, on "Enregistre sous" à l'emplacement désiré. Combien de fichiers sont téléchargés lorsque l'on affiche le répertoire de destination? 15- Tenter d'ouvrir la page web enregistrée localement en double cliquant dessus. Quel logiciel est utlilisé pour ouvrir le fichier. Pourquoi? Quelle est l'extension de la page qui a été téléchargée? UE8.III - TD algorithmique 4/6

5 16- Pour afficher le code source de la page téléchargée en local, on utilise le "Bloc-Notes" de Windows. SOLUTION 1 : on lance l'application "Bloc-Notes", puis on utilise l'item "Fichier - Ouvrir" que l'on applique à la page Web. SOLUTION 2 : on fait un clic droit sur la page web et on utilise l'item "ouvrir avec" Tester les deux solutions. Outils WYSIWYG Il est possible de construire des fichiers html à partir d'éditeur, sans avoir à connaître le code HTML. Cela se fait en utilisant les outils WYSIWYG : "What you see is what you get". 17- On peut par exemple produire un document Word et utiliser la fonction Enregistrer sous avec le format HTML. Ouvrir la page ainsi produite avec le Bloc Note. Que constate t-on pour une simple page? Quelques infos complémentaires De manière générale, pour obtenir une page d'un site, on donne une URL le chemin de la page. Par exemple : Quel fichier est renvoyé lorsque on tape seulement une URL, par exemple En fait, un fichier index est placé sur la racine du serveur. Par défaut, lorsque l'utilisateur saisit cela est interprété comme le fait qu'il demande la page ou ou etc... Le développeur du site a prévu de créer une page index.html ou index.php qui sera la première page accédrée du site. Pour les pages HTML dont on regarde le code source sur les sites, on trouve beaucoup d'autres éléments, beaucoup d'autres instructions qui ne sont pas évoqués ici. En fait, beaucoup du HTML et beaucoup des technologies connexes n'ont pas été évoquées ici : CSS : des feuilles de style qui permettent de donner des règles de mise en forme communes pour l'ensemble des pages d'un site. Javascript : un langage de programmation qui s'exécute sur la machine du client lorsqu'il réceptionne la page et qui permet de rendre la page dynamique (vérification ds valeurs contenues dans les champs des formulaires, animation etc...) UE8.III - TD algorithmique 5/6

6 flash : un langage qui sert à produire des animations PHP et les autres langages de script : s'exécutent sur le serveur lorsque le client demande une page. Ces langages peuvent accéder des bases de données : ils peuvent donc aller vérifier le login correspondant à tel password, enregistrer une commande, aller chercher la photo d'un produit etc... + d'autres technologies que l'on évoque pas ici, les principales technologies sont ci-dessus. Quelques questions finales - QCM Est ce que seules les pages d'extension html sont lisibles par un navigateur? Est ce qu'un fichier html est un fichier texte? Un fichier pdf est un fichier texte. Un serveur peut demander une adresse IP à un serveur DHCP Quelques questions finales - texte Comment introduire un lien vers Google dans une page? HTML est un langage à balises. Quelle est la traduction de balise en anglais? Que signifie l'acronyme HTML? Donner des exemples de balises, et d'attributs de balise (un attribut de balise est un élément tel que att1 ou att2 dans l'instruction suivante : <nombalise att1="val1" att2="val2"><nombalise>) Que signifie le fait d'updloader. Décrire le protole HTTP en quelques mots. UE8.III - TD algorithmique 6/6