Accueil de la Caverne Informatique - Le JavaScript - Les feuilles de style - Les cookies - Le PHP

Le HTML

Introduction

Un langage pour formater les textes

HTML signifie HyperText Markup Language. Ce n'est pas un langage de programmation comme le C ou le Java, mais un langage de formatage de texte. Créé par le CERN autour de 1990 pour faciliter la communication entre scientifiques, le développement d'Internet le met à partir de 1994 à la disposition du grand public. Cette page a pour but de vous initier au langage HTML.

Pourquoi apprendre le HTML ?

On propose souvent aux novices des outils tout faits pour leur masquer la "terrifiante complexité" du HTML. Et pourtant, le langage HTML est très simple et facile à apprendre. Si vous en avez assez d'être constamment "assisté" et que vous souhaitez apprendre et comprendre ce qui se cache derrière une page web, cette petite présentation du HTML est un bon début.

[haut de page]

Différence entre HTML, PHP, JavaScript

Vous avez probablement entendu parler de HTML, PHP, ASP, Java, Javascript... Tous ces mots qui se ressemblent désignent des choses bien distinctes.

Si tous ces langages sont liés à l'internet, ils n'ont pas tous la même fonction. ASP, PHP, Java et JavaScript sont des langages de programmation, ils peuvent réagir à des événements et produire un résultat en fonction de paramètres.

HTML est un langage de formatage de texte. Il décrit les tailles, couleurs et polices de caractères, les tableaux, les liens hypertexte, et tous les éléments d'une page web. Mais il ne décrit pas d'actions.

HTML possède des cousins. XML (eXtended Markup Language), à tendance généraliste, est destiné à décrire de façon générique tout type d'information. MathML (Mathematical Markup Language) permet de rédiger aisément des formules mathématiques.

[haut de page]

Votre première page

Dans beaucoup d'ouvrages traitant de programmation, le premier chapitre consiste à montrer comment afficher le message "Hello World !" ("Bonjour, le monde"). HTML étant un langage de formatage de texte, raison de plus pour commencer par là.

Prenez un éditeur de texte comme le Bloc-Note par exemple. Enregistrez les lignes suivantes dans un fichier que vous appelerez helloworld.html (attention, si vous avez activé l'option de Windows masquer les extensions connues, il est temps de désactiver cette option, sinon votre fichier risque de s'appeler helloworld.html.txt).

<HTML>
<BODY>

<H1>Bonjour, le monde !</H1>

</BODY>
</HTML>

Maintenant, ouvrez-le avec Netscape ou Internet Explorer. Vous devriez voir cela :

Bonjour, le monde ! [haut de page]

Le principe des balises

Pour le formatage de texte, on utilise des balises. On appelle balise un ou plusieurs mots-clés situés entre les symboles < et >.

Dans le code précédent, la balise <HTML> indique le début du document, et </HTML> en indique la fin. La balise (ou conteneur) <BODY> indique le début du corps du document, c'est-à-dire ce qui sera réellement affiché. Il existe également un conteneur <HEAD> qui contient diverses informations qui ne seront pas affichées dans le corps du document. Le 'Hello World' peut être complété comme suit :

<HTML>

<HEAD>
    <TITLE>La page Hello World</TITLE>
    <META NAME="Author" CONTENT="Eric Minso">
    <META NAME="Description" CONTENT="Cette page
affiche 'Bonjour, le monde' à l'écran.">
    <META NAME="KeyWords" CONTENT="hello world
bonjour monde programmation html">
</HEAD>

<BODY>
<!-- Commentaire qui ne sera pas affiché à l'écran -->
    Bonjour, le monde !
</BODY>

</HTML>

La balise <TITLE> contient le titre de la page qui sera affiché dans la barre de titre de la fenêtre. Les balises <META> contiennent diverses informations qui seront utilisées par les moteurs de recherche (en particulier les balises 'description' et 'keywords').

Toutes ces nouvelles balises sont des options destinées à décrire la page, elles ne seront pas affichées (sauf TITLE), et elles ne sont pas indispensables. Vous pouvez ajouter vos propres balises : tout ce qui n'est pas reconnu est ignoré.

[haut de page]

Le texte

