Vous êtes sur la page 1sur 5

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

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.

<a href="…"> ………… </a> : crée un lien hypertexte.

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>

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"

et le texte est de couleur "marroon" NAVIGATION DANS LE SITE Dans la page d'accueil :

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/

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:adresse_email@domaine.com 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>

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

1 èr e 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.

TD Informatique Semestre 2 : Réseaux - HTML

Université Stendhal, Grenoble III

Une ligne séparatrice

2 ème partie

:

Faire un formulaire

avec un champ texte à plusieurs lignes précédé

paragraphe "voici un champ texte sur plusieurs lignes"

Une ligne séparatrice

du

3 ème 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

4 ème partie

:

Faire

un

formulaire

avec

deux

boutons

paragraphe "voici deux boutons radio"

Une ligne séparatrice

radio quelconques précédés

du

5 ème partie : Faire un formulaire avec trois cases à cocher quelconques précédées du paragraphe "voici trois cases à cocher"

Une ligne séparatrice

6 ème 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

7 ème 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.