HTML > INTRODUCTION

HTTP, URL et HTML

La première possibilité qui vous est offerte pour accéder à une page de la Toile (comprenez le Web) est tout simplement d'en connaître l'adresse. Par exemple, pour accéder au site de l'auteur, vous devez simplement taper la ligne altern.org/rdv dans le champ réservé à cet effet par votre navigateur (ce champ est généralement appelé la barre d'adresse). Par défaut, votre navigateur va utiliser le protocole standard HTTP (Hyper Text Transfer Protocol) pour se connecter à l'hôte hébergeant le site que vous cherchez à atteindre. Concrètement, vous pouvez simplement remarquer qu'il va automatiquement compléter l'adresse que vous avez entrer pour lui donner sa forme complète ; dans la barre d'adresse, on peut ainsi lire : http://altern.org/rdv/.
Nous sommes ici en présence de ce que l'on appelle le localisateur de ressources (ou URL, Uniform Ressources Locator). En fait, chaque page mise en ligne sur le Web est identifiée par son URL qui sert de nom de la page au niveau mondial. Les URL sont formées de trois parties : le protocole, le nom de domaine (ou DNS, Domain Name System) de la machine sur laquelle est hébergé le site et un nom local indiquant spécifiquement la page.
Illustrons ces considérations en reprenant l'exemple évoqué plus haut :

http://altern.org/rdv/
http	protocole
altern.org	nom DNS de l'hébergeur
rdv	nom local, il s'agit ici d'un répertoire (appelé dossier sous Windows)

NOTE : couramment, les URL sont précédées de www (pour World Wide Web). Cette pratique ne met en jeu aucun protocole, il s'agit là d'un choix de l'administrateur...

Dans ce cas précis, le nom locale se limite au nom du répertoire racine du site : on ne spécifie pas le nom de la page tout simplement parce que l'on souhaite accéder au site et non à une partie spécifique du site. L'hôte qui héberge le site en question chargera automatiquement la page servant de page d'accueil (pour plus de détails, consultez la partie HEBERGEMENT).
Résumons ce qui se passe lorsque vous essayez de vous connecter sur ma page :

vous tapez :	altern.org/rdv
le navigateur complète l'URL :	http://altern.org/rdv/
la page d'accueil se charge automatiquement :	http://altern.org/rdv/index.html

Si vous entrez dans la barre d'adresse l'une de ces trois lignes, vous pouvez constater qu'elles ont strictement le même effet : elles permettent d'afficher le fichier index.html placé dans le répertoire rdv, lui-même situé sur la machine hôte altern.org accessible par le protocole de transfert HTTP. Et voilà, vous avez sous les yeux le fichier index.html : index correspond au nom brut du fichier, html (ou htm) correspond lui à ce que l'on appelle l'extension du fichier. Cette extension permet à l'utilisateur de noter qu'il s'agit d'un fichier contenant du code HTML.
(pour plus de détails, consultez RESEAUX - Aspects théoriques)

LE LANGAGE HTML

On écrit les pages Web en langage HTML (Hyper Text Markup Language, langage de balisage hypertextuel) mais attention, il ne s'agit pas là d'un langage de programmation à proprement parlé. Un document HTML se présente simplement comme un fichier contenant une suite de caractères ASCII (a,b…z,A,B…Z, ? !& ; etc.) qui, ajencés correctement, forment un code. Le navigateur se charge de traduire ce code et transforme ainsi une simple suite de caractères en une page pouvant contenir du texte, des graphiques et des liens vers d'autres pages (les liens hypertext). Notez que la source (c'est-à-dire le code) de chaque page est consultable depuis le navigateur que vous utilisez (choisissez " Afficher la source ").

Comme nous l'avons vu plus haut, l'HTML est un langage de balisage. Pour aborder la notion de balise (ou TAG), regardons rapidement la structure générale d'une page écrite en code HTML. Celle-ci présente deux parties : la tête (HEAD) et le corps (BODY) :

<HTML>
  <HEAD>
   contenu de l'en-tête
  </HEAD>
  <BODY>
   contenu du corps
  </BODY>
</HTML>

