Accueil
 COURS INFORMATIQUE
 Cours Algorithmique
 Cours ASP
 Cours CSS
 Cours HTML
 Cours PHP / MySQL
 Cours Réseaux
 Cours SQL
 Cours Visual Basic
 ARTICLES
  Conception de sites
  Droit & Internet
  e-commerce
  Société
  Strategies du web
  Technologies Web
  Marketing Web
 LIVRES
  ASP/ASP.Net
  C/C++/C#
  Conception de sites
  DHTML/CSS
  Gestion de Projet
  HTML/Internet
  Java/JSP/J2EE
  JavaScript/VbScript
  Juridique
  Marketing/Stratégie
  PHP/Linux/Unix
  Réseaux
  XML/XHTML/XSL
 NETALYA RECOMMANDE
Reussir un projet de site web

Cours HTMLCours HTML N°1 : structure d'un document HTML

Auteur : Nicolas Chu

Infinite Menus, Copyright 2006, OpenCube Inc. All Rights Reserved.

Le langage HTML

HTML est le langage universel utilisé pour communiquer sur le Web. Votre information sera ainsi transportée sur cette gigantesque toile de réseaux interconnectés qu'est Internet, pour aboutir sur l'ordinateur de votre lecteur grâce à un programme appelé navigateur ou browser.
Le logiciel que l'on appelle un browser vous permet de surfer sur le Net et d'afficher sur votre écran les "pages" qu'il a interceptées. Il y a, hélas, beaucoup de marques et de types de browsers différents. Des simples, des archaïques ou des sophistiqués... Les plus connus sont Netscape Navigator et Internet Explorer de Microsoft mais il en existe beaucoup d'autres. Chaque browser a sa propre façon de travailler.

A la différence de votre traitement de texte qui restitue exactement votre document sur une feuille de papier avec votre police de caractères et votre mise en page, vous ne saurez jamais exactement ce que le browser de votre lecteur du bout du monde affichera sur l'écran de celui-ci.

En HTML, vous n'avez pas la maîtrise totale de votre document.

Pour transiter le plus rapidement possible sur les lignes téléphoniques, on a adopté un format de texte très compact mais aussi peu sophistiqué. Ce format ASCII a été amputé d'un bit (7 bits au lieu de 8) . Vous serez donc privé de certains caractères spéciaux comme le é pour lesquels il faudra passer par des codes particuliers.


Mais, récompense suprême... HTML est un langage universel qui s'adapte à toutes les plate-formes que ce soit Windows, Macintoch, Unix, OS/2...
En plus du texte adressé à votre lecteur, il vous faudra inclure des instructions pour le browser de celui-ci. Ces instructions seront différenciées de votre texte par les signes < et > par exemple <HTML>.
Ces "instructions" s'appellent des tags ou des balises.

Quand vous écrirez les balises de votre page HTML, il faudra garder à l'esprit :


- qu'une balise marque une action pour le browser (ce qu'il doit faire...).
- que les attributs précisent les modalités de cette action (comment il doit le faire...).

La déclaration de la version supportée avec la balise <doctype> : Cette dernière doit se situer au début de votre document.

<doctype html public "-//w3c//dtd html 4.0//en" "http://www.w3c.org/TR/REC-html40/strict.dtd">


il s'agit de la version 4, sans support des éléments des versions précédentes

<doctype html public "-//w3c//dtd html 4.0 transitional//en" "http://www.w3c.org/TR/REC-html40/loose.dtd"> :

il s'agit de la version 4 avec support des anciennes versions de html

<doctype html public "-//w3c//dtd html 4.0 frameset//en" "http://www.w3c.org/TR/REC-html40/frameset.dtd"> :

s'applique aux fichiers gérant le multifenêtrage N.B. : le "en" signifie que le html est en anglais

Le document HTML minimum

Nous avons vu qu'une page HTML était en fait un fichier texte, enrichi d'un certain nombre de codes ou commandes, appelés balises.
Ces balises sont toujours exprimées sous la forme d'un mot clé, encadré par les caractères "<" et ">". Exemple : <BALISE>.
Pour la plupart des balises, il existe une balise de fermeture associée, reprenant le même nom, mais précédée du caractère "/". Exemple : </BALISE>. La commande spécifiée s'applique donc uniquement au texte situé entre le couple de balises ainsi formé. Exemple:

