Cet article présente le langage HTML, ses possibilités, ses balises avec les paramètres les plus courants.

1.Introduction
2.Mise en forme du texte
3.Les images
4.Les liens
5.Les listes
6.Les tableaux
7.Les formulaires
8.Les cadres
9.Vidéo & son
10.Deplacez vos pages vers un serveur web

Introduction :

Tout d’abord qu’est-ce qu’une page web ?
Eh bien c’est un fichier texte avec l’extension .htm ou .html, qui contient du texte et l’emplacement des images. Pour définir la manière dont tous ces éléments seront affichés on utilise un langage de balisage, le HTML (c’est bien un langage de description et non un langage de programmation). Les fichiers HTML ne sont pas compilés et on peut toujours voir le code de la page tel quel l’a écrit son auteur.

Une page basique.
Une page web qui affiche juste un mot « bonjour » ouverte avec un éditeur de texte tel que bloc-notes de Windows contient ceci :

Bonjour

Les mots incompréhensibles (en tout cas pour l’instant) qui se trouvent entre les signes < et > sont des balises du langage HTML. Vous avez sûrement remarqué que pour chaque balise on retrouve la même balise mais précédée par un slache /, par exemple :

et

La première balise s’appelle ouvrante et l’autre fermante.
Ce qui ce trouve entre la balise ouvrante et la balise fermente est modifié par ces balises, par exemple : Bonjour « Bonjour » sera affiché en gras car il est entre les balises et . C’est le principe du HTML.

Principes du HTML.
Toutes les balises d’une page web écrite en HTML sont placées entre les balises et (les lettres peuvent être écrites en majuscules et ) ce qui signale au navigateur qu’il a affaire à du code HTML.

Ensuite la page se divise en deux parties, et .
Head (tête en anglais) est la partie en-tête de la page, tout ce qu’elle contient n’est jamais affiché. Elle peut contenir des feuilles de style que nous verrons plus loin, des applets java ou les balises . Le texte qui se trouve entre ces dernières est affiché dans la barre de titre (tout en haut de la fenêtre du navigateur). La partie « body » contient tout le contenu qui sera affiché.
Avec ce schéma vous devriez y voir plus clair :

<= indique le début d'un document HTML
<= début de l'en-tête u document
<= titre affiché dans la barre de titre
<= fin de l'en-tête
<= début du corps du document HTML

Bonjour <= contenu du corps sera affiché

<= fin du corps du document
<= fin du document HTML

Astuce : pour afficher le code source d’une page web que vous visitez dans votre navigateur cliquez sur le menu « Affichage » puis sur « code source » ou « afficher le code source ».

La plupart des balises peuvent avoir des attributs (leur propriétés), ces attributs sont ajoutés à la balise ouvrante :

Bonjour !

La balise permet d’affecter une police, une couleur, une taille et un alignement. On ajoute à la balise un attribut : "face" et on lui donne la valeur de "Verdana", donc se qui se trouve entre et sera affiché en Verdana. Voici un schéma de cette syntaxe :

...

Balise : la balise utilisée, par exemple ou .

Attribut : attribut de cette balise, par exemple l'attribut face pour la balise font, nous verrons ensuite d'autres attributs de font. Un attribut a toujours une valeur, il est donc suivi d'un signe « = ». Une balise peut avoir plusieurs attributs qui doivent être séparés par un espace.

Valeur : La valeur d'un attribut est toujours place entre guillemets.

Voilà vous connaissez maintenant les principes du HTML, vous pouvez à présent passer à la leçon suivante.

Mise en forme de texte:

Les marqueurs font et basefont
On peut créer maintenant une page web qui affichera la phrase «C'est un essai!!! :) ».
Pour cela procédez comme suit :
Cliquez sur Démarrer>programmes>accessoires>bloc-notes et tapez le code suivant:

C'est un essai!!! :)

