recherche

HTML: Cours sur le langage HTML (Frédéric Jacquenod)

Support : Ce cours est réalisé sur des machines sous système unix à partir du logiciel netscape compatible HTML V3.
Objectif : Ce cours a pour but, de permettre, aux personnes le suivant, de pouvoir réaliser un ensemble de pages en langage HTML, contenant du texte, des images, des liens hypertextes, des tableaux, des formulaires d'interrogations.

I Introduction
II Ma première page en HTML
III Les tableaux
IV Les images cliquables balise MAP
V Les Formulaires
VI Autres mots clés
- HR
- BR
- P
VII Les mots clés importants
VIII Les feuilles de style
IX Conclusion

I Introduction HTML signifie HyperText Markup Language. Ce langage permet de présenter des informations d'ordre privé ou publique accessibles de n'importe quel endroit du monde et pouvant rassembler des textes, images et autres de sources géographiquement éloignées.
Pour cela, bien entendu, vous devez avoir accès à internet et utiliser un butineur ou navigateur ou browser selon l'appellation du pays.

Pourquoi apprendre le langage HTML ?

C'est un nouveau moyen de communiquer. Cela vous permet de présenter vos travaux, que vous soyez un enseignant, un étudiant ou une entreprise.
Pour un particulier, créer des pages en langage HTML peut paraître un peu mégalomane mais toutes les créations proposées au regard d'autrui le sont, tout dépend de ce que contiennent vos pages et de quelle façon vous les présentez.
Par contre ce que vous réalisez peut être visible dans le monde entier ce qui augmente considérablement le nombre de personnes qui peuvent être intéressées ou qui peuvent vous apporter des informations sur le sujet que vous traitez.
Pour une entreprise, cet outil peut devenir un moyen privilégié pour communiquer avec le monde à un coût bien inférieur au prix d'une campagne de promotion par d'autres moyens (presse, télévision ...).
Il peut permettre de mettre en valeur son image de marque, de la "mondialiser" mais aussi de promouvoir ses produits et pourquoi pas de les vendre par ce moyen.
Il est vrai qu'internet n'est pas encore un outil de consommation courante, les foyers ne sont pas encore tous équipés d'un ordinateur loin de là, les coûts des communications téléphoniques sont &eacutiques sont élevées, mais plus il y aura de contenu intéréssant sur le web, plus les utilisateurs seront nombreux et plus la connaissance des langages qui permettent de créer seront une des conditions de recrutement par les entreprises.
Quel autre moyen peut aussi simplement vous permettre d'allier du texte à des graphiques et des images et ainsi rendre beaucoup plus attrayant la lecture d'un document ?
Comme pour toutes constructions importantes il est nécessaire de participer et de poser sa pierre pour agrandir l'édifice. Il est très intéressant de regarder, de sauter de page en page, mais dans ce cas votre attitude est passive. Si vous créez votre page, sur n'importe quel sujet, vous devenez actif et là, votre contribution à cet édifice, même minime, permet de faire avancer le tout.
Il est toujours agréable de créer et d'apprendre.
Il est important lorsqu'un nouveau moyen de communication se crée de l'utiliser pour ne pas être, surtout en informatique où tout va très vite, laissé de côté et très vite dépassé. Il est étonnant de voir le peu d'intérêt que suscite l'internet dans son ensemble en France par rapport aux autres pays (USA, Angleterre ...).
Les possibilités ossibilités qu'offre ce moyen de communication sont gigantesques, il est nécessaire de l'utiliser.

Il existe des éditeurs HTML qui permettent de créer des pages web comme PageMill, WebEditeur, aswedit ... Cela peut vous éviter d'apprendre le langage HTML par contre le jour où vous devrez maintenir des pages web et que vous n'avez pas votre logiciel habituel alors vous serez incapables de faire quoique ce soit.

II Ma première page en HTML

Attention :

II.1 Qu'est ce que le langage HTML ?

II.2 Comment structurer une page HTML ?

Même si vous ne respectez pas cette structure, votre page sera lisible par un butineur mais par contre vous aurez peut être vous du mal à relire le code de votre page car cela risque d'être le bazar. Il est donc préférable de prendre de bonnes habitudes dès le début et de structurer vos pages de la façon suivante, afin de vous offrir une meilleure lisibilité :

<HTML>

début du document

........

</HTML>

Fin du document

Les balises HTML indiquent que le document est dans ce langage.
Entre les balises HEAD vous devez mettre tout ce qui concerne l'environnement de votre page, le titre, les couleurs du texte, les liens et autres informations. Ces éléments n'apparaissent pas directement dans la page.
Les balises TITLE permettent de faire apparaître dans la zone titre de votre navigateur le texte que vous insérez entre ces balises. Cette partie est souvent négligée et c'est dommage. En effet il permet d'indiquer clairement et de manière brève sur quel sujet porte le document mais il permet aussi d'avoir pour le lecteur qui enregistre votre page (ou URL) dans son bookmark comme lien le texte explicatif que vous avez inséré.
Il est donc préférable de mettre comme texte explicatif "SERVEUR PEDAGOGIQUE DU CAMPUS JUSSIEU" plutôt que "SERVEUR PEDAGOGIQUE" ainsi le lecteur saura tout de suite en regardant ces liens à quoi ils correspondent.

Exemple du titre des pages du CICRP
Entre les balises BODY vous insérez les éléments qui constitueront votre page, les informationsage, les informations texte, images, liens, le fond d'écran si c'est une image, les formulaires ...

Afin de vous repérer dans vos pages, il est conseillé d'utiliser des majuscules pour tout ce qui est balise et mot clé du langage. De cette façon vous augmentez la lisibilité de votre document source.
Si vous ne procédez pas ainsi, vous n'affecterez pas le contenu ou la forme de votre document, les balises en majuscules ou en minuscules produisent le même èffet.
Vous pouvez aussi insérer des commentaires afin de marquer les parties importantes de votre document source. Bien évidemment, ces commentaires n'apparaîtront pas aux personnes regardant vos pages.
Les commentaires sont définis par la balise suivante :
Il est aussi nécessaire de signer toutes vos pages afin que les personnes qui les consultent, connaissent l'auteur et puissent le joindre, mais aussi tout simplement parce que si vous créez quelque chose, que vous apportez des informations il est de bon ton d'assumer ce que vous écrivez en le signant.
Deux formes de signatures sont à insérer, votre nom et votre adresse électronique. Voir le paragraphe II.8.
N'oubliez pas aussi de dater vos pages en insérant la date de la dernière modification rave;re modification ainsi au premier coup d'oeil, il est possible de déterminer si de nouvelles informations sont disponibles depuis la dernière consultation.

Toutes ces recommandations vous permettrons de respecter la fameuse "netiquette".

II.3 Les formats de Texte

Les différents formats de texte

<B>en gras</B>	en gras
<I>en italique</I>	en italique
<CITE>citation</CITE>	citation
<TT>style machine</TT>	`style machine`
<SAMP>affiche un exemple</SAMP>	`affiche un exemple`
<STRIKE>texte rayé</STRIKE>	~~texte rayé~~
<STRONG>caractère épais</STRONG>	caractère épais
<BLINK>texte qui clignote</BLINK>	texte qui clignote
<EM>texte en relief</EM>	texte en relief

Bien évidemment les balises peuvent être combinées :
<STRIKE><I>Italique et rayé</STRIKE></I>

~~Italique et rayé~~

La taille des caractères

<H1>Taille 1</H1>
Taille 1
<H2>Taille 2</H2>
Taille 2

<H3>Taille 3</H3> Taille 3

<H4>Taille 4</H4> Taille 4

<H5>Taille 5</H5> Taille 5

<H6>Taille 6</H6> Taille 6
Vous pouvez aussi utiliser à partir de la version 2 de HTML une balise <FONT> combinée avec l'option SIZE=nombre où nombre est compris entre les valeurs 1 à 7 afin de définir la taille des caractères.
<FONT SIZE=7>Taille 7</FONT> Taille 7
<FONT SIZE=6>Taille 6</FONT> Taille 6
<FONT SIZE=5>Taille 5</FONT> Taille 5
<FONT SIZE=4>Taille 4</FONT> Taille 4
<FONT SIZE=3>Taille 3</FONT> Taille 3
<FONT SIZE=2>Taille 2</FONT> Taille 2
<FONT SIZE=1>Taille 1</FONT> Taille 1
Les accents

à à
â â
ç ç
é é
è è
ë ë
ê ê
ï ï
ö ö
ô ô
ù ù
û û

