Cours HTML pour le DESS

Cours sur le langage HTML organisé par
Frédéric Jacquenod

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 é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 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

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 sa 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, bloc-note ...).
L'éditeur doit être un éditeur texte des plus simple, pas de Word par exemple car par défaut la sauvegarde ne se fait pas au format texte.
Vous devez sauvegarder votre fichier au format texte avec 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. Donc 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 développez 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 et Mozilla) puis Advanced

Remarque :
Il peut être interessant de pouvoir consulter le source d'une page html que vous visitez, simplement pour voir par exemple comment le dÈveloppeur a bien pu rÈaliser tel ou tel effet.
Pour cela sous Mozilla (ou Netscape) cliquez sur "View" dans la barre de menu puis sur "page source" ou directement avec le raccourci <CTRL>+<U>.

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.

Vous retrouvez cela dans les traitements de texte. Lorsque vous décidez de mettre un mot en italique, le logiciel va positionner une balise devant et à la fin du mot à la différence près que le mécanisme est invisible pour l'utilisateur alors qu'en HTML c'est l'utilisateur qui doit faire ce balisage.

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> en-tête du document

<TITLE> Titre du document
........
</TITLE> Fin du titre du document

</HEAD> Fin de l'en-tê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, 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 "Cours HTML pour le DESS" plutôt que "Cours" ainsi le lecteur saura tout de suite en regardant ces liens à quoi ils correspondent.

Exemple d'un titre de 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, les formulaires ...

Afin de vous repérer dans vos pages, il est possible 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.
La casse des balises n'est pas stricte vous pouvez faire un peu ce que vous voulez.

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 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
exercice1

II.3 Les formats de Texte

L'exemple précédent n'est pas très excitant par son contenu où 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

<u>texte souligne</EM>
texte soulignÈ

 
ajout d'un espace

<
caractËre <

>
caractËre >

&
caractËre &

"
caractËre "

©
sigle ©

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

exercice2B

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
Vous pouvez aussi utiliser la syntaxe +x ou -x (x est un chiffre). Ce qui aura pour rÈsultat une taille de caractËres +x fois grande ou -x fois grande que celle active.
Si la taille positionnÈe est de 3.
<FONT SIZE=+6> Taille = 9
< FONT SIZE=-2> Taille = 1

Le type de police

Il existe une option a la balise FONT : FACE
<FONT FACE="Arial">texte</FONT>
exercice3

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.
exercice4

Frédéric Jacquenod