Partie HTML TD 6 : Liens hypertexte et formulaires
Transcription
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