Rapport du travail pratique

Transcription

1 14/10/2015 Introduction à HTML Rapport du travail pratique Ly Stéphane CLASSE FUTURE INGÉNIEURE

2 Table des matières 1. Introduction Exercices Tableau formulaire Index Excursion Mini-projet Le CSS Le JavaScript Potentiels changements Conclusion. 5 1 sur 5

3 1. Introduction Ce deuxième travail pratique d initiation aux technologies web a pour objectif de nous initier au langage de balisage HTML. Une suite de travaux à réaliser nous est alors proposée afin de nous familiariser avec celui-ci. Les travaux à réaliser étant complémentaires, cela permet une certaine variété dans l utilisation des balises étudiées en cours. De plus, la difficulté des travaux à réaliser étant progressive, on est peu à peu amené à devoir se débrouiller seul afin d arriver à un résultat final satisfaisant. Le but final étant de nous permettre, au travers de ces travaux, de mettre en pratique les connaissances acquises lors de la partie théorique du cours et de découvrir les possibilités et les limites du langage HTML. Cela permet d introduire deux nouveaux outils qui seront très utiles pour le développement d une page web, le CCS et le JavaScript 2. Exercices 2.1. Tableau formulaire Comme premier exercice, nous devons reproduire le tableau suivant, Tableau_formulaire.html : 2 sur 5

4 Cet exercice nous demande tout d abord de mettre en place un tableau avec les 3 balises suivantes : - Ouverture/Fermeture du tableau : <table>... </table> - Ligne de tableau : <tr>... </tr> - Cellule de tableau : <td>... </td> Nous pouvons ensuite spécifier la largeur de l encadrement du tableau et des cellules exprimée, ainsi que l espacement horizontaux et verticaux entre les cellules du tableau à l aide respectivement des options de balise border et cellspacing. Finalement il nous faut fusionner des cellules à la vertical avec l option de balise rowspan. Il nous faut alors changer la couleur des cellules et du texte à avec des balises bgcolor et font color. Maintenant que le tableau est créé, nous pouvons le remplir avec du texte et les différents champs de formulaires vus au cours. Un exercice assez simple qui nous apprend juste à créer un tableau avec des options de balises et à le remplir avec des champs de formulaires standard (zone de texte, bouton, case à cocher, etc.). C est surtout au moment de valider le code que l on s aperçoit que l HTML ne reconnaît pas certaines balises de style, comme la balise bordercolor, il nous faut alors utiliser le CSS pour changer la couleur de la bordure du tableau Index Pour le deuxième exercice, il faut créer un dossier qui contiendra un fichier index.html dans lequel on retrouve notre nom, prénom et photo, ainsi que des informations nous concernant. Ce fichier sert à la fois de fiche de présentation et de sommaire avec une liste de liens qui pointent vers d autres exercices réalisés dans le cadre de ce TP. On introduit ici les balises d image, de liste et de liens hypertextes, ainsi que la notion de chemin relatif. Il s agit ici de faire le lien avec les sous-répertoires et de réussir à faire une bonne présentation du site malgré les limitations liées au langage HTML, la balise <table> n étant pas prévue pour faire de la mise en page à la base Excursion Le troisième exercice consiste à reprendre l exercice 19 et d y rajouter une page formulaire.html qui contiendra un formulaire d inscription à l excursion. Pas de grande difficulté dans cet exercice puisque l on peut simplement reprendre le formulaire d enregistrement de l exercice 30 et l implémenter au site en utilisant l ensemble des balises INPUT présents pour la balise FORM. Cet exercice permet néanmoins de mettre en pratique une certaine variété dans les balises utilisées afin de faire un mini-site à l aspect visuel correct. 3 sur 5