Tout texte placé entre les balises <I> et </I> sera en italique. Tout texte placé entre <B> et </B> sera en gras, souligné entre <U> et </U>, grossi entre <BIG> et </BIG>, réduit entre <SMALL> et </SMALL>, et

centré entre <CENTER> et </CENTER>.

La balise <BR> effectue un retour à la ligne. Pour indenter une zone de texte, placez-la entre <BLOCKQUOTE> et </BLOCKQUOTE>. <P> et </P> définissent un paragraphe. Le texte placé entre <TT> et </TT> sera affiché avec une police à pas fixe comme Courier.

Certaines balises acceptent des attributs qui permettent de les préciser ou d'ajouter des fonctions. Par exemple, <P> accepte l'attribut ALIGN qui contrôle l'alignement du texte. <P ALIGN="center"> permet de centrer le paragraphe. <P ALIGN="left"> l'aligne à gauche, <P ALIGN="justify"> le justifie.


La balise <HR> permet d'afficher une ligne horizontale de séparation.


Pour beaucoup de balises, il est possible d'ajouter des propriétés telles que ALIGN , SIZE, HEIGHT, WIDTH, BORDER, ... On peut préciser la longueur, l'épaisseur et l'alignement du filet ainsi : <HR SIZE=5 WIDTH="75%" ALIGN="center"> par exemple.

Le texte placé entre <H1> et </H1> est défini comme un titre de niveau 1. Il existe 6 niveaux possibles de <H1> à <H6>, les titres de niveau 1 étant les plus gros.

<H1>Voici un titre de niveau 1</H1> <H2>Voici un titre de niveau 2</H2> <H3>Voici un titre de niveau 3</H3> <H4>Voici un titre de niveau 4</H4> <H5>Voici un titre de niveau 5</H5> <H6>Voici un titre de niveau 6</H6>
[haut de page]

Les couleurs

Il est possible d'attribuer des couleurs à certaines composantes d'une page. Il s'agit généralement de la couleur du texte ou de l'arrière-plan. Il existe deux manières de désigner les couleurs.

Les valeurs RGB

RGB signifie Red, Green, Blue. Si vous avez gardé souvenir de vos cours de physique, vous devez savoir qu'une couleur peut se décomposer en trois composantes : le rouge, le vert, et le bleu. Ainsi sont composées les images sur les téléviseurs et les écrans d'ordinateur.

En affectant à chacune des trois couleurs une valeur allant de 0 (intensité nulle) à 255 (intensité maximale), on peut reconstituer 16 millions de couleurs (256*256*256). Voici comment faire varier l'intensité de blanc :

Voici les valeurs pour quelques autres couleurs :

En HTML, un code de couleur est une suite de 6 chiffres - précédé de '#' - en notation hexadécimale. Les deux premiers chiffres correspondent à la couleur rouge, les deux suivant au vert, et les deux dernier à bleu. Les valeurs vont de 00 (0) à FF (255). Voici les codes de quelques une des couleurs évoquées :

Les noms de couleurs

Il existe 140 noms de couleurs officiellement reconnus par Internet Explorer et Netscape. Il s'agit du mot anglais désignant la couleur : white pour blanc, black pour noir, red pour rouge, green pour vert, blue pour bleu, yellow pour jaune.

Voici un un petit assortiment non exhaustif et désordonné afin de visionner quelques couleurs aux noms moins triviaux.

RED GREEN BLUE YELLOW
PURPLE ORANGE MARROON AQUA
LIGHTBLUE LIGHTGREEN BEIGE GRAY
SEAGREEN SALMON CHARTREUSE TEAL
TURQUOISE VIOLET SANDYBROWN YELLOWGREEN
PINK PERU PLUM MEDIUMAQUAMARINE
LIGHTSALMON BURLYWOOD TOMATO INDIGO
INDIANRED GOLD DEEPPINK AQUAMARINE
FORESTGREEN DEEPSKYBLUE BISQUE SKYBLUE
CHOCOLATE DARKORCHID WHEAT DARKCYAN
ANTIQUEWHITE BROWN LIGHTCORAL KHAKI
DARKRED DODGERBLUE LAWNGREEN CORAL
LEMONCHIFFON MEDIUMTURQUOISE NAVAJOWHITE PALEVIOLETRED
MIDNIGHTBLUE HOTPINK FIREBRICK DARKORANGE
MOCASSIN CRIMSON GHOSTWHITE MEDIUMSPRINGGREEN
MEDIUMSLATEBLUE LIGHTPINK STEELBLUE INDIANRED
ORCHID PALEGREEN FUSHIA SILVER
ORANGERED SIENNA ROYALBLUE MAGENTA
MEDIUMPURPLE LIME MEDIUMVIOLETRED SADDLEBROWN
MISTYROSE GOLDENROD OLIDRAB ROSYBROWN