Vous pouvez aussi les taper directement sur votre clavier mais attention si une personne n'utilise pas le même codage de caractères que vous (ici isolatin1) il ne verra pas ces accents et cela risque de perturber son affichage. Il est donc plutôt conseillé d'utiliser, même si cela est plus lourd, la syntaxe précédente.
Les paragraphes

Texte déjà formaté
Si vous avez un texte déjà écrit et que vous voulez le mettre sur une page ce serait long de le reformater en HTML afin d'avoir la même présentation (ajout de <BR> à chaque fin de ligne, repositionner le texte ...). Vous pouvez utiliser alors une balise très pratique qui conservera le format originel de votre texte.
<PRE>Texte formaté</PRE>

Mais attention le formatage ns attention le formatage n'est plus géré par votre navigateur, ce qui veut dire en clair que si le contenu d'une ligne de votre texte dépasse la taille définie par la fenêtre de votre navigateur alors apparaîtront des ascenseurs. Il sera alors obligatoire de les utiliser pour lire toute la ligne.
Exemple d'une ligne dont le formatage est prédéfini et la même dont la gestion est laissée au navigateur.

Les listes
Vous pouvez aussi directement formater votre texte en titre, sous-titre ... précédés d'indications de niveaux (Un caractére ou un numéro).
Les balises <OL></OL>, <UL></UL> ou <DL></DL> permettent de définir le niveau.
En combinant ces balises vous définissez plusieurs niveaux d'affichage.
La balise <LI> permet de définir le type d'indication de niveau voulu (caractère ou numéro).

La liste numérotée

<OL>
<LH>En-tête du document</LH>
<LI>Titre
<OL>
<LI>Sous-titre
<LI>Sous-titre
</OL>
<LI>Titre
</OL>

En-tête du document
Titre

Sous-titre
Sous-titre

Sous-titre
Sous-titre

Titre

La liste non numérotée

<UL>
<LH>En-tête du document</LH>
<LI>Titre
<UL>
<LI>Sous-titre
<LI>Sous-titre
</UL>
<LI>Titre
</UL>

En-tête du document
Titre

Sous-titre
Sous-titre

Titre

Liste descriptive

<DL>
<DT>Titre
<DD>texte
<DT>Titre2
<DD>texte2
</DL>

Titre
texte
Titre2
texte2

Vous pouvez utiliser une option qui est COMPACT qui se positionne de la façon suivante <DL COMPACT> et qui permet d'aligner le texte avec le titre sur la même ligne.

La couleur des caractères

La balise est celle déjà évoquée lors de la définition de la taille des caractères <FONT></FONT> mais cette fois-ci avec l'option COLOR=.
Deux possibilités sont utilisables pour définir la couleur soit la donner en clair red, blue, yellow ... ou donner la cou la couleur soit la donner en clair red, blue, yellow ... ou donner la couleur sous le format hexadécimale.
Le format hexadécimale vous permettra d'obtenir une palette de couleur plus importante.
Le codage se fait de la façon suivante :
Remarque :
Vous pouvez avoir un aperçu des codages en
Cliquant ici

II.4 Comment insérer une image au texte ?
- ALIGN=TOP|MIDDLE|BOTTOM|LEFT|RIGHT
  
  <IMG ALIGN=TOP SRC="..."> la flèche est au dessus du texte
  
  <IMG ALIGN=MIDDLE SRC="..."> la flèche est au milieu du texte
  
  <IMG ALIGN=BOTTOM SRC="..."> la flèche est en dessous du texte
  
  <IMG ALIGN=LEFT SRC="...">
  Le texte va encadrer la flèche
  Cette dernière est centrée à gauche
  
  <IMG ALIGN=RIGHT SRC="...">
  Le texte va encadrer la flèche
  Cette dernière est centrée à droite
- VSPACE
  
  Cette option permet de définir l'espace vertical que vous allez mettre entre l'image et le texte. Cette option est souvent utilisée avec LEFT et RIGHT.
  Dans cet exemple le texte précédent au dessus de l'image est plus éloigné que l'exemple sans VSPACE.
  
  <IMG VSPACE=40 SRC="applecom.gif">
- HSPACE
  
  Cette option permet de définir l'espace horizontal que vous allez mettre entre l'image et le texte. Cette option est souvent utilisée avec LEFT et RIGHT.
  Dans cet exemple le texte et la flèche sont plus éloignés de l'image que dans l'exemple sans HSPACE.
  
  <IMG HSPACE=40 SRC="applecom.gif">
- WIDTH et HEIGHT
  
  Ces options permettent de redéfinir la taille de l'image.
  Attention : Si vous augmentez la taille, l'image perdra de sa qualité
  
  <IMG WIDTH=30 HEIGHT=30 SRC="applecom.gif">
- BORDER
  
  Cette option permet de fai
  Cette option permet de faire un cadre autour de l'image plus ou moins large.
  
  <IMG BORDER=1 SRC="applecom.gif">
  <IMG BORDER=10 SRC="applecom.gif">
- Remarques
  
  Parfois ces options ne suffisent pas, ne vous donnent pas entière satisfaction, dans ce cas vous devez utiliser un tableau et positionner chaque élément dans une cellule séparée, l'alignement sera souvent meilleur.
  Vous avez deux possibilités pour insérer une image :
  - L'image est sur votre compte
  - L'image est sur un autre site
  Le premier cas utilise de l'espace disque mais très peu de ressource réseau à l'inverse du deuxième cas. Mais attention dans le deuxième cas, si le site distant n'est plus accessible ou si le chemin d'accès vers l'image a été modifié vous vous trouverez avec un ralentissement conséquent lors du chargement de la page et d'une icône comme celle-ci.
  Attention au copyright.
II.5 Utilisons l'hypertexte et réalisons nos premiers liens
- Le lien vers un élément externe à vos pages
  
  La balise est :
  <A HREF="adresse">Zone cliquable</A>
  Lorsque vous cliquez sur "Zone cliquable", votre butineur charge la page référencée par "adresse".
  Cette page peut être, sur votre serveur comme à l'autre bout du monde, mais pour vous ce sera transparent.
  Réalisons un lien sur le CICRP.
  Le CICRP
  
  Les liens peuvent aussi bien être des liens vers des pages web que vers des serveurs ftp, des serveurs de news, des serveurs gopher ou vers une machine accéssible en telnet ou vers d'autres services comme le courrier électronique.
  Le site ftp du cicrp
  Les news de jussieu
  Lien vers une adresse électronique voir le paragraphe II.7
- Le lien vers un élément interne à vos pages
  
  Lorsque vous avez un document assez long il est parfois intéressant pour la personne qui le consulte de pouvoir atteindre l'information désirée juste en cliquant sur un lien ou un mot clé qui l'envoie directement au bon endroit.
  Un peu comme le font certains langages utilisant notamment le mot clé GOTO.
  Vous pouvez ainsi réaliser un plan en début de votre document (comme sur celui-ci) et ainsi clarifier, simplifier la recherche dans ce dernier.
  L'utilisateur se déplace ainsi directement sans avoir à utiliser les ascenseurs, juste en cliquant sur les mots clés comme pour une lien extèrieur.
  Il perd moins de temps et trouve immédiatement l'informae;diatement l'information.
  
  Les balises sont :
  <A HREF="#étiquette">Zone cliquable</A>
  associé à la balise
  <A NAME="étiquette">
  Vous pouvez associer les deux balises dans une seule ce qui permet de faire des va-et-vient très utiles par exemple pour les notes de bas de pages.
  Vous faites dans votre texte une annotation qui renvoie en cliquant à la note de bas de page qui elle même renvoie à cette annotation.
  Ainsi une fois la lecture de la note de bas de page faite, vous revenez directement là où vous étiez resté dans le texte, simple et pratique.
  <A HREF="#bas_de_page" NAME="annotation">(annotation 1)</A>
  .....
  <A HREF="#annotation" NAME="bas_de_page">(bas de page 1)</A>
- Une image comme ancre
  
  Un lien hypertexte peut aussi bien se faire avec un texte,une image ou les deux à la fois. L'image est alors la "Zone cliquable".
  
  <A HREF="http://www.cicrp.jussieu.fr"> <IMG SRC="..."></A>
  
  Vous pouvez dans ce cas ajouter comme option à la balise IMG, BORDER=chiffre afin de grossir le trait qui entoure l'image, la rendant ainsi plus visible. Voir les options possibles au paragraphe II.4.
  
  <A HREF="http://www.cicrp.jussieu.fr"> <IMG BORDER=6 SRC="..."></A>
