Site · Livre d'Or · Plan du site · Mentions Légales · Contact

Forum Scripts · PatMax Hébergeur · PatMax Annuaire · PatMax Cartes

	PatMax.Info Site d'entraide aux Webmasteur

Apprentissage du HTML

Présentation:

La création de pages Web est simplifiée grâce à la mise au point de nombreux logiciels permettant d'éditer des documents complets sans même être en contact avec le langage de programmation HTML.
L'utilisation de telles applications n'est pas la solution la plus économique.
En effet, il est possible de créer des pages d'aspect professionnel sans le moindre outil spécialisé, uniquement en connaissant les rudiments de base du HTML.
Je vais donc tenter ici de vous faire une petit guide assez complet sur l'utilisation du HTML.
Certaines fonctions traitées ici ne sont pas officiellement adoptées, mais comme elles sont, tout de même, supportées par les principaux navigateurs, je les ai donc intégrer.
Ce guide est destiné à tout futur utilisateur désirant approfondir ses connaissances en programmation.
Les éléments théoriques sont regroupés en 16 leçons faciles à lire.
Je vous conseille fortement de mettre en application, au fur et à mesure, les éléments présentés en vous servant de votre éditeur HTML si vous en possédez un ou sinon en utilisant le Bloc-Notes de Windows.

LES DIFFERENTES PARTIES

Bases d'un document HTML
Attributs de caractères
Mise en forme de paragraphes
Intégration de listes
Insertion d'images
Liens hypertextes
Relations entre dossiers
Règles horizontales
Fond et couleurs de la page
Tableaux
Formulaires
Images Map
Cadres
Multimédia
Applet Java
Javascript

BASES D'UN DOCUMENT HTML

Les pages Web sont des fichiers de texte en format ASCII 7 bits, c'est à dire sans caractères accentués. Ils portent l'extension (*.htm ou *.html) mais ils peuvent être lus dans un petit éditeur de texte, tel le Bloc-Notes de Windows.
Les commandes en langage HTML sont dites balisées et se démarquent par leur format:
<balise>texte</balise>