Les balises

Il est préférable d'utiliser les feuilles de style pour définir les couleurs (et de manière générale, tous les aspects liés au rendu) ; cependant nombre de balises HTML existent afin d'attribuer les couleurs. Imaginons que nous souhaitons une page avec les caractéristiques suivantes :

On pourra compléter ainsi la balise body :

<BODY BGCOLOR="black" TEXT="yellow" LINK="blue" VLINK="purple" ALINK="red">

Il est possible d'appliquer des couleurs localement sur un groupe de mots. Ainsi, la balise <FONT COLOR="red">permet de choisir une couleur particulière</FONT> pour une phrase.

[haut de page]

Les images

On insère une image avec le marqueur <IMG>. Un seul attribut est nécessaire, SRC qui indique le fichier image source. Les autres attributs possibles sont ALT, pour afficher un commentaire ou un titre qui s'affichera pendant le chargement de l'image et après sous forme d'infobulle. WIDTH et HEIGHT indiquent la largeur et la hauteur en pixels de l'image. BORDER précise la taille d'une bordure éventuelle.

<IMG SRC="photo.jpg" HEIGHT="640" WIDTH="480" BORDER="2"
ALT="Oh la belle photo !">

Cela signifie que l'image à afficher s'appelle photo.jpg et se trouve dans le même répertoire que le fichier HTML.

[haut de page]

Les listes

Pour créer une liste ordonnée, on utilise le marqueur <OL>. Pour une liste non ordonnée, le marqueur <UL>. Chaque nouvelle ligne est placée entre <LI> et </LI>. Elle sera précédée d'un numéro pour les listes ordonnées, et d'une puce pour les listes non ordonnées.

<P>Dans cette page, vous trouverez :</P>
<UL>
<LI>Un dossier sur les poires
<LI>Le compte-rendu de toutes les réunions du comité
des fêtes
	<OL>
	<LI>Le repas
	<LI>La soirée
	</OL>
<LI>Les prochaines dates
</UL>

Voici ce que ça affiche à l'écran :

Dans cette page, vous trouverez :

[haut de page]

Les liens hypertexte

La balise <A> crée un lien hypertexte. Elle s'emploie comme suit :

<A HREF="http://www.google.fr">Cliquez ici pour accéder au moteur
de recherche Google</A>

Pour créer une image cliquable, il faut combiner le marqueur <A> et <IMG>. Voici un exemple :

<A HREF="menu.html"><IMG SRC="photo.gif"></A>
[haut de page]

Les frames

Afficher deux pages dans une seule fenêtre... Afficher un menu qui reste toujours à la même place tandis que vous faîtes dérouler la page principale... Ceci est possible avec les frames.

Le principe est le suivant : une page HTML au conteneur <BODY> vide définit les cadres et appelle les pages à afficher. Par exemple, un fichier index.html appelle un fichier menu.html qui s'affichera à gauche et un fichier accueil.html qui s'affichera à droite.

Le code du fichier accueil.html doit être le suivant :

<HTML>
<HEAD>
	<TITLE>Bienvenue sur ma page !</TITLE>
</HEAD>

<FRAMESET COLS="25%, 75%" BORDER="0">
	<FRAME SRC="menu.html" NAME="frame_menu">
	<FRAME SRC="accueil.html" NAME="frame_accueil">

<NOFRAME>
	<BODY>
	Votre navigateur ne supporte pas les frames. Désolé,
	vous ne pourrez voir cette page.
	</BODY>
</NOFRAME>

</FRAMESET>

Le conteneur BODY est relégué au second plan. Le texte qu'il contient ne sera affiché que par les navigateurs ne sachant pas interpréter les frames. Une autre possibilité de section FRAMESET dans le fichier index.html :