- Option de la balise A HREF
  
  Vous pouvez lors du clic sur un lien hypertexte faire en sorte qu'une autre fenêtre du navigateur s'ouvre contenant la page référencée au lieu de la faire afficher dans la fenêtre courante.
  Cela permet notamment de garder les informations importantes dans la fenêtre courante.
  Pour cela utilisez l'option TARGET.
  <A TARGET=nom_de_la_fenetre HREF="adresse">zone hypertexte</A>
  
  Toutes les pages référencées par nom_de_la_fenetre s'ouvriront dans la même fenêtre.
II.6 La balise BODY pour le fond de page et la couleur du texte
- Le fond de page
  - L'option BGCOLOR
    
    Les couleurs sont codées en héxadécimales comme vu dans le paragraphe II.3. Cliquez ici pour les voir
    
    La balise à utiliser est <BODY BGCOLOR=#nombre_héxa>
    Pour cette page la syntaxe est <BODY BGCOLOR=#808080>
  - L'option BACKGROUND
    
    La balise à utiliser est <BODY BACKGROUND="image">
    Exemple
    La syntaxe pour la page de l'exemple est :
    <BODY BACKGROUND="/jacqueno/GALERIE/FOND/a103.jpg">
- La couleur du texte
  
  Nous avons vu au paragraphe II.3 comment modifier les couleurs d'un texte grâce à la balise FONT. Cette modification est ponctuelle, mais il est possible d'indiquer une fois pour toute quelles couleurs doivent être utilisées pour tout le texte du document ainsi que pour les ancres dans leurs différentes phases.
  Le codage des couleurs se fait en héxadécimales voir paragraphe II.3.
  - L'option TEXT
    
    Cette option permet de positionner la couleur du texte standard (hors lien). Par défaut la couleur est noire.
    Syntaxe :
    <BODY TEXT="#nombre_héxa">
  - L'option LINK
    
    Cette option permet de positionner la couleur d'un lien ou ancre qui n'a pas encore été visité. Par défaut la couleur est bleue.
    Syntaxe :
    <BODY LINK="#nombre_héxa">
  - L'option VLINK
    
    Cette option permet de positionner la couleur d'un lien ou ancre a déjà été visité. Par défaut la couleur est violette.
    Syntaxe :
    <BODY VLINK="#nombre_héxa">
  - L'option ALINK
    
    Cette option permet de positionner la couleur d'un lien ou ancre au moment où l'on clique dessus. Par défaut la couleur est rouge.
    Syntaxe :
    <BODY ALINK="#nombre_héxa">
  Toutes ces options peuvent être combinées.
  Pour ce document la ligne est :
<BODY BGCOLOR="#808080" TEXT="#FFFFFF" VLINK="#FFFF80" LINK="#000080">
II.7 Ajouter son adresse électronique

III Les tableaux

Lorsque vous présentez des données, un tableau peut être un moyen clair de les disposer.
La construction d'un tableau nécessite un ensemble de balise pour déterminer les colonnes, les lignes, le titre, la taille des bordures ...

<TABLE></TABLE>		Début et fin du tableau
<CAPTION></CAPTION>		Titre du tableau
<TH></TH>		Titre de chaque colonne
<TD></TD>		Début et fin d'une case du tableau
<TR></TR>		Nouvelle ligne du tableau

Ces balises peuvent avoir des options bien pratiques pour le centrage des éléments du tableau.

Les options disponibles pour les balises de tableau
Balises concernées	Options	Significations
<TABLE>	BORDER=chiffre	Epaisseur des traits du tableau
<TABLE>	CELLSPACING=chiffre	Espacement inter-cellule
<TABLE>	CELLPADDING=chiffre	Espacement texte - bord de la cellule
<TABLE>	WIDTH=%	Proportion entre tableau et document
<TABLE>	BGCOLOR=	Positionne un fond de couleur dans un tableau
<CAPTION>	ALIGN=TOP\|BOTTOM	Titre en haut ou en bas du tableau
<TR> <TH> <TD>	ALIGN=CENTER\|LEFT\|RIGHT	Alignement du texte dans les cellules
<TH> <TD>	VALIGN=TOP\|MIDDLE\|BASELINE	Alignement vertical
<TH> <TD>	NOWRAP	La ligne d'une cellule est insécables
<TH> <TD>	COLSPAN	Nombre de cellules horizontales a recouvrir
<TH> <TD>	ROWSPAN	Nombre de cellules verticales a recouvrir
<TH> <TD>	BGCOLOR=	Positionne un fond de couleur dans une cellule

Le tableau peut permettre de centrer une image et du texte

La flèche
est
centrée

Pour se faire il vous suffit de définir un tableau sans bordure et de positionner votre texte dans des cellules. Le source de ce petit tableau est le suivant.

<TABLE BORDER=0>
<TD><IMG ALIGN=TOP SRC="fleches.gif" ></TD>
<TD><H2>La flêche<BR>est<BR>centréee</TD>
</TABLE>

IV Les images cliquables balise MAP

paragraphe II.5

Vous devez utiliser l'option USEMAP avec la balise IMG pour indiquer que vous définissez une image cliquable.
Ensuite vous devez ouvrir la map "nom_map" en indiquant les différentes coordonnées des zones cliquables.

Vous devez définir le type des différentes zones cliquables de votre image en utilisant son Mot Clé, en indiquant le lien sur lequel cette zone pointe et les coordonnées dpe des différentes zones cliquables de votre image en utilisant son Mot Clé, en indiquant le lien sur lequel cette zone pointe et les coordonnées définissant l'élément.

Type	Mot clé	Comment référencer l'élément
Rectangle	RECT	X1,Y1 point Haut Gauche X2,Y2 point Bas Droit
Cercle	CIRCLE	X1,Y1 Centre du cercle R Rayon du cercle
Polynome	POLY	X1,Y1 Première extrémité X2,Y2 Deuxième extrémité X3,Y3 .....................
Defaut	DEFAULT	Pour les points non définis précédemment

Exemple :

Ce plan est divisé en quatre cases.
Il peut être intéressant de proposer à la personne qui clique sur une des cases, un agrandissement de la zone cliquée ou des informations sur cette zone.
Pour cela vous pouvez utiliser les MAP, et rattacher chaque case à un lien.

Il faut donc trouver les coordonnées des différentes cases.
Pour cela utilisez un logiciel tel que Xview sur les machines unix (tapez xv).
Vous pouvez utiliser n'importe quel logiciel qui vous permet de recupérer les coordonnées absolues des différentes parties d'une image.

Grille de controle du logiciel XView

Utilisation de xv.

Ouvrez l'image à traiter (Load)
Cliquez sur les points qLoad)
Cliquez sur les points qui déterminent les sommets de vos zones cliquables avec le bouton gauche de votre souris.

Dans notre exemple, nous avons 4 rectangles. Ce qui défini un rectangle sont ses sommets haut gauche (X1,Y1) et bas droit (X2,Y2).
Il faut donc déterminer ces deux points pour chaque rectangle.
Nous aurons :

Rectangle 13 : (X1,Y1)=(0,0) et (X2,Y2)=(108,81)
Rectangle 14 : (X1,Y1)=(108,0) et (X2,Y2)=(209,81)
Rectangle 19 : (X1,Y1)=(108,81) et (X2,Y2)=(209,154)
Rectangle 18 : (X1,Y1)=(0,81) et (X2,Y2)=(108,154)

Le source pour cette image cliquable est :

<IMG USEMAP="#nantes" SRC="carre.gif">
<MAP NAME="nantes">
<AREA SHAPE="RECT" HREF="adresse1" COORDS=0,0,108,81>
<AREA SHAPE="RECT" HREF="adresse2" COORDS=108,0,209,81>
<AREA SHAPE="RECT" HREF="adresse3" COORDS=108,81,209,154>
<AREA SHA COORDS=108,81,209,154>
<AREA SHAPE="RECT" HREF="adresse4" COORDS=0,81,108,154>
</MAP>

Les adresses des liens sont visibles lorsque vous passez la souris sur les cases.
Il est tout à fait possible d'avoir sur une même image des types de zones cliquables différent, un rectangle et un cercle ....

V Les formulaires

V.1 Présentation Nous avons vu dans les paragraphes précédents comment présenter les informations, comment structurer un document ...
Mais mis à part le cas où le lecteur vous envoie un courrier électronique, vous n'avez pas la possibilité d'avoir une interaction avec ce dernier.
Le langage HTML résoud ce problème en proposant des formulaires ou forms qui permettent de générer des zones de "dialogue" avec le lecteur.
Ces zones ou champs peuvent être du texte, des listes, des cases à cocher, des zones de saisies d'informations ....
Ces formulaires n'ont aucun intérêt si vous ne pouvez pas récupérer l'information fournie par le lecteur et ensuite la traiter. C'est pourquoi les formulaires nécessitent d'être associés à un programme.
Par exemple pour intérroger une base de données, réaliser une enqu&ecréaliser une enquête via le web, proposer toutes sortes de programmes avec l'interfaçage web (questionnaires, correcteur orthographique, dictionnaires ...).

