html, xhtml

Présentation du HTML

Le HTML (« HyperText Mark-Up Language ») est un langage dit de « marquage » (de « structuration » ou de « balisage ») dont le rôle est de formaliser l'écriture d'un document avec des balises de formatage. Les balises permettent d'indiquer la façon dont doit être présenté le document et les liens qu'il établit avec d'autres documents.

Le langage HTML permet notamment la lecture de documents sur Internet à partir de machines différentes, grâce au protocole HTTP, permettant d'accèder via le réseau à des documents repérés par une adresse unique, appelée URL.

On appelle World Wide Web (noté WWW) ou tout simplement Web (mot anglais signifiant toile) la "toile virtuelle" formée par les différents documents (appelés « pages web ») liés entre-eux par des hyperliens.

Les pages web sont généralement organisées autour d'une page d'accueil, jouant un point central dans la navigation à l'aide des liens hypertextes. Cet ensemble cohérent de pages web liées par des liens hypertextes et articulées autour d'une page d'accueil commune est appelée site web.

Le Web est ainsi une énorme archive vivante composée d'une myriade de sites web proposant des pages web pouvant contenir du texte mis en forme, des images, des sons, des vidéo, etc.

Le principe du Web

Le web est composé de pages web stockées sur des serveurs web, c'est-à-dire des machines connectées à Internet en permanence et chargées de fournir les pages web demandées. Chacune des pages web, et plus généralement toute ressource en ligne (image, vidéo, musique, animation, etc.), est repérée par une adresse unique appelée URL.

L'élément clé pour la navigation au sein des pages web est le navigateur (en anglais browser, parfois également appelé fureteur, fouineur, feuilleteur ou butineur au Québec), c'est-à-dire le logiciel client capable d'interroger les serveurs web, d'exploiter leurs résultats et de mettre en page les informations grâce aux instructions contenues dans la page HTML.

Parmi les principaux navigateurs utilisés sur Internet, citons notamment les suivants :

  • Mozilla Firefox,
  • Microsoft Internet Explorer,
  • Netscape Navigator,
  • Safari.

Le HTML est un standard

Il est important de comprendre que le langage HTML est un standard, c'est-à-dire qu'il s'agit de recommandations publiées par un consortium international : le World Wide Web Consortium (W3C).

Les spécifications officielles du HTML décrivent donc les "instructions" HTML mais en aucun cas leur implémentation, c'est-à-dire leur traduction en programmes d'ordinateur, afin de permettre la consultation de pages web indépendamment du système d'exploitation ou de l'architecture de l'ordinateur.

Toutefois, aussi étoffées les spécifications soient-elles, il existe toujours une marge d'interprétation de la part des navigateurs, ce qui explique qu'une même page web puisse s'afficher différemment d'un navigateur Internet à l'autre.

De plus, il a que certains éditeurs de logiciels ajoutent des instructions HTML propriétaires, c'est-à-dire ne faisant pas partie des spécifications du W3C. Ainsi des pages web contenant ce type d'instruction pourront être parfaitement affichées sur un navigateur et seront totalement ou en partie illisibles sur les autres, d'où la nécessité de créer des pages web respectanrrive parfoist les recommandations du W3C afin de permettre leur consultation par le plus grand nombre.

Versions du langage HTML

Le langage HTML a été mis au point par Tim Berners-Lee, alors chercheur au CERN, à partir de 1989. Celui-ci annonça officiellement la création du web sur Usenet en août 1991. Ce n'est cependant qu'à partir de 1993 que l'on considère l'état du HTML suffisamment avancé pour parler de langage (HTML est alors baptisée symboliquement HTML 1.0). Le navigateur internet utilisé à l'époque était nommé NCSA Mosaïc.

Le RFC 1866, daté de novembre 1995 représente la première version officielle de HTML, c'est-à-dire le HTML 2.0.

Après la brêve apparition d'un HTML 3.0, qui ne vit jamais officiellement le jour, le HTML 3.2 devint le standard officiel le 14 janvier 1997. Les apports les plus marquants du HTML 3.2 étaient la standardisation des tableaux ainsi que d'un grand nombre d'éléments de présentation.

Le 18 décembre 1997, le HTML 4.0 a été publié. La version 4.0 du langage HTML standardise notamment les feuilles de style et les cadres (frames). La version HTML 4.01, apparue le 24 décembre 1999 apporte quelques modifications mineures au HTML 4.0.

HTML, un langage à balises

Le HTML n'est pas un langage de programmation. Il s'agit d'un langage permettant de décrire la mise en page et la forme d'un contenu rédigé en texte simple.

