CHAP I

INTRODUCTION

HTML = Hyper Texte Mark-up Langage

C'est un langage de description qui utilise des marqueurs et permet de faire de la navigation (lecture non linéaire). Il permet de présenter des documents, ce qui actuellement est banal, mais ces documents seront lisibles sur tout navigateur (enfin presque), quelque soit le système ou l'ordinateur, c'est fondamental. Avec l'HTML vous pourrez être lu par de nombreux systèmes. Après la parole, l'écriture, l'imprimerie, l'informatique permet un pas de plus : permettre à chacun de publier dans le monde entier ! C'est l'HTML qui permet d'avoir des pages Web sur le net.
 

Exemple de code source :

<H2>Voici un titre.</H2>
Votre traitement de textes pose des marqueurs au d&eacute;but et &agrave; la fin de votre s&acute;lection selon votre commande.
Avec HTML vous posez les marqueurs "&agrave; la main", comme ceci : <B> En gras </B> <U> soulign&eacute; </U

Résultat :       Voici un titre.

Votre traitement de textes pose des marqueurs au début et à la fin de votre sélection selon votre commande. Avec HTML vous posez les marqueurs "à la main", comme ceci : En gras Souligné

2. Pourquoi apprendre l'HTML ?

Pour être créateur, et surtout comprendre et apprendre un peu l'informatique

A.  Comment apprendre/enseigner l'informatique ?

C'est comme enseigner l'écriture, il y a beaucoup trop de facettes. Est-ce l'écriture littérale, et dans quelle langue ? L'écriture scientifique avec les mathématiques ? L'écriture artistique avec le dessin ? L'écriture musicale ... ? Enseigner l'informatique c'est enseigner la science de l'information. Avec l'HTML nous avons une approche très facile pour envoyer du code et voir les effets. C'est une petite facette, mais HTML vous rendra plus actif. Comme pour les automobilistes, il y a ceux et celles, qui les utilisent, et ceux qui essaient aussi de comprendre comment ça fonctionne. HTML n'est pas un moteur, mais vous ouvrirez un peu le "capot". Il vous permettra de découvrir une partie de la gestion de l'information par votre machine. En début d'année, les élèves sont perdus, après quelques séances d'une heure, ils savent exploiter bgcolor="#FF001A". Vous verrez comme c'est simple, et c'est d'actualité !

B. Une expérience vécue.

J'ai commencé avec un éditeur HTML commercial, et mon collègue enseignait HTML avec l'éditeur ASCII qui est présent dans toute machine. Au début nos productions "commerciales" écrasaient les ternes résultats des élèves qui "galéraient" avec l'éditeur NotePad. Mais après quelques mois, les vents ont tourné ! Notre éditeur commercial HTML ne respectait pas nos modifications, et nous étions totalement dépendants.
Savoir poser des marqueurs permet de modifier plus facilement, et surtout d'inclure du code JavaScript. Nous étions sur une impasse ils construisaient une autoroute.

c. Un constat.

J'ai été surpris par le nombre de personnes qui utilisent ce cours (2000 le premier mois, 10 000 de Noël à Pâques, 100 000 en un an). Nous sommes nombreux à aimer fabriquer; c'est rassurant pour notre avenir. Sans rejeter la société de consommation, une activité créatrice permet de retrouver un peu d'équilibre. Enfin vous verrez la souplesse de vos codes sources, de votre site, ... et c'est gratuit !
 

3. Conseils

 Il serait mieux de faire un site à la main car ceci vous permet de bien comprendre et de bien maîtriser certains codes HTML.

 *  Un crayon, une feuille de papier et une bonne réflexion restent une excellente méthode pour bâtir l'architecture de votre site. Découpez votre information en pages, en pensant aux liens qui vont permettre la navigation.
*  Attention aux cadres (les frames !) , ils exigent beaucoup de rigueur. Beaucoup se retrouvent avec une pagaille qui rappelle un plat de nouilles nouées par du gruyère bien fondant. Toute modification risque de vous décourager.

CHAP 1

COMPRENDRE LE HTML.

Il serait mieux de faire un site à la main car ceci vous permet de bien comprendre et de bien maîtriser certains codes HTML.

1. Comprendre HTML

Simplement :
HTML est un langage de marqueurs (tags en anglais). Si vous placez le marqueur <B> , tout ce qui suit sera en gras, (bold en anglais). C'est comme si vous aviez changé de crayon. Pour retrouver le texte par défaut, vous pouvez, et devez, arrêter l'effet avec </B>.

Emboîtement :
Il est possible de superposer des effets : gras et italique, la   preuve ! Dans ce cas, respectez la règle : le premier ouvert est le dernier fermé. On emboîte : <b><i>preuve</i></b>

Attributs :
Beaucoup de marqueurs acceptent des attributs. Ce sont eux qui vous donneront les effets que vous souhaitez. Exemple : < FRAME   NORESIZE >

Valeurs :
Presque tous les attributs acceptent des valeurs. Elles permettent de personnaliser votre présentation.
Exemple : < BODY BGCOLOR  = " GREEN     " >  Essayez !
Retenir : < MARQUEUR ATTRIBUT= " VALEUR    " > On dit aussi
        < BALISE ATTRIBUT= " PARAMETRE " >
On ferme le marqueur sans ses attributs. </BODY>
Les attributs sont souvent facultatifs. Certains, comme NAME sont très conseillés voire obligatoires !

2. VOS PREMIERES BASES

A. LES PREPARATIFS

Comme tout autre cours l’apprentissage du HTML demande aussi que certains critères soient bien remplis. C’est alors qu’il faut avoir :

- Matériel nécessaire :


- Compétence nécessaire :


- Méthode proposée :
Nous avons remarqué qu'il est très pratique de travailler avec plusieurs tâches :


- Comment faire ?


ATTENTION : Notez bien le chemin d'accès; il ressemble à    C:\votre chemin\debut.htm
Vous devez taper une adresse (URL) qui ressemble à
file://C:/...votre chemin.../debut.htm ou file://P:/...votre chemin.../debut.htm
Si vous êtes passé par "ouvrir" du menu "Fichier" vous avez :
C:\...votre chemin...\debut.htm

B. DEBUTER UNE PAGE

Pour tout commence d’une page, il recommander de placer des TAGS qui marquerons ou permettrons à votre navigateur de bien présenter la page. Ces tags sont aussi appelés des « Marqueur généreaux » parce qu’ils sont les premiers code qui marque une page.
Voici les code de base qui montre comment sont imbriqués les conteneurs :

<HTML>
<HEAD>
C'est le conteneur de l'entête.
</HEAD>
<BODY>
C'est le conteneur du corps.
C'est ici que nous écrirons.
</BODY>
</HTML>