Puis cliquez sur Fichier>enregistrer, pour le format choisissez « tous », écrivez le nom de votre fichier suivi de l’extinction .htm ou html (personnellement je choisis .html) et cliquez sur enregistrer comme sur l’image en dessous.

Nous procéderont ainsi pour toutes les pages qu’on va faire. Ensuite double-cliquez sur votre fichier et il se chargera dans votre navigateur par défaut.

Revenons à notre page. Si vous écrivez simplement du texte entre les balises « body » le texte sera affiché dans la police par défaut de votre navigateur, il sera aligné à gauche et aura la taille par défaut qui est de 3. 3 n’est exprimé ni en points ni en pixels mais en unité spéciale qu va de 1 à 7, la taille ne sera cependant la même dans tous les navigateurs elle dépend de la configuration du navigateur. Voici un texte de la taille 7 :

texte

Pour voir le changement de la taille cliquez sur affichage>taille du texte>choisissez une valeur différente de la précédente, vous verrez alors que la taille de ce texte change. La taille 3 avec un affichage normal correspond à 12 points.

Vous pouvez changer la taille par défaut de votre page à l’aide de la balise qui n’a pas de balise fermante, son seul attribut est size. Elle doit être placé au début de la page après . Exemple :

Bonjour
Vive le HTML !!! :)

Les deux phrases seront affichées en taille 4 au lieu de 3.
Essayons maintenant de affecter une police à notre phrase :

C’est un essai

Nous avons mis notre texte entre les balises font avec un attribut face qui permet d’affecter une police à une chaîne de caractères et nous lui avons affecté la valeur Comic Sans MS, notre texte est maintenant affiché en Comic. Mais que se passera-t-il s’il n’y a pas cette police sur l’ordinateur de l’internaute qui visite votre page ?
Les caractères seront affiché dans la police par défaut, une police que ne contrôlez pas. Pour résoudre ce problème vos pouvez choisir une police de remplacent en utilisant la syntaxe suivante :

Vive le html !!!!!!

Si la police Comic est absente le message sera affiché en Verdana et si cette dernière manque le texte sera affiché dans n’importe quelle police avec empattement (shérif) et si vous voulez afficher votre texte en n’importe quelle police sans empattement, la valeur de font est alors « Sans-Sherif ».

Voici les différentes propriétés de  :

* face => La police de la chaîne de caractères ; exemple : Test

* size => La taille de la chaîne de caractères ; exemple : Test. La taille peut aussi être exprimé de manière relative à la taille par défaut ou à la taille basefont si vous l’avez définie. Exemple : Test. Si basefont est 2, « Test » sera affiché en en taille 4(2+2).
* align => L’alignement de la chaîne de caractères, ses valeurs possibles sont : right -aligner à droite, left (sa valeur par défaut) -à gauche, center -centrer et justify pour justifier le texte. Exemple : Test.
* color => La couleur de la chaîne de caractères. Regardez plus bas dans ce chapitre pour savoir comment exprimer la couleur en html.

Les couleurs
La couleur en html s’exprime de deux manières :

. Il existe un attribut de

pour changer la puce, c’est type ses trois valeurs possibles sont :

•  disc valeur par défaut, un point noir.
  
•  circle un point blanc avec un contour noir.
  
•  square un point noir carré.

Liste numérottée
Pour créer une liste numérotée, la syntaxe est la même, mais au lieu du marquer

, on utilise
(order list en anglais), voici un exemple de liste numérotée :
1. Elément 1
2. Elément 2
3. Elément 3

Voici cette liste :

1. Elément 1
2. Elément 2
3. Elément 3

Il existe aussi l’attribut type pour les listes numérotées, ses valeurs possibles sont différentes :


1.  A ,les éléments de la liste seront numérotés A B C D...
   
2.  a ,pareil que le précédent mais en minuscules a b c d...
   
3.  I ,numérotée en chiffres romains I II III IV...
   
4.  i ,en chiffres romains minuscules i ii iii iv v...
   