<FRAMESET ROWS="200, *, 200" BORDER="5">
	<FRAME SRC="haut.html" NAME="haut">
	<FRAME SRC="milieu.html" NAME="centre">
	<FRAME SRC="bas.html" NAME="bas">
</FRAMESET>

COLS définit des colonnes, ROWS des lignes. La taille peut s'exprimer en pourcentage ou en pixel. Une étoile accorde la place restante à la frame concernée.

L'attribut NAME sert à nommer les frames et pouvoir y accéder plus tard dans les appels de liens hypertexte. Il faudra ajouter simplement ajouter l'attribut TARGET pour spécifier la frame dans laquelle la page doit être affichée. Un nom de frame inconnu ouvrira une nouvelle fenêtre de navigateur.

<A href="page2.html" TARGET="frame_menu">
Cliquez voir la page 2
</A>
[haut de page]

Les tableaux

Plutôt que de vous décrire les nombreuses options d'un tableau, voici plutôt un exemple tout simple d'utilisation :

Titre du tableau
Ici la case (0,0) du tableau Ici la case (0,1) du tableau Ici la case (0,2) du tableau
Ici, la seconde ligne, première colonne Seconde ligne, seconde colonne Seconde ligne, troisième colonne
<TABLE ALIGN="center" BGCOLOR="#FFEEFF" BORDER="2" CELLPADDING="10" CELLSPACING="5">
<CAPTION ALIGN="top"> <B>Titre du tableau</B> </CAPTION>

<TR>
<TD>Ici la case (0,0) du tableau</TD>
<TD>Ici la case (0,1) du tableau</TD>
<TD>Ici la case (0,2) du tableau</TD>
</TR>

<TR>
<TD>Ici, la seconde ligne, première colonne</TD>
<TD>Seconde ligne, seconde colonne</TD>
<TD>Seconde ligne, troisième colonne</TD>
</TR>

</TABLE>

Définissez une nouvelle ligne avec <TR>, et une nouvelle cellule dans cette ligne avec <TD>. Le titre se place entre <CAPTION> et </CAPTION>. N'oubliez pas de terminer par </TABLE> ! Sinon, soit votre tableau ne sera pas affiché, soit vous aurez des gros bugs d'affichage.

[haut de page]

Pour aller plus loin...

J'espère que cette petite présentation de HTML vous aura démystifié la création des pages web et vous aura donné envie de mettre 'la main dans le moteur'. Vous vous apercevrez vite que, même si l'écriture directe du code est moins conviviale qu'un bel éditeur tout en un, le résultat est bien plus précis, et les possibilités bien plus nombreuses.

Sachez qu'il existe une autre très bonne méthode pour apprendre : regarder le code source des autres pages. En général, le code est lisible, en particulier si l'auteur l'a écrit à la main.

Pour aller plus loin, je vous propose de consulter les autres sujets concernant internet sur ce site :

Pour consulter d'autres ressources sur l'internet, rendez-vous dans les rubrique de l'Open Directory (en français, avec le classement PageRank de Google) :

/Top/World/Français/Informatique/Programmation/Langages/
La plupart des langages de l'internet (HTML, JavaScript, PHP...)
/Top/World/Français/Informatique/Programmation/Internet/
D'autres ressources sur l'internet (ASP, Flash...)

Pour poser des questions, discuter avec des spécialistes, rien ne vaut les newsgroups (groupes de discussion).

Archives Google de fr.comp.lang
Utilisez l'accès web offert par Google pour consulter les archives des différents forums
fr.comp.lang.javascript - [archives Google]
Forum français consacré au Javascript
fr.comp.lang.php - [archives Google]
Forum français consacré au PHP
[Haut de page]


Accueil de la Caverne Informatique - Le JavaScript - Les feuilles de style - Les cookies - Le PHP

Si vous avez apprécié (ou détesté) cet article ou ce site, vous avez la possibilité de donner une note d'évaluation et indiquer les points forts, les points faibles de ce site. Ce service est offert par l'institut de statistiques Weborama.

Eric Minso - novembre 2003 - La Caverne Informatique - http://cavinfo.fr.st/