Introduction à HTML
Pour pouvoir apprendre le language HTML, il faut pouvoir disposer d'un browser
(clients permettant de browser, "lire", "décoder" ce language, comme par exemple Netscape ou Internet Explorer), et aussi un logiciel ou on peut écrire du HTML (par exemple le bloc-note, un traitement de texte, ou un logiciel permettant spécifiquement de faire du HTML).
test de prérequis: par exemple es-tu capable de refaire cette page?
Que veut dire HTML? C'est l'abbréviation de Hyper Text Markup Language, soit un language permettant de mettre en page tout document qui sera mis sur le Worl Wibe Web. Il existe à ce jour plusieurs versions différentes de ce language ayant tous une meme base commune. Selon la version que vous utiliserez les marqueurs (en anglais:tags) ne seront pas "lisibles" par le browser. Ainsi des tags de HTML 3 ne seront pas lu par la première version de Microsoft Explorer.
La concurrence entre les différents browsers n'a pas encore permis un language unique et lisible par tous. Mais voyons en quoi consiste ce language.
Il permet d'insérer des "marqueurs" dans le texte qui vont permettre de définir la structure logique du document, ces "marqueurs" sont des commandes indiquant au browser comment comment faire la mise en page à partir des ces définitions logiques (par exemple liste, sous-liste, titre, ... et non comment il doit être affiché: Courier 10 gras, c'est le client Web (le browser) qui va s'occuper de cela.). Ces différents marqueurs sont pour la plupart paramétrables, par exemples si l'on veut tracer une ligne dans un texte, il est possible de définir son emplacement, sa longueur, sa largeur, etc.
Il y a une certaine logique à respecter en ce qui concerne l'agencement, le positionnement de ces marqueurs. En effet ils entourent le texte, il y a un marqueur de début et un de fin permettant ainsi de définir la partie qui sera "marquée". On peut emboiter des marqueurs les uns dans les autres a condition de respecter l'ordre de leur placement. C'est un peu comme si on mettait des choses dans des poupées russes, il faut que le tag correspondant a une poupée ait le tag de fermeture correspondant dans la meme poupée. Autrement le tag ne sera pas "lu" ni exécuté.
Voici un exemple d'un titre ou un des mots est souligné:
<H2> L'habitat chez les <i> Mammifères </i> </H2>
|____________________________________________|
|_______________|
ce qui une fois "browsé" (lu par le browser) donne ceci:
L'habitat chez les Mammifères
Si les tags sont mal placés, voilà ce qui se passe:
<H2> L'habitat chez les <i> Mammifères </H2> </i>
ce qui une fois "browsé" (lu par le browser) donne ceci:
L'habitat chez les
Mammifères
D'autre part certains marqueurs n'ont pas besoin d'un marqueur de fin. C'est par exemple le cas dans les éléments d'une liste:
<ul>
<li> trois chaises
<li> un fauteuil
<li> un canapé
</ul>
Ici les éléments d'une liste marqué par <li> n'ont pas de marqueur de fin.
Un aspect important est qu'il y deux niveaux en ce qui concerne l'utilisation concrète de ce language.
Le premier est celui du document ou l'on écrit le texte,on met les images etc et les différents tags du language HTML. Puis il y a le niveau du client Web ou Browser (Netscape, Explorer, Mosaïque, ...), on voit le document à travers le browser. Celui-ci lit les différentes informations que lui fournissent les tags et fait apparaitre le document en circonstance.
Il y a donc ce que l'on appelle le document source avec les tags écrits et visibles, et celui du document browsés avec la mise en page désirés et les tags sont invisibles. La page que vous lisez actuellement est vue à travers un browser, pour voir le document source il vous suffit de cliquer sur la commande correspondant dans un des menus du browsers. Vous allez apprendre à travailler au niveau du document source afin de faire la mise en page que vous désirez.
HTML sert a faire une mise en page logique de tout document qui sera sur le Web.
Il permet de définir des titres, faire de la mise en page classique (souligné, mettre en gras, italique, centré le texte, définir sa taille), mais aussi créer des listes, faire des liens à l'intérieur d'une page et à l'extérieur d'une page, insérer des images, faire des tableaux, faire une structure en frames, mais aussi faire des formulaires, insérer des scripts tels que Javascript ou Java (ceci ne sera pas traité ici), etc.
Pour mieux vous faire une idée regarder les exemples ci-dessous:
Voici une liste de liens: (ils sont reconnaissables par le fait que le texte est souligné et de couleur bleue (généralement) et la forme du curseur change lorsqu'il passe au-dessus, il suffit de cliquer dessus pour accéder à la page). Pour revenir à cette page il suffit de cliquer sur le bouton "BACK" de votre browser.
Différentes exemples:
Le but de cette unité en vous présentant le language HTML est que vous connaissiez, maitrisiez ce language de manière a vous permettre de
créer vos propres pages HTML qui pourront ensuite etre mise sur le Web. L'objectif est que vous connaissiez la structure de base d'un document HTML, que vous sachiez mettre des images, faire des liens, etc. En bref vous donnez les moyens pour réaliser ce que vous désirez au niveau du Web.
Cette unité de cours sur HTML est composée de différentes séquences, à savoir:
La structure de base de tout document HTML est simple. Le tout premier tag est
<HTML> , tout le reste sera écrit entre ce tag-ci et celui le fermant à savoir </HTML>. A la suite de ce premier tag, on met une " tête" et un "corps", soit un tag <HEAD> dans lequel on pourra inscrire divers informations telles que le titre du document (il apparaitra tout en haut dans la partie bleue a coté de Netscape, par exemple), ainsi que d'autres informations qui pourront restées invisibles une fois le document browsé mais visible dans le document source (par exemple date de création ou modification, etc). Ces indications invisibles pour le browser s'inscrivent au moyen du marqueur de début <!-- et --> comme marqueur de fin.
Il est utile de mettre un titre pertinent par rapport à la page, car c'est le nom qui sera lu pour être indexé par les "Robots Chercheurs" du Web. En général on utilise le même titre que celui qui sera en haut du document-même.
Puis on referme avec le tag </HEAD>, ensuite on ouvre avec le tag <BODY> qui va contenir le corps du document meme, du texte, des images, des tableaux ...Il est important de signer ses pages afin de pouvoir identifier leur auteur, pour cela il suffit de mettre le marqueur <ADDRESS> puis un lien sur ses home pages personnelles ou son adresse e-mail (voire l'exemple ci-dessous) et mettre le marqueur de fermeture. Il est aussi recommander de dater ses pages.
Pour en revenir à la structure du document HMTL, le tag </BODY> refermera cette partie puis sera suivie de celui de </HTML> marquant ainsi la fin du document HTML. Voici un exemple:
<HTML>
<HEAD>
<TITLE> Exemple de la structure de base (4 août 1997)
</TITLE>
<!-- Créé par Y.P.S, le 4 août 1997 -->
</HEAD>
<BODY>
<H1> Exemple de la structure de base </H1>
bla bla bla
<ADDRESS> <A HREF="http://tecfa.unige.ch/~shubber">Y.P.S </a>
</BODY>
</HTML>
Voila c'est le minimum que l'on puisse écrire pour une page. Voici ce que donnerait cet
Exemple de la structure de base.
Pour revenir à cette page, il vous suffira de cliquer sur le bouton back du browser.
Y.P.S (août 1997)