Langages de développement Web - TP 1, 2 et 3


Initiation HTML

Ce premier TP a pour objectif de vous familiariser avec les balises HTML de base et leur utilisation pour la mise en page de documents.

Un bon exercice est de représenter dans une page HTML, une journée de la semaine de votre emploi du temps (autre que le samedi et le dimanche bien entendu). Pour ceci, nous vous demanderons d'utiliser des outils de mise en page tels que les tableaux (<TABLE>) ou encore les blocs (<DIV>).

En cliquant sur cette adresse A mettre à jour.html, vous trouverez toutes les informations nécessaires au développement HTML comme par exemple, un descriptif détaillé des différentes options possibles pour le tag <DIV>.

Une fois cette première étape accomplie, nous vous demandons de réaliser une vue globale de votre emploi du temps sur une semaine comme ci-dessous.

Utilisation des feuilles de style

Classiquement en développement WEB, il est conseillé d'utiliser des feuilles de styles pour gérer la mise en page d'un site internet. En effet, il est possible de centraliser dans un seul fichier différentes configurations pour, par exemple, une cellule de tableau. L'avantage principal est que, si pour une raison ou pour une autre, vous décidez de changer par exemple la police de vos titres ainsi que leur couleur, seuls quelques champs sont à modifier dans votre feuille de style et ainsi ce changement est propagé sur l'intégralité de vos pages utilisant cette feuille de style. Vous trouverez de plus amples détails dans le tutoriel HTML situé à l'adresse A mettre à jour .

Nous vous demandons de définir différents styles pour représenter un ordre d'importance relatif à vos cours. Par exemple,

Libre à vous de déterminer les différentes catégories.

Les formulaires

Les formulaires sont très appréciés voire indispensables pour la saisie et le traitement d'informations sur le WEB. Nous verrons dans les TP suivants qu'en PHP, nous pourrons récupérer les données saisies par un utilisateur et les stocker ou les traiter directement. Pour le moment, nous nous intéressons juste à créer une page de login demandant à un utilisateur de saisir son nom ainsi que son mot de passe. Bien-sûr, il est indispensable que le mot de passe n'apparaissent pas noir sur blanc à l'intérieur du champ de saisie. Nous vous conseillons de consulter le tutoriel pour découvrir toutes les subtilités ainsi que les possibilités offertes par les formulaires.

En guise d'apéritif pour votre projet à venir, nous vous proposons de réaliser le formulaire ci-dessous.

Les contraintes sont les suivantes :

Notez que ce qui est valable pour les rendez vous l'est aussi pour les évènements.