Dans ce paragraphe nous verrons uniquement les différentes formes de formulaires et comment les mettre en oeuvre. La partie programmation ou CGI (Common Gateway Interface) sera traitée dans un autre cours.

Le principe des formulaires est le suivant :
V.2 La balise FORM Elle indique que l'on va utiliser un formulairiliser un formulaire. Les balises générant les boutons, zone de texte et autres éléments seront entre cette balise. Deux formulaires ne peuvent etre imbriqués.
<FORM></FORM>

Les options de cette balise sont :
- ACTION
  
  Cette option indique l'URL de destination des données. Généralement cette URL sera l'adresse d'un programme. Cet attribut est obligatoire.
  ACTION="adresse"
- METHOD
  
  Cette option indique la façon dont vont être transmises les données POST ou GET.
  METHOD="POST" ou METHOD="GET".
  La première envoie les données sans l'adresse indiquée dans l'option ACTION tandis que GET envoie aussi l'adresse.
  Cette option n'est pas obligatoire, par défaut GET sera positionné.
- ENCTYPE
  
  Cette option indique le type MIME des données lorsque vous positionnez l'attribut METHOD="POST". Elle est optionnelle.
Les zones de dialogue avec l'utilisateur sont définies en trois classes représentées par trois balises :
INPUT, SELECT et TEXTAREA.
Ces balises doivent se situer entre la balise FORM.
V.3 La balise INPUT Les différents attributs de cette balidifférents attributs de cette balise.
- NAME
  
  Cet attribut est obligatoire. Il associe un nom de variable aux informations récupérées et les transmet au programme sous la forme nom_variable=valeur.
  Attention, excepté pour les cases à cocher et les boutons radio, le nom doit être unique dans le formulaire sinon il y aurait des confusions et des dysfonctionnements.
  NAME="nom_variable"
- TYPE
  
  Cet attribut est obligatoire. Il permet de définir le type de la zone de saisie. Les valeurs possibles sont les suivantes :
  - CHECKBOX
    
    TYPE="CHECKBOX" permet la création de cases à cocher.
    Lorsque vous cochez une case, l'autre ne réagit pas.
    Les cases à cocher sont indépendantes les unes des autres. Première case
    Deuxième case Le source est le suivant
    
    <FORM ACTION="rien.pl">
    <INPUT NAME="case" TYPE="CHECKBOX">Première case
    <BR>
    <INPUT NAME="case" TYPE="CHECKBOX">Deuxième case
    </FORM>
    
    case est le nom de la variable qui référence les données.
    rien.pl est le programme qui recevra les données à traiter.
  - HIDDEN
    
    TYPE="HIDDEN" permet la création d'un élément de saisie non visible à l'écran mais son contenu sera transmis au programme.
  - IMAGE
    
    TYPE="IMAGE" permet la création d'une image cliquable comme nous l'avons vu au paragraphe IV. Les éléments transmis au programme sont alors les coordonnées x et y de la zone où a eu lieu le clique.
    Si la variable se nomme "zone", le programme recevra zone.x=coord_x et zone.y=coord_y.
  - PASSWORD
    
    TYPE="PASSWORD" permet la création d'une zone de saisie dans laquelle les caractères tapés par l'utilisateur sont remplacés par des étoiles, offrant ainsi une plus grande confidentialité.
    Les données récupérées par le programme sont, elles, en clair.
    
    Entrez votre mot de passe
    Le source est le suivant
    
    <FORM ACTION="rien.pl">
    <INPUT NAME="pass" TYPE="PASSWORD"> Entrez votre mot de passe
    </FORM>
    pass est le nom de la variable qui référence les données.
    rien.pl est le programme qui recevra les données à traiter.
  - RADIO
    
    TYPE="RADIO" permet la création d'un élément de saisie sous la forme d'un bouton radio.
    Les boutons radio sont liés les uns aux autres au même nom de variable. Vous ne pouvez faire qu'un choix, lorsque vous cliquez sur l'un d'eux, qui prend la valeur oui ou on, les autres sont mis à non ou off.
    Vous pouvez proposer bien évidemment plus de deux choix.
    Oui
    Non
    Le source est le suivant
    
    <FORM ACTION="rien.pl">
    <INPUT NAME="radio1" TYPE="RADIO" VALUE="oui"> oui
    <INPUT NAME="radio1" TYPE="RADIO" VALUE="non"> non
    </FORM>
    
    radio1 est le nom de la variable qui référence les données.
    rien.pl est le programme qui recevra les données à traiter.
    L'attribut VALUE est obligatoire avec le type RADIO, il permet d'initialiser la valeur de l'élément de saisie.
  - RESET
    
    TYPE="RESET" permet lorsque l'utilisateur clique sur ce bouton de remplacer toutes les valeurs qu'il a saisies par les valeurs par défaut positionnées grâce à l'attribut VALUE.
    
    Saisie
    
    Remplacez le texte de cette zone et cliquez sur "Effacez", le texte par défaut sera remis.
    
    Le source est le suivant
    
    <FORM ACTION="rien.pl">
    <INPUT NAME="zone" TYPE="TEXT" VALUE="Valeur par défaut"> Saisie
    <INPUT TYPE="RESET" VALUE="Effacer">
    </FORM>
    zone est le nom de la variable qui référence les données.
    rien.pl est le programme qui recevra les données à traiter.
    VALUE référence le texte par défaut de la zone de saisie.
  - SUBMIT
    
    TYPE="SUBMIT" permet de créer un bouton qui, lorsque l'utilisateur clique dessus, déclenche l'envoi des données au programme référencé dans le champ ACTION.
    
    Le source est le suivant
    
    <FORM ACTION="rien.pl">
    <INPUT TYPE="SUBMIT" VALUE="Soumettre">
    </FORM>
    Si vous cliquez sur le bouton, vous obtiendrez un message d'erreur. En effet le programme rien.pl n'existe pas.
  - TEXT
    
    TYPE="TEXT" crée une zone de saisie de texte dont la taille est définie par l'attribut SIZE.
    Cet attribut ne définit pas lat SIZE.
    Cet attribut ne définit pas la taille du texte entré mais uniquement la zone dans laquelle il est entré.
    
    Le source est le suivant
    
    <FORM ACTION="rien.pl">
    <INPUT NAME="texte" TYPE="TEXT" SIZE="20" VALUE="Le texte">
    <INPUT TYPE="RESET" VALUE="Effacez">
    </FORM>
- ALIGN
  
  Cet attribut n'est utilisé qu'avec l'attribut TYPE="IMAGE" et permet de positionner l'image par raport au texte.
  Les options de cet attribut sont TOP, MIDDLE et BOTTOM.
- CHECKED
  
  Cet attribut est optionnel et ne s'applique qu'aux TYPE="CHECKBOX" et TYPE="RADIO" et permet d'activer une case à cocher ou un bouton radio.
  Attention : vous ne pouvez activer qu'une case ou bouton par liste (référencé par la même variable).
  Dans cet exemple la case "oui" est cochée par défaut.
  Oui
  Non
  Le source est le suivant
  
  <FORM ACTION="rien.pl">
  <INPUT NAME="radio1" TYPE="RADIO" CHECKED VALUE="oui"> oui
  <INPUT NAME="radio1" TYPE="RADIO" VALUE="non"> non
  </FORM>
- MAXLENGTH
  
  MAXLENGTH="chiffre"
  Cet attribut permet de définir la longueur du buffer texte utilisé dans une zone de saisie de TYPE texte (TEXT, PASSWORD).
  
  Si vous essayez dans cet exemple d'entrer un texte de plus de 10 caractères, vous entendrez un bip et les caractères au delà de 10 ne seront pas pris en compte.
  
  Le source est le suivant
  
  <FORM ACTION="rien.pl">
  <INPUT NAME="zone" TYPE="TEXT" MAXLENGTH="10" SIZE="10" VALUE="0123456789">
  </FORM>
  MAXLENGTH définit le nombre de caractères maximum pouvant être saisi
  SIZE définit la taille de la zone de saisie
  Dans notre exemple les deux attributs ont la même taille mais cela n'est pas obligatoire.
- SIZE
  
  SIZE="chiffre"
  Permet d'indiquer la longueur de la zone de saisie. Voir l'exemple précédent.
