Création de page web

Bases

Qu'est-ce qu'un URL ?

Un exemple : http://www.ens-lyon.fr/web/nav/index.php
On peut distinguer 4 parties dans un URL :

le protocole : ici http, mais il existe aussi, selon ce qu'on veut faire : ftp, mailto, file, news, mms,...
le nom de machine : ici www.ens-lyon.fr. Ce nom est celui des humains ! En réalité, un serveur DNS code ensuite ce nom en un numéro par exemple : 140.77.167.13
le chemin : ici web/nav/
le nom de fichier : ici index.php

Le type de document que l'on crée

Toutes les pages web sont en html (hypertext markup language). Certaines pages sont écrites en php (hypertext process : web dynamique) : cela signifie que le fichier html n'est créé qu'une fois la page demandée, cela permet que l'internaute puisse modifier la page. php a des petits frères : asp, jsp... qui sont toujours du web dynamique.
En pratique on crée un fichier texte en utilisant uniquement des caractères ASCII et on l'enregistre en .html. Il existe différents codages ASCII, suivant les accents et caractères spéciaux que l'on demande... Par exemple on peut utiliser le utf8 ou des iso... Il faut donc bien prendre soin de choisir l'encodage d'enregistrement et de le préciser dans le préambule. Mais tout ceci sera détaillé un tout petit peu plus tard.

Premiers pas

Les balises

En html, tout tourne autour des balises. Elles différencient différentes zones dans le fichier html : l'en-tête, le corps de texte,... Elles permettent également de changer le style sur certaines zones de texte, de charger des images, de faire des listes, et tout ce qu'on peut imaginer d'autre ! Toute balise ouverte doit être fermée ! Une balise s'ouvre par <balise> et se ferme par </balise>.

Le minimum à faire

Un fichier html commence par la balise <html> et se termine donc par </html>. Il faut ensuite définir l'en-tête qui contiendra le titre de la page web (c'est ce qui s'affichera en haut du navigateur web quand on sera sur cette page, ici j'ai mis Création de page web). Pour cela, on utilise la balise <head> et la balise <title>. Enfin, on passe à l'informatif de la page que l'on crée : le texte. Celui-ci se met après la balise <body> et avant la balise fermante </body>.

Exemple de page web basique :

	<html>
	  <head>
	    <title> Ma première page web </title>
	  </head>
	  <body>
	    Ma première page web est la plus belle des pages web !
	  </body>
	</html>

Pour voir ce que ça donne, cliquez ici.
Si vous êtes arrivés jusqu'ici, vous savez faire du html ! Bon, sans mise en page, sans accent, sans image, sans lien, bref, sans rien de bien attrayant. Je pourrais même vous lancer des défis du style : comment passer à la ligne ? Et vous seriez bien embêtés ! Je vais maintenant passer en revue tous les points sus-dit, les uns après les autres.

Les accents

Il y a deux manières de les gérer. L'une est universelle et l'autre utilise l'encodage des caractères, et risque d'être moins efficace pour certains paramétrages de navigateurs.

La commande &...; : Elle ne sert pas uniquement aux accents mais plus généralement à beaucoup de caractères spéciaux. Voyons tout de suite quelques exemples :

Symbole	Commande
é	`é`
è	`è`
ê	`ê`
ë	`ë;`
á	`á`
à	`ò`
â	`î`
ä	`Ë`
ç	`ç`

