TEXTES de BASE en HTML



Le succès de l'Internet relève de deux éléments concomitants:

- 1. la fin de la guerre froide qui a permis la libéralisation du réseau des réseaux - l' Internet - et son ouverture au monde commercial.

- 2. l'introduction de l'HTML (HyperText Markup Language) et la miseau point d'un programme serveur d'informations initialement développépar le Centre Européen de Recherche Nucléaire (CERN àGenève) mis en oeuvre d'abord pour les propres besoins des chercheurs et qui aboutit à World Wide Web que nous connaissons aujourd'hui.

L'hypertexte est un mode d'écriture qui s'inscrit "au delà" du texte visible sur l'écran au moyen de balises.

Il peut paraître superflu de s'initier à HTML puisqu'il existeaujourd'hui des traducteurs et des assistants accompagnant les logiciels detraitement de texte récents comme Word par exemple, qui produisent des documents en hypertexte.
Les navigateurs récents comme Netscape sont eux-mêmes dotés de compléments permettant de créer des pages en HTML.

Cependant, on aimerait savoir ce que l'on fait et parfois changer une présentation, changer une couleur, mettre en relief certains mots, insérer une image, améliorer la forme rendue après une convertion par un traitement de texte standard qui n'est pas toujours parfaite ...
Les éditeurs les plus perfectionnés peuvent générer des commandes HTML inexactes qu'il faudra bien se résigner àrectifier manuellement si on veut obtenir l'effet désiré.

HTML est non seulement utilisable pour créer une ou des pagessur l'Internet, mais peut aussi être utile pour créer un CD-Rom.

Notre objectif consistera à donner tous les éléments essentiels pour créer un article, le chapitre d'un livre, voiretout un livre à placer sur l'Internet, avec les liens vers les tableaux, les images et graphiques, les références et les résumés des références.

Précisons d'abord trois notions.

Les 3 éléments :
URL - Uniform Resource Locator
HTTP - HyperText Transfer Protocol sur les serveurs
HTML - HyperText Markup Language pour les documents,
ont créé l'image, la représentation du nom World Wide Web, WWW, W3, la toile d'araignée (Web) ouverte à l'échelle mondiale ( World Wide).
-------------------------------------------------
N.B. :   Il y a plusieurs autres cours et de guides de HTML en français

Notre sujet concerne HTML - extrait d'un volume de 700 pages dont voici la référence :
HTML Sourcebook
2 nd édition
by Ian S. Graham
John Wiley 1996.

Ceux qui veulent approfondir le sujet liront avec fruit
Créer vos pages Web - Mode d'emploi.
par Yves Fréchil - (Ed. Sybex - Paris - 1997)

--------------------------------------------------

Qu'est ce qu'un langage "surmarquant " un texte (text markup language)?

Un langage surmarquant est un mode de programmation de la manière dont le document doit apparaître, en utilisant des commandes "enfouies" dans le document.

Par exemple : supposons que je souhaite que le mot "auditoire" apparaisse en lettres grasses.
Le langage surmarquant peut matérialiser ce souhait avec des commandes sous la forme:
(comm-gras) auditoire (fin-gras).
En anglais : (begin-bold) auditoire ( end-bold)
Cela signifie : choisir l'impression en gras - écrire le mot "auditoire" - terminer l'impression en gras.

Dans cet exemple, ce qui se trouve entre parenthèse (comm-gras) et (fin-gras) sont des balises du langage surmarquant indiquant qu'il faut activer l'impression en gras puis la désactiver.
Un langage surmarquant utilise de nombreuses balises de ce genre pour indiquer comment le document doit apparaître.

Sans que l'on s'en rende compte, tous les traitements de texte utilisent une forme de langage surmarquant de façon à faire apparaître le document comme nous le souhaitons. Un retour de ligne, un paragraphe, un retrait de tabulation sont autant de commandes en langage du genre surmarquant - enfouies dans le texte.