5 2.4. Mini-projet Le quatrième exercice nous demande de créer un mini-site sur un thème qui nous intéresse. La seule contrainte étant que le dossier comporte les éléments suivants : Un fichier index.html dans lequel on comprend le but de votre site (Homepage) avec une (ou plusieurs) images en background, ainsi que des liens qui pointent vers les autres pages. Un fichier contact.html dans lequel il y aura des infos de contact avec un formulaire de contact utilisant l ensemble des INPUT présents pour la balise FORM. Au moins deux autres pages.html, selon la structure de votre mini-site. Au moins une vidéo ou un audio dans votre mini-site. Pour ce dernier exercice, j ai décidé de ne pas me limiter au HTML et d y ajouter une feuille de style externe (CSS) afin de créer un site sur une civilisation qui m attire, l Egypte Antique. J ai donc commencé par l élaboration de la structure du site et de son contenu, ainsi que la réalisation d une feuille de style pour mettre en forme les documents. Il m a alors fallu créer les différentes pages, dont le fichier contact.html avec le formulaire de contact et les sources avec des hyperliens. J ai ensuite pris le temps de faire un menu qui me permettrait de naviguer plus facilement entre les différentes pages. Finalement, j ai ajouté une bannière personnalisé pour présenter mon site, ainsi qu une vidéo d introduction sur la page d accueil. Au final, cet exercice m aura permis de comprendre l importance du langage CSS dans l élaboration d une page web. En effet, si je m étais limité à l HTML je ne pense pas que je serais arrivé à un résultat satisfaisant. Je ne regrette donc pas d avoir pris le temps de faire une feuille de style car, au final, cela m aura permis de gagner en temps et en lisibilité du code. 3. Le CSS Le CSS (abréviation de «Cascading Style Sheets») est un langage de style qui permet de séparer le contenu d un site web (code HTML) de sa présentation (CSS). Le CSS couvre les polices, les couleurs, les marges, les lignes, la hauteur, la largeur, les images d'arrière-plan, les positionnements évolués et bien d'autres choses. L'avantage principal de cette séparation est de faciliter la maintenance du site, c'est-à-dire ses capacités d'évolution dans le temps. On peut également souhaiter : 1) Clarifier le code ou alléger la lecture du code (un code moins brouillon sera plus facile à consulter, donc à étudier, à modifier ou à transmettre à quelqu'un d'autre). 2) Faciliter la modification de la présentation ou du contenu (possibilité de travailler en équipe plus efficacement, par exemple). 3) Uniformiser la présentation sur plusieurs pages (un seul fichier CSS à modifier pour que les changements se répercutent sur l'ensemble du site). 4 sur 5

6 4. Le JavaScript Le JavaScript est un langage de scripts qui permet d'ajouter de l'interactivité aux pages Web. Il est destiné uniquement à s intégrer dans les pages HTML et est, sans aucun doute, un des langages les plus populaires et les plus utilisés sur Internet, surtout qu'il fonctionne sur bon nombre de navigateurs différents. Voici une liste des différentes façons d'ajouter de l'interactivité en JavaScript : Animer du texte et des images Réagir aux événements de la souris Valider des données localement Modifier des éléments XHTML Réaliser des calculs Gérer des menus Détecter le navigateur du visiteur Créer des témoins (cookie) Un des principaux avantages du JavaScript réside dans le fait qu'il est très sécuritaire. En effet, les concepteurs ont empêché toutes opérations qui pourraient s'avérer dangereuses pour la sécurité du visiteur. Par exemple, le vol d'informations, la destruction de fichiers et l'accès à une base de données sont impossibles. De plus, le JavaScript est très avantageux car une très grande majorité des visiteurs acceptent le JavaScript. 5. Potentiels changement Etant déjà un peu familier avec le langage CSS, j ai décidé d utiliser une feuille de style interne pour changer la bordure et la couleur du Tableau_formulaire.html. En effet, la balise bordercolor n étant pas reconnu par le langage HTML, J ai préféré passé directement par le CSS pour éviter d avoir à changer la couleur de chacune des cases du tableau. Le JavaScript aurait été intéressant pour récupérer les valeurs des champs de formulaire, mais autrement je ne trouve pas d autre application utile dans ce cas-là. 6. Conclusion Au final, ce travail pratique sur le langage HTML m aura permis de mieux appréhender les possibilités et les limites de ce langage, ainsi que de mettre en pratique les différentes balises vu lors de la partie théorique du cours. L utilisation du CSS étant parfois nécessaire dans la mise en page d un site web, il est souvent judicieux de séparer le contenu de la présentation. 5 sur 5