Une page HTML est ainsi un simple fichier texte contenant des balises (parfois appelées marqueurs ou repères ou tags en anglais) permettant de mettre en forme le texte, les images, etc.

Comment utiliser les balises HTML ?

Une balise est un élément de texte (un nom) encadrée par le caractère inférieur (<) et le caractère supérieur (>). par exemple « <H1> ».

Les balises HTML ne sont pas sensibles à la casse, c'est-à-dire qu'elles peuvent être saisies indifféremment en minuscules ou en majuscules !


Les balises HTML fonctionnent par paire afin d'agir sur les éléments qu'elles encadrent. La première est appelée « balise d'ouverture » (parfois balise ouvrante) et la seconde « balise de fermeture » (ou fermante). La balise fermante est précédé du caractère /) :

<marqueur> Votre texte formaté  </marqueur>



A titre d'exemple, les balises <b> et </b> permettent de mettre en gras le texte qu'elles encadrent :

<b> Ce texte est en gras </b>



Les balises HTML peuvent parfois être uniques : la balise <br> représente par exemple un retour à la ligne.

Afin d'être le plus proche possible du standard XHTML (beaucoup plus stricte que le standard HTML), il est conseillé d'utiliser la notation suivante : <br />.

Imbrication des balises

Les balises HTML ont la particularité de pouvoir être imbriquées de manière hiérarchique afin de permettre le cumul de leur propriétés. En contrepartie le chevauchement de balises n'est pas toléré par le standard HTML. Voici un exemple de texte formaté avec des balises imbriquées :

<i><u>Comment ça Marche</u>, encyclopédie informatique libre</i>


L'exemple ci-dessus donne le résultat suivant :

<u>Comment ça Marche</u>, encyclopédie informatique libre


En contrepartie l'exemple ci-dessous n'est pas correct :

<i><b>Comment ça Marche</i>, encyclopédie informatique libre</b>

Notion d'attribut

Un attribut est un élément, présent au sein de la balise ouvrante, permettant de définir des propriétés supplémentaires. Les attributs se présentent la plupart du temps comme une paire clé=valeur, mais certains attributs ne sont parfois définis que par la clé.

Voici un exemple d'attribut pour la balise <p> (balise définissant un paragraphe), permettant de spécifier que le texte doit être aligné sur la droite :

<p align="right">Exemple de paragraphe</p>



Chaque balise peut comporter un ou plusieurs attributs, chacun pouvant avoir (aucune,) une ou plusieurs valeurs.

Espaces, saut de ligne et tabulations

Le langage HTML ne tient pas compte des espaces, des tabulations et des sauts de ligne (ci-après appelés) ou plus exactement il considère une suite d'un ou plusieurs espaces/tabulations/saut de ligne comme une seule espace. Cela permet notamment d'indenter le code HTML pour plus de lisibilité, sans modifier l'apparence de la page HTML dans le navigateur. Il existe une exception pour le code contenu dans des balises

, dont l'objectif est justement de conserver le formatage du texte (espaces, sauts de lignes, etc.) !  

A noter: il existe une exception pour le code contenu dans des balises
<PRE>, dont l'objectif est justement de conserver le formatage du texte (espaces, sauts de lignes, etc.) !


Les deux codes HTML suivants donnent ainsi le même résultat :

<pre class="code">Exemple de
code
HTML



Exemple de code HTML



Le langage HTML possède par contre des éléments permettant expressément de définir chacun de ces éléments de mise en forme :

  • Espace insécable : il s'agit d'une espace ne pouvant être brisée par une fin de ligne. Sa représentation en HTML est &nbsp;.
  • Saut de ligne manuel : il s'agit d'un saut de ligne explicite. Sa représentation en HTML est <br> (<br /> pour être conforme au XHTML).



A noter: La balise <NOBR> </NOBR> permet à l'inverse d'empêcher le retour automatique à la ligne réalisé par le navigateur !

Commentaires

Il est possible d'ajouter des éléments d'information dans une page web sans que ceux-ci soient affichés à l'écran grâce à un jeu de balises spécifique, appelé balises de commentaires.

<!-- Voici un commentaire -->



Les balises de commentaires permettent de mettre en commentaire du texte mais peuvent également servir à commenter du code HTML.

A noter: il existe une exception pour le code contenu dans des balises <PRE>, dont l'objectif est justement de conserver le formatage du texte (espaces, sauts de lignes, etc.) !

Notion de document HTML