5.  1 ,numérotée en chiffres normaux 1 2 3 4... ,si vous n’utilisez pas l’attribut type la liste sera numérotée de cette manière.
   Il y a un autre attribut de
   , start, il sert à définir le début de la liste numérotée. Si la valeur de type est I, et vous voulez que la numérotation commence par IV, il faut donner cette valeur à start.

   Plusieurs niveaux de listes

   On peut imbriquer plusieurs listes les unes dans les autres pour avoir plusieurs niveaux de liste, exemple :

   1. Elément 1
   2. Elément 2
   • Sous-élement1
   • Sous-élement2
   • Sous-élement3
   3. Elément 3

   Voici cette liste :

   1. Elément 1
   2. Elément 2
   * Sous-élément 1
   * Sous-élément 2
   3. Elément

   La liste à puces sera décalée à droite par rapport à la liste numérotée créant ainsi plusieurs niveaux de liste. Vous pouvez imbriquer le nombre de listes que vous voulez, sur internet on trouve rarement plus de trois niveaux de liste.

   Astuce:Chaque élément d’une liste peut être un lien et être modifié par une autre balise comme ou  :

   • Accueil
   • Téléchargements
   • Nous contacter

   Les tableaux :

   Les tableaux sont des éléments très importants du web même si vous ne les voyez pas toujours, la plupart des mises en page sophistiquées utilisent des tableaux pour placer les différents éléments sur la page. Dans ce chapitre vous allez apprendre à créer des tableaux et à les cacher pour créer des mises en page.

   Tableaux simples
   Pour déclarer un tableau en html on utilise les marqueurs

   et

   , ensuite pour faire une ligne du tableau on ajoute les marqueurs
   et
   enfin pour créer une cellule sur une ligne on se sert des balises et ainsi on obtient la syntaxe d’un tableau élémentaire :

   ...

   Ce tableau sera une simple cellule qui ne sera affiché que s’ il y a des caractères entre les balises

   et

   , les navigateurs n’affichent pas des cellules vides.

   Voici la syntaxe d’un tableau deux sur deux cellules :

   <=Le début du tableau <=Définit le début d’une ligne

   <=Crée 2 cellules sur la 1ère ligne
   

   <=Met fin à la 1ère ligne

   <=Début de la 2ème ligne

   <=Crée 2 cellules sur la 2ème ligne
   

   <=Met fin à la 2ème ligne
   

   1	2
   3	4

   <=Met fin au tableau

   Fusionner les cellules
   Maintenant qu’on sait faire un tableau standard comment faire de tableaux avec des cellules de tailles différentes, ou fusionnés comme ça :

   Pour obtenir ce résultat il faut fractionner ou diviser les cellules, pour ça on va utiliser les attributs du marqueur

   colspan et rowspan. On utilisera colspan pour fractionner une cellule horizontalement et rowspan verticalement. Voici un exemple de fractionnement horizontal :

   <= Deux cellules normales

   <= Une cellule fusionnée, elle prend la place de deux cellules. Son code

    

   . On a mis comme contenu de la cellule un espace insécable pour forcer l’affichage de la cellule, une cellule n’est jamais affichée en html si elle ne contient rien. Donc la valeur de colspan est le nombre de cellules que la cellule fractionnée doit occuper sur sa ligne.

   Voilà un exemple de fractionnement vertical :
   1 3
   2

   1.Cellule sur la 1ère ligne.
   2.Cellule sur la 2ème ligne.
   3. Cellule fractionnée sur la 1ère ligne (

   ). Quand vous ajoutez un rowspan a une cellule la cellule(ou les cellules) qui est(sont) en dessous sera automatiquement decalée à droite et une partie de la cellule fractionnée prendra sa place. S’il avait une cellule sous la cellule 3 elle serait automatiquement décalée vers la droite et le tableau serait comme ça :
   1 3
   2 4

   Il est très important de comprendre le principe de division des cellules, alors relisez bien ce chapitre.

   Liste des attributs de table et de td
   Il existe plein d’autres attributs pour

   ou

   , les voilà :  : — border , très important pour cacher les tableau il définit la bordure en pixels du tableau. — cellspacing , l’espace en pixels entre les cellules. — cellpadding , l’espacement en pixels entre le contenu du tableau et les cellules. — background , l’image d’arrière plan du tableau. — bgcolor , couleur d’arrière plan du tableau. — width , largeur du tableau en pixels ou en pourcentage par rapport à la largeur de la fenêtre du navigateur. — height , hauteur du tableau en pixels ou en pourcentage. — bordercolor , couleur de la bordure du tableau. — bordercolordark , couleur de l’ombrage du tableau. — bordercolorlight , couleur de l’ombrage en haut de la bordure. Astuce : si vous voulez enlever l’effet 3D de la bodure affectez la même valeur aux trois derniers attributs. — align , l’alignement du tableau, peut avoir comme valeur left, right ou center. — rules , cet attribut spécifie quelles bordures internes d’un tableau doivent être affichées. Les valeurs possibles sont : none : Aucune bordure. (Valeur par défaut) groups : Bordures apparaissent seulement entre les groupes de lignes (THEAD, TFOOT, et TBODY) que nous verrons plus tard. rows : Bordures horizontales entre chaque paire de lignes. cols : Bordures verticales entre chaque paire de colonnes. all : Bordures entre toutes les cellules. — title , titre affiché sous le tableau. et , les lignes ou se trouve le texte entre les balises et et le texte en bas sur le copyright entre les balises et . Voici un tableau organisé en trois parties logiques :  : — width , la largeur de la cellule en pixels ou e pourcentages par rapport à la taille du tableau. — height , la hauteur de la cellule en pixels ou en pourcentages par rapport à la taille du tableau. — align , l’alignement horizontal du contenu dans la cellule. — valign , l’alignement vertical du contenu dans la cellule, ses valeurs possibles sont top, bottom, ou middle(par défaut). — rowspan , expliqué plus haut. — colspan , expliqué plus haut. — background , image d’arrière plan de la cellule. — bgcolor , couleur d’arrière plan. Cellules de titres Une cellule de titre est la même chose qu’une cellule normale auf que le texte de cette cellule est en gras. Mettez simplement à la place de td, th possède les mêmes attributs que td. Division d’un tableau en parties logiques On peut diviser un tableau en trois parties : — En tête du tableau. — Le corps du tableau. — Le pied du tableau. Si votre tableau organise les éléments de votre page vous pouvez placer les lignes de votre tableau ou se trouve le titre entre les balises Titre Mon contenu Tout droits réservés (c)2003 En fait ces balises ne sont pas très importantes, je vous les montre juste parce que dans ces cours je présente toutes les balises et attributs du html (enfin presque toutes certaines ne s’utilises qu’avec d’autres langages de programmation). Le seuls avantages de ces marqueurs sont une meilleure organisation des éléments du tableau et l’attribut rules de table ne fonctionne que si vous divisez votre tableau avec ses marqueurs. Utilisation de tableaux pour créer des mises en pages Maintenant que vous connaissez bien les tableaux je vais montrer comment les cacher pour faire des mises en pages. Tout d’abord mettez les attributs cellpadding, cellspacing et border à 0 : Ensuite ajoutez l’attribut valign à chaque balise td et donnez lui la valeur de top. Les formulaires : Le seul moyen de recueillir des information sur vos visiteurs reste les formulaires. Pour créer un formulaire vous utiliserez les balises et . Form possède plusieurs attributs obligatoires :  method , la méthode utilisée pour envoyer les données du formulaire, elle peut avoir la valeur get ou post, on utilisera toujours la seconde valeur.  action , indique au formulaire ou envoyer les données, elle peut les envoyer vers un programme de traitement, dans ce cas indiquez l’emplacement de ce fichier, les formulaires peuvent aussi envoyer les données sur une adresse e-mail, dans ce cas mettez comme valeur l’adresse e-mail précédé de mailto:. Pour créer un élément du formulaire on utilise la balise qui ne comporte pas de marqueur de fermeture. Pour indiquer la nature de input on utilise l’attribut type, voici ses différentes valeurs :  text , champ de saisie  password ,mot de passe  checkbox , case à cocher  submit , bouton pour envoyer les données du formulaire  reset , bouton efface les données saisies et ne les envoie pas  radio , un bouton radio Chaque élément du formulaire doit avoir un nom pour l’indiquer, on utilise l’attribut name de input. Pour faire un champ multiligne on utilise les marqueurs et , le texte qui se trouve entre ces balises sera affiché dans le champ avant que le modifiez, ces balises possèdent comme les autres marqueurs des formulaires l’attribut name et deux autres attributs encore, cols pour la largeur du champ en caractères et rows poua la hauteur en lignes. Pour faire un menu déroulant on utilise les marqueurs et , ce marqueur a l’attribut name. Pour faire une sélection du menu on utilise les marqueurs et . Pour regrouper les boutons radios, li faut leur affecter le même nom et leur ajouter à chacun l’attribut value dont la valeur sera envoyée si le bouton est sélectionné. Les boutons envoie et effacer ont un attribut value, sa valeur sera affichée sur le bouton. Voilà un exemple d’un formulaire utilisant tous ses éléments : Entrez votre nom: Entrez votre mot de passe: je visite net-all tous les jours. Combien de fois par semaine visitez-vous net-all ? 1 3 5 Tous les jours Aimez-vous mes cours ? Oui non Un commentaire ? Entrez votre commentaire   Cliquez ici pour voir cet exemple Les cadres : L’utilité des cadres Les cadres ou les frames permettent d’afficher plusieurs pages dans la même fenêtre du navigateur, c’est très pratique quand votre site comporte beaucoup de pages. Pour modifier le menu de navigation, par exemple, vous devez modifier toutes les pages en utilisant la méthode classique, alors qu’avec les frames vous modifiez juste page qui contient le menu. Mise en place des cadres Voici le code d’une page composée de deux cadres, dans le cadre d’en haut on affiche la page menu.html et en bas la page contenu.html. Cliquez ici pour afficher cette page. Je vais expliquer ce code plus loin : Le code de menu.html : Ici doit se trouver le menu de navigation Le code de contenu.html : Le contenu Comme vous pouvez le constater on remplace et par et , on ajoute à ce marqueur l‘attribut rows qui indique au navigateur qu’il faut afficher les cadres les uns sous les autres. La valeur de rows indique le nombre de cadres et leurs dimensions, on indique les dimensions des cadres en pourcentages par rapport à la largeur de la fenêtre, on met une * pour indiquer que le cadre occupe l’espace restant et on sépare les dimensions des cadres par une virgule. Dans notre exemple la valeur de rows est « 20%,* », ça veut dire que le 1èr cadre en haut occupe 20% de l’écran et le 2ème - l’espace restant, soit 80%. Maintenant pour indiquer la page à afficher dans chaque cadre on utilise les marqueurs , il n’a pas de balise de fermeture et il a deux attributs : src (sa valeur est le chemin d’accès au fichier à afficher dans le cadre) et name (il donne un nom au cadre, vous verrez plus loin pourquoi). Comme vous le voyez sur l’exemple si frameset indique qu’il y a 3 cadres il faut ensuite 3 marqueurs pour indiquer quelle page afficher dans chaque cadre. Si vous remplacez l’attribut rows de frameset par cols les cadres seront verticales et les uns à coté des autres. Cliquez ici pour voir le deuxième exemple. Astuce : vous pouvez aussi indiquer la taille des cadres en pixels mais la taille d’au moins d’un cadre doit occuper l’espace restant *. Comment combiner des cadres verticaux et horizontaux ? Je veux faire par exemple une page composée de trois cadres : d’une ligne en haut et deux colonnes en bas. Je commence par définir la ligne : Les deux colonnes en bas en occupent bien une, donc je suis obligé d’indiquer deux lignes. Maintenant j’indique l’emplacement de la page à afficher dans la première ligne : , et enfin au lieu de mettre un autre marqueur frame je mets un 2ème frameset mais celui-ci composé de deux colonnes :, j’indique l’emplacement des pages à afficher dans les colonnes : et je mets deux balises de fermeture puisque on a mis deux frameset d’ouverture. Finalement on obtient ceci : Voici le schéma de cette page : 1ère ligne 20% normale 2ème ligne 80% composée de deux colonnes, définie par un frameset cols 30% 70% Empêcher le redimensionnement des cadres Vous avez sûrement remarqué que quand vous pointez la souris sur la ligne entre deux cadres le curseur change et vous pouvez redimensionner les cadres. Pour interdire à l’utilisateur de redimensionner les cadres ajoutez au marqueur frame qui représente le cadre dont vous voulez interdire le redimensionnement noresize. Vous pouvez aussi régler les ascenseurs de chaque cadre avec l’attribut scrolling, ses valeurs possibles sont : yes, l’ascenseur apparaît toujours, no, jamais et auto juste si tout le contenu du cadre n’est pas visible. Les liens et les cadres Si une page affichée dans un cadre comporte un lien et on clique dessus la page de destination sera affichée dans le même cadre, pour afficher la page dans un cadre de votre choix ajoutez au lien l’attribut target et donnez lui comme valeur le nom du cadre dans lequel la page de destination doit être affichée. Par exemple le lien se trouve dans le cadre qui contient le menu de navigation et les pages doivent être affichées dans le cadre dont la valeur de name est « content », la syntaxe du lien sera suivante : Nous-contacter Vidéo et son : Dans ce chapitre vous allez apprendre à insérer du multimédia dans vos pages web. Le son Pour insérer un son d’accompagnement dans votre page vous utiliserez la balise , elle n’a pas de marqueur de fermeture. Voici les attributs de embed :  src , source du son, chemin d’accès au fichier son.  autoplay , donnez à cet attribut la valeur true si vous voulez que le son soit déclenché juste après son chargement.  loop , répétition du son, donnez lui comme valeur le nombre de fois qu’il faut répéter le son, vous pouvez lui donner comme valeur true pour jouer le son en continu et false pour ne le répéter qu’une fois. La vidéo Pour insérer une video dans votre page vous utiliserez comme pour le son la balise . Voilà ses différentes valeurs pour la video :  src , source de la vidéo, chemin d’accès au fichier vidéo.  autoplay , donnez à cet attribut la valeur true si vous voulez que le son soit déclenché juste après son chargement ou false si vous ne le voulez pas.  loop , répétition du son, donnez lui comme valeur le nombre de fois qu’il faut répéter le son, vous pouvez lui donner comme valeur true pour jouer le son en continu et false pour ne le répéter qu’une fois.  height , hauteur en pixels du cadre dans lequel la vidéo sera affichée.  width , largeur en pixels du cadre dans lequel la vidéo sera affichée.  controller , donnez lui la valeur true si vous voulez qu’une barre avec les boutons play, stop, pause soit affichée sous la vidéo sinon donnez lui comme valeur false. Insérer une animation flash dans votre page Vous pouvez insérer dans votre page une animation flash (fichiers *.swf), voilà le code à mettre : Remplacez les mots largeur, hauteur et mon_anim_flash.swf par vos paramètres et l’animation sera affichée. Conclusion Vous savez maintenant pas mal de choses sur le HTML et même si vous n’avez retenu que la moitié des choses vous étés déjà bon en HTML et vous êtes capables de faire de belles pages web. Pour ces cours je me suis servi de quelques bons livres :  M. Holzschlag HTML4 (Série "Création express"), Editions First Interactive, 2000  M. Martin Comment créer son site web (Série "Comment faire ...") CampusPress, 2001