B.1 Notre première page

Essayons tous ensemble de construire notre première page qui aura comme contenu : « car Dieu a tant aimé ce monde qu’il a donné son fils unique afin que quiconque croit en lui ne périsse point mais qu’il ait la vie pour l’éternité. »
Débutons la page par ses marqueurs généraux : puis écrivons entre les <BODY>…</BODY> notre petit texte. On aura :

<HTML>
<HEAD>
<BODY>
 car Dieu a tant aimé ce monde qu’il a donné son fils unique afin que quiconque croit en lui ne périsse point mais qu’il ait la vie pour l’éternité.
</HEAD>
</BODY>
</HTML>

Enregistrons notre fichier en tant que Adam.html ou Adam.htm.
A retenir car on ne repetera plus ceci au du parcours de ce syllabus.
Pour visualiser vos fichiers, ouvrer votre programme de navigation (Internet Explorer ou Netscape Navigator ) et puis poursuivre comme suit : Fichier…..Ouvrir ( Ctrl+O )…..Parcourir…..selectionner votre fichier……valider……..Ok.

Petit contrôl : - Créer une deuxième page que vous nommerez eve.html ou eve.html
- Créer une troisième page que vous nommerez caïn.html ou caïm.htm avec comme texte le CV suivant.

I    IDENTITE

-Nom    :  CHEM
-Post-nom   :  SHEM
-Prénom   :  CHESHEM
-Lieu de naissance  :  Kinshasa
-Date de naissance  :  Le 28. Juillet. 1984
-Sexe    :  Féminin
-Etat-civil   :  Mariée
-Nationalité   :  Congolaise
-Adresse domicile  :  57, avenue de nos anges N° 57, Quartier HTML, Commune des  Internautes
-Téléphone   :  (243) 98237475  Celtel
- Fax   :           18013836033
-E-mail   :  CHRISTIAN@HOTVOICE.COM

A retenir aussi :

-Vous avez dû remarquer si au moins vous aviez fait votre petit contrôle que HTML ne respecte pas les passages à la ligne. C'est normal, vous devez les marquer avec <br>.

 Si vous tapez :

Que Dieu très haut me bénisse
Je louerai mon Dieu quelque soit les circonstances
vous obtiendrait :
Que Dieu très haut me bénisse Je louerai mon Dieu quelque soit les circonstances
Si vous tapez :
Que Dieu très haut me bénisse<br> Je louerai mon Dieu quelque soit les circonstances
vous obtiendrait :
Que Dieu très haut me bénisse
Je louerai mon Dieu quelque soit les circonstances


- <u> marque le début d'un conteneur dans lequel le contenu sera souligné (Underline). On arrête le soulignement en marquant la fin avec </u>
En général, les mots soulignés sont ceux qui permettent la navigation. Il est donc déconseillé de souligner.