<HTML>
...
</HTML>
Notons que :
  • une balise peut indifféremment être indiquée en minuscules ou en majuscules,
  • le formattage "manuel" du document (espaces, sauts de lignes,...) est toujours ignoré.
  • Par exemple : <HTML>...</HTML> est interprété de la même façon par le navigateur web que la syntaxe sur plusieurs lignes indiquée ci-dessus.

Nous venons de découvrir, sans le savoir, un des éléments de la structure d'une page HTML : toute page doit en effet débuter par la balise <HTML> et se finir par </HTML>.
Entre ces deux balises, on définit deux zones : l'en-tête, spécifié par les commandes <HEAD> et </HEAD>, ainsi que le corps, délimité par: <BODY> et </BODY>. Ce qui donne, comme structure de base :

<HTML>
<HEAD>
...
</HEAD>
<BODY>
...
</BODY>
</HTML>

Dans l'en-tête, on ne met généralement qu'une seule information, le Titre du document qui sera affiché en haut de la fenêtre du navigateur et qui apparaît dans les bookmarks (listes d'URL gérées par un navigateur, une sorte d'annuaire).
Ce Titre est indiqué entre les balises <TITLE> et </TITLE>. Exemple:

<TITLE>Ceci est le Titre</TITLE>. Dans le corps, on met en fait tout le document à afficher (texte, définition des images etc.). Signalons l'existence d'une balise de commentaires, qui peut être utilisée partout dans les documents HTML, définie comme suit : <!-- Ceci est un commentaire --!>. NB : Les commentaires ne sont jamais affichés à l'écran du navigateur. En résumé, la structure générale d'une page HTML est la suivante : <HTML>
<HEAD>
<TITLE>Titre du document</TITLE>
</HEAD>
<BODY>
...
...
</BODY>
</HTML>
è Notez que l'indentation facilite la lecture du code mais n'est pas reproduite par le browser. Récapitulatif :

<HTML> Ceci est le début d'un document de type HTML.
</HTML> Ceci est la fin d'un document de type HTML.
<HEAD> Ceci est le début de la zone d'en-tête (prologue au document proprement dit contenant des informations destinées au browser).
</HEAD> Ceci est la fin de la zone d'en-tête.
<TITLE> Ceci est le début du Titre de la page.
</TITLE> Ceci est la fin du Titre de la page.
<BODY> Ceci est le début du document proprement dit.
</ BODY> Ceci est la fin du document proprement dit.

Vous aurez remarqué qu'à chaque balise de début d'une action, soit <...>, correspond (en toute logique) une balise de fin d'une action </...>.
Vous noterez aussi que les balises ne sont pas "case sensitive". Il est donc équivalent d'écrire <HTML>, <html>, <HTml>, etc.


Nous vous informons que ce cours constitue une œuvre protégée en France par le Code de la Propriété Intellectuelle, et à l’étranger par les conventions internationales en vigueur sur le droit d’auteur. La violation de l’un des droits d’auteur de l’œuvre est un délit de contrefaçon. Il est donc interdit, à titre privé ou public, de reproduire, copier, vendre, revendre ou exploiter, que ce soit dans un but commercial ou purement gratuit, ce cours, sauf accord exprès et préalable de son auteur.


Google
 
 RESSOURCES GRATUITES
 Caractères spéciaux
 Code Couleurs HTML
 Générateur Méta Tags
 Références HTML
 Scripts : ASP
 Scripts : Java Scripts
 PRATIQUE / OUTILS
 Salons Informatiques
 Astuces Windows
 TÉLÉCHARGEMENTS
 Utilitaires système
 Logiciels pratiques
 Jeux & démos
 INFOS SITE
 Contacts
 Mentions légales
 Qui sommes-nous ?
 PARTENAIRES
 Jeux et Jouets
 Murielle Cahen
 Cours d'anglais
 Droit NTIC
 Directeur Internet
 Australie
 Création site Internet
 VOD News
 Web Hostings