Le html - Infographie

Le html...
Définition
Langage de programmation permettant de construire des sites pouvant être consultés sur Internet.
Provenant de Hyper Text Markup Language, le HTML désigne la possibilité de créer des liens entre des
mots pour avoir un accès à l'information selon une organisation thématique.
Issu du "sgml" utilisé pour la standardisation de la présentation des textes imprimés, il utilise des balises
délimitées pars les signes "<" et ">". Le contenu de ces balises est appelé "attribut" et définit les options
de présentation des éléments de la mise en page, le lien d'affichage vers d'autres contenus (illustrations,
pages) ou définit certains comportements.
Le langage est lié à la présentation de documents (les pages) et d'ensembles de documents (sites) sur le
Web mais peut parfaitement être utilisé en dehors de ce contexte. Les "navigateurs" sont les programmes
permettant de visualiser le contenu des pages html. Bien que l'organisation W3C essaye de définir des
normes, les navigateurs, tant par leur origine que par leur version, présentent des différences de
présentation qui rendent les résultats affichés parfois différents.
Exemples de navigateurs : Internet Explorer de la version 1 à 9 (en développement), Firefox, Safari,
Chrome, Opéra...
Les navigateurs sont des "clients" d'affichage qui se connectent à des "serveurs" pour charger les
données des pages qu'ils mettent en place et présentent. Chaque page reçue est nommée et son
extension (htm, html, jpg, jpeg, gif, txt...) permet au navigateur de choisir la façon de la présenter, ou de
faire appel au programme susceptible d’ouvrir la partie du document pointée. Les formats peuvent se
révéler incompatibles avec le navigateur ou l'ordinateur. Ainsi, un fichier .wmv ne serait pas entendu sur
un Mac, et une image CMJN en .jpg ne serait pas affichée par les navigateurs qui ne visualisent que les
images RVB ou en niveaux de gris.
Le protocole utilisé pour la transmission de ces données est appelé "http".
Les balises.
Quasi toutes les balises vont par paires, soit une balise ouvrante, par exemple <i> et sa contrepartie : la
balise de fermeture </i>.
Ainsi une phrase :
Que mange-t'on<i> ce</i>soir ?
s'affichera
Que mange-t'on ce soir ?
Une balise inconnue est ignorée, mais mal entourée par ses < et > est visualisée comme du texte.

Quelques exemples de balises modifiant le texte :
<i> début d'italique
</i> fin d'italique
<b> début de gras
</b> fin de gras
<u> début de souligné
</u> fin de souligné ...
Les autres balises de présentation sont, pour les plus importantes :
<FONT face="Times">... </FONT>
Police choisie.
Attention, les seules fontes affichables jusqu'il y a peu étaient celles contenues dans l'ordinateur où la
page est affichée. Donc <FONT face="Garamond"> ne s'affichera correctement que si cette fonte est
présente. La balise <FONT face="Arial,Helvetica"> affichera le texte qui la suit en Arial (fonte présente
sous Windows) ou en Helvetica (fonte présente sous Mac).
<FONT color="#XXXXXX">...</FONT>
Texte en couleur où XXXXXX est une valeur une valeur hexadécimale
<FONT size=X>...</FONT> ou
<FONT size=Xpx>...</FONT>
Taille des caractères où X est une valeur de 1 à 7, ou encore en points.
Les balises servent aussi à mettre en place le texte. Ainsi la balise
<p> signale un nouveau paragraphe (donc un saut à la ligne)
et
</p> une fin de paragraphe.
<br>, une des seules balises qui n'a pas sont équivalent en fermeture signale un simple saut à la ligne.
Les sauts et double-espaces présents dans les textes html sont donc ignorés.
Un texte composé comme suit :
<p>Ainsi, tu
n'as pas relu
le
texte?</p><p>Non,<br> je ne l'ai pas relu !
</p>
se présentera
Ainsi, tu n'a pas relu le texte ?
Non,
je ne l'ai pas relu

Liste des balises modifiant la présentation du texte :
<!--...-->
Commentaire ignoré par le navigateur
<BR>
A la ligne
<BLOCKQUOTE>...</BLOCKQUOTE>
Citation (introduit un retrait du texte)
<CENTER>...</CENTER>
Centre tout élément compris dans le tag
<DIV>… </DIV>
Définit un bloc de texte ou s’applique des attributs
<DIV align=center> ...</DIV>
Centre l'élément encadré par le tag
<DIV align=left> ...</DIV>
Aligne l'élément à gauche
<DIV align=right> ...</DIV>
Aligne l'élément à droite
<Hx>...</Hx>
Titre où x a une valeur de 1 à 7
<Hx align=center>...</Hx>
Titre centré
<Hx align=left>...</Hx>
Titre aligné à gauche
<Hx align=right>...</Hx>
Titre aligné à droite
<P>...</P>
Nouveau paragraphe
<P align=center>...</P>
Paragraphe centré
<P align=left>...</P>
Paragraphe aligné à gauche
<P align=right>...</P>
Paragraphe aligné à droite

Fichier Html
La page "html" est aussi structurée par les balises :
<HTML>...</HTML>
Début et fin de fichier Html
<HEAD>...</HEAD>
Zone d'en-tête d'un fichier Html
<TITLE>...</TITLE>
Titre affiché par le browser (élément de HEAD)
<BODY>...</BODY>
Début et fin du corps du fichier Html
<BODY bgcolor="#XXXXXX">
Couleur d'arrière-plan (en hexadécimal)
<BODY background="xyz.gif">
Listes
<UL>
<LI>
</UL>
Liste non numérotée (dite à puces)
Elément de liste
<OL>
<LI>
</OL>
Liste numérotée
Elément de liste
<DL>
<DT>...</DT>
<DD>...</DD>
</DL>
Liste de glossaire
Terme de glossaire (sans retrait)
Explication du terme (avec retrait)
Ligne de séparation
<HR>
Trait horizontal (centré par défaut)
<HR width="x%">
Largeur du trait en %
<HR width=x>

Largeur du trait en pixels
<HR size=x>
Hauteur du trait en pixels
<HR align=center>
Trait centré (défaut)
<HR align=left>
Trait aligné à gauche
<HR align=right>
Trait aligné à droite
Les liens
Enfin, le contenu de la page peut contenir des liens vers d'autres pages ou vers des illustrations. On les
appellent des "hyperliens".
<A href="http://...">...</A>
Lien vers une page Web
<A href="mailto:...">...</A>
Lien vers une adresse Email
<A href="fichier.htm">...</A>
Lien vers la page locale fichier.htm située dans le même dossier
<A name="xyz">...</A>
Définition d'une ancre
<A href="xyz">...</A>
Lien vers une ancre
Images
<IMG src="xyz.gif">
<IMG src="xyz.pjg>
Insertion d'une image au format Gif ou Jpg
<IMG ... width=x height=y>
Mise à l'échelle de l'image en pixels
<IMG ... border=x>
Définition de la bordure d'une image avec lien
<IMG ... alt="votre texte">
Texte alternatif lorsque l'image n'est pas affichée
<IMG ... align=bottom>
Aligne l'image en bas