Nous verrons de nombreux marqueurs pour faire des conteneurs. Puisque souligner est à éviter, je vous propose de marquer quelques mots avec <b> (bold), <i>. N'oubliez pas de les fermer ! Après avoir testé <b> et <i> essayez la question suivante :
Comment seront affichés les mots suivants ?
<b>Conteneur1</b>
<i>Conteneur2</i>
<b><i>Conteneur3</i></b> (Italique et gras combines et avec cette méthode vous pouvez faire la combinaison de plusieurs autres marqueurs

Que pensez-vous de <b><i>Conteneur4</b></i> ?
Réponse : Ce type d'emboîtement est à proscrire. Même s'il donne ce qu'on attend : Conteneur4. Car c’est une écriture non conforme à la règle du HTML qui dit : le marqueur qui commence ( qui est  au début d’une écriture ) doit terminer l’écriture

Ex : <b><u><i>vous êtes les élus de Dieu</i></u></b> et non
       <b><u><i>vous êtes les élus de Dieu</b></u></i>

Il existe de plus en plus de méthodes pour éditer des codes sources automatiquement. Les avantages sont le confort et la rapidité, les inconvénients sont la dépendance et la difficulté d'exploiter toutes les possibilités du HTML. Je vous conseille de faire quelques pages à la main afin de comprendre les codes sources que fournissent les nombreux éditeurs modernes. Ainsi vous pourrez prendre le relai quand ils ne seront plus capables d'accomplir vos ambitions.

APPLICATION

1. Placez quelques <br> dans une de vos pages. N'oubliez pas de mettre à jour en enregistrant votre fichier, et en actualisant le navigateur.

2. Ecrire le CV suivant en caractère : gras souligner (pour le titre) et le reste en Italique.

Avant de passer au chapitre suivant, il sera très important de vous donner une liste des balises qui sont souvent les plus utiliser lors des créations. Ceci ne vous est pas donner pour vous en servir comme oreiller mais plutôt pour que vous puissiez les mémoriser et les comprendre tous car il sont d’une importance capitale.
 
 
 
 
Mise en forme des caractères
<B>...</B> Texte en gras
<BIG>...</BIG> Agrandissement de la taille des caractères
<BLINK>...</BLINK> Texte clignotant (Netscape seul)
<EM>...</EM> Texte en italique
<FONT color="#XXXXXX">...</FONT> Texte en couleur oùXXXXXX est une valeur hexadécimale
<FONT size=X>...</FONT> Taille des caractères oùX est une valeur de 1 à 7
<I>...</I> Texte en italique
<NOBR>...</NOBR> Empêche les ruptures automatiquesde ligne des navigateurs
<PRE>...</PRE> Texte préformaté, soit avec affichagede tous les espaces et sauts de ligne
<SMALL>...</SMALL> Réduction de la taille des caractères
<STRONG>...</STRONG> Mise en gras du texte
<SUB>...</SUB> Texte en indice
<SUP>...</SUP> Texte en exposant
<U>...</U> Texte souligné

 
Mise en forme du texte
<!--...--> Commentaire ignoré par le navigateur
<BR> A la ligne
<BLOCKQUOTE>...</BLOCKQUOTE> Citation (introduit un retrait du texte)
<CENTER>...</CENTER> Centre tout élément compris dans le tag
<DIV align=center> ...</DIV> Centre l'élément encadré par le tag
<DIV align=left> ...</DIV> Aligne l'élément à gauche
<DIV align=right> ...</DIV> Aligne l'élément à droite
<Hx>...</Hx><Hx align=center>...</Hx><Hx align=left>...</Hx><Hx align=right>...</Hx> Titre où x a une valeur de 1 à 6Titre centréTitre aligné à gaucheTitre aligné à droite
<P>...</P><P align=center>...</P><P align=left>...</P><P align=right>...</P> Nouveau paragrapheParagraphe centréParagraphe aligné à gaucheParagraphe aligné à droite

 
Liste
<UL><LI></UL> Liste non numérotée (dite à puces)Elément de liste
<OL><LI></OL> Liste numérotéeElément de liste
<DL><DT>...</DT><DD>...</DD></DL> Liste de glossaireTerme de glossaire (sans retrait)Explication du terme (avec retrait)

 
Ligne de séparation
<HR> Trait horizontal (centré par défaut)
<HR width="x%"> Largeur du trait en %
<HR width=x> Largeur du trait en pixels
<HR size=x> Hauteur du trait en pixels
<HR align=center><HR align=left><HR align=right> Trait centré (défaut)Trait aligné à gaucheTrait aligné à droite
<HR noshade> Trait sans effet d'ombrage

 
Hyperliens
<A href="http://...">...</A> Lien vers une page Web
<A href="mailto:...">...</A> Lien vers une adresse eMail
<A href="fichier.htm">...</A> Lien vers la page locale fichier.htmsituée dans le même répertoire
<A name="xyz">...</A> Définition d'une ancre
<A href="xyz">...</A><A href="fichier#xyz">...</A> Lien vers une ancre 

 
Images
<IMG src="xyz.gif"><IMG src="xyz.pjg> Insertion d'une image au format Gif ou Jpg(voir liens pour l'adressage)
<IMG ... width=x height=y> Mise à l'échelle de l'image en pixels( a comme effet d'accélérer l'affichage de la page)
<IMG ... border=x> Définition de la bordure d'une image avec lien
<IMG ... alt="votre texte"> Texte alternatif lorsque l'image n'est pas affichée
<IMG ... align=bottom><IMG ... align=middle><IMG ... align=top><IMG ... align=left><IMG ... align=right> Aligne l'image en basAligne l'image au milieuAligne l'image en hautAligne l'image à gaugheAligne l'image à droite
<IMG ... hspace=x><IMG ... vspace=y> Espacement horizontal entre l'image et le texteEspacement vertical entre l'image et le texte

 
Tableaux
<TABLE>...</TABLE> Définition d'un tableau
<TABLE width="x%"> Largeur du tableau en %
<TABLE width=x> Largeur du tableau en pixels
<TABLE border=x> Largeur de la bordure
<TABLE cellpadding=x> Espace entre la bordure et le texte
<TABLE cellspacing=x> Epaisseur du trait entre les cellules
<TR>...</TR> Ligne du tableau
<TD>...</TD> Cellule du tableau
<TD bgcolor="#XXXXXX"> Couleur d'une cellule de tableau
<TD width="x%"><TD width=x> Largeur de colonne en %Largeur de colonne en pixels
<TD align=center><TD align=left><TD align=right> Texte dans la cellule centréTexte dans la cellule aligné à gaucheTexte dans la cellule aligné à droite
<TD valign=bottom><TD valign=middle><TD valign=top> Alignement vers le bas du contenu d'une celluleCentrage vertical du contenu d'une celluleAlignement vers le haut du contenu d'une cellule
<TD colspan=x><TD rowspan=x> Nombre de cellules à fusionner horizontalementNombre de cellules à fusionner verticalement
Frames
<FRAMESET>...</FRAMESET> Définit une structure de frames(remplace alors le tag BODY)
<FRAMESET rows="x%,y%,..."> Division horizontale de la fenêtre en %
<FRAMESET cols="x%,y%,..."> Division verticale de la fenêtre en %
<FRAME src="fichier.htm"> Fichier affiché dans une fenêtre de frames
<NOFRAMES>...</NOFRAMES> Contenu pour les browsers non prévuspour les frames

 
Fichiers Html
<HTML>...</HTML> Début et fin de fichier Html
<HEAD>...</HEAD> Zone d'en-tête d'un fichier Html
<TITLE>...</TITLE> Titre affiché par le browser (élément de HEAD)
<BODY>...</BODY> Début et fin du corps du fichier Html
<BODY bgcolor="#XXXXXX"> Couleur d'arrière-plan (en hexadécimal)
<BODY background="xyz.gif"> Image d'arrière-plan

CHAPITRE 2 :

 LES LIENS

A. DEFINITION

C'est permettre de naviguer ! On réalise des hypermots ou des hyperimages, c'est à dire des objets qui réagissent avec la souris le plus souvent, pour atteindre d'autres objets. C'est la base de la navigation. Un lien se fait obligatoirement entre deux objets : celui qui envoie et celui qui reçoit. On place le lien dans le fichier qui envoie. Au début, limitez-vous à des fichiers dans un même dossier, et réalisez des liens entre eux.

Deux types de liens dominent la navigation :

      -  Relatifs et locaux pour lier vos pages. ( C'est le lien le plus fréquent )
      -  Absolues et globaux pour lier des sites.

Il faut connaître aussi :

      -  les liens vers un point précis d'une page : Ancre.
      -  les liens vers une adresse e-mail.
      -  les liens relatifs.
      -  les liens vers des fichiers (Téléchargement).

a. Liens locaux

Permet d'atteindre un autre fichier dans un même dossier, sur une même machine.
Pour des documents placés dans un autre dossier.

a.1 Code :
Faites très attention à l'archivage. Notez bien le chemin du dossier et le nom du fichier.  Dans le fichier source, on réalise le lien vers ce fichier cible : Pour cela, on marque un texte, ou: <a href bien une image, avec le tag <a> et l'attribut href :
Syntaxe  = "fichier.htm"> Texte de l'hyper lien vers le document</a>
Exemple dans le fichier eve.htm : <a href="adam.htm">Voir Adam</a>

b. Liens Absolus

C'est atteindre un document ou une adresse à l'aide du chemin complet et de son nom.

b.1 Code
Il faut connaître tous les éléments :
Le type de protocole http:// ou ftp:// ... et pour des références locales : file://
Le nom de l'ordinateur pour des liens locaux sur le serveur.
Le chemin complet ainsi que le nom de fichier.
 On confie le tout a l'attribut href du tag <a> :


Syntaxe : <a href="Protocole Serveur Chemin Fichier"> Texte du lien</a>
Exemple : <a href="http://web.avo.fr/chenu/index.htm">Site Web chenu</a>
 

c. Liens Relatifs1

C'est atteindre un fichier situé dans un autre dossier, sur la même machine.

c.1 Code
On réalise l’arborescence
Il est très important d'archiver ses documents de façon structurée.
Voici un exemple, celui de ce cours (figure ci-contre)
 On indique le chemin par rapport au document utilisé.

Syntaxe : <a href="../chemin/fichier> Texte hyper lien </a>
../ remonte d'un niveau et chemin/ descend.
Exemple : Avec l'arborescence ci-contre, nous sommes dans le document "relatif.htm" du dossier "lien". Pour atteindre le document "index.htm" il faut remonter d'un niveau, ce qui s'écrit ../ en HTML. D'où le lien relatif suivant :
<a href="../index.htm">Index</a>
Il est possible de remonter de plusieurs niveaux :
<a href="../../courhtml/index.htm">Index</a> donne le même résultat !
 

d. Lien vers une adresse E-mail.

On utilise le tag <a> avec l'attribut href :
Adresse : <a href="mailto:E-mail de l'internaute"> Contacter TOTO</a>
Exemple : <a href="mailto:christian@hotvoice.com">Contacter l'auteur</a>
Résultat : Contacter l'auteur
Si votre configuration est bonne, votre logiciel de messagerie doit s'ouvrir avec l'adresse du destinataire ! Magique ?
Plus fort encore...
en plus de l'ouverture de la messagerie avec le destinataire, on peut contraindre l'objet du message :
<a href="mailto:E-mail de l'internaute ?subject=sujet_du_message" >Contacter TOTO</a>
Exemple : <a href="mailto:christian@hotvoice.com?subject=lecteur du cours">Ecrire à l'auteur</a>

e.  Lien vers une ancre.

1. On marque d'abord la cible avec une ancre en utilisant le tag : <a> et l'attribut name.
Syntaxe : <a name="Ancre1"> Texte qui sera ciblé.</a>
Le texte cible est compris entre les tags <a> et </a>.
Le conteneur <a name="Ancre1">Texte qui sera ciblé.</a> est placé à l'endroit que l'on veut atteindre.

2. On réalise le lien vers cette cible : Pour cela, on marque un texte ou une image avec le tag <a> et l'attribut href :
Syntaxe : <a href="#Ancre1"> Texte de l'hyper lien vers une ancre</a>
Voici le résultat : Texte de l'hyperlien vers une ancre. Essayez-le.

3. On peut placer une ancre dans un autre document :
<a href="Chemin/NomDeFichier.htm#AncreCible">Texte de l'hyperlien</a>
Exemple : <a href="../alphabet.htm#lettre_H">Atteindre H</a>

f. Lien avec des images.

C'est rendre une image réactive. En cliquant dessus l'utilisateur ira vers ce que vous déciderez.
Conseil : Faites des hypermots et des images avant les hyperimages.
On utilise le tag <a> avec son attribut href pour le lien et <img src=... > pour l'image :
Syntaxe : <a href="fichier_cible.htm"><img src=" fichier_image.gif ou .jpg "> </a>
Exemple : <a href="cibleimg.htm">< img src="imageli.gif"></a>

Notez : On met l'image à la place de l'hypermot.
Pour ôter le cadre et garder le lien :
<img src="imageli.gif" border="0">

g. Lien avec un bouton.

Vous pouvez offrir un   pour naviguer.

On utilise un formulaire
<form action=" fichier_cible.htm " >
<input type="submit" value=" etiquette_bouton">
</form>
Exemple :
           <form action="../formulr/frfoenv.htm" target="_top">Voir les
           <input type="submit" value="formulaires"> (Débutants, ne les apprenez pas trop tôt. ).
           </form>
Résultat :

h. Lien vers la page précédente.

Le navigateur mémorise votre parcours. Il est donc possible de revenir sur les pages précédentes

Revenir avec un hypermot :
Syntaxe : <a href="#" onClick="window.history.go(-1)"> Retour </a>
Résultat : Retour
Revenir avec un bouton :
Syntaxe :
<form>
<input type="button" value="Retour" onClick="window.history.go(-1)">
</form>
Résultat :   (Débutants, évitez les boutons. )

Remarque :
Ce lien existe sur les navigateurs. Ce sont les célèbres boutons ci-contre :<a href="#" onClick="window.history.go(-1)"><img src="histnet.gif"> </a>  ou 
 
 
 

Types
Exemples
Résultats
Local
Même dossier		 <a href="local.htm">le lien</a> Le lien
Vers un site
URL indispensab		 <a href="http://kaddynet.8m.net/index.htm">Site HTML</a> Site HTML
Absolu
Chemin complet indispensable		 <a href="file://C:/dossier/rire.htm">Rire</a> Rire
Relatif../ remonte <a href="../dossier/relatif.htm">Relatif</a> Relatif
Courrier
Vers une messagerie		 <a href="mailto:christian@hotvoice.com">Contactez</a><a href="mailto:christian@hotvoice.com?subject=tester">E-mail</a> Contatez
E-mail
Poser ancre : Y aller :  <a name="ici">Rendez vous</a>
<a href="#ici">Aller</a>		 Aller
Image <a href="image.htm"><img src="imagel.gif"></a>
Bouton <form action="libouton.htm">    <input type="submit" value="Go"></form>
Retour <a href="#" onClick="window.history.go(-1)"> Retour </a> Retour 

Couleurs des liens :

Il y a 3 états pour un lien : non visité, activé, visité. Chaque état peut être coloré.

Attention !"link" est, soit un marqueur <link> , soit un attribut de <body link="...">.

1. Lien non visité : Par défaut c'est souvent bleu.
<body link="blue"> colorie les hypermots avant visite en bleu.
Il est possible d'utiliser le code hexadécimal : <body link="#0000FF">

2. Lien activé :
<body alink="red"> colorie les hypermots en rouge pendant le clic.
Il est possible d'utiliser le code hexadécimal : <body alink="#FF0000">

3. Lien visité : Par défaut c'est souvent violet.
<body vlink="green"> colorie les hypermots des liens visités en vert.
Il est possible d'utiliser le code hexadécimal : <body vlink="#00FF00">

Et voice les codes de différentes couleurs qui existent :

EXRECICES

Exercice 1 : Lien local dans un même dossier.
C’est le lien le plus simple mais attention vous pouvez avoir deux fichiers. Placez un lien dans chacun des fichiers pour naviguer de l’un vers l’autre.

Exercice 2 : atteindre un site ou une personne.
Faire une page qui vous permettra d'ouvrir vos sites préférés
Ajoutez un hypermot pour permettre aux lecteurs de vous écrire.

Exercice 3 : naviguer entre les dossiers.
Dans le cours "LIENS ancrages", vous pouvez lire tout en bas
<a href="../alphabet.htm#lettre_H">Atteindre H</a>
Cette page du cours est contenue dans le fichier ancrage.htm
Observez l'arborescence ci-dessous et déduisez-en le dossier où

est archivé le fichier "alphabet.htm". 

Exercice 4 : cibler une ancre :
Pour utiliser une ancre, il vous faut combien de fichier ?

CHAP 3

 MISE EN FORME

1. STYLE DES CARACTÈRES
 
 
Style                                     Syntaxe                                        Effet
Gras             <b>Gras</b><strong>Gras</strong>          GrasGras
Italique                <i>Italique</i>                                             Italique
Souligné         <u>Souligné</u>                              Souligné
Combiné         <b><i>Gras et Italique</i></b>       Gras et Italique
Exposant Base    <sup>Expo</sup>                              BaseExpo
Indice Base         <sub>Ind</sub>                                          Baseind
Petit             <small>Petit</small>                                    Petit
Grand           <big>Grand</big>                                       Grand
Clignotant           <blink>Clignotant</blink>                 Clignotant
Barré                  <s>Barré</s><strike>Barré</strike> BarréBarré
Machine          <tt>Machine</tt>                                       Machine
Code            <code>Code</code>                                code
Citation          <cite>Citation</cite>                                 Citation
Adresse          <address>Adresse</address>                   Adresse
Variable          <var>Variable</var>                                 Variable

2. TAILLE DES CARACTÈRES

Il est possible de définir la taille des caractères avec le marqueur <font> et l'attribut size. Vous pouvez le faire de façon absolue avec des tailles de 1 à 7, ou relative en augmentant ou diminuant la taille standard. Par défaut, la taille est de 3, mais l'affichage dépend de la configuration du navigateur de votre lecteur. Elles sont donc toutes relatives, et vous ne pouvez pas contrôler totalement avec HTML les tailles qui seront vues par votre lecteur.
 
 
Voici la taille normale 3      <font size="3">Voici la taille normale 3</font>
Ce texte est en taille 1                   <font size="1">Ce texte est en taille 1</font>
Taille 7      <font size="7">Taille 7</font>
Taille augmentée de 2par rapport à la taille standart 3. =
<font size="+2">Taille augmentée de 2<br>par rapport à la taille standard 3</font>

Les tailles sont relatives à la taille standart, et pas à la taille précédente :
<font size="5">Taille 5</font> suivi de <font size="-2">Taille -2</font> ne donne pas la taille 5-3=2 mais la taille 3-2=1Taille 5 En diminuant de 2, on obtient la taille 3-2=1 et pas la taille 5-2=3.

3. POLICE.

Globale : (Explorer)
Il est possible de modifier la police d'une page entière. (Sauf les tableaux !)
Placez dans le conteneur <head>...</head> :
 
 

<head><basefont size="3" face="arial" color="white"> </head>

Locale :
Vous pouvez modifier la police d'un paragraphe, d'une phrase, d'un mot, d'une lettre.
Placez votre texte dans un conteneur <font> votre texte </font> dans le <body>
 
 

<font size="3" face="times" color="green"> texte : paragraphe, phrase, mot, lettre.</font>

4. TITRE DANS UN TEXTE
 

<h1>Titre de niveau 1</h1>
<h2>Titre de niveau 2</h2>
<h3>Titre de niveau 3</h3>
<h4>Titre de niveau 4</h4>
<h5>Titre de niveau 5</h5>
<h6>Titre de niveau 6</h6>

Les balises <h1> à <h6> acceptent l'attribut align = "left" | "center" | "right" .
Exemple : <h2 align="right">Titre 2 aligné à droite.</h2> produit le résultat suivant :

Titre 2 aligné à droite
Remarque :
Un titre de niveau 1 est un gros titre, alors que la taille 1 est la plus petite : Texte en taille 1
Le 6ème rang est le niveau le plus bas pour les titres, 7 est la plus grosse taille.

5. ALIGNEMENT DU TEXTE

Aller à la ligne : "Enter" passe à la ligne dans votre code source, mais place uniquement un espace dans le texte affiché. Pour aller à la ligne vous devez utiliser le marqueur <br>. Ce marqueur n'a pas besoin d'être fermé par </br>
Notez que ce marqueur ne change pas de paragraphe.
Changer de paragraphe : C'est le rôle du marqueur <p> qui passe à la ligne et en saute une. <p> possède des attributs. Dans ce cas vous devez fermer le conteneur par </p> pour arrêter ses effets.
Alignement gauche : c'est l'alignement par défaut.
on peut le forcer : <p align="left">Texte aligné à gauche</p>

Ce texte est aligné à droite
<p align="right">texte aligné à droite</p>
Ce texte est centré
<p align="center">Texte centré</p>
ou encore
<center>Texte centré</center>
<center> est déconseillée avec HTML4

6. PRE> Comme le code source ...

Pratique, la balise <pre> qui est la seule à respecter la mise en forme selon votre code source, retour chariot et nombre d'espaces. Exemple :
 
 

<pre>
programme pascal;
var I   : integer; 
MOT : string;
BEGIN 
Un instant de nostalgie 
Heureusement, JavaScript est très prometteur 
!END.
</pre>
Le code source est identique.

7. RETRAIT ... Mettre en marge, Indenter ...

Blockquote
<blockquote> permet de mettre en retrait à droite. Ce paragraphe est sous l'effet de blockquote.
</blockquote>
Dès la fin du conteneur, le texte reprend son alignement sans retrait, avec un saut de ligne.

8. <DIV> Pour faire une exception dans la règle ...

"Pouce" dit l'enfant qui souhaite interrompre un instant la règle du jeu !
Si on active <p align="right"> pour aligner un texte, il arrive souvent, qu'on souhaite un autre alignement pour une partie seulement.
<div align="left"> alignera votre texte selon l'attribut, ici à gauche, jusqu'à </div>.
Après le texte reprend l'alignement précédent.
Le conteneur <div align="..."> ... </div>
réalise une île dans l'océan, une exception à la règle.

9. LISTE DE DÉFINITION

Qu'est-ce ?
Ce paragraphe est formaté avec une liste de définition : 3 paragraphes
Elle commence avec la balise <dl> et se termine avec </dl>
Elle permet de mettre en valeur son nom avec <dt> puis sa définition avec <dd>.
Une remarque :
Il n'est pas nécessaire de baliser la fin des conteneurs <dt> et <dd>
Par contre le conteneur <dl> doit être marqué par </dl> (Il saute une ligne)
Voici le code source :
 
 
  

<dl>
<dt>Qu'est-ce ?          ou bien <dt><b>Qu'est-ce ? </b><dd>Ce paragraphe... 
<dd>Elle commence avec... 
<dd>Elle permet... 
<dt>Une remarque : 
<dd>Il n'est pas... 
<dd>Par contre... <dt>Voici le code... 
</dl>
10. COLORATION DE FOND ET DES CARACTERES

Vous pouvez colorier le fond de vos pages ou les caractères avec le nom des couleurs ou le code hexadécimale.

Colorier le fond :
Dans le marqueur <body> on place l'attribut bgcolor
La valeur de bgcolor est :
·  Soit un code hexadécimal : "#rrvvbb" (Rouge, Vert, Bleu)
·  Soit un nom "red", "green", "blue", etc.
<body bgcolor="#ffcc80"> donne la couleur de cette page.
C 0 L 0 RIE R   les caractères :
Dans le marqueur <font> on place l'attribut color.
La valeur de color est :
·  Soit un code hexadécimal : "#rrvvbb" (Rouge, Vert, Bleu)
·  Soit un nom "red", "green", "blue", etc.
<font color="#0000ff"> Texte en bleu </font> donne Texte en bleu
Changer souvent de couleur est pénible !
C 0 L 0 RIE R est obtenu avec :
        <font color="#ff0000">C</font>
 <font color="#009900">0</font>
 <font color="#ffff00">L</font>
 <font color="#0000ff">0</font>
 <font color="#ff00ff">R</font>
 <font color="#00ffff">I</font>
 <font color="#000000">E</font>
 <font color="#ffffff">R</font>

11. Caractères spéciaux.

HTML permet d'écrire sur le réseau mondial, mais chacun possède ses accents ! l'" é " est très utilisé en français, et n'apparaît pas dans la langue anglaise. Les entités HTML permettent en partie de résoudre votre problème. Exemples : Ð , Þ , Ñ , Ö , È , Æ , ÿ
 
 
EntitéHTML      Caractère
&eacute;                        é
&egrave;                        è
&Icirc;                           Î
&ccedil;                        ç
&iuml;                            ï
&aelig;                          æ
EntitéHTML      Caractère
&lt;                            <
&gt;                           >
&amp;                       &
&nbsp;                  (espace)
&quot;                       "
&otilde;                      õ
EntitéHTML      Caractère
&copy;                       ©
&reg;                          ®
&iquest;                       ¿
&szlig;                         ß
&aring;                        å
&deg;                          °

Au début c'est pénible, mais très vite on s'y fait, et mieux, on s'amuse à les deviner : &Eacute; &Acirc;
Par contre, il est plus difficile de lire les documents sources. Essayez de lire "No&euml;l &agrave; P&acirc;ques". (Noël à Pâques)

CHAPITRE 4

 LISTE À PUCES.

a. A puces.
 
 

Pour obtenir      Code source
D'abord          <li>D'abord
Ensuite          <li>Ensuite
etc.              <li>Etc.
Pour obtenir Code source
· D'abord
· Ensuite
· etc. 
Code source
<ul><li>D'abord<li>Ensuite<li>Etc.</ul>
Pour obtenir
·  D'abord 
·  Ensuite 
·  etc.
Code source
 <dir><li>D'abord<li>Ensuite<li>Etc.</dir>

 
 Pour Obtenir               Code Source
  • D'abord 
  • Ensuite 
  • etc. 
 <ul type="disc">
<li>D'abord
<li>Ensuite
<li>Etc.
</ul>		 <ul type="circle">
<li>D'abord
<li>Ensuite
<li>Etc.
</ul>		 <ul type="square">
<li>D'abord
<li>Ensuite
<li>Etc.
</ul>

b. Numéroté

En général en utilise <ol type="A" | "a" | "I" | "i" | "1" start="..." compact>. Ceci veut dire :

Pour obtenir                        Code source                       Pour obtenir                     Code source
1. Premier 
2. Deuxième 
3. etc. 		 <ol>
<li>Premier
<li>Deuxième
<li>Etc.
</ol>		 A. Premier 
B. Deuxième 
C. etc. 		 <ol type="A">
<li>Premier
<li>Deuxième
<li>Etc.
</ol>
A. Puis 
B. Ensuite 
C. etc. 		 <ol start="4">
<li>Puis
<li>Ensuite
<li>Etc.
</ol>		 I.  Un peu 
II.  ça va, 
III. mais 3i 		 <ol type="i">
<li>Un peu
<li>ça va,
<li>mais 3i!
</ol>

c. Liste emboité
 

Pour Obtenir Code Source
I. JANVIER 
       a. Lundi 
       b. Mardi 
II. FEVRIER 
       a. Lundi 
  •            8h
  •            9h
       b. Mardi. 
III. MARS... 		 <ol type="I">
 <li>JANVIER
    <ol type="a">
    <li> Lundi
    <li> Mardi
    </ol>
 <li>FEVRIER
    <ol type="a">
    <li> Lundi
        <ul>
        <li> 8h
        <li> 9h
        </ul>
    <li> Mardi.
    </ol>
 <li>MARS...
 </ol>

d. De Définition

Qu'est-ce ?
           Ce paragraphe est formaté avec une liste de définition : 3 paragraphes
           Elle commence avec la balise <dl> et se termine avec </dl>
           Elle permet de mettre en valeur son nom avec <dt> puis sa définition avec <dd>.

Une remarque :
           Il n'est pas nécessaire de baliser la fin des conteneurs <dt> et <dd>
           Par contre le conteneur <dl> doit être marqué par </dl> (Il saute une ligne)

Voici le code source :
 

<dl>
<dt>Qu'est-ce ?          ou bien <dt><b>Qu'est-ce ? </b> 
<dd>Ce paragraphe... 
<dd>Elle commence avec... 
<dd>Elle permet... 
<dt>Une remarque : 
<dd>Il n'est pas... 
<dd>Par contre... 
<dt>Voici le code... 
</dl> 

CHAPITRE 5

LES TABLEAUX

           Ils sont très utiles. Les alignements ne sont pas toujours faciles avec l'HTML.
Les tableaux sont souvent la solution qui permet d'obtenir des alignements complexes.

a. Structure de base d'un tableau :
 
 

<table>
      <tr>
           <td> ... </td> <td> ... </td>
      </tr>
</table>		 Marqueur de tableau
Marqueur de ligne ("r"=row=rangée=ligne) 
Marqueur de cellule et fin de cellule.
Chaque <td> ... </td> réalise une colonne."d"=data=donnée 
Fin de ligne 
Fin du tableau 

Exemple :

Chaque <tr> crée une ligne. Chaque <td> ou <th> crée une colonne.

<table border>
<tr> <th> Euros </th> <th> Francs </th> </tr>
<tr> <td> 1 E </td> <td> 6,56 F </td> </tr>
...ainsi de suite pour chaque nouvelle ligne...
<tr> <td> 15,24 E </td> <td> 100 F </td> </tr>
</table>

Résultat :
 
 

EURO
FRANC
1 E 6.56 F
15.24 E 100 F
Ainsi de suite pour chaque nouvelle ligne

b. Bordure et Quadrillage

                                 *  Bordure
 

<table> <table border> <table border="4">
A1 B1 C1
A2 B2 C2
A1 B1 C1
A2 B2 C2
A1 B1 C1
A2 B2 C2

* Quadrillage
 
 

<table border cellspacing="0">
Épaisseur du quadrillage		 <table border cellpadding="10">
Espace entre texte et quadrillage
A1 B1 C1
A2 B2 C2
A1 B1 C1
A2 B2 C2

c. Dimension des tableaux
 

Pour dimensionner :
Un  tableau : mettre les attributs dans le marqueur : <table width="..." height="..." >
Une cellule : mettre les attributs dans le marqueur : <td width="..." height="..."> ou <th ...>

Mais nous devons retenir qu'il existe deux sortes de dimension. Les relatives ( en % ) et les absolues ( en pixels )

d. Coloration d'un tableau.

Comme les caractères en lettre, les tableaux aussi peuvent être colorés de toutes les façons qu'on souhaite.
Cependant il y a différentes façons de colorer son tableau :
 
 

Fond Cellule Bordure
Quadrillage		 Ombre
(Explorer)
<table bgcolor="X"> <td bgcolor="X"> <table bordercolor="X" > <table bordercolordark="X" 
bordercolorlight="X" >

Remplacer X par la couleur que vous voulez ( Notion des couleurs

e. Alignement

Il ne faut pas confondre alignement dans un tableau et alignement d'un tableau.
. Alignement du texte dans un tableau.

Texte centré Texte aligné à droite Texte à droite et en bas
<table border>
<tr>
<td align="center"></td>
</tr></table>		 <table border>
<tr>
<td align="right"></td>
</tr></table>		 <table border>
<tr><td align="right"
        valign="bottom"></td>
</tr></table>

f. Emplacement des légendes

C'est le cas des titres et des légendes. Ils sont attachés au tableau.

En-tête :

<table>
<caption valign="top"> Titre du tableau </caption> C'est la valeur par défaut de caption.
<tr> <td> A1 </td> ... </tr> ... </table>
Pied :
<table>
<caption valign="bottom" align="right"> Légende du tableau </caption>
<tr> <td> A1 </td> ... </tr>.... </table>
À côté : Attention DÉLICAT !!
<table align="left"> (En alignant le tableau à gauche le texte est à droite ! )
<tr> <td> A1 </td> ... </tr> ... </table>
</table> Texte que l'on veut mettre à côté du tableau <br clear="all">
g. Fusion des cellules.
Fusion des colonne

<table border>
<tr><td colspan="X">Voici la fusion</td></tr>
<tr><td>A1</td><td>B1</td><td>C1</td></tr>
<tr><td>A2</td><td>B2</td><td>C2</td></tr>
</table>

Fusion des lignes

<table border>
<tr><td rowspan="2">Fusion</td>
    <td>A1</td>    </tr>
<tr><td>A2</td>    </tr>
</table>

EXERCICES

1. Soit les codes html d'une page quelconque. On demande à l'aide d'un crayon et un papier ( A4 ) dessiner cette page. Attention n'utiliser pas votre navigateur. Cette exercice permettra de connaître si vous avez bien compris le cours.

<HTML>
<HEAD></HEAD>
<BODY>
<table border bgcolor="#EEEEEE">
<tr><td><font color="#FF0000"><b>CHOISISSEZ</b></font></td></tr>
</table>
<p>
<TABLE BORDER>
<TR><TD><table border="6" width="100%">
        <tr><td><a href="cinema.htm">CINEMA</a></td></tr></table></TD>
    <TD>Films à l'affiche...</TD></TR>
<TR><TD><table border="6" width="100%">
        <tr><td><a href="concert.htm">CONCERT</a></td></tr></table></TD>
    <TD>Où irez-vous cette semaine ?</TD></TR>
<TR><TD><table border="6" width="100%">
        <tr><td><a href="theatre.htm">THEATRE</a></td></tr></table></TD>
    <TD>Un spectacle exceptionnel</TD></TR>
</TABLE>
</BODY>
</HTML>

CHAPITRE 6

LES IMAGES

I. Insérer des images.

Attention aux images. Elles utilisent beaucoup de place sur les disques, sont parfois très longues à télécharger, et demandent beaucoup de temps si vous les créez !

Il est possible d'insérer des images :

Dans le fond :
<body background="nom_de_fichier.jpg ou .gif">
exemple. <body background="carres.jpg">

Dans les pages : (très utile)
<img src=" mouche.gif ">
Il est souvent pénible de les positionner.

Dans les tableaux :
Mettre dans les cellules entre <td><img src="fichier.jpg"> </td>
exemple.

Avec des liens :
Mettre dans l'image entre <a href="..." ><img src="fichier.jpg"> </a>
exemple.

I.a. Insertion d'une Image dans le fond de la page

<body background="fichier.jpg">
Le navigateur répète l'image et remplit la page.

Si le fond se confond avec les écris, il est important pour ce cas d'utiliser des tableaux avec l' attribut bgcolor

I.b. Alignement des images.

Insérer et positionner des images dans une page.

<img src="nom_du_fichier.jpg ou gif"> insère l'image comme un caractère. Remarque : bien que l'alignement soit verticale, on utilise align et pas valign comme dans les tableaux.

 <img src=" disques.jpg "> place l'image comme un caractère et le texte continue en bas. Si la ligne déborde, elle continue sous l'image. Pour juxtaposer, utilisez align="left" ou un tableau.

<img src="boules.jpg" align="top"> insère l'image et place le texte en haut. Si la ligne déborde elle continue sous l'image. Pour juxtaposer, utilisez align="left" ou un tableau.

 <img src="segments.jpg" align="middle"> insère l'image et place le texte au milieu. Si la ligne déborde elle continue sous l'image. Pour juxtaposer, utilisez align="left" ou un tableau.

 <img src="carres.jpg" align="left"> insère l'image comme un caractère, mais si la ligne déborde, l'image reste à gauche et le texte et l'image sont juxtaposés. Si le texte à son tour déborde, il continue sous l'image. Pour garder l'effet de colonne utilisez un tableau. En prolongeant ce texte vous constatez l'effet anoncé. En prolongeant ce texte vous constatez l'effet anoncé. En prolongeant ce texte vous constatez l'effet anoncé. En prolongeant ce texte vous constatez l'effet anoncé.

<img src="des.jpg" align="right"> place l'image à droite.

I.c. Dimensionnement des images

Largeur :
<img src="boules.jpg" width=40>
Résultat :  Proportion conservé

Hauteur :
<img src="boules.jpg" height=30>
Résultat :  Proportion conservé

Les deux :
<img src="boules.jpg" width=100 height=40>
Résultat :  Quand les dimensions n'ont pas le même multiplicateur on obtient une anamorphose.

I.d. Bordure
Border=X
<img src="coccinel.jpg" border=1>

Border=Y
<img src="coccinel.jpg" border=5>

X et Y répresentent les différentes variations de taille.


I.e. Lien avec des images

C'est rendre une image réactive. En cliquant dessus l'utilisateur ira vers ce que vous déciderez.
Conseil : Faites des hypermots et des images avant les hyperimages.
On utilise le tag <a> avec son attribut href pour le lien et <img src=... > pour l'image :
Syntaxe : <a href="fichier_cible.htm"> <img src=" fichier_image.gif ou .jpg "> </a>
Exemple : <a href="cibleimg.htm">< img src="imageli.gif"></a>
Notez : On met l'image à la place de l'hypermot.
Voici le résultat : . Voici la même image sans lien :
Passez la souris sur ces images et observez le pointeur.

Pour ôter le cadre et garder le lien :
<img src="imageli.gif" border="0">   Exemple :

Faire des zones sensibles dans une image : <MAP>

CHAPITRE 7

LES FORMULAIRES

I. DEFINITION

Les formulaires permettent de recevoir des informations. Vous allez pouvoir proposer à vos lecteurs des zones d'expression. Leurs réponses seront enregistrées dans un script que vous pourrez exploiter.
Créer un formulaire : Il faut définir le script avec les attributs suivants :

Attributs de <FORM> : method et action


II. LES PARTIES D'UN FORMULAIRE

II.a. ZONE DE TEXTE

Pour permettre au lecteur ou serfeur de pouvoir laisser un mot qui vous parviendra.

Syntaxe :
<form>
<textarea name="nom_du_champ" rows="3" cols="40">
... Texte par défault ...
</textarea>
</form>

Exemple :

<form>
<textarea name="commentaire" rows="3" cols="50">
  Le lecteur peut faire des commentaires ici !
</textarea>
</form>

II.b. LISTE OU MENU DEROULANT.

Syntaxe : 
<form method="post" action="/cgi-bin/reception">
<select name = "nom_du_champ" (name est obligatoire)

   size = nombre de choix affichés (facultatif)
   muliple affiche les choix (facultatif) >
<option selected> Valeur proposée par défaut
<option value = "valeur affectée au script"> "texte affiché dans la liste"
</select>
</form>

II.c. LES BOUTONS

<Input> offre de nombreuses options d'acquisition grâce à l'attribut type et ses valeurs : checkbox, radio, text, password, reset, et submit
En plus de type <Input> possède aussi les attributs : Name, Value, Size, MaxLength, Checked qui permettent de contrôler les options.

ATTENTION : type pour le choix de votre option, et name pour la collecte de vos données, sont indispensables. Les autres sont facultatifs.

II.c.1. Bouton radio : < INPUT type="radio" name="..." >

Ils permettent un choix exclusif.

CODE :
<form>
Boutons radios :
oui < input type="radio" name="choix1" value="oui" checked >
non < input type="radio" name="choix1" value="non" >

Value est la valeur qui sera envoyée au serveur
</form>

Attention : Pour un même choix, vous devez leur donner le même nom, sinon vous aurez des boutons indépendants. Quand il ont les même nom il s'excluent mutuellement.

II.c.2. Cases à cocher : < INPUT type="checkbox" name="..." >

Elles permettent des choix inclusifs.
Remarque : vous pouvez utiliser le même nom ou des noms différents

CODE :
<form>
Vous utilisez un ordinateur :
<input type="checkbox" name="ordinateur" value="domicile"> Chez vous.
<input type="checkbox" name="ordinateur" value="travail" checked > Au travail.
<input type="checkbox" name="ordinateur" value="ailleurs"> Ailleurs.
</form>

II.c.3. Champ texte : < INPUT type="text" name="..." >

Ils permettent de proposer un champ d'une ligne de texte.
Remarque : C'est le type par défaut. Textearea propose aussi un champ de texte.

CODE :
<form>
Votre âge : <input type="text" name="age" size="2" maxlength="2" >
(100 ans et plus laissez un commentaire !)
</form>

II.c.4. Mot de passe : < INPUT type="PassWord" name="..." >

Ils permettent de proposer un champ d'une ligne de caractères codés.

CODE :
<form>
Mot de passe :
<input type="password" name="passe" size="8" maxlength="6 " value="12345">

Value définie le texte par défaut
</form>

II.c.5. Envoie des réponses : < INPUT type="Submit" name="..." >

Dans <form> l'attribut action prend pour valeur le lien : une "adresse" ou un "fichier.htm".

CODE :
<form method="post" action="mailto:chenu@avo.fr">
<input type="submit" name="livredor" value="Envoyer">

Value définie l'étiquette du bouton. Ce sera aussi le message reçu dans la réponse
</form>

II.c.6. Réinitialiser le formulaire : < INPUT type="Reset" name="..." >

Si votre lecteur souhaite retrouver les réponses par défaut, vous pouvez placer ce bouton.

CODE :
<form>
<input type="reset" name="annuler" value="Corriger">
Value définie l'étiquette du bouton.
</form>

II.c.7. Réponses Après avoir valider un formulaire.

La façon avec laquelle vous avez envoyé les données, détermine le format des réponses.
La plus simple est de les envoyer à votre adresse avec l'action : "mailto:votre adresse"

Réponse : "livre d'or" par défaut
utilisateur=visiteur&age=&qui=lyceen
&commentr=Vous+pouvez+%E9crire+librement+ici.%0D%0A+++++
&livredor=Envoyer
Réponse : "livre d'or" complété
utilisateur=eleve&ordinateur=domicile&ordinateur=travail&age=19&qui=etudiante
&commentr=Peut-on+utiliser+votre+cours+hors+ligne+%3F%0D%0AJe+suis+tr%E8s+int%E9ress%E9e.+Merci.%0D%0A+++++
&livredor=Envoyer

Rappels sur le formulaire "livre d'or"
Bouton radio name=utilisateur value=visiteur (par défaut) ou eleve
Cases à cocher name=ordinateur value=domicile et/ou travail et/ou ailleurs
Champ text name=age (Je n'ai pas mis de value)
Sélection name=qui option=lyceen, lyceenne, etudiant etc.
Champ Textaera name=commentr Texte par défaut=Vous pouvez écrire librement ici.
Submit name=livredor value=envoyer

Cette partie du cours ce limite ici. Pour des petits renseignement sur l'incompréhension du cours, veuillez contact notre rédacteur compositeur. Il vous donnera de la lumière sur ce que vous chercher
et peut-être encore plus car "vous servir c'est notre devoir"

Et à très pour votre prochain cours sur le JAVA

BACK  / RETOUR