Symbole	Commande
<	`<`
>	`>`
&	`&`
"	`"`
÷	`÷`
×	`×`
±	`±`
©	`©`
α	`α`

On peut aussi dire dans l'en-tête quel est l'encodage que l'on utilise. Pour cela on met la ligne <meta http-equiv="content-type" content="text/html;charset=utf8"> si l'encodage est en utf8. Si l'encodage est différent on change juste utf8 en un autre nom d'encodage. Il est bien entendu nécessaire de savoir quel encodage on utilise, ce qui peut en général se trouver lors de l'enregistrement du fichier html. Si on utilise cette méthode, on peut mettre tous les accents qu'on veut dans le corps du texte, ainsi qu'un certain nombre de symboles. Mais ATTENTION : comme dit précédemment, tous les navigateurs web ne comprennent pas tous les encodages, surtout quand on va à l'autre bout du monde...
Une remarque en passant : on vient ici de rencontrer une balise qui n'a pas besoin d'être fermée. Il y en a effectivement quelques unes mais elles ne sont pas nombreuses...
Si on reprend l'exemple de tout à l'heure on obtient cette fois-ci les deux versions suivantes :

méthode universelle	méthode par encodage
`<html> <head> <title> Ma première page web </title> </head> <body> Ma première page web est la plus belle des pages web ! </body> </html>`	`<html> <head> <meta http-equiv="content-type" content="text/html;charset=utf8"> <title> Ma première page web </title> </head> <body> Ma première page web est la plus belle des pages web ! </body> </html>`

Les commentaires

Comme dans tout fichier, il est indispensable de savoir mettre des commentaires, soit pour expliquer ce que l'on fait et les commandes qu'on utilise, soit pour qu'un passage en cours d'élaboration ne s'affiche pas. Le principe des commentaires est qu'il ne sont pas traduit pour être affichés, ils apparaissent donc uniquement dans l'éditeur de texte ! Pour faire ça, on met le commentaire à la place des ... dans la formule suivante : .

La mise en page

Les titres

Pour mettre un titre, on le mettra entre les balises ouvrantes et fermantes : <h1>, </h1>. Si on veut un sous-titre, on remplacera h1 par h2, et ainsi de suite jusque H6. Sur cette page, il y a un titre h1 : Comment créer sa propre page web ?, et plusieurs titres h2 : par exemple La mise en page. Je mets aussi un lien vers une page avec que des titres afin de les comparer.

Le paragraphe

Une entité structurelle d'un document est le paragraphe. Il est délimité soit par les balises <p>, </p>, soit par les balises <blockquote>, </blockquote>. L'environnement paragraphe assure l'existence de lignes vides avant et après cette entité. De plus, l'environnement blockquote décale entièrement le paragraphe sur la droite. Voyez plutôt sur un exemple.
Si on veut tout simplement passer à la ligne tout en restant dans le même paragraphe (ce que je viens de faire pour écrire cette ligne) on utilise la balise <br> qui bien entendu n'a pas besoin d'être fermée. De la même façon, on peut rajouter un espace à un endroit en utilisant la commande :  .
Pour séparer des paragraphes, on peut vouloir mettre une ligne horizontale :

On utilise la balise <hr size="2" width="100","50%" align="center", "left", "right"> pour avoir une ligne d'épaisseur 2 pixels, de longueur 100 pixel (resp. 50% de la largeur de la page), centrée sur la ligne (resp. à gauche ou à droite). Si on veut en plus enlever l'ombrage, on rajoute l'attribut noshade.

Les mises en valeurs locales

On peut bien entendu vouloir mettre une partie du texte en italique, en gras, en couleur, souligné. Voici quelques balises (à ouvrir et fermer) qui permettent de le faire :

Action	Balise
texte en italique	`i`
texte en gras	`b`
texte en souligné	`u`
`texte en télétype`	`tt`
texte en relief (dépend des navigateurs ou des feuilles de style)	`<em>`
texte en fort (dépend des navigateurs ou des feuilles de style)	`<strong>`
`texte non formaté : télétype, espace et passage à la ligne...`	`<pre>`

Action	Balise
citation	`cite`
adresse	`adress`
définition	`dfn`
`code`	`code`
`var`	`var`
`samp`	`samp`
`kbd`	`kbd`

On peut aussi utiliser la balise font ainsi que ses attributs pour changer la police de caractère (face="nom de la police"), sa taille (size="+1" ou "3"), sa couleur (color="red" ou "#121212"). Au niveau des polices, les plus raisonnables sont times, arial et helvetica, au sens où elles sont acceptées par n'importe quel navigateur. Au niveau de la taille, elle peut prendre des valeurs de 1 à 7, et on peut la modifier de plusieurs manières : soit relativement, en ajoutant 1 à sa valeur (ou en diminuant de 2) soit en lui attribuant une valeur de 1 à 7. Au niveau des couleurs, il y a plusieurs manière de les mettre : soit par leur nom pour celles qui en ont, soit par leur code RGB. Les noms disponibles sont : red, blue, green, black, white, grey, aqua, fuchsia, lime, maroon, navy, olive, purple, silver, teal, yellow. Au niveau du codage RGB, c'est un codage hexadecimal, ce qui signifie que l'on parle en base 16. Les chiffres sont donc notés 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f et les codes sont de la forme 3*2=6 chiffres (2 chiffres par couleur 'red', 'green', 'blue'). Un dernier point avant de passer à la suite : si on veut que du texte, une image, un tableau soit centré dans une ligne on utilise la balise <center>.

La mise en page globale

On peut également décider des éléments de couleurs pour toute une page web. Pour cela, on rajoute des attributs dans la balise body.

Action	Attribut	Paramètres
Couleur de fond	`bgcolor`	`"nom ou #numero de la couleur"`
Couleur de texte	`text`	`"nom ou #numero de la couleur"`
Couleur des liens externes	`link`	`"nom ou #numero de la couleur"`
Couleur des liens à l'intérieur d'une page	`vlink`	`"nom ou #numero de la couleur"`
Image de fond	`background`	`"chemindufichier/nomdufichier.extension"`

Dans ce tableau, je parle déjà d'insertion d'image ainsi que de lien hypertext. Mais je n'ai pas encore dit comment on les insére. Je vais donc me rattraper tout de suite !

Les liens hypertext

Les liens vers d'autres pages

Sur une page web, il y a en général des liens pour aller vers d'autre page de ce site internet, ou pour aller vers d'autres sites. J'en ai déjà mis plusieurs ici pour accéder à des exemples. Pour faire ça on utilise la balise <a> ainsi que l'attribut href. Il faut bien entendu connaître l'adresse URL de la page à mettre en lien. Voici divers exemples :

type de lien	Lien	Balise complète
Page internet quelconque	la page	`<a href="http://www.hcardon.net/CIES">la page</a>`
Page html dans le même dossier	la page	`<a href="index.html">la page</a>`
Page html dans un autre dossier	la page	`<a href="dutexte/blabla.html">la page</a>`

Et si il faut remonter dans les dossiers pour atteindre la page désirée, on tape : ../ autant de fois que l'on doit remonter.
Quand on fait un lien vers une page web qui n'appartient pas à notre site on demande en général à ce qu'il s'ouvre dans une nouvelle page. Pour cela, on rajoute l'attribut target="_blank".

Les liens vers un paragraphe de la page

Il y a également possibilité de faire un lien qui permet de remonter en haut d'une page, ou bien d'atteindre directement un paragraphe précis de la page courante. Essayez ici ! Pour cela il faut définir un label à l'endroit où l'on voudra aller, et appeler ce label à l'endroit d'où l'on part. En plus clair, on tape <a name="label1"></a> en haut de la page, et <a href="#label1">Remonter en haut de la page</a> là où on veut pouvoir cliquer. Cette méthode ne permet pas seulement d'atteindre le haut de la page, on peut également s'en servir pour atteindre un paragraphe précis comme par exemple le paragraphe intitulé "La mise en page".

Les adresses email

On peut aussi être amener à donner une adresse mail sur une page web. Et il peut s'avérer très pratique pour l'internaute de n'avoir qu'à cliquer dessus pour qu'une fenêtre de "nouveau message" s'ouvre dans leur logiciel de messagerie. Comment faire ? Comme ça, tout simplement : <a href="mailto:mon.adresse.mail@mon-serveur.fr">mon adresse mail</a>.

Les images

Commençons par mettre un exemple : une jonquille de Véranne !

L'insertion bête et méchante

La première chose à savoir est la balise à mettre. Celle-ci n'a pas besoin d'être fermée : <img src="cheminedufichier/nomdufichier.extension">. Au niveau de l'extension, on a le droit uniquement à trois types de fichiers images : jpg, png et gif. L'avantage du gif sur les deux autres formats est qu'il peut être animé :

Les attributs images

action	attribut
bordure de largeur 5 pixels	`border="5"`
largeur de l'image relativement à la largeur totale	`width="50%"`
largeur de l'image en pixel	`width="100"`
hauteur de l'image	`height="50"`
écart au texte en hauteur	`vspace`
écart au texte en largeur	`hspace="20"`
position du texte dans l'espace restant à côté de l'image, uniquement la ligne courante	`align="top", "bottom", "middle"`
si on veut mettre des paragraphes contournant l'image. De quel côté doit être l'image ?	`align="left", "right"`
texte qui sera mis à la place de l'image si le navigateur ne lit pas l'image (ex : si le geek est aveugle, ou qqn qui veut éviter les téléchargements trop longs)	`alt="texte descriptif de l'image"`

Attention, si on modifie à la fois la largeur et la hauteur d'une image, celle-ci risque d'être déformée !
Quand on met du texte à côté d'une image, il peut arriver un moment où on ne veut plus que le texte reste à côté de l'image (genre fin d'un paragraphe, insertion d'une autre image, d'un tableau,...). Pour pouvoir mettre la suite du texte en-dessous de l'image, il suffit de faire un passage à la ligne <br> avec un attribut : clear="left" si l'image est à gauche, ="right" si l'image est à droite ou ="all" si il y a une image de chaque côté. Attention, ici la balise <br> a besoin d'être fermée !

Les images cliquables

Il est possible de faire en sorte que certaines zones de l'image soient en fait des liens hypertext. Pour cela on utilise l'attribut usemap="#carte1" dans la balise img et la balise <map name="carte1"> pour définir la carte et les liens associés. La carte est divisée en aires, définies par leur forme (rectangle, cercle, polygone) et leurs sommets, et renvoyant vers des URL différents. Il faut donc définir chaque aire.

Ce qu'on tape et son exemple associé :
<img src="jonquille.jpg" usemap="#carte1" color="1"> <map name="carte1"> <area shape="rect" coords="x1,y1,x2,y2" href="sable.html" alt="Ceci est du sable"> <area shape="circle" coords="x,y,r" href="index.html" alt="Ceci est une éponge"> <area shape="poly" coords="x1,y1,x2,y2,x3,y3,x4,y4,x5,y5" href="tortue.html" alt="Ceci est une tortue"> </map>
Il faut faire attention à quelques points :

le repère est codé en avec l'origine en haut à gauche de l'image, les x croissants vers la droite et les y croissant vers le bas ;
si on modifie la dimension de l'image, il faut également modifier les zones cliquable !

Quelques précisions supplémentaires : pour le rectangle x1,y1 sont à remplacer par les coordonnées du point en haut à gauche du rectangle et x2,y2 par celles du point en bas à droite ; pour le cercle : x,y par les coordonnées du centre et r par le rayon ; pour le polygône xi,yi par les coorodonnées de tous les sommets du polygône.
Sous linux on peut utiliser kview pour retrouver les coordonnées des points d'une image. Sous mac, je ne sais pas encore...

Les listes

Il existe deux types de listes, les listes numérotées et les listes non numérotées.

Les listes non numérotées

On utilise la balise <ul> pour ouvrir et fermer la liste, et la balise <li> pour ouvrir et fermer un item. On peut si on veut ajouter l'attribut : type="SQUARE","CIRCLE","DISC" dans l'une ou l'autre des balises pour changer la forme des item.

Les listes numérotées

On utilise la balise <ol> pour ouvrir et fermer la liste, et la balise <li> pour ouvrir et fermer un item. On peut si on veut changer le type de numérotation des items avec l'attribut type="A", "I", "i" selon que l'on veut des lettres, des chiffres romains (majuscules ou minuscules). On peut également changer les numéros de tous les items en mettant START="4" dans la balise ol, ou à partir d'un item en mettant l'attribut VALUE="20" dans l'item voulu.

Les listes descriptives

On utilise la balise <DL> pour ouvrir et fermer la liste, la balise <DT> pour mettre un titre d'item, <DD> pour en mettre la description.

Comme pour les paragraphes, je renvoie à une page d'exemples. Avant de passer à la suite, je tiens à préciser que l'on peut imbriquer les listes à souhait !

Les tableaux

Le tableau basique

La balise <table></table> permet de délimiter l'environnement tableau. Après on raisonne ligne par ligne : TR ouvre une nouvelle ligne, TD une nouvelle case.

ligne 1, case 1	ligne 1, case 2
ligne 2, case 1	ligne 2, case 2
ligne 3, case 1	ligne 3, case 2
ligne 4, case 1	ligne 4, case 2
ligne 5, case 1	ligne 5, case 2
ligne 6, case 1	ligne 6, case 2
ligne 7, case 1	ligne 7, case 2
ligne 8, case 1	ligne 8, case 2
ligne 9, case 1	ligne 9, case 2
ligne 10, case 1	ligne 10, case 2

		<table>
		  <tr>
		    <td> texte </td>
			<td> texte </td>
		  </tr>
		  <tr>
			<td> texte </td>
			<td> texte ou image ou url ou tableau</td>
		  </tr>
		</table>

Les attributs

En gros, ce sont les même que pour les images plus quelques uns plus spécifiques.

Les attributs "images et tableaux"
action	attribut
bordure de largeur 5 pixels	`color="5"`
largeur relativement à la largeur totale	`width="50%"`
largeur en pixel	`width="100"`
hauteur	`HEIGHT="50"`
écart au texte en hauteur	`VSPACE`
écart au texte en largeur	`hspace="20"`
position du texte dans l'espace restant à côté, uniquement la ligne courante	`align="top", "bottom", "middle"`
si on veut mettre des paragraphes contournant l'objet. De quel côté doit être l'objet ?	`align="left", "right"`

Les attributs "tableaux" seulement
action	attribut
espace entre deux cases	`CELLSPACING`
espace entre le bord d'une cellule et les données qu'elle contient	`CELLPADDING`
fond de tableau	`background="mer.jpg"`
couleur des cellules (à mettre dans `table,TR,TD` selon les cellules à teinter)	`BGcolor="#981231"`
pour aligner à l'intérieur une cellule (dans la balise `TR` ou `TD`)	`align="center", "left", "right"`
pour aligner à l'intérieur une cellule (dans la balise `TR` ou `TD`)	`valign="center", "bottom", "top"`
force le texte à n'être que sur une ligne	`NOWRAP`

Des cases pas toutes de la même taille !

Si on veut un tableau où toutes les cases n'ont pas la même taille on peut faire des cases plus grandes en remplaçant la balise TD par <TH Colspan="2">. Cette méthode allonge une case sur une seule ligne. Si on veut l'allonger sur plusieurs lignes, on a besoin de l'attribut : ROWspan="2" dans TD.

Légende

Si on veut mettre une légende à un tableau on rajoute quelque part entre les balises table la balise : <CAPTION Align="top","bottom">texte de légende</caption>.

Voici pour finir un exemple de tableau :

texte de légende
je prends la place de 4 cases !
je prends la place de 2 cases !		cel 2	cel 3
cel 1 est la plus grande	cel 2	cel 3	cel 3

Les formulaires

Les balises d'entrée et sortie de formulaire sont <form>, </form>. Dans un formulaire, on peut mettre différents types d'objets : des entrées de texte, des cases à cocher, des boutons,... On peut également mettre du texte, des tableaux, des images pour donner des indications (sur les endroits à cliquer, les données à mettre,...). On peut également mettre un formulaire dans un tableau. Nous allons maintenant voir tout ça ainsi que d'autres points importants en lien avec les formulaires, comme par exemple, ce qu'on peut en faire.

Entrée de texte court

La balise est <INPUT>, que l'on utilise avec les attributs : type="text"(nous verrons très rapidement d'autres types), size="15"(longueur de la case en nombre de caractères), MAXLENGTH="13"(longueur maximale du texte en nombre de caractères), name="tel" (nom de l'entrée), VALUE="texte court"(texte écrit dans la case à l'affichage de la page, c'est aussi le texte à modifier). En résumé : <INPUT type="text" name="tel" size="15" MAXLENGTH="10" VALUE="Téléphone"> nous donne :

Entrée d'un texte long

Pour cela on utilise une aire de texte de nom choisi, et de taille voulue : comptée en nombre de colonnes et de lignes. On peut encore une fois limiter le nombre de caractères à entrer : <textarea name="abstract" cols="30" rows="10">mettre un texte long</textarea>. Un exemple sera vu dans la suite.

Cases à cocher

On utilise de nouveau la balise INPUT mais cette fois-ci, on change le type="CHECKBOX". Si on veut que la case soit cochée à l'ouverture de la page, on rajoute l'attribut CHECKED.

Boutons au choix

Si on reprend l'exmple précédent, on pourrait vouloir éviter que quelqu'un valide les deux questions, car les réponses sont incompatibles. Pour cela il existe les boutons 'radio' que l'on peut valider au choix. Pour cela on définit chaque bouton, et on donne à tous le même nom. On peut bien entendu faire ça avec 2 boutons, mais aussi avec un nombre quelconque de boutons.

Selecteur

Pour faire choisir dans une liste, on met la balise SELECT, avec comme attribut le nom (name=""), et on rentre chaque possibilités par des balises option. Si on met l'attribut selected dans une des balises alors celle-ci est selectionnée au début. Si on rajoute l'attribut size="3" le selecteur ne s'affichera que sur 3 lignes. Il existe aussi l'attribut multiple, qui permet de choisir plusieurs item d'un selecteur, visiblement à conditions que les items soient consécutifs.

Boutons d'envoi

Une fois le formulaire rempli, il faut en général l'envoyer. Il peut également arriver qu'un internaute veuille vider tout le formulaire des informations qu'il a mis. Pour cela il existe deux boutons cliquables, que l'on met avec les commandes : <input type="reset" value="effacer">, <input type="submit" value="envoyer"> Bien entendu, si on clique dessus, ça ne fait rien pour l'instant (à part la procédure d'effacement qui marche parfaitement). Il va donc falloir dire au script ce qu'il doit faire du formulaire, ceci se fait par l'intermédiaire d'attributs, mis dans la balise form. Pour commencer, il est fortement conseillé de donner un nom au formulaire : name="nom". Pour le reste, il y a différentes possibilités :

L'envoi vers un programme qui traitera les données rentrées par l'internaute, il est donc nécessaire que ce programme soit accessible depuis l'extérieur. Il faut donc mettre l'URL servant à atteindre ce programme. Par exemple; on mettra : action="http://www.ens-lyon.fr/cgi/reg.perl" dans la balise form.
Une autre possibilité est d'envoyer les données par mail, une fois le formulaire rempli. Pour cela, on utilisera le même attribut mais avec une URL commençant par mailto : ACTION="mailto:bob@bob.net". En plus, il faut dire qu'on veut que les données soient mises dans le corps du texte : on rajoute l'attribut : "METHOD="POST". Pour que le tout soit lisible facilement, on rajoute : enctype="text/plain" (ça met un peut en forma le mail). Enfin, si l'on veut spécifier le sujet du mail, il faut rajouter ?Subject=formulaire juste après l'adresse mail, ou pour ajouter des personnes en copie, on rajoute cc=bob@bob.com". Bien entendu, tout cela ouvrira le logiciel de messagerie mis par défaut sur l'ordinateur de l'internaute, ave le destinataire, le sujet, et le corps du texte préremplis, et il ne restera plus à l'internaute qu'à envoyer ce mail :
<form method="post" name="bonjour" action="mailto:vleblanc@ens-lyon.fr?Subject=formulaire" enctype="text/plain">.
mettre un texte long
La troisième action que l'on peut faire aisément est la requête google, par la commande : action="http://www.google.com/search". Attention, il faut alors s'assurer que google va comprendre ce que l'on raconte. Pour cela il faut nommer les balises comme google le ferait : il faut l'appaler "q". Comme rien ne nous empêche de mettre du texte dans un formulaire, on peut aussi insérer une image comme par exemple le logo de google que l'on trouve à l'adresse : http://www.google.com/search.

Compléments

Avec ça on a l'essentiel des formulaires. Je vais juste rajouter quelques informations :

pour les mots de passe : il existe la commande type="PASSWORD" qui remplace visuellement le texte tapé par des ****. Mais ATTENTION, ceci n'est pas un gage de sécurité ! Le mot de passe passe en clair sur internet !
les entrées cachées : je n'en ai pas parlé, mais on peut mettre des entrées cachées en rajoutant type="HIDDEN". L'internaute ne verra rien, ie comme si il n'y avait pas cette entrée, et il ne peut donc pas la modifier. On peut alors se demander à quoi ça sert... Par exemple, sur un envoi google, pour préciser la langue de recherche, ou d'autres choses. Comme dit précisément, on mettra q pour un mot de recherche, hl pour une langue (écrite fr pour le français, en pour l'anglais,...),... .
les noms : on en a éparpillé un peu partout, nom de fenêtre, nom de form, nom de INPUT,... ils permettent d'accéder à aux réponses aux questions, ou à des contenus de cases, comme par exemple : "window.form.input.value" permet d'obtenir dans la fenêtre nommée window, dans le formulaire nommé form, dans la question nommée input la valeur qui a été attribuée par l'internaute.
les boutons génériques : on peut également mettre des boutons qui n'ont pas d'action prédéfinie, et leur associer une action de notre choix. Pour cela il va d'une part falloir définir une action pour le bouton avec du javascript, et d'autre part placer celui-ci à l'endroit voulu. Le tout peut se faire en une seule ligne de commande : <INPUT type="BUTTON" VALUE="coucou" onclick="javascript:alert('coucou !')">. Ainsi, on a définit un bouton appelé "coucou" qui ouvre une fenêtre 'coucou !' quand on clique dessus.

Le javascript

Maintenant que l'on a un peu vu comment activer un script (par les boutons), voyons un peu comment faire du javascript. Bien entendu, on ne va pas aller bien loin dans ce qu'on peut faire, mais il faut bien commencer par des bases à un moment ou à un autre. La première question qui se pose est : où écrire ? Le mieux est de mettre tous les scripts dans l'en-tête (ie entre les balises head). Comment le faire ? De la manière suivante :

		<script language="javascript">
		  <!--
			mon programme
		  -->
		</script>

Cela parait assez anodin comme ça, mais il est indispensable de passer à la ligne après l'ouverture du commentaire. Si ce n'est pas fait, le navigateur ne va pas comprendre que c'est du javascript...
Maintenant qu'on a vu où mettre le programme, il reste à faire celui-ci. On va se contenter de faire s'ouvrir ou se fermer une fenêtre pop-up. On commence par définir une fonction OuvrirFenetre qui dépend des paramètres (url,nom,details) ; pour cela on tape : function OuvrirFenetre(url,nom,details). Attention, le nom de la fonction ne doit contenir ni caractères spéciaux, ni même des espaces (juste des lettres et des chiffres). Il reste à dire à la fonction ce qu'elle doit faire : {window.open(url,nom,details)} (c'est de la forme : {classe.methode(url,nom,details)}) et ensuite on ferme le commentaire et le script.

		<script language="javascript">
		  <!--
			function OuvrirFenetre(url,nom,details)
			  {window.open(url,nom,details)}
		  -->
		</script>

Surtout, il ne faut pas le dire, mais ici, on n'a fait que renommer une fonction préexistente !
Il est possible ensuite d'utiliser cette fonction dans le corps du texte, ie entre les balises body. Par exemple, on peut rajouter : <A href="javascript:OuvrirFenetre('jonquille.jpg', 'popup1', 'width=100, height=100, scrollbars=no, toolbar=no, screenX=500, screenY=500')">Jonquille<A> pour afficher une Jonquille.
Insérons maintenant tout ça dans un formulaire, par exemple dans des boutons génériques : <INPUT type="BUTTON" VALUE="ouvrir" onclick="javascript:toto=window.open('NewWin.html', 'popup2', 'width=226, height=400')"> <INPUT type="BUTTON" VALUE="fermer" onclick="if((toto)&&(!toto.closed)){toto.close()}"> (si toto existe et n'est pas fermé, ferme-le). Tout ce qui est javascript s'exécute si l'internaute accepte le javascript dans son navigateur ! On a donc aucune assurance que ça marche chez tout le monde. D'autant plus que tout le monde n'a pas le même javascript sur son ordinateur ! Il ne faut donc pas faire des choses trop compliquées en javascript, ni trop indispensable !
La question est maintenant de savoir à quoi on fait réagir le javascript : pour l'instant, on s'est contenté de le faire réagir au onclick, mais on peut aussi faire réagir à d'autres événements : onMouseDown, onMouseUp, onDblClick, onKeyDowm, onKeyUp, onKeyPress, onSubmit, onReset, onFocus (quand on va dans une zone de texte) / onBlur (quand on quitte la zone de texte), onChange (quand on change l'état d'une case à cliquer), onLoad/onUnLoad. Exemple : à ne surtout pas faire parce que ça ouvre des fenêtres sans arrêt et du coup ça fait planter l'ordi !

		<html>
		  <head></head>
		  <body ONLOAD="javascript:window.open('toto.html','','')">
		  </body>
		</html>

Quelques compléments sur le javascript (en lien plus ou moins avec les formulaires)

Supposons que l'on ait une zone de texte court dans laquelle on a mis du texte que l'on veut effacer dès que l'internaute clique dedans, on fait alors comme suit : <INPUT type="text" name="tel" VALUE="N°Telephone" onFocus="javascript:this.value=''"> Pour aller plus loin en java script : http://www.lehtml.com/

Les balises `meta`

On a vu au début de cette page, dans la rubrique concernant les accents, que l'on pouvait avoir à mettre une balise meta dans l'en-tête, ie entre les balises head. Il existe d'autres balises meta, qui permettent de donner des informations comme le nom de l'auteur, une description, un copyright, des mots-clés,... Il faut mettre une ligne par type d'information donnée.

		<meta name="author" content="V. Le Blanc">
		<meta name="description" content="ceci est un fichier d'aide en html, pour les personnes qui n'y connaissent rien">
		<meta name="copyright" content="vleblanc">
		<meta name="keyword" content="aide, html, balise, attribut, accent, liste, image, tableau, formulaire, javascript,  feuille de style, CSS">

On peut aussi renseigner le navigateur sur la langue : <meta http-equiv="content-language" content="fr">, ou sur des choses qu'il a à faire : recharger la page à chaque fois qu'on la demande (au lieu de se servir de la mémoire cache), rechargé la page au bout d'un temps déterminé (par exemple si on a une webcame qui filme et que l'on transmet l'image via internet), rediriger vers une autre page au bout d'un temps déterminé,...

		<meta http-equiv="Pragma" content="no-cache"> page totalement rechargée à chaque fois qu'on la demande ;
		<meta http-equiv="Refresh" content="30"> temps au bout duquel la page est rechargée, en seconde ;
		<meta http-equiv="Refresh" content="10;url=http://www.ens-lyon.fr"> redirige au bout de 10 secondes vers l'autre page.

Les feuilles de style, le CSS (Cascading Style Sheet)

Maintenant qu'on a fait du texte, il faut le mettre en page. Pour cela, on peut redéfinir certains paramètres de certaines balises soit localement, comme on l'a vu dans le paragraphe 'mise en page', soit globalement : par exemple dire que tous les titres de type h1 seront centrés, en blanc sur fond bleu... Ce qui est fait globalement aura sa place soit dans l'en-tête, soit dans un fichier à part. Dans les deux cas, ce sera du CSS (Cascading Style Sheet). Nous allons maintenant voir les deux méthodes.

Dans l'en-tête

Pour faire comprendre au navigateur que l'on va utiliser du CSS, on va procéder un peu comme pour le javascript. Entre les balises head, on met :

		<STYLE type="text/css">
		  <!--
			nom {propriété:valeur;propriété:valeur}
		  -->
		</STYLE>

Dans un fichier à part

L'avantage de mettre la feuille de style dans un fichier à part, c'est qu'elle peut être commune à plusieurs pages en même temps et du coup elle peut être modifiée sur toutes ces pages en même temps. Pour ce faire on va créer un fichier nomfichier.css dans lequel on redéfinit les commandes voulues, les unes derrières les autres selon le modèle nom {propriété:valeur; propriété:valeur}. Pour mettre des commentaires, on met : /*commentaire*/.
Pour insérer le style dans la page html, il y a deux méthodes : soit le style lié par :

<link rel="stylesheet" type="text/css" TITRE="titre que l'on veut lui donner" href="URL"> ; soit le style importé par :

		<STYLE type="text/css" MEDIA="all/printer/screen"><
		  <!--
			@import"URL";
		  -->
		</STYLE>

Les différentes commandes

Voici quelques exemples de choses que l'on peut faire :

 
		b {font-weight:normal;
		  font-style:italic}
		i {font-style:normal;
		  font-weight:bold}	
		a {text-decoration:none;
		  color:#AAAAAA}
		a:hover{font-weight:bolder}
		a:active{font-weight:bolder;
		  color:#ff0000}
		a:visited{font-style:italic}

En ce qui concerne les 3 derniers exemples : a:hover permet de dire que faire quand la souris passe au-dessus du lien, a:active quand le lien est activé, et a:visited une fois que le lien n'est plus actif, mais a déjà servi à l'internaute.
On peut bien entendu modifier toutes les balises existentes. Voici quelques propriétés et valeurs associées, cela vous sera certainement bien utile pour créer vos propres feuilles de style. Je vous laisse imaginer ce qu'elles signifient et les essayer : une expérience vaut parfois mieux qu'un long discours !

		font-size : 12px/pt/im/mm
			    xx-large/x-large/large/medium/small/x-small/xx-small
		font-weight:normal/bold/bolder/lighter
		font-style:italic/normal/oblique
		font-variant:normal/small-caps
		font-family:serif/sans-serif
		
		text-decoration:none/underline/overline/line-through
		text-align:left/right/center/justify
		text-indent:20px
		text-transform:lowercase/uppercase/Capitalize/none
		color:
			
		background-color:
		background-image:mer.jpg
		background-repeat:repeat/no-repeat/repeat-x/repeat-y
		background-position:top/bottom/center/left/right
		background-attachment:fixed/scroll
		
		color-style:none/dotted/dashed
			     solid/double
			     groove/ridge
			     inset/outset
		color-color:

Les nouvelles balises

On peut également créer différentes classes de balise : par exemple on peut vouloir qu'un paragraphe P est différents styles selon leur places dans la page,... On peut également vouloir créer de nouvelles balises,... Voyons un petit peu ce que l'on peut faire pour appliquer le style à

tous les éléments de la page
* {color:#0000ee}
une balise
P {color:#cccccc}
une classe d'élément
P.vert {color:#008000}
Pour faire appel à cette classe on mettra <P class="vert">
un ensemble d'éléments
.gris {color:#808080}
Pour y faire appel, on mettra
- <div class="gris"><h1>...</h1><p>...</p></div> pour un ensemble d'éléments
- <span class="gris">texte</span> pour une partie du contenu
- <span class="gris">texte</span> pour une balise
plusieurs éléments simultanément
h1,h2,h3 {color:#ff0000}

un élément à définir

		div#pied_page {width:800px;
		  background-color:#cccccc;
		  color:5px dotted;
		  margin_left:15%;
		  float left;
		  position:absolute;
		  top:600px}

Et, pour y faire appel, on met : <div id="pied_page"> texte+image+...</div>

Vous avez pu remarquer que dans le document ici présent, j'ai en particulier changé les titres de type h2, mis un pied de page,... N'hésitez pas à jeter un oeil sur le code source (les navigateurs permettent normalement d'y avoir accés), et sur le fichier .css (vous en trouverez le lien dans le code source).

Mettre notre site sur internet

Vous avez maintenant pu constituer un site internet d'une ou plusieurs page, avec des liens,... Mais on a pas encore dit comment mettre toutes ces données sur internet. Pour cela, il faut un hébergeur (gratuit ou payant, souvent les labos peuvent être hébergeur et on trouve des hébergeurs gratuits assez facilement). Pour transférer les données, c'est en général du ftp. On peut utiliser des logiciels pour les transfert ftp : filezila ou cyberduck (pour mac). L'important à savoir est que quand on ouvre un dossier depuis un navigateur, la page qui s'affiche est celle de ce dossier appelée : index.html.

Des références

Voici pour finir quelques références
Une page sur le sujet.
Un site qui parle de tout y compris de javascript.

Votre avis m'intéresse

J'ai écrit cette page en apprenant moi-même le html et le css. Cette page est donc la toute première que j'ai écrite. J'aimerais qu'elle soit utile à ceux qui comme moi veulent apprendre rapidement à faire les choses bien. Afin d'améliorer cette page, je suis preneuse de toute opinion constructive, tant sur le contenu qui doit certainement être limite parfois, que sur la forme (l'ordre dans lequel j'ai mis les différents points, l'utilité des rubriques, la manière de les présenter,...). Pour ce genre de remarque vous pouvez m'envoyer un mail, via le formulaire :

Retour au haut de page

M'écrire

Comment créer sa propre page web ?