TP 1 : HTML
Durée : 3 heures
Remarques :
• créer un répertoire : /nfs1/web/«login»/public_html/tp1
• On consulte la page avec un navigateur sur :
[Link]
• Utiliser sublime text ou PHPStorm pour éditer vos fichiers web (HTML, JS, PHP, ...).
Exercice 1 :
rappel : une page html à la structure de base suivante :
<!DOCTYPE>
<html>
<head>
<title>Titre du site</title>
<meta charset=UTF-8"/>
<!--commentaire : description de la page -->
.............à compléter
</head>
<body>
<!--commentaire : contenu de la page-->
................................à compléter
</body>
</html>
Modifier le code ci-dessus pour créer votre page personnelle selon les étapes suivantes :
• Remplacer le titre de la page html par « Page personnelle de « nom prénom» ».
• Ajouter un titre de 1er niveau centré : « prénom nom »
• Ajouter un trait de séparation horizontal
• Ajouter votre photo
• Ajouter un titre de 2nd niveau aligné à gauche : « Mes coordonnées »
• Ajouter vos coordonnées
• Ajouter un trait horizontal
• Créer deux paragraphes ayant la même structure que le paragraphe « Mes coordonnées »
pour afficher des informations concernant vos formations, activités professionnelles et
niveaux en langue selon la figure suivante :
Exercice 2 : Les formulaires
Créer les trois formulaires suivants :
Formulaire 1
Ce formulaire comprend six balises input :
• deux de type « text »
• deux de type « password »
• un de type « file »
• un de type « submit »
Pour le moment l'évènement « submit » n'est pas géré, il faut attendre le cours PHP pour pouvoir
traiter les données envoyées au serveur web.
Les données insérées dans les champs de texte seront validées avec des scripts JavaScript (cf. cours
JavaScript).
La balise « form » doit avoir les attributs « enctype="multipart/form-data" » et « method="post" »
pour pouvoir envoyer correctement au serveur le contenu du fichier chargé.
Formulaire 2
Remarques :
Utiliser la balise « label » pour définir le nom du champ de texte. l'attribut « for » de la
balise « label » doit être égal à l'attribut « id » de la balise « input » correspondante.
Les boutons radio doivent avoir la même valeur pour l'attribut « name » et des valeurs
différentes pour l'attribut « value » pour qu'ils appartiennent au même groupe.
Vous pouvez utiliser la touche « tab » pour passer à l'élément d'insertion de données suivant.
Vous pouvez modifier l'ordre selon lequel le focus passe d'un champs à l'autre en précisant
l'attribut « tabindex » pour chaque champ (c'est utile dans les interfaces, lorsque l'on saisie
beaucoup de valeurs dans un certain ordre). Modifier l'ordre du défilement du focus avec la
touche « tab ».
Utiliser l'attribut « acceskey » pour créer des raccourcis aux champs de texte. Par exemple,
en appuyant sur [Alt,maj(shift)]+m, le focus est mis sur le champs de texte « nom ». Pour
avertir les internautes des raccourcis, on souligne la lettre correspondante dans la balise
« label ». Par exemple pour nom, on utilise le code suivants : no<span style="text-
decoration:underline; "> m</span>
Formulaire 3
La liste déroulante comprend les options suivants : "S1-A", "S1-B", "S2-A", "S2-B", … Utiliser la
balise optgroup pour grouper les groupes par semestre.
Pour les boutons valider et annuler, choisissez des figures sur internet et insérer les après le texte.