TP 1 : HTML

(1)

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 :

http://www-etu.iut-bm.univ-fcomte.fr/~«login»/tp1/«nomPage.html»

• 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>

...à compléter

</head>

<body>

...à 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 1^er niveau centré : « prénom nom »

• Ajouter un trait de séparation horizontal

• Ajouter votre photo

• Ajouter un titre de 2^nd 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 »

(2)

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 :

(3)

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é.

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.

Formulaire 1

Formulaire 2

(4)

 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>

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.

Formulaire 3