Une page HTML est un simple fichier contenant du texte formatté avec des balises HTML. Par convention l'extension donnée au fichier est .htm ou .html, mais une page web peut potentiellement porter n'importe quelle extension.

Une page web peut être construite à partir du plus basique des éditeurs de texte (une application bloc-note par exemple), mais il existe des éditeurs beaucoup plus évolués.

Les éditeurs WYSIWYGWhat You See Is What You Get», littéralement «ce que vous voyez est ce que vous obtenez») sont des éditeurs graphiques permettant de travailler sur une page web telle qu'elle sera affichée sur un navigateur à quelques détails près. Grâce à ce genre d'éditeurs il est possible d'ajouter des balises par simple clic et d'en modifier les attributs en éditant leur propriétés dans un formulaire. Pour autant, afin d'utiliser au mieux ce genre d'éditeur, une connaissance préalable du HTML est tout de même très utile.

Il existe également des éditeurs permettant d'éditer le code HTML en affichant les balises, les attributs et leurs valeurs avec différentes couleurs pour une meilleure lecture et proposant parfois des outils pour vérifier la validité du code HTML.

Par convention l'extension donnée à une page HTML est .htm ou .html mais une page web peut potentiellement porter n'importe quelle extension notamment les suivantes :

  • .asp pour une page générée dynamiquement en ASP (Active Server Pages) ;
  • .cgi pour une page générée dynamiquement avec des CGI (Common gateway Interface) ;
  • .php, .php3 ou .php4 pour une page générée dynamiquement en PHP ;
  • .pl pour une page générée dynamiquement en Perl (Practical Extraction and Report Language) ;
  • etc.


Structure du document HTML

Un document HTML commence par la balise <HTML> et finit par la balise </HTML>. Il contient également un en-tête décrivant le titre de la page, puis un corps dans lequel se trouve le contenu de la page.

L'en-tête est délimité par les balises <HEAD> et </HEAD>. Le corps est délimité par les balises <BODY> et </BODY>.

Voici par exemple une page HTML minimaliste :

<HTML>
<HEAD>
<TITLE>Titre de la page</TITLE>
</HEAD>

<BODY>
Contenu de la page
</BODY>
</HTML>


Déclaration du type de document

Il est conseillé d'indiquer dans la page HTML le prologue du type de document, c'est-à-dire une référence à la norme HTML utilisée, afin de spécifier le standard utilisé pour le codage de la page. Cette déclaration se fait par une ligne du type :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>...</HEAD>
<BODY>Contenu de la page</BODY>
</HTML>




La déclaration du document indique la DTD (Document Type Definition) utilisée, c'est-à-dire la référence des caractéristiques du langage utilisé. Le tableau ci-dessous récapitule les déclarations pour les principales version du langage HTML :

 

VersionDéclaration
HTML 2.0 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
HTML 3.2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
HTML 4.01
  • Strict : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
  • Transitional : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  • Frameset : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0
  • Strict : <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  • Transitional : <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-loose.dtd">
  • Frameset : <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
  • XHTML 1.1
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    Les balises de style


    Qu'est-ce qu'une balise de style?

    Les balises de style modifient la typographie du texte. Elles peuvent être imbriquées dans d'autres balises de style de la même façon qu'on le ferait avec un traitement de texte.
    Voici une liste de balises de style reconnues par la plupart des navigateurs (chacun à sa façon si bien que certains ne font pas la différence entre ces styles).

     

    Balise de style Effet Visuel
    <ABBREV> Abréviation
    <ACRONYM> Acronyme
    <AU> L'auteur
    <B> Met la police en gras
    <BIG> Police plus grande
    <BLINK> Clignote (propre à Netscape)
    <CITE> Citation
    <CODE> Instruction
    <DEL> Texte supprimé mais qui reste présent
    <DFN> Définition d'instance
    <EM> Emphase
    <I> Italique
    <INS> Nouveau texte inséré a cet endroit
    <KBD> Clavier - Suite de caractères devant être tapés tel quel
    <PERSON> Accentuation du nom d'une personne
    <Q> Encadre le texte par des guillemets
    <S> Comme strike (barré)
    <SAMP> Exemple
    <SMALL> Police plus petite
    <STRONG> Forte accentuation rendue par du gras
    <STRIKE> Texte barré (comme S)
    <SUB> Texte en Indice
    <SUP> Texte en Exposant
    <TT> Caractère de machine à écrire
    <VAR> Nom d'une variable

    Lire la suite  

    Créer un site gratuit avec e-monsite - Signaler un contenu illicite sur ce site