Partie HTML TD 6 : Liens hypertexte et formulaires

TD Informatique Semestre 2 : Réseaux - HTML
Université Stendhal, Grenoble III
Partie HTML
TD 6 : Liens hypertexte et formulaires
1. Les liens hypertextes
Ils permettent la navigation dans les sites Web.
Il y a 3 types de liens :
- Les liens internes à un site
- Les liens internes à une page (au moyen d'une ancre)
- Les liens externes vers d'autres sites ou vers une adresse mail
Le lien peut être placé sur du texte ou sur une image.
1.1. Les balises
•
<a href="…"> ………… </a> : crée un lien hypertexte.
Attribut indispensable : "href". Il précise l'adresse de la page de destination du lien qui sera
créé. Cette adresse peut être soit absolue soit relative.
ex : lien placé sur une image et interne à un site:
<a href="autre_page.html"><img src="repertoire/image.gif" alt="Image pour le lien"></a>
autre attribut : target = "blank" Il ouvrira dans une nouvelle fenêtre la page de destination
ex : lien placé sur du texte et externe. La page s'ouvrira dans une nouvelle fenêtre.
<a href=http://www.u-grenoble3.fr/ target="blank">Lien vers l'université</a>
Pour un lien interne à une page, il faut créer une ancre.
−
On crée l'ancre comme ceci : <A name="nom_ancre">Texte</A>
−
On crée le lien vers cet ancre comme ceci : <A href="#nom_ancre">lien vers l'ancre
Texte</A>
Lien vers une ancre d'une autre page du site
<a href="……..page.html#ancre">Lien vers une ancre d'une autre page</a>
Page 1 sur 5
TD Informatique Semestre 2 : Réseaux - HTML
Université Stendhal, Grenoble III
1.2. Exercice de synthèse
Vous allez créer un site rassemblant toutes les pages créées lors des TD précédents obtenant
ainsi VOTRE site de formation sur le langage HTML.
LA PAGE D'ACCUEIL
Il faut donc construire la page d'accueil du site (voir ci-dessous) en donnant au fichier le nom
index.html
Les logos de Stendhal sont sur le site de l'université.
L'image sur fond blanc se nomme livreDechire.jpg (à récupérer sur le poste enseignant)
Le fond de la page est de couleur "palegoldenrod" et le texte est de couleur "marroon"
NAVIGATION DANS LE SITE
Dans la page d'accueil :
Chaque point du sommaire mènera vers le sommet de la page correspondante
Le dernier point du sommaire mènera vers le site suivant, ouvert dans une nouvelle fenêtre :
http://www.creation-de-site.net/tutoriaux/html/
Page 2 sur 5
TD Informatique Semestre 2 : Réseaux - HTML
Université Stendhal, Grenoble III
Dans les pages détails :
En haut ou en bas de la page, une image ramènera à la page d'accueil (voir les images de
navigation dans le site de Stendhal ou sur le site http://www.iconbazaar.com/).
2. Les formulaires
Les formulaires permettent de récupérer des informations saisies par les visiteurs du site,
créant ainsi une certaine interactivité (ex : demande de catalogue, inscription à une vente en ligne,…)
Le webmaster peut récupérer les informations directement sur son adresse email au moyen
d'un "mailto".
2.1. Les balises
•
<FORM>…………</FORM> crée un formulaire
Attributs :
action désigne l'adresse du script qui va traiter les données.
method spécifie la manière dont les données remplies dans le formulaire doivent être
transmises au webmaster.
Enctype ="text/plain" spécifie un type de données texte
Name donne un nom au formulaire permettant son traitement à l'aide de scripts
ex
:
<FORM
Name="coordonnees"
action=mailto:[email protected]
method="POST" enctype="text/plain">………….</FORM>
2.2. Contenu d’un formulaire
•
Champ texte à une seule ligne :
<input type="text" ……….>
Attributs : name donne un nom à l'objet pour permettre un contrôle de validité sur les données
à l'aide d'un script
value donne une valeur par défaut au champ
size donne la largeur du champ texte
maxlength donne le nombre maximum de caractères du champ
ex : Entrez votre prénom : <input type="text" name="prenom" size="20" maxlength="20"
value=" ">
le type peut être "password" pour entrer un mot de passe (les caractères sont alors masqués
par des *)
•
Champ texte à plusieurs lignes :
<textarea name="adresse" rows="3" cols="50">tapez votre adresse ici </textarea>
•
Liste déroulante :
<select name="choix">
<option >choix1></option>
<option selected >choix2></option>
Page 3 sur 5
TD Informatique Semestre 2 : Réseaux - HTML
Université Stendhal, Grenoble III
<option>choix3></option>
</select>
•
Boutons radio :
<input type="radio" name="sexe" value="H">Homme
<input type="radio" name="sexe" value="F">Femme
Pour que les choix des boutons radios d'un même groupe s'excluent mutuellement, il faut
donner le même nom aux boutons radio.
•
Cases à cocher :
<input type="checkbox" name="langue" value="anglais">Anglais
<input type="checkbox" name="langue" value="espagnol">Espagnol
<input type="checkbox" name="langue" value="allemand">Allemand
•
Boutons de commande :
<input type="button" name="lien" value="cliquer ici">
•
Bouton pour envoyer les réponses au formulaire :
<input type="submit" name="envoi" value="envoyer">
•
Bouton pour effacer les réponses dans le formulaire :
<input type="reset" name="raz" value="Effacer les données">
2.3. Exercice de synthèse
Vous allez créer une page, appelée formulaires.html, qui fera apparaître différents formulaires
simples.
La page comprendra 7 parties. Il est conseillé d’aller vérifier dans le navigateur votre travail
entre chaque partie. Pour cela, enregistrez votre fichier avec le bloc-notes et réactualiser la page dans
le navigateur.
Remarque : dans cet exercice, la balise de chaque formulaire ne contiendra pas les attributs
action, method et enctype.
Description de la page à créer :
•
Le fond de la page sera de la couleur "palegoldenrod" et le texte sera "marroon".
•
Le titre de la page sera : Les formulaires
•
un titre de niveau 1, centré : LES FORMULAIRES
•
tous les formulaires crées seront centrés
ère
1 partie : Faire un formulaire avec un champ texte précédé du paragraphe "Voici un champ
texte", un bouton de type submit et un bouton de type reset.
Page 4 sur 5
TD Informatique Semestre 2 : Réseaux - HTML
•
Université Stendhal, Grenoble III
Une ligne séparatrice
ème
2
partie : Faire un formulaire avec un champ texte à plusieurs lignes précédé du
paragraphe "voici un champ texte sur plusieurs lignes"
•
Une ligne séparatrice
ème
3
partie : Faire un formulaire avec une liste déroulante de trois choix quelconques précédée
du paragraphe "voici une liste déroulante"
•
Une ligne séparatrice
ème
4
partie : Faire un formulaire avec deux boutons radio quelconques précédés du
paragraphe "voici deux boutons radio"
•
Une ligne séparatrice
ème
5
partie : Faire un formulaire avec trois cases à cocher quelconques précédées du
paragraphe "voici trois cases à cocher"
•
Une ligne séparatrice
ème
6
partie : Faire un formulaire avec un bouton de commande quelconque précédé du
paragraphe "voici un bouton de commande"
•
Une ligne séparatrice
•
un titre de niveau 1, centré : LES FORMULAIRES PLUS COMPLEXES
ème
7
partie : Un formulaire demandant l'identité de l'utilisateur (nom, prénom, date de
naissance et sexe) présenté sous la forme de votre choix.
Page 5 sur 5