Pour être détectés par les navigateurs, ces fichiers doivent comporter une structure de base propre aux pages Web.
Voici les balises de base:
<html> (début du document)
<head> (ouverture de la zone d'en-tête)
<title> (titre de la page) </title>
Le titre de la page apparaît dans la barre de titre du logiciel de navigation. Vous n'êtes tenu de donner un titre à votre page, mais comme certains outils de recherche cataloguent les sites à partir de ce renseignement, il n'est pas conseillé de négliger cet aspect de votre page.
</head> (fermeture de la zone d'en-tête)
<body> (ouverture du corps du document)

Placer le contenu de la page ici
Tout ce qui est placé dans cette partie est visible par les navigateurs

</body> (fin du corps du document)
</html> (fin du document)

haut de page

ATTRIBUTS DE CARACTERES

Il est possible de formater le texte d'une page Web pour le rendre plus agréable à l'oeil.
Voici les principales commandes et leur syntaxe:
<b> (Caractères gras) </b>
<u> (Caractères soulignés)</u>
<i> (Caractères italiques)</i>

Exemple:
Ce <b> guide sur le langage HTML</b> a été <u>créé</u> par <i> PatMax</i>.

Donne:
Ce guide sur le language HTML a été créé par PatMax.

<blink> (Caractères clignotants) </blink>
<strike> (Caractères rayés) </strike>
<sup> (Caractères en exposant) </sup>
<sub> (Caractères en indice) </sub>
<center> (Caractères centrés) </center>

Exemple:
<center>Formules chimiques: H<sub>2</sub>O et SO<sub>4</sub><sup>-2</sup></center>

Donne:
Formules chimiques: H₂O et SO₄^-2

Taille des caractères
Il est possible de modifier la dimension des caractères.
<font size="valeur"> (Taille des caractères) </font>
La valeur doit être comprise entre -2 et +4. Par défaut la valeur est zéro.

Exemple:
<font size="+3">Ce guide</font> est un outil de <font size="-2">programmation</font>

Donne:
Ce guide est un outil de programmation

Affichage des polices
Vous pouvez aussi utiliser des polices TrueType pour remplacer la police d'affichage par défaut de Netscape.
Par contre, si le visiteur qui télécharge votre page ne possède pas les mêmes polices que vous, l'apparence de la page veut varier.
Si vous utilisez cette fonction, limitez vous à des polices connues et couramment utilisées.
<font face="police"> (Polices de caractère)</font>

Notez: Avec le paramètre FACE, vous pouvez lister plusieurs noms de police dans un même marqueur. Ainsi, si le navigateur, ne trouve pas la première police sur l'ordinateur, il tentera d'utiliser les autres polices que vous aurez spécifiées.
Lorsque vous listez des polices, séparez-les par une virgule.

Exemple:
<font face="Arial,Times NewRoman,Courier">texte</font>

Couleur des caractères
Il est possible de modifier la couleur d'une portion de texte uniquement.
<font color="FF0000"> (Couleur des caractères) </font>

Notez: Les couleurs sont codés en valeurs Hexadécimales.

Notez: Il est possible de combiner les paramètres 'COLOR', 'FACE' et 'SIZE' dans la même balise <FONT>.
N'oubliez pas d'associer la balise de fermeture </FONT> à chacune des balises <FONT>.

haut de page

MISE EN FORME DES PARAGRAPHES
Dans cette partie, vous apprendrez comment aligner des paragraphes, définir des marges latérales, etc.
<p> (Ouverture d'un paragraphe)
</p> (Fermeture d'un paragraphe)
<p align="left" ou "center" ou "right"> (Alignement de paragraphe) A placer en début de paragraphe
<blockquote> (Retrait de paragraphe) </blockquote>

Exemple:
<p align="right">Ce quide a été créé pour vous.</p>

Donne:

Ce quide a été créé pour vous.

<br /> (Retour à la ligne)
<nobr> (Sans retour à la ligne) A placer en début de paragraphe
<pre> (Texte préformaté) </pre>

Exemple:
Ce guide à été créé pour vous. <br />Profitez-en!!

Donne:
Ce guide à été créé pour vous.
Profitez-en!!

Mise en forme rapide
Pour afficher les lignes d'en-tête d'une page, il est possible d'utiliser des balises qui ajustent automatiquement la grosseur les caractères en fonction de l'importance du titre:
<h1>texte</h1>Gros caractères (titre principal)
<h2>texte</h2>
<h3>texte</h3>
<h4>texte</h4>
<h5>texte</h5>
<h6>texte</h6>Petits caractères

Exemple:
<center><h1>Bienvenue sur ma page Web</h1>
<h3>Dernière mise à jour: 31/01/2009</h3></center>

Donne:

Bienvenue sur ma page Web

Dernière mise à jour: 31/01/2009

Commentaires invisibles
Vous pouvez insérer des commentaires dans votre document qui ne seront pas visibles dans le navigateur.


Exemple:
<center>Bienvenue sur ma page Web</center>


Donne:
Bienvenue sur ma page Web

haut de page

INTEGRATION DE LISTES
L'utilisation de listes permet la diffusion de l'information de façon hiérarchisée.
Les liste ordonnées
<ol> Ouverture liste
<li> Ligne
</ol> Fermeture liste

Exemple:
<ol>
<li>Premier intitulé
<li>Deuxième intitulé
<ol>
<li>Premier sous-intitulé
<li>Deuxième sous-intitulé
</OL></OL>

Donne:

Premier intitulé
Deuxième intitulé
1. Premier sous-intitulé
2. Deuxième sous-intitulé

Notez: Vous pouvez utiliser une numérotation différente en ajoutant le paramètre TYPE à la commande d'ouverture de liste.
Voici les variantes:
<ol type="1">
<ol type="a">
<ol type="I">
<ol type="i">

Notez: En utilisant le paramètre NB, vous pouvez spécifier le numéro d'une ligne.
<li nb="3">

Les listes non ordonnées
<ul> Ouverture liste
<li> Ligne
</ul> Fermeture liste

Exemple:
<ul>
<li>Premier intitulé
<li>Deuxième intitulé
<ul>
<li>Premier sous-intitulé
<li>Deuxième sous-intitulé
</ul></ul>

Donne:

Premier intitulé
Deuxième intitulé
- Premier sous-intitulé
- Deuxième sous-intitulé

Notez: Vous pouvez utiliser des puces différentes en ajoutant le paramètre TYPE à la commande d'ouverte de liste.
Voici les variantes:
<ol type="disc">
<ol type="circle">
<ol type="square">

haut de page

INSERTION D'IMAGES
Pour embellir vos pages Web vous pouvez y inclure des images.
Il n'est pas recommandé de diffuser des images gourmandes en espace disque, car elle ralentissent l'affichage de la page et découragent les visiteurs.

Commande principale
<img src="image.ext" />

Afin d'accélérer le processus de chargement de votre page dans le navigateur, il est recommandé de spécifier les dimensions de l'image avec les paramètres width et height.
<img src="image" width="valeur" height="valeur" /> (ou valeur est 1 à ...)

Il est aussi possible d'aligner les images sur la page.
Voici les variantes:
-left alignement horizontale à gauche
-right alignement horizontale à droite
-top alignement verticale en haut
-middle alignement verticale au milieu
-bottom alignement verticale en bas
<img src="image" align="left ou right" />
<img src="image" valign="top ou middle ou bottom" />

Autres variantes d'alignement particulières:
<img src="image" align="texttop ou absmiddle ou baseline ou absbottom" />

Il est possible de jouer pour l'alignement du texte avec l'image:
hspace définit l'espace horizontal entre le texte et l'image.
vspace définit l'espace vertical entre le texte et l'image.
<img src="image" align="left ou right" hspace="valeur" vspace="val" />

Exemple:
<img src="image.jpg" align="left" hspace="4" />
Grâce à se guide, créez le code de base de votre page web.

Donne:

Grâce à se guide, créez le code de base de votre page web.

Notez: Utilisez la commande <br clear /> pour passer à la ligne sous l'image lorsque vous utilisez le paramètre hspace avec une image.

Options supplémentaires
Certains internautes préfèrent ne pas télécharger automatiquement les images d'une page et n'activent pas l'option “Auto Chargement des Images” de leur navigateur. Dans ce cas, à la place de l'image, apparaît une petite icône.
Vous pouvez rajouter à côté de cette icône un court texte décrivant l'image et sa fonction. Dans le cas, utilisez le paramètre alt.

Exemple:
<img src="image.jpg" alt="image test" />

Donne:

Note Importante: Il existe deux possibilités de fermeture de la balise <img src, la première et la plus courante est celle notée dans les exemples ci-dessus, à savoir:
<img src=..................... />
Mais nous pouvons également utiliser la fermeture de balise classique, à savoir:
<img src=..................... ></img>

haut de page

LIENS HYPERTEXTES

Les liens hypertextes permettent de passer d'une page à une autre, d'un site à un autre.

Commande principale
<a href="fichier.ext">Texte du lien</a>
<a href="http://www.site.com">Texte du lien</a>

Les liens hypertextes ne se limitent pas à des portions de texte comme nous vous l'avons présenté ci-dessus.
Les images peuvent, elles aussi, servir de lien.
Pour ce faire, il suffit de substituer le texte entre les marqueurs par la commande <img src>.

Exemple:
<a href="fichier.ext"><img src="image.jpg" /></a>

Donne:

Notez: Avec la commande de l'exemple précédent, l'image s'entoure d'une bordure pour indiquer qu'elle cache un lien hypertexte.
Il est possible d'éliminer cette bordure en ajoutant le paramètre border à la balise img src

Exemple:
<a href="fichier.ext"><img src="image.jpg" border="0" /></a>

Donne:
Sans la commande border

Avec la commande border

Il est également possible de faire les liens hypertextes vers une adresse de courrier électronique

Commande principale
<a href="mailto:nom@fournisseur.com">Texte du lien</a>

Exemple:
<a href="mailto:patmax@patmaxweb.com">Contactez-moi</a>

Donne:
Contactez-moi

Les liens hypertextes peuvent également être utilisés pour faire un lien vers un endroit précis dans la même page.
Deux marqueurs sont utilisés.
Il faut premièrement insérer un repère où l'on désire que le renvoi aboutisse, puis créer un lien hypertexte qui amènera le visiteur à cet emplacement.

Commande repère
<a name="nom du repère"></a>

Le marqueur <a name> doit être inséré à l'emplacement précis où vous désirez que le lien aboutisse. Toute expression alphanumérique peut servir de repère.
Si votre page comporte plusieurs repères, assurez-vous qu'ils soient bien distincts.

Lien de renvoi
<a href="fichier.ext#nom du repère">Texte du lien</a>

Utilisez la commande habituelle du lien hypertexte mais ajoutez le symbole # suivit du nom du repère

haut de page

RELATIONS ENTRE DOSSIERS

Il est possible de créer des sous dossiers sur le serveur qui accueillera vos pages web.
Vous pouvez, par exemple, placer toutes les images dans un sous dossier afin de gérer plus facilement votre espace serveur.

Lien vers un fichier d'un dossier enfant

Vous travaillez dans le document index.html qui ce trouve dans le dossier Pages HTML et vous désirez insérer l'image image.gif qui se trouve dans le sous dossier Images.
Il faudra indiquer au navigateur l'endroit où se trouve votre image la façon suivante:
Exemple:
<img src="Images/image.gif" />

Vous travaillez dans le document présentation.html qui ce trouve dans le dossier Pages HTML et vous désirez faire un lien vers la page index.html se trouvant dans le dossier Site Web.
Exemple:
<a href="../index.html">texte de votre lien</a>

Vous travaillez sur une page se trouvant dans le dossier Scripts et vous voulez faire un lien vers la page index.html se trouvant dans le dossier Page HTML.
Exemple:
<a href="../../Page HTML/index.html">texte de votre lien</a>

Notez: La notation ../ indique au navigateur de remonter d'un niveau dans la hiérarchie des dossiers.
Par exemple, pour remonter de trois niveaux, on utilisera simplement la notation ../../../fichier.htm.

Notez: La notation ./ indique au navigateur le dossier courant. Mais par défaut, on ne l'indique jamais. Ainsi, <img src="./image.gif" /> est équivalent à <img src="image.gif" />.

haut de page

REGLES HORIZONTALES

Commande principale
<hr />
<hr align="left ou center ou right" /> - (Avec alignement)
<hr width="valeur ou % /> - (Définition de la largeur)
<hr size="valeur /> - (Définition de la grandeur)
<hr noshade /> - (Sans effet de profondeur)

Exemple:
<hr align="center" size="2" width="50%" />

Donne:

haut de page

IMAGE DE FOND DE PAGE

Commande principale
<body background="image.ext"<

Notez: Afin de respecter les norme HTM, la balise <body> ne doit apparaître qu'une seul fois dans le document.
Pour ajouter une image de fond, il faut simplement ajouter le paramètre background à la balise <body> qui délimite le corps de la page.

Exemple:
<html>
<head>
<title>Titre de la page</title>
</head>
<body background="image.ext">
</body>
</html>

Les différentes possiblités de couleur
<body bgcolor="#000000"> (Couleur de fond: (unie))
<body text="#FFFFFF"> (Couleur du texte)
<body link="#0000FF"> (Couleur des liens hypertextes)
<body vlink="#FF00FF"> (Couleur des liens déjà visités)

Notez: Il est possible de définir les couleurs de plusieurs structures pour une même page Web.
Pour de faire, il suffit de combiner les paramètres présentés ci-haut en une seule ligne de commande.
<body bgcolor="#24AA55" link="#0000FF" vlink="#FF00FF">

Notez: Comme pour l'image de fond, il faut ajouter ces paramètres à la balise <BODY> qui délimite le corps du document.

Notez: Il est possible de combiner la commande de l'image de fond avec les autres paramètres.
<body background="images.ext" bgcolor="#FF00FF" texte="#0000FF">

Notez: Il est possible de combiner la commande de l'image de fond avec les autres paramètres.
<body background="images.ext" bgcolor="#FF00FF" texte="#0000FF">

Notez: Les couleurs doivents être codées en valeurs Hexadécimales.

haut de page

LES TABLEAUX

L'utilisation des tableaux facilite la dispositions des informations sur la page web.

Commande principale
<table< (Ouverture d'un tableau)
<table width="valeur ou %< (Ouverture tableau en indiquant la largeur)
<table border="valeur< (Ouverture tableau avec bordures)
<table cellpadding="valeur< (Ouverture en définissant espace entre contenu et côtés)
<table cellspacing="valeur< (Ouverture en définissant épaisseur des lignes séparatives)
</table< (Fermeture du tableau)

<tr> (Création d'une ligne)
</tr> (Fermeture de la ligne)

<td> (Création d'une cellule ou colonne)
</td> (Fermeture de la cellule ou colonne)

Exemple:
<table border="1">
<tr>
<td>Cellule1</td><td>Cellule2</td>
</tr>
<tr> <td>Cellule3</td><td>Cellule4</td>
</tr>
</table>

Donne:

Cellule1	Cellule2
Cellule3	Cellule4

Les paramètres d'alignements
<td align="left ou center ou right"> (Alignement horizontale du contenu)
<td valign="top ou middle ou bottom"> (Alignement verticatel du contenu)
<td width="valeur ou %"> (Largeur de la cellule)
<td colspan="valeur"> (Fusion sur plusieurs colonnes)
<td rowspan="valeur"> (Fusion sur plusieurs lignes)

Exemple:
<table border="1" cellpadding="3">
<tr>
<td colspan="2" align="center">Cellule1</td>
</tr>
<tr> <td>Cellule2</td><td>Cellule3</td>
</tr>
</table>

Donne:

Cellule1
Cellule2	Cellule3

Les paramètres de couleurs
<td bgcolor="#FF00FF> (Colorisation du fond de la cellule)

Notez: Les couleurs doivents être codées en valeurs Hexadécimales.

Notez: Les cellules des tableaux peuvent contenir du texte, des images et des liens hypertextes.

Reproduction strictement interdite sans l'autorisation de l'administrateur.

PatMax © 2006 - 2008
Thème graphique par PatMax ©