- SRC
  
  SRC="adresse"
  N'est utilisable qu'avec le TYPE="IMAGE" et permet d'indiquer le lieu où se trouve l'image à insérer dans le formulaire.
- VALUE
  
  VALUE="valeur par défaut"
  Cet attribut n'est obligatoire qu'avec le TYPE="RADIO".
  Il permet de positionner dans la zone de saisie un valeur par défaut.
  
  Le source est le suivant
  
  <FORM ACTION="rien.pl">
  <INPUT NAME="zone" TYPE="TEXT" MAXLENGTH="10" SIZE="10" VALUE="0123456789">
  </FORM>
  La valeur par défaut qui s'affiche est "0123456789"
V.4 La balise SELECT Elle permet de créer des listes.
- Les menus déroulants
  
  Vous devez associer à cette balise différents attributs.
  - NAME
    
    Comme nous l'avons vu précédemment il permet d'associer un nom de variable aux données selectionnées par l'utilisateur.
  - OPTION
    
    Cet attribut permet de définir chaque élément texte du menu. Il précède chaque ligne de texte.
  - SELECTED
    
    Cet attribut fonctionne comme CHECKED et permet de définir un élément selectionné par défaut. Il n'est pas obligatoire.
  - Exemple
    
    Cliquez sur la zone ou ligne de texte pour obtenir les autres éléments selectionnables. Si SELECTED n'avait pas été positionné le choix par défaut aurait été "Premier choix".
    
    Le source est le suivant
    
    <FORM ACTION="rien.pl">
    <SELECT NAME="zone">
    <OPTION>Premier choix
    <OPTION SELECTED>Deuxième choix
    <OPTION>Troisième choix
    <OPTION>Quatrième choix
    <OPTION>Cinquième choix
    </SELECT>
    </FORM>
- Les listes à ascenseurs
  - SIZE
    
    Les attributs sont identiques au menu déroulant mais pour définir une liste à ascenseurs il vous suffit d'utiliser l'attribut SIZE="chiffre" qui affichera à l'écran "chiffre" lignes.
  - MULTIPLE
    
    Vous pouvez, en utilisant cet attribut donner la possibilité de réaliser plusieurs choix dans la liste.
  - Exemple
    
    Vous devez utiliser les ascenseurs pour obtenir les choix suivants non visibles.
    Tout comme précédemmen visibles.
    Tout comme précédemment le choix "Deuxième choix" est celui par défaut grace à l'attribut SELECTED.
    L'attribut MULTIPLE vous permet donc de réaliser plusieurs choix dans la liste, cliquez sur les différentes lignes.
    Vous pouvez désactiver un de vos choix en recliquant dessus.
    
    Le source est le suivant
    
    <FORM ACTION="rien.pl">
    <SELECT NAME="zone" SIZE="3" MULTIPLE>
    <OPTION>Premier choix
    <OPTION SELECTED>Deuxième choix
    <OPTION>Troisième choix
    <OPTION>Quatrième choix
    <OPTION>Cinquième choix
    </SELECT>
    </FORM>
V.5 La balise TEXTAREA Cette balise permet de créer une zone de saisie de texte sous forme de bloc.
La zone de saisie est délimitée par les attributs ROWS (lignes) et COLS (colonnes). Si vous entrez un texte plus long ou plus large que la zone de saisie, cette dernière positionnera alors des ascenseurs pour vous déplacer.
Le texte compris entre les balises <TEXTAREA></TEXTAREA> sera affi <TEXTAREA></TEXTAREA> sera affiché dans la zone de saisie.

Exemple

Entrez votre texte
Le source est le suivant

<FORM ACTION="rien.pl">
<TEXTAREA NAME="commentaire" COLS="30" ROWS="5">
Entrez votre texte
</TEXTAREA>
</FORM>

VI Autres mots clés

HR

Cette balise permet de tracer un trait.
Elle peut comporter certaines options.
- SIZE
  
  Permet d'indiquer l'épaisseur du trait.
  <HR SIZE=6>
- WIDTH
  
  Permet d'indiquer la largeur du trait.
  WIDTH="n" la largeur dépend de la taille de l'écran en pixels.
  <HR WIDTH="50">
  
  WIDTH="n%" la largeur dépend de la largeur du document.
  <HR WIDTH="55%">
- ALIGN
  
  Permet de positionner le trait par rapport au document. Les options sont LEFT, CENTER et RIGHT.
- NOSHADE
  
  Par défaut le trait est ombré. Cette option permet de rendre le trait noir.
  <HR SIZE=6 NOSHADE>
BR

Permet de sauter une ligne.
P

Permet de sauter une ligne mais à la différence de BR, le décalage est de deux lignes.

Un saut avec <BR>
puis un saut avec <P>
et le tour est joué

VII Les mots clés importants

Récapiltulatif des mots clés importants
BALISE	SIGNIFICATION	OPTIONS
<HEAD>	En-tête du document source	voir II.2
<BODY>	Corps du document source	voir II.2
<H?>	Modification de la taille d'un caractère	voir II.3
<PRE>	Insertion d'un texte préformaté	voir II.3
<UL>	Formatage d'un texte	voir II.3
<OL> <OL>	Formatage d'un texte	voir II.3
<DL>	Formatage d'un texte	voir II.3
<FONT>	Taille d'un caractère ou couleur	voir II.3 et II.3
<IMG SRC>	Permet d'afficher une image	voir II.4
<A HREF>	Permet de créer un lien hypertexte	voir II.5
<BODY BGCOLOR>	Insère une couleur de fond	voir II.6
<BODY BACKGROUND>	Insère une image de fond	voir II.6
<A HREF=mailto>	Ouverture d'une fenêtre de mail	voir II.7
<TABLE>	Création d'un tableau	voir III
<MAP>	Création d'une image cliquable	voir IV
<FORM>	Création d'un formulaire	voir V.2
<INPUT>	Les boutons et zones de saisie dans un formulaire	voir V.3
<SELECT>	Les menus dans un formulaire	voir V.4
<TEXTAREA>	Zone de dialogue texte dans un formulaire	voir V.5
<HR>	Permet de tracer un trait	voir VI
<BR>	Saut de ligne	voir VI
<P>	Saut de ligne	voir VI

Les feuilles de style

Note préalable:

Vous pouvez consulter ce document depuis n'importe quel browser, mais pour en visualiser les effets, il doit supporter les cascading style sheets (CSS). Netscape et Explorer, versions 4 et supérieures vous le permettent. Pour les autres, je ne sais pas.

Introduction

Le langage HTML n'a pas pour but de mettre en page les documents. Son but est de permettre la distinction entre les différents éléments d'une page, et c'est au browser de traiter l'affichage de celle-ci. Rien n'empêcherait donc quelqu'un de développer un browser qui interpréterait les balises <H> autrement que par un changement de taille, mais par un affichage décalé par exemple, le <H1> étant aligné complètement à gauche, le <H6> se retrouvant presque à droite. Le décalage indiquerait l'importance de la section dans le document. Cette conception reste tout à fait logique, puisque les balises <H> ne doivent pas être utilisées dans le but d'afficher du texte dans une police plus grasse et grosse, mais bien parce que c'est la section la plus importante de votre document. Mais un tel rendu dans ce type de browser ne donnerait pas le résulta attendu par le concepteur de la page... Et c'est ici que les feuilles de style interviennent.

Principe

Le but de la feuille de style est de permettre au concepteur (ou à l'utilisateur) de définir l'apparence des balises utilisées, voir même de pouvoir définir plusieurs styles pour une même balise. Ainsi, les auteurs auront un meilleur contrôle sur le résultat final de leurs pages web. Ce style peut être défini au moyen de la balise <STYLE> ou au moyen de la balise <LINK>.
Notons cependant que les feuilles de styles ne sont supportées (et encore, pas complètement) que par les versions 4 et supérieurs des browsers Netscape et Explorer....

STYLE

La balise <STYLE> défini le début et la fin de la section servant à définir les éléments de styles à appliquer au document. Cette section se place dans la partie <HEAD> du document et peut s'utiliser avec l'attribut TYPE . TYPE peut, pour le moment, avoir deux valeurs reconnues:

text/css : Utilisé pour indiquer que nous définissons une feuille de style
text/javascript : Cette valeur n'est gèrée que par Netscape 4.0 et sert à indiquer que l'on utilise des feuilles de styles en javascript.

Note: Dans Netscape, il est possible d'utiliser style à l'intérieur de la balise <BODY>

Exemple

<STYLE>


</STYLE>
<P>
<H1>Header taille 1</H1>
<H2>Header taille 2</H2>
<H3>Header taille 3</H3>
<H2>Header taille 4</H2>
<H5>Header taille 5</H5>
<H6>Header taille 6</H6>
<P>

Résultat

Header taille 1

Header taille 2

Header taille 3

Header taille 4

Header taille 5

Header taille 6

LINK

La balise <LINK> a pour but de définir les relations entre le document actif et les autres documents et ressources. D'après la norme HTML 3.2, elle doit être utilisée pour les menus et barres d'outils spécifiques au document, pour la gestion de l'impression du document, pour gérer la liaison avec les ressources associées telles que les feuilles de style et les scripts ou pour définir un rendu alternatif au document. <LINK> peut s'utiliser avec différents attributs :

HREF : Définit l'URL de la ressource liée.
REL : Spécifie le type de relation entre le document source et la ressource liée avec HREF . Les relations de type LINK ne sont pas encore standardisées, mais certaines valeurs sont déjà définies et/ou utilisées :

CONTENTS : Dans ce cas, LINK référence un document servant de table de matière.
COPYRIGHT : Ici, LINK définit le copyright pour le document actif.
FONTDEF : Sert à lier un fichier de définition de fontes (supporté par Netscape).
GLOSSARY : LINK référence un document contenant un glossaire des termes importants dans le document actuel.
HELP : LINK pointe sur un fichier contenant une aide concernant le document actif, par exemple en décrivant le contexte ou en offrant des liens vers d'autres documents traitant du même sujet.
HOME : LINK pointe sur la homepage du site.
INDEX : LINK référence un document fournissant un index du document actif.
NEXT : LINK référence le document suivant dans un tour guidé et peut être utilisé pour, par exemple, pré charger la page suivante. (supporté par WebTV)
PREVIOUS : LINK référence le document précédent dans un tour guidé.
SEARCH : LINK référence une page regroupant des liens relatifs à une série de pages.
STYLESHEET : LINK référence une feuille de style externe que le browser peut utiliser pour afficher le document. (Reconnu par Netscape et Explorer).
TOP : LINK référence le premier document dans la hiérarchie, par exemple, la couverture d'un magazine.

REV : Définit une relation inverse.
SRC : Définit l'URL de la ressource liée (Netscape et Explorer)
TITLE : Définit un titre informatif pour la ressource liée.
TYPE: Utilisé avec REL=STYLESHEET, sert à déterminer le type de feuille de style liée et peut prendre deux valeurs :

text/css : Utilisé pour indiquer que nous définissons une feuille de style
text/javascript : Cette valeur n'est gérée que par Netscape 4.0 et sert à indiquer que l'on utilise des feuilles de styles en javascript.

Exemple <HEAD>
<TITLE>Le langage HTML: Les feuilles de style</TITLE>
<META NAME="description" CONTENT="HTML feuille de style, exemple">
<LINK rel=stylesheet href="link1.css" type="text/css">
</HEAD>
<BODY BGCOLOR=white TEXT=black LINK="#0000A0" VLINK="#A000A0">
La feuille de style correspondant à ce document contient : <BR>
BODY {
color: blue;
background: #A0A0F0
}

</body>

Résultat

Pour voir le résultat de cet exemple, réfèrez-vous à ce document

CLASS

Cet attribut peut être utilisé pour pouvoir redéfinir une même balise en fonction de telle ou telle pseudo-classe. Dans ce cas, en fonction de la pseudo-classe utilisée, l'auteur pourra créér un rendu différent. Notons que si la pseudo-classe ne peut s'appliquer qu'à une seule balise, la balise peut être omise dans la redéfinition. Par exemple, pour la balise <A>, elle seule définissant les liens visités, non-visités ou actifs, on peut se permetre de ne redéfinir que link, visited ou active.

Exemple:

<STYLE type="text/css">
          DIV.alerte {background: #A00000; color: white;}
          DIV.note    {background: black;   color: white;}
          A:link { color: red }
          :visited { color: black }
</STYLE>
<DIV class=note>
Cette note ne signifie pas grand chose.
</DIV>

<DIV class=alerte>
Mais elle utilise les feuilles de styles.
</DIV>

Résultat:

Cette note ne signifie pas grand chose.

Mais elle utilise les feuilles de styles.

L'attribut ID définit un identificateur unique dans toute la page. Il doit commencer par une lettre et peut être suivit de lettres de chiffres, de tirets ou de points. ID peut ainsi être utilisé pour agir sur la balise à l'endroit ou il est définit.

Exemple:

<STYLE type="text/css">
#abc {font-size: 20pt; background: #AA0000; color: blue; }
</STYLE>
<DIV ID=abc>Cette ligne est soumise à l'identificateur abc</DIV>

Résultat:

Cette ligne est soumise à l'identificateur abc

Insèrer un commentaire

Lorsqu'on redéfini l'apparence d'une balise, il peut être utile de placer un commentaire, souvant utile pour d'éventuelles modifications ultérieures. Dans le cas des feuilles de style, l'insertion des commentaires s'inspire du langage C et se place entre /* et */.

Exemple:

background: red; /* redéfinit le fond en rouge */

Que peut-on redéfinir dans une feuille de style ?

A priori, toutes les balises peuvent être redéfinies, mais pour ce faire, il faut utiliser le langage correctement. Actuellement, les CSS ne sont pas encore complètement implémentées dans les browsers, mais beaucoups de tags sont déjà supportés, notement:

font:

font-style: [ normal | italic | oblique ] ; Permet de choisir le style de la police.

H1, H2, H3 { font-style: italic }

font-family: [[ family-name | generic-family]] , [ family-name | generic-family ]; Permet de choisir quelle(s) police(s) il faut utiliser pour afficher le texte. BODY { font-family: gill, helvetica, sans-serif }
font-variant: [ normal | small-caps ]; Permet de déterminer si le texte sera affiché en petites capitales ou en texte normal.

EM { font-style: oblique }

font-size: [ absolute-size | relative-size | longueur | pourcentage ]; Permet de déterminer la taille de la police utilisée, soit directement soit en choisissant un nom générique ( comme sérif, cursive... ).

absolute-size:[xx-small | x-small | small | medium | large | x-large | xx-large]
relative-size: [ larger | smaller ]

P { font-size: 12pt; }

BLOCKQUOTE { font-size: larger }

EM { font-size: 150% }

EM { font-size: 1.5em }

font-weight: [ normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 ]; Permet de choisir la largeur de la police. Bolder et lighter seront utilisés pour modifier l'apparence de la balise par rapport à la balise parente.

P { font-weight: normal }

color: [ valeur ]; Permet de changer la couleur d'affichage du texte.

EM { color: red }

EM { color: rgb(255,0,0) }

background : [ background-color || background-image || background-repeat ||

background-attachment

background-position

P { background: url(chess.png) gray 50% repeat fixed }

background-color : [ couleur | transparent ]; Permet de déterminer la couleur de fond pour la police utilisée.

H1 { background-color: #F00 }

background-image : [ url | none ]; Permet de choisir l'image de fond à employer pour un élément.

BODY { background-image: url(fond.gif) }

P { background-image: none }

background-repeat: [repeat-x | repeat-y | no-repeat ] Permet de définir si l'image de fond sera répètée ou non, et si oui, si elle doit l'être uniquement horizontalement ou verticalement

BODY {

background: red url(vertical.gif);

background-repeat: repeat-y;

}

background-attachment: [ fixed | scroll ]; Permet de définir si l'image de fond est fixe ou si elle doit défiler avec la page.

BODY {

background: red url(vertifix.gif);

background-repeat: repeat-y;

background-attachment: fixed;

}

background-position: [ pourcentage | longueur ] | [ top | center | bottom] || [left | center | right ]; Permet de décaler l'image de fond par rapport au bords de la page.

BODY { background: url(banner.jpeg) right top }

BODY { background: url(banner.jpeg) center }

text

word-spacing: [ normal | longueur ] ; Permet de redéfinir l'espace entre les mots.

H1 { word-spacing: 0.4em }

letter-spacing: [ normal | longueur ] ; Permet de redéfinir l'espace entre les lettres.

BLOCKQUOTE { letter-spacing: 0.1em }

text-decoration: [ none | underline | overline | line-through | blink ]; Permet de définir la décoration du texte.

A:link, A:visited, A:active { text-decoration: underline }

vertical-align: [ baseline | sub | super | top | text-top | middle | bottom | text-bottom | pourcentage ] ; Permet de positionner l'alignement vertical de l'élément par rapport à l'alignement normal ou de l'élément parent.

H6 { vertical-align: super }

text-transform: [ capitalize | uppercase | lowercase | none ] ; Permet de forcer l'affichage du text en mettant une majuscule au début de chaque mot, majuscules ou minuscules, ou encore en neutralisant l'héritage de l'élément parent.

H1 { text-transform: uppercase }

text-align: [ left | right | center | justify ] ; Permet de définir l'alignement du texte.

DIV.center { text-align: center }

text-ident: [ longueur | pourcentage ]; Permet de définir l'indentation qui apparaît devant la première ligne de la balise redéfinie. Elle ne sera pas active au milieux d'un élément coupé par un autre (par exemple, un <BR> ).

P { text-indent: 3em }

line-height: [ normal | nombre | longueur | pourcentage ] ; Permet de modifier la hauteur entre deux lignes. Si c'est un nombre, la distance est calculée en fonction de la taille de la police multipliée par ce nombre.

DIV { line-height: 1.2; font-size: 10pt }

DIV { line-height: 1.2em; font-size: 10pt }

DIV { line-height: 120%; font-size: 10pt }

box: Il est possible de définir des encadrements pour les objets.

margin: [ longueur | pourcentage | auto ] Il est possible de définir les marges :

margin-top: [ longueur | pourcentage | auto ]; Permet de définir la marge supérieure.

H1 { margin-top: 2em }

margin-left: [ longueur | pourcentage | auto ]; Permet de définir la marge de gauche.

H1 { margin-left: 2em }

margin-right: [ longueur | pourcentage | auto ] ; Permet de définir la marge de droite.

H1 { margin-right: 12.3% }

margin-bottom: [ longueur | pourcentage | auto ] ; Permet de définir la marge du bas.

H1 { margin-bottom: 3px }

padding : [ longueur | pourcentage ] ; Il est possible de définir les marges par rapport au bords du cadre.

H1 {

background: white;

padding: 1em 2em;

}

padding-top: [ longueur | pourcentage ] ;

BLOCKQUOTE { padding-top: 0.3em }

padding-right: [ longueur | pourcentage ] ;

BLOCKQUOTE { padding-right: 20% }

padding-bottom: [ longueur | pourcentage ] ;

BLOCKQUOTE { padding-bottom: 10px }

padding-left: [ longueur | pourcentage ] ;

BLOCKQUOTE { padding-left: 0.3em }

border: [ border-width || border-style || color ]

border-width: [thin | medium | thick | longueur] ; Permet de définir un bord pour le cadre.

H1 { border-width: thin thick medium none }

border-right-width:[thin | medium | thick | longueur] ; Permet de définir l'épaisseur du bord droit.
border-left-width:[thin | medium | thick | longueur] ; Permet de définir l'épaisseur du bord gauche.
border-top-width:[thin | medium | thick | longueur] ; Permet de définir l'épaisseur du bord supérieur.
border-bottom-width:[thin | medium | thick | longueur] ; Permet de définir l'épaisseur du bord inférieur.
border-style: groove; Permet de définir le type de cadre.
border-color: [ couleur ] ; Permet de définir la couleur du bord.

P {

color: black;

background: white;

border: solid;

}

border-style: [ none | dotted | dashed | solid | double | groove | ridge | inset | outset ]; Permet de définir le style du bord de cadre.

#abc9 { border-style: solid dotted }

border-top: [ border-top-width || border-style || color ] ; Permet de définir en une fois l'apparence du bord supérieur.
border-right: [ border-right-width || border-style || color ] ; Permet de définir en une fois l'apparence du bord droit.
border-botom: [ border-bottom-width || border-style || color ] ; Permet de définir en une fois l'apparence du bord inférieur.
border-left: [ border-left-width || border-style || color ] ; Permet de définir en une fois l'apparence du bord gauche.

width: [ longueur | pourcentage | auto ] ; Permet de définir la largeur d'un élément. Cette propriété peut s'appliquer aux éléments de textes, mais sera plus utile avec les éléments de remplacement, tels que les images.

IMG.icon { width: 100px }

height: [ longueur | auto ] ; Permet de définir la hauteur d'un élément. Cette propriété peut s'appliquer aux éléments de textes, mais sera plus utile avec les éléments de remplacement, tels que les images.

IMG.icon { height: 100px }

float: [ left | right | none ] ; Permet de décaler un objet sur la gauche ou sur la droite, et de forcer le texte à l'envelopper sur le côté opposé.

IMG.icon {

float: left;

margin-left: 0;

}

clear: [ none | left | right | both ]; Permet de déterminer si un élément autorise des éléments flottants sur ses flancs, ou, plus exactement, sur quels flancs un tel élément n'est pas autorisé. Avec clear égal a left, un élément sera placé en dessous de tout élément flottant situé à sa gauche.

H1 { clear: left }

first-line: Permet de définir la première ligne d'un pseudo-élément.
first-letter: Permet de définir la première lettre d'un pseudo-élément.

Les pseudo-éléments et les pseudo-classes

Les pseudo-classes sont en fait des propritétés intrinséquement liées à une balise. Par exemple, pour la balise anchor<A> , on peut considèrer qu'elle possède trois pseudo-classes: link, visited et active , qui correspondent aux trois états d'un lien html: un lien non visité, un lien déjà visité, ou un lien sur lequel on est en train de cliquer. Les pseudo éléments, quand a eux, sont en fait des parties d'un élément, comme la première lettre d'un paragraphe ou la première ligne d'une section Dans les pseudo-classes, nous avons:

La balise anchor:

A:link : { color: red } ;
A:visited : { color: black };
A:active : { color: blue };

Dans les pseudo-éléments, nous trouvons:

first-line: Permet de définir un style particulier pour la première ligne d'une balise.

P:first-line { font-style: small-caps }

first-letter: Permet de définir un style pour la première lettre d'une balise.

P:first-letter { font-size: 200%; float: left }

font
color
background
'text-decoration'
'vertical-align' (seulement si 'float' est égal à 'none')
'text-transform'
'line-height'
margin
padding
border
'float'
'clear'

Les balises imbriquées

A priori, lorsqu'on imbrique des balises, et si il n'existe aucune redéfinition pour les "sous" balises, elles héritent des attributs pour les balises parentes. Ainsi, nous avons redéfinis plus haut <H1> et si nous y imbriquons du texte encadré par la balise keyboard, celui-ci héritera des attributs redéfinis dans <H1>

Exemple:

<H1>Hello world, <KBD> ceci est ma première page html. </kbd> Ce n'est pas fameux, mais nous allons améliorer tout ça.

Résultat:

Hello world, `ceci est ma première page html.` Ce n'est pas fameux, mais nous allons améliorer tout ça.

Modifier différement

Nous venons de voir qu'une balise imbriquée hérite des attributs des balises "mêres". Mais il est possible de redéfinir les attributs d'une balise en fonction de la manière dont elle est imbriquée dans d'autres. Ainsi, puisque toute les balises <H_x> ont été redéfinies, rien ne nous empêche de redéfinir la balise <EM> en fonction de la balise qui la contient, ce qui nous permet d'obtenir un habillage spécifique pour chacune de celles-ci.

Exemple :

<STYLE type="text/css">

H1 EM { color: blue; font-size: 10pt; }
H2 EM { color: black; font-size: 15pt; }
H3 EM { color: red; font-size: 30pt; }
</STYLE>
<H1> taille H1 <em>avec em </em> redéfini </h1>
<H2> taille H2 <em>avec em </em> redéfini </h2>
<H3> taille H3 <em>avec em </em> redéfini </h3>

Résultat :

taille H1 avec em redéfini

taille H2 avec em redéfini

taille H3 avec em redéfini

Redéfinition par groupes.

Si l'auteur veut redéfinir toute une série de balises de la même façons, et pouvoir rapidement modifier ces modifications, il lui est possible d'agir directement sur plusieures balises.

Exemple:

H1 B, H2 B, H1 EM, H2 EM { color: red }

Cascades

Il est possible, pour l'auteur, d'utiliser en même temps et/ou partiellement plusieures feuilles de style. C'est ce qu'on appelle utiliser des feuilles de styles en cascades. Notons que dans ce cas, et en cas de conflit, c'est la dernière redéfinition qui prends le pas sur les précédentes. Notons aussi que @import doit être déclaré en début de feuille de style, avant toute autre redéfinition.

Exemple:

@import url(http://www.style.org/pastoral);
@import url(http://www.style.org/marine);

H1 { color: red } /* remplace les attributs définits dans les feuilles importées. */

'important' :

Le lecteur pouvant utiliser ses propres feuilles de style pour lire les documents qu'il trouve sur le web, et celles-ci pouvant entrer en conflit avec celles de(s) (l')auteur(s), c'est toujours le style de(s) (l')auteur(s) qui prédominera.Mais il est possible, et pour l'auteur, et pour le lecteur, d'augmenter la "valeur" de leur déclaration dans une feuille de style grâce à l'attribut important . Les balises importantes d'un lecteur prendront le pas sur les balises normales (redéfinies sans important) d'un auteur. Mais si l'auteur les définit avec l'attribut important, elles prendront toujours le pas sur celles du lecteur.

Exemple:

H1 { color: black ! important; background: white ! important }
P { font-size: 12pt ! important; font-style: italic }

IX Conclusion

De nos jours, le marché du travail étant ce qu'il est, un employeur engagera plutot la personne ayant le plus de connaissances annexes à ses études les candidats ont tous maintenant des diplômes élevés. C'est pourquoi la connaissance du langage HTML peut être ce petit plus qui fera pencher la balance en votre faveur.
Une adresse électronique sur un CV c'est bien mais si en plus vous avez une adresse web indiquant votre connaissance en ce domaine c'est mieux et très apprécié.
Afin de faire connaître vos travaux il est utile d'utiliser le plus de moyens de diffusion possibles. Internet via les pages créees en langage HTML est l'un de ces moyens, et certainement l'un des moins chèrs en considérant toutes les possibilités offertes.
Une option des navigateurs est de pouvoir montrer le document source d'une page que vous lisez. Ceci peut vous permettre de mieux comprendre le langage en ayant à votre portée une très grande quantité d'exemple. N'hésitez pas à y jeter un oeil c'est très instructif. Donc apprenez en butinant ...

dernière modification: Lundi, 12 2004

Taille 1

Taille 2

<H3>Taille 3</H3> Taille 3

<H4>Taille 4</H4> Taille 4

<H5>Taille 5</H5> Taille 5

<H6>Taille 6</H6> Taille 6

<A HREF="http://www.cicrp.jussieu.fr"> <IMG BORDER=6 SRC="..."></A>

<BODY BGCOLOR="#808080" TEXT="#FFFFFF" VLINK="#FFFF80" LINK="#000080">

E-mail : <A HREF=mailto:jacqueno@cicrp.jussieu.fr>jacqueno@cicrp.jussieu.fr</A>

<TABLE>

BORDER=chiffre

Epaisseur des traits du tableau

<TABLE>

CELLSPACING=chiffre

Espacement inter-cellule

<TABLE>

CELLPADDING=chiffre

Espacement texte - bord de la cellule

<TABLE>

WIDTH=%

Proportion entre tableau et document

<TABLE>

BGCOLOR=

Positionne un fond de couleur dans un tableau

<CAPTION>

ALIGN=TOP|BOTTOM

Titre en haut ou en bas du tableau

<TR> <TH> <TD>

ALIGN=CENTER|LEFT|RIGHT

Alignement du texte dans les cellules

<TH> <TD>

VALIGN=TOP|MIDDLE|BASELINE

Alignement vertical

<TH> <TD>

NOWRAP

La ligne d'une cellule est insécables

<TH> <TD>

COLSPAN

Nombre de cellules horizontales a recouvrir

<TH> <TD>

ROWSPAN

Nombre de cellules verticales a recouvrir

<TH> <TD>

BGCOLOR=

Positionne un fond de couleur dans une cellule

<FORM ACTION="rien.pl"> <INPUT NAME="pass" TYPE="PASSWORD"> Entrez votre mot de passe </FORM>

<FORM ACTION="rien.pl"> <INPUT NAME="radio1" TYPE="RADIO" VALUE="oui"> oui <INPUT NAME="radio1" TYPE="RADIO" VALUE="non"> non </FORM>

<FORM ACTION="rien.pl"> <INPUT NAME="zone" TYPE="TEXT" VALUE="Valeur par défaut"> Saisie <INPUT TYPE="RESET" VALUE="Effacer"> </FORM>

<FORM ACTION="rien.pl"> <INPUT TYPE="SUBMIT" VALUE="Soumettre"> </FORM>

<FORM ACTION="rien.pl"> <INPUT NAME="texte" TYPE="TEXT" SIZE="20" VALUE="Le texte"> <INPUT TYPE="RESET" VALUE="Effacez"> </FORM>

<FORM ACTION="rien.pl"> <INPUT NAME="radio1" TYPE="RADIO" CHECKED VALUE="oui"> oui <INPUT NAME="radio1" TYPE="RADIO" VALUE="non"> non </FORM>

<FORM ACTION="rien.pl"> <INPUT NAME="zone" TYPE="TEXT" MAXLENGTH="10" SIZE="10" VALUE="0123456789"> </FORM>

<FORM ACTION="rien.pl"> <INPUT NAME="zone" TYPE="TEXT" MAXLENGTH="10" SIZE="10" VALUE="0123456789"> </FORM>

<FORM ACTION="rien.pl"> <SELECT NAME="zone"> <OPTION>Premier choix <OPTION SELECTED>Deuxième choix <OPTION>Troisième choix <OPTION>Quatrième choix <OPTION>Cinquième choix </SELECT> </FORM>

<FORM ACTION="rien.pl"> <SELECT NAME="zone" SIZE="3" MULTIPLE> <OPTION>Premier choix <OPTION SELECTED>Deuxième choix <OPTION>Troisième choix <OPTION>Quatrième choix <OPTION>Cinquième choix </SELECT> </FORM>

<FORM ACTION="rien.pl"> <TEXTAREA NAME="commentaire" COLS="30" ROWS="5"> Entrez votre texte </TEXTAREA> </FORM>

<HEAD>

En-tête du document source

<BODY>

Corps du document source

<H?>

Modification de la taille d'un caractère

<PRE>

Insertion d'un texte préformaté

<UL>

Formatage d'un texte

<OL>

<OL>

Formatage d'un texte

<DL>

Formatage d'un texte

<FONT>

Taille d'un caractère ou couleur

voir II.3 et II.3

<IMG SRC>

Permet d'afficher une image

<A HREF>

Permet de créer un lien hypertexte

<BODY BGCOLOR>

Insère une couleur de fond

<FORM ACTION="rien.pl">
<INPUT NAME="pass" TYPE="PASSWORD"> Entrez votre mot de passe
</FORM>

<FORM ACTION="rien.pl">
<INPUT NAME="radio1" TYPE="RADIO" VALUE="oui"> oui
<INPUT NAME="radio1" TYPE="RADIO" VALUE="non"> non
</FORM>

<FORM ACTION="rien.pl">
<INPUT NAME="zone" TYPE="TEXT" VALUE="Valeur par défaut"> Saisie
<INPUT TYPE="RESET" VALUE="Effacer">
</FORM>

<FORM ACTION="rien.pl">
<INPUT TYPE="SUBMIT" VALUE="Soumettre">
</FORM>

<FORM ACTION="rien.pl">
<INPUT NAME="texte" TYPE="TEXT" SIZE="20" VALUE="Le texte">
<INPUT TYPE="RESET" VALUE="Effacez">
</FORM>

<FORM ACTION="rien.pl">
<INPUT NAME="radio1" TYPE="RADIO" CHECKED VALUE="oui"> oui
<INPUT NAME="radio1" TYPE="RADIO" VALUE="non"> non
</FORM>

<FORM ACTION="rien.pl">
<INPUT NAME="zone" TYPE="TEXT" MAXLENGTH="10" SIZE="10" VALUE="0123456789">
</FORM>

<FORM ACTION="rien.pl">
<INPUT NAME="zone" TYPE="TEXT" MAXLENGTH="10" SIZE="10" VALUE="0123456789">
</FORM>

<FORM ACTION="rien.pl">
<SELECT NAME="zone">
<OPTION>Premier choix
<OPTION SELECTED>Deuxième choix
<OPTION>Troisième choix
<OPTION>Quatrième choix
<OPTION>Cinquième choix
</SELECT>
</FORM>

<FORM ACTION="rien.pl">
<SELECT NAME="zone" SIZE="3" MULTIPLE>
<OPTION>Premier choix
<OPTION SELECTED>Deuxième choix
<OPTION>Troisième choix
<OPTION>Quatrième choix
<OPTION>Cinquième choix
</SELECT>
</FORM>

<FORM ACTION="rien.pl">
<TEXTAREA NAME="commentaire" COLS="30" ROWS="5">
Entrez votre texte
</TEXTAREA>
</FORM>

Hello world, `ceci est ma première page html.` Ce n'est pas fameux, mais nous allons améliorer tout ça.