Ici, l'idée est la même : un langage surmarquant est composé d'un ensemble de commandes "enfouies" dans le texte, mais écrites, qui expriment la manière dont celui-ci doit se présenter.

Terminologie

HTML est un langage à balises. Une balise est constituée par un mot-clé placé entre deux chevrons "<" et ">".

Il existe deux types de balises:

  • les marqueurs : qui sont composés d'une seule balise accompagnée éventuellement d'un attribut.
    Exemples :
    <HR> pour une ligne horizontale (Horizontal Row)
    < HR ALIGN="left"> pour aligner une ligne horizontale àgauche. ALIGN est l'attribut de la balise.

    L'attribut est suivi du signe "=" sans espace et le complément de l'attribut est placé entre guillemets.

  • les conteneurs : qui sont constitués par deux balises: une balise d'ouverture (ou balise initiale), pourvue ou non d'attributs, et une balise de fermeture (ou balise terminale).
    Entre les deux figure l'objet (généralement du texte) sur lequel porte la commande.

    La balise de fermeture a le même nom que la balise d'ouverture, mais elle est précédée d'un slash (/) et ne comportejamais d'attribut.

    Exemples:
    <TITLE> Fondation Saint-Luc </TITLE>
    <A HREF="http://www.md.ucl.ac.be/"> Faculté de médecine </A>
    Dans le deuxième exemple, l'objet du conteneur <A>......</A> est le texte d'appel sur lequel devra cliquer le visiteur pour charger le fichier auquel se réfère l'attribut HREF.

    Applications:

    <BR> est un marqueur; il signifie "line break " - retour de ligne.

    Comme un retour de ligne n'implique aucune autre commande sur un texte, il n'y a pas de balise terminale </BR>

    <P> indique "début de paragraphe" avec un doubleretour de ligne avant le <P>
    Ainsi : <P> et <BR><BR> ont un effet équivalent.
    <P> est en principe un marqueur, parfois considérécomme conteneur.
    Mais, après <P>, la fin du paragraphe </P> n'est pas obligatoire.

    <H1> Auditoire </H1>
    <H1> est la balise initiale entre les deux chevrons <   >
    H1 indique un titre de niveau 1 - (ce sont de gros caractères gras pour un titre - Le "Heading" "un" est le niveau le plus élevé)
    </H1> est la balise terminale.
    Il y a six niveaux de "Headings" de 1 à 6 : du plus grand au plus petit.

    Ecriture

    Alors que les balises peuvent s'écrire en minuscule ou en majuscules, elles sont généralement écrites en majuscules pour bienles isoler du restant du texte.

    Les compléments d'un attribut sont placés entre guillements.

    HTML est évolutif et extensible.

    Nous en sommes à la version 3.2, et il y intérêt à s'en tenir aux balises classiques, si l'on souhaite que le texte soit lu de la même manières par tous.
    Si on utilise une version trop évoluée, il se peut quecertains, utilisant un navigateur plus ancien, ne puissent pas lire le document.

    HTML ne comporte pas de caractères accentués.

    HTML ne connaît que le véritable alphabet ASCII qui ne comporte que 128 caractères et ne permet pas de reproduire les caractères accentués.
    Pour exprimer des caractères accentués: à, â , é , è , ê , î, ô , ù
    on recourt à des artifices, appelés entitésde caractères : début par " & " - la lettre- son accent - et finissant par "; "
    Ainsi :
    à = &agrave;
    è = &egrave;
    ù = &ugrave;
    é = &eacute;
    â = &acirc;
    ê = &ecirc;
    î = &icirc;
    ô = &ocirc;
    ç = &ccedil;
    ï = &iuml;
    ü = &uuml;
    etc.

    Exemple : l'élève pénètre à l'école où il paraît ....
    s'écrit en HTML : l'&eacute;l&egrave;ve p&eacute;n&egrave;tre &agrave; l'&eacute;cole o&ugrave; il para&icirc;t ....

    Puisque les signes < , > , & et "ont une signification particulière en hypertexte, ils doivent être écrits autrement.
    Ainsi:
    < = &lt; (lesser than)
    > = &gt; (greater than)
    & = &amp; (ampersand)
    " = &quot; (quote)

    Ne vous effrayez pas, tous les traitements de texte même les plus simples, ont actuellement un mode d'enregistrement en HTML qui effectueimmédiatement cette transformation.

    Sachez donc que, en HTML, vous ne pouvez pas écrire des mots avec des accents.
    Parfois, comme pour des titres, vous pouvez utiliser des Majuscules qui évitent de recourir aux accents.

    HTML est structuré et n'admet pas de chevauchements.

    On écrit : <CENTER><H1>Auditoires</H1> </CENTER>
    Cela serait une erreur de logique d'écrire :
    <CENTER><H1>Auditoires </CENTER></H1>
    Peut-être un navigateur pourra-t-il lire correctement, mais lerésultat est imprévisible.

    Prenons maintenant un exemple:

    L'URL d'un document se termine toujours par "htm" ou "html", indifféremment.

    SELECTIONNEZ ce passage en rouge - COPIEZ - et IMPRIMEZ

    <HTML>
    <HEAD>
    <TITLE>Ceci est le titre du document</TITLE>
    </HEAD>
    <BODY>
    <CENTER><H1>Ceci est un titre</H1></CENTER>
    <P> Bonjour, ceci n'est qu'un document d'&eacute;tude
    et
    vous vous attendiez sans doute &agrave;<I> un autre texte</I>

    ou &agrave; un <B> rapport</B> plus stuctur&eacute;.

    <P>Excusez-moi. Pas de chance. Ce document
    ne
    contient que des exemples de commandes HTML , COMME PAR EXEMPLE une liste non structur&eacute;e.:
    <UL>
    <LI> un point de la liste
    <LI> un autre point de la liste <LI>encore un point de la liste pour indiquer que l'emplacement de la marque n'a pas d'importance<BR><BR>
    <LI> le dernier point pour monter un espace plus large. Un seul BR ne produit rien puisque LI effectue un retour de ligne
    </UL>
    <P> Les listes peuvent aussi avoir une forme ordonn&eacutee (avec des chiffres ou lettres)
    <HR>
    <P>Et vous pouvez tracer des lignes horizontales pour s&eacute;parer des sections de texte.
    </BODY>
    </HTML>
    ----------------------------------------------------

    Pour voir comment cet exemple est reproduit par le navigateur, cliquez I.C.I.

    ----------------------------------------------------

    HTML est hiérarchisé

    - 1. HTML domine tout. C'est le conteneur de l'ensemble du document.
    Ceci indique que c'est un document HTML. Il se trouve au début et à la fin.

    - 2. HEAD est un "conteneur ", en-tête du document, pour des informations à son sujet comme le titre, le logiciel commercial qui a été utilisé pour la création du document et des META éléments dont nous parlerons plus tard.

    Le contenu n'apparaît pas sur le document visible à l'écran.
    - HEAD se trouve toujours après HTML
  • -  HEAD contient toujours le TITRE , c'est ce qui apparaît en haut du cadre du navigateur, comme titre du document
    - HEAD peut aussi contenir la feuille de style dont noux parlerons plusloin.

    -3. TITLE est le conteneur du titre.
    Le titre doit être court, évocateur et descriptif.
    Lorsqu'on enregistre l'URL d'un document (bookmark), c'est le texte du TITLE qui accompagne l'URL dans le signet. Il faut donc qu'il synthétise bien le contenu du document.

    - 4. Après HTML et HEAD, il y a BODY.
    C'est le conteneur qui forme le corps du document. Il contient tout le texte et se termine par </BODY> à la fin.
    Le texte est donc entre <BODY> et </BODY>

    -5. Le premier élément dans le corps, est un Heading, un titre en H1, le niveau le plus élevé (il y en a 6 dégressifs). Les headings sont toujours en gras.
    Dans l'exemplei, le titre a été centré entre deux balisesCENTER

    Vous constatez que dans le document reproduit par le navigateur, tous les blancs et les retours de ligne sont ignorés.
    Ces retours peuvent être utiles pour voir clair en créant le texte, mais ne sont pas lus. Le navigateur n'utilise et ne connaît que les balises.

    - 6. <P> signifie un début de paragraphe.

    ----On remarque encore deux autres commandes :
    <B> - B (Bold) pour mettre en lettres grasses
    <I> pour mettre en italique, qui se lit souvent mal àl'écran

    Ce sont des commandes physiques par opposition aux commandes logiques préférées par les puristes. Les commandes logiques sontSTRONG et EM pour grasses et italiques.

    On peut aussi utiliser :
    - TT = typewriter = à caractère fixe
    - U = underlined = souligné
    - CITE = pour une courte citation. .
    - STRIKE = pour un texte barré
    Ces balises ne peuvent pas être employées dans le titrequi ne peut contenir aucune balise.

    -7. Les E accent aigu et A accent grave s'écrivent comme dit plus haut.

    . Note sur les P :

    </P> est optionnel.
    La règle est que <P> s'achève lorsqu'il rencontre un autre <P> ou une autre marque.

    Les espaces ne s'additionnent pas
    <P><P><P> n'a pas de sens logique parce qu'il ne peutlogiquement pas exister de paragraphe vide.

    Si l'on veut plus d'espace il faut faire <BR><BR><BR>, ce qui est plus logique puisque <BR> signifie un retour de ligne ( line break)
    --------------------

    Voyons la deuxième partie.

    Une liste peut être sans ordre = unordered list : balise (conteneur) <UL>

    ou ordonnée = ordered list : balise <OL> dont les éléments sont numérotés par des chiffres ou des lettres

    Une liste n'est jamais vide et il faut toujours la terminer par la balise terminale </UL> ou </OL> selon le cas.

    <UL> doit toujours être suivi directement de la balise (marqueur) <LI> (list item) sans texte entre les deux.

    Une liste ne peut jamais contenir que des éléments de la liste <LI>

    Il faut écrire le texte après <LI> sans espace, sinon l'alignement de l'indentation peut être tordu.

    N.B. :
  • .<LI> réordonne toujours la liste, mêmequand il est placé autrement dans le document de base ( voir exemple)
  • Pour créer des espaces plus larges : utiliser <BR><BR>. Puisque <LI> fait une retour de ligne, le premier <BR> n'est pas pris en compte. (voir exemple).
  • <LI> est parfois utilisé seul (sans UL ou OL) , pour placer des boutons, comme ceux-ci. Alors, il n'est pas indenté. (ceci n'est pas classique)
  • Des listes peuvent être imbriquées: une liste incluse dans l'autre.

    <UL>
    <LI>ABC
    <LI> ERT
    <UL>
    <LI>texte
    <LI>texte
    </UL>
    <LI>
    </UL>

    Une liste ordonnée peut aussi contenir une liste non ordonnée et vice-versa.

    EN RESUME :

    1. Les titres seront courts et descriptifs.

    2. HTML est hiérarchisé dans la séquence :
    <HTML>
    <HEAD>
    <TITLE>
    </HEAD>
    <BODY>
    texte
    </BODY>
    </HTML>

    3. Des espaces blancs, retraits par tabulateur, lignes blanches, n'ont pas d'effet sur la mise en forme. Seul les balises HTML modifient la présentation.
    Eviter les espaces blancs entre les balises et le texte qui la suit.

    4. Les headings H1 à H6 ne peuvent se trouver qu'à l'intérieur de BODY ou BLOCKQUOTE (voir plus loin).

    5. UL ou OL ne peuvent contenir que des LI .
    Les LI ne contiennent que du texte, des images ou d'autres listes, mais pas de Headings.


    Retour au sommaire