Cours HTML du 23 Janvier 1997

Cours débutant sur le langage HTML

Plan du cours

Ce cours est réalisé sur des machines sous système unix et n'a pour but, que celui de permettre, aux personnes le lisant ou suivant le cours donné par des membres du C.I.C.R.P, de pouvoir réaliser une page en langage HTML simple, contenant du texte, des images et des liens hypertextes.

I Introduction
II Ma première page en HTML

II.1 Qu'est ce que le langage HTML ?
II.2 Comment structurer une page HTML ?
II.3 Les formats de Texte
II.4 Comment insérer une image au texte ?
II.5 Utilisons l'hypertexte et réalisons nos premiers liens
II.6 Compliquons et réalisons un tableau
II.7 Comment mettre un fond à sa page ?
II.8 Ajouter son adresse électronique
II.9 Les mots clés importants

III Conclusion

I Introduction

II Ma première page en HTML

La création d'une page web en langage HTML n'est pas très compliquée car ce dernier, en restant dans la limite du raisonnable (sans programmation annexe), est très simple et ne nécessite aucun "don particulier". Le plus long, lors de la création est de rechercher les éléments (texte, icÙnes ...) à insérer puis de réaliser la mise en page du document (couleur, disposition ...).

Nous allons donc commencer, pour cela lancez votre butineur (netscape le plus souvent) et ouvrez un fichier avec votre éditeur préféré (vi, asedit ...) ayant l'extension html ou htm.

Attention :
Les butineurs utilisent un cache qui permet de recharger une page, image ... déjà consultée sans devoir pour cela faire une requête réseau afin de la rechercher. Ceci implique qu'en cas de modification vous pouvez conserver l'ancienne version et ne pas voir les modifications qui lui ont été apportées malgré un "reload". Je vous conseille donc lorsque vous developpez une page de mettre vos caches à zéro, ainsi les éléménts seront rechargés à chaque lecture et seront donc à jour.
Pour cela allez dans "options" puis "preferences" (netscape Version 1) ou "general preferences" (netscape Version 2) puis "cache and network" (Version 1) ou "Network Preferences" (Version 2).

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

Le langage HTML est un langage à balises :
<balise> texte </balise>
Chaque balise a une signification particulière. Les éléments qui se trouvent entre ces balises seront affectés par ce balisage.
Exemple :
<I>En italique</I> En italique
Remarque :
Si vous oubliez de fermer une balise elle affectera tout le reste du texte tant qu'une autre du même type ne prend pas le relai.

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

<HEAD> entête du document

........

</HEAD> Fin de l'entête du document

<BODY> corps du document

........

</BODY> Fin du corps 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, des liens et autres informations. Ces éléments n'apparaissent pas directement dans la page.

Entre les balises BODY vous insérez les éléments qui constitueront votre page, les informations texte, images, liens, le fond d'écran si c'est une image ...

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.

Vous pouvez aussi insérer des commentaires afin de marquer les parties importantes de votre document source.
Les commentaires sont définies 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.

Il est aussi trés apprécié de dater ses pages en insérant la date de la derniè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".

Exemple d'une page html simple

II.3 Les formats de Texte

L'exemple précédent n'a rien de très exitant que ce soit par son contenu mais aussi surtout par sa mise en page. C'est pourquoi nous allons voir maintenant ce qu'offre le langage HTML, dans un premier temps pour du texte, pour égayer la présentation.
Attention : le type de couleur, de caractères utilisés peuvent donner l'impression que la balise n'a pas d'effet.

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

<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
Bien évidemment les balises peuvent être combinées :
<STRIKE><I>Italique et rayé</STRIKE></I> Italique et rayé
Les accents :

à
à

â
â

ç
ç

é
é

è
è

ë
ë

ê
ê

ï
ï

ö
ö

ô
ô

ù
ù

û
û

Vous pouvez aussi les tapez 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 :
Si vous avez un texte déjà écrit et que vous voulez le mettre sur une page il peut être long de devoir 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>