Vous pouvez remarquer que le terme de balise prends ici tout son sens ; pour indiquer que l'on se trouve dans un document HTML, on utilise les balises correspondantes (début et fin). Les balises HEAD et BODY fonctionnent exactement de la même manière ; en généralisant, <QQC> marque le début de la balise QQC et </QQC> en marque la fin.
Prenons un exemple concret avec la balise B qui permet l'affichage d'un texte en gras :

CODE	RENDU
<BODY> <B> Ceci est en gras </B> mais pas cela </BODY>	Ceci est en gras mais pas cela

Certaines balises ne nécessitent pas de marqueur final et la plupart supporte un système de paramètres. Prenons quelques exemples :

CODE	EFFET	TYPE de BALISE
<I>...</I>	écrit ... en italique	balisage classique mais pas d'options disponibles
<image src="/images/tete.gif" width="125" height="20">	insère l'image tete.gif situé dans le répertoire images	options (SRC, HEIGHT...) mais pas de marqueur final
<body bgcolor="black" textcolor="#FF0000">...</body>	affiche un texte rouge (#FF0000 est l'écriture hexadécimal de 'red') sur un fond noir	balisage classique avec options disponibles
<BR>	force le retour à la ligne	pas d'options ni de marqueur de fin

Voici un aperçu des "TAG" les plus utilisés :

Maintenant que nous avons vu la notion de balise, il ne nous reste plus qu'à aborder la plus importante d'entre elles pour finir cette introduction à l'HTML et ainsi justifier le terme de lien hypertexte : il s'agit de la balise <A>.
En effet, la particularité du langage HTML est qu'il peut contenir des pointeurs vers d'autres pages, donnant ainsi naissance aux termes de navigation ou de surf. Ces liens peuvent se présenter sous la forme de texte (souligné pa défaut) ou de graphique (dans ce dernier cas, cliquer sur l'image activera le lien). A titre d'exemple, considérons le fragment HTML suivant et son rendu :

CODE	RENDU
<BODY> <A HREF="http://www.yahoo.fr/"> YAHOO France </A> </BODY>	YAHOO France

Et voilà, il suffit maintenant à l'utilisateur de cliquer sur ce lien pour accéder au célèbre annuaire de recherche.

LES EDITEURS HTML

Aujourd'hui, l'écriture d'un site basé sur l'HTML ne se fait pas à l'aide d'un simple éditeur de texte, il existe des éditeurs spécialisés qui font la majeure partie du travail pour vous. La plupart sont affublés de l'appelation WYSIWYG (What You See Is What You Get, ce que vous voyez est ce que vous obtenez) et vous permettent de visualiser directement l'aspect qu'aura votre projet lorsqu'il sera en ligne sur la Toile. De manière générale, si vous souhaitez entrer un texte centré en police Times New Roman de taille 12pt, il vous suffit de procéder de la manière suivante :
- entrez le texte dans votre éditeur
- sélectionnez-le
- appliquez-lui les options désirées
(en général, l'éditeur HTML fonctionne dans ce cas comme un logiciel de traitement de texte)

Gardez bien à l'esprit que l'éditeur travaille en arrière-plan et génère lui-même le code ; si vous avez été attentif à ce qui précède et que vous n'oubliez pas ce petit point de détail, vous parviendrez à résoudre la majeure partie des problèmes qui peuvent subvenir lors de l'utilisation d'un éditeur. L'éditeur HTML est un allié mais il peut ausi devenir votre ennemi alors gardez votre calme, consultez soigneusement le fichier source et cette présentation du code qui vient de vous être faite vous sera probablement d'un grand secours.
Voici quelques conseils pour bâtir propre et solide :
  > consultez le code source (élémentaire !)
  > apprenez à reconnaitre les balises et à comprendre leur paramétrage
  > utilisez votre éditeur pour ouvrir des pages de sites qui vous paraissent bien conçus

LES FRAMES

Lorsque vous chargez dans votre navigateur une page de la Toile, il se peut que celle-ci fasse référence à plusieurs documents HTML... Prenons l'exemple simple d'un site où l'on souhaiterait voir sur la gauche un menu qui serait constamment visible : pour permettre ce genre de choses, il existe dans le langage HTML un mode de découpage de la fenêtre en plusieurs zones, chaque zone pouvant être délimitée avec précision.

Cette délimitation de l'espace se fait à l'aide d'un document principale (le "frameset") qui appelle d'autres documents et les charge dans leurs emplacements respectifs (les "frames", c'est-à-dire les cadres).
Revenons à notre exemple : vous chargez dans votre navigateur le sommaire d'un site désigné par le document "sommaire.htm". Ce dernier est appelé "frameset" et contient les informations de découpage de votre fenêtre ainsi que les noms des fichiers qui doivent y être chargés. Pour bien comprendre la notion de frames, illustrons notre exemple en détaillant le source de "sommaire.htm" et en observant le rendu à l'écran :

<HTML>
<HEAD>
<TITLE>SOMMAIRE</TITLE>
</HEAD>
<FRAMESET COLS="200,*" ROWS="*">
 <FRAME SRC="som_left.htm">
 <FRAME SRC="som_main.htm">
</FRAMESET>
</HTML>

som_left.htm

som_main.htm

La page est divisée en 2 colonnes : l'une fait 200 pixels de large, l'autre a simplement une largeur relative (utilisation de *). Le fichier chargé à gauche se nomme "som_left.htm" et celui chargé à droite "som_main.htm" ; parmi les options que vous rencontrerez, soyez attentifs aux paramètres concernant les bordures (existence, largeur...) et les "autorisations" (resize, scroll...).

LES OBJETS : TABLEAUX ET LAYERS

ATTENTION : il existe divers types de layers différents sous NS et IE ! Les options également différent d'un navigateur à l'autre et le résultat n'est pas toujours en accord avec l'objectif. Vous souhaitez disposer du texte et des graphiques de manière relativement précise ? Choisissez les tableaux ! Ceux-ci sont abondamment utilisés sur le Net (il vous suffit de regarder le source d'un site remarquable pour vous en rendre compte) : maîtrisez les différentes options qui y sont attachées et vous serez un bon développeur !

Exemple :

<TABLE WIDTH="75%" BORDER="1" CELLPADDING="0" CELLSPACING="5">

<TD>	<TD ALIGN="CENTER">	<TD ALIGN="RIGHT">
<TD VALIGN="TOP">	<TD VALIGN="BOTTOM">	<TH>
<TD COLSPAN="2" BGCOLOR="#CCCCFF">		<TD HEIGHT="50">
		<TD ROWSPAN="2">
		<TD ROWSPAN="2">

</TABLE>

Quelques petites explications :
> CELLPADING : marges dans chaque cellule
> CELLSPACING : espacement des cellules
> BGCOLOR : couleur de fond
> ALIGN : alignement horizontal
> VALIGN : alignement vertical
> TH au lieu de TD : H=HEADER (contenu centré et texte en gras)
> WIDTH et HEIGHT : largeur et hauteur
> COLSPAN : fusion horizontale (cellules successives d'une même ligne)
> ROWSPAN : fusion verticale (cellules successives d'une même colonne)
etc.

Code complet :

<TABLE WIDTH="75%" BORDER="1" CELLPADDING="0" CELLSPACING="5">
<TR>
  <TD>...</TD>
  <TD ALIGN="CENTER">...</TD>
  <TD ALIGN="RIGHT">...</TD>
</TR>
<TR>
  <TD VALIGN="TOP">...</TD>
  <TD VALIGN="BOTTOM">...</TD>
  <TH>...</TH>
</TR>
<TR>
  <TD COLSPAN="2" BGCOLOR="#CCCCFF">...</TD>
  <TD HEIGHT="50">...</TD>
</TR>
<TR>
  <TD>...</TD>
  <TD>...</TD>
  <TD ROWSPAN="2">...</TD>
</TR>
<TR>
  <TD>...</TD>
  <TD>...</TD>
</TR>
</TABLE>

> ALLHTML...

NOTE : un très bon site sur le sujet (et bien d'autres) --> http://www.allhtml.com/. Pour un aperçu, vous pouvez télécharger ici un "mini site" regroupant :
- Architecture des documents HTML
- Meta balises
- Liens hypertextes
- Mise en forme des textes et paragraphes
- Mise en forme des caractères
- Les tableaux
- Les listes
- Les formulaires
- Les frames
- Les feuilles de styles
- Les polices WEB
- Les autres balises
- Les principaux caractères spéciaux
- Les principaux caractères accentués
- Les balises <IMG> et <MAP>
- Les couleurs de A à Z

[ RETOUR ]