Vous pouvez aussi directement formater votre texte en titre, sous-titre ... précédés d'indication de niveaux (Un caractére ou un numéro).
La balise <OL></OL> ou <UL></UL> permet 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).

<OL>
<LH>Entete du document</LH>
<LI>Titre
<OL>
<LI>Sous-titre
<LI>Sous-titre
</OL>
<LI>Titre
</OL>

Entete du document
Titre

Sous-titre
Sous-titre

Titre

OU

<UL>
<LH>Entete du document</LH>
<LI>Titre
<UL>
<LI>Sous-titre
<LI>Sous-titre
</UL>
<LI>Titre
</UL>

Entete du document
Titre

Sous-titre
Sous-titre

Titre

II.4 Comment insérer une image au texte ?

Vous devez utiliser la balise <IMG SRC="...">. Cette balise peut être agrémentée d'options de positionnement.
Les images doivent être au format gif ou jpg.

<IMG SRC="./matete.gif">

Afin de positionner le texte par rapport à l'image vous pouvez ajouter à la balise l'option d'alignement ALIGN=TOP|MIDDLE|BOTTOM|LEFT|RIGHT|CENTER.
<IMG ALIGN=TOP SRC="..."> la flèche est au-dessus du texte

Remarque :

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'acces vers l'image à é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

Pour le moment nous avons réalisé une page simple contenant du texte et une image. Mais l'un des intérêts de ce langage est de pouvoir réaliser des documents pointant vers d'autres documents et ainsi d'explorer une nouvelle dimension.
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 google.
<A HREF="http://www.google.fr">Google</A> Google

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.google.fr"> <IMG SRC="..."></A>

Vous pouvez dans ce cas ajouter comme option de la balise IMG, BORDER=chiffre afin de grossir le trait qui entoure l'image la rendant ainsi plus visible.

<A HREF="http://www.jacquenod.net"> <IMG BORDER=6 SRC="..."></A>

II.6 Compliquons et réalisons un tableau

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

<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|MIDDLETOP|BASELINE
Alignement vertical

<TH> <TD>
NOWRAP
La ligne dune cellule est insécables

<TH> <TD>
COLSPAN
Nombre de cellules horizontales a recouvrir

<TH> <TD>
ROWSPAN
Nombre de cellules verticales a recouvrir

Le tableau peut permettre de centrer une image et du texte

La flèche est centrée
par rapport à ces
3 lignes de texte

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 mini tableau est le suivant.

II.7 Comment mettre un fond à sa page ?

Vous pouvez mettre un fond uni ou une image. Attention l'image ralentira l'affichage.
Un fond uni.
Les couleurs sont codées en héxadécimales. Cliquez ici pour les voir
La balise à utiliser est <BODY BGCOLOR=#nombre_héxa>
Pour cette page la syntaxe est <BODY BGCOLOR=#808080>
Une image
La balise à utiliser est <BODY BACKGROUND="image">
Exemple
La syntaxe pour la page de l'exemple est :
<BODY BACKGROUND="http://www.jacquenod.net/portail/GALERIE/FOND/a103.jpg">

II.8 Ajouter son adresse électronique

La balise est :
<A href=mailto:adresse_electronique>Commentaires</A>
Lorsque vous cliquerez sur "Commentaires" une fenêtre vous permettant d'envoyer un courrier s'affichera contenant l'adresse de la personne que vous voulez contacter "adresse_electronique".

Exemple :

E-mail : <A href=mailto:jacqueno@jacquenod.net>jacqueno@jacquenod.net</A>

E-mail : jacqueno@jacquenod.net

II.9 Les mots clés importants

Récapiltulatif des mots clés importants

BALISE
SIGNIFICATION
OPTIONS

<HEAD>
Entê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>
Formatage d'un texte
voir II.3

<IMG SRC>
Permet d'afficher une image
ALIGN ALT voir II.4

<A HREF>
Permet de créer un lien hypertexte
voir II.5

<TABLE>
Création d'un tableau
voir II.6

<BODY BGCOLOR>
Insère une couleur de fond
voir II.7

<BODY BACKGROUND>
Insère une image de fond
voir II.7

<A HREF=mailto>
Ouverture d'une fenêtre de mail
voir II.8

<HR>
Permet de tracer un trait
SIZE WIDTH ALIGN

<BR>
Saut de ligne
CLEAR

III 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 diplomes élevés. C'est pourquoi la connaissance du langage HTML peut être ce petit plus qui parmis de nombreuses autres choses fera pencher 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 connaitre vos travaux il est utile d'utiliser le plus de moyens de diffusion possibles. Internet via les pages crées en langage HTML est l'un de ces moyens, et certainemant l'un des moins chères en considérant toutes les possibilités offertes.
Une option des navigateurs est de pouvoir montrer le source d'une page que vous lisez. Ceci peut vous permettre de mieux comprendre le langage en ayant à votre portée de très grande quantité d'exemple. N'hesitez pas a y jeter un oeil c'est très instructif. Donc apprenez en butinant ...

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
<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\|MIDDLETOP\|BASELINE	Alignement vertical
<TH> <TD>	NOWRAP	La ligne dune cellule est insécables
<TH> <TD>	COLSPAN	Nombre de cellules horizontales a recouvrir
<TH> <TD>	ROWSPAN	Nombre de cellules verticales a recouvrir

Récapiltulatif des mots clés importants
BALISE	SIGNIFICATION	OPTIONS
<HEAD>	Entê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>	Formatage d'un texte	voir II.3
<IMG SRC>	Permet d'afficher une image	ALIGN ALT voir II.4
<A HREF>	Permet de créer un lien hypertexte	voir II.5
<TABLE>	Création d'un tableau	voir II.6
<BODY BGCOLOR>	Insère une couleur de fond	voir II.7
<BODY BACKGROUND>	Insère une image de fond	voir II.7
<A HREF=mailto>	Ouverture d'une fenêtre de mail	voir II.8
<HR>	Permet de tracer un trait	SIZE WIDTH ALIGN
<BR>	Saut de ligne	CLEAR

Frédéric Jacquenod
E-mail : jacqueno@jacquenod.net

<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

<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

Cours débutant sur le langage HTML

Plan du cours

<HTML> début du document

<HEAD> entête du document

........

</HEAD> Fin de l'entête du document

<BODY> corps du document

........

</BODY> Fin du corps du document

</HTML> Fin du document

<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

<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

&agrave;

à

&acirc;

â

&ccedil;

ç

&eacute;

é

&egrave;

è

&euml;

ë

&ecirc;

ê

&iuml;

ï

&ouml;

ö

&ocirc;

ô

&ugrave;

ù

&ucirc;

û

<OL> <LH>Entete du document</LH> <LI>Titre <OL> <LI>Sous-titre <LI>Sous-titre </OL> <LI>Titre </OL>

Entete du document Titre Sous-titre Sous-titre Titre

<UL> <LH>Entete du document</LH> <LI>Titre <UL> <LI>Sous-titre <LI>Sous-titre </UL> <LI>Titre </UL>

Entete du document Titre Sous-titre Sous-titre Titre

<IMG SRC="./matete.gif">

<A HREF="http://www.google.fr"> <IMG SRC="..."></A>

<A HREF="http://www.jacquenod.net"> <IMG BORDER=6 SRC="..."></A>

<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

Les options disponibles pour les balises de tableau

<TABLE>

BORDER=chiffre

Epaisseur des traits du tableau

<TABLE>

`style machine`

`affiche un exemple`

à

â

ç

é

è

ë

ê

ï

ö

ô

ù

û

<OL>
<LH>Entete du document</LH>
<LI>Titre
<OL>
<LI>Sous-titre
<LI>Sous-titre
</OL>
<LI>Titre
</OL>

Entete du document
Titre

Sous-titre
Sous-titre

Titre

<UL>
<LH>Entete du document</LH>
<LI>Titre
<UL>
<LI>Sous-titre
<LI>Sous-titre
</UL>
<LI>Titre
</UL>

Entete du document
Titre

Sous-titre
Sous-titre

Titre

La flèche est centrée
par rapport à ces
3 lignes de texte