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
<IMG ... align=middle>
Aligne l'image au milieu
<IMG ... align=top>
Aligne l'image en haut
<IMG ... align=left>
Aligne l'image à gaughe
<IMG ... align=right>
Aligne l'image à droite
<IMG ... hspace=x>
Espacement horizontal entre l'image et le texte
<IMG ... vspace=y>
Espacement vertical entre l'image et le texte
Les tableaux
Le contenu de la page peut aussi être structuré en tableau par les balises :
<TABLE>...</TABLE>
Définition d'un tableau
<TABLE width="x%"> <TABLE width="x px">
Largeur du tableau en % ou en ox
<TABLE width=x>
Largeur du tableau en pixels
<TABLE border=x>
Largeur de la bordure
<TABLE cellpadding=x>
Espace entre la bordure et le texte
<TABLE cellspacing=x>
Epaisseur du trait entre les cellules
<TR>...</TR>
Ligne du tableau
<TD>...</TD>
Cellule du tableau
<TD bgcolor="#XXXXXX">
Couleur d'une cellule de tableau
<TD width="x%">
Largeur de colonne en %
<TD width=x px>
Largeur de colonne en pixels
<TD align=center>
Texte dans la cellule centré
<TD align=left>
Texte dans la cellule aligné à gauche
<TD align=right>
Texte dans la cellule aligné à droite
<TD valign=bottom>
Alignement vers le bas du contenu d'une cellule
<TD valign=middle>
Centrage vertical du contenu d'une cellule
<TD valign=top>
Alignement vers le haut du contenu d'une cellule
<TD colspan=x>
Nombre de cellules à fusionner horizontalement
<TD rowspan=x>
Nombre de cellules à fusionner verticalement
Exemple de page html
(source : view-source:http://www.pdimension.net/guide/html/exemple_html1.html)
Apparence :
Code source :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Page d'exemple HTML</title>
<meta name="author" content="Moiiiii">
<meta http-equiv="Content-language" content="fr">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<h1>Bienvenue sur ma page d'exemple HTML !</h1>
<h6>Menu de navigation :</h6>
<ul>
<li><a href="/guide/html/" title="Sommaire de la leçon">Sommaire du
cours HTML</a></li>
<li><a href="html1" title="Vers la première page du cours">Page 1 du
cours HTML</a></li>
<li><a href="html2" title="Ceci est un lien relatif.">Page 2 du cours HTML</a></li>
<li><a href="http://www.pdimension.net/guide/html/html3" title="Ceci est un lien
absolu.">Page 3 du cours HTML</a></li>
<li><a href="html4" title="Conclusion du cours HTML">Page 4 du cours HTML</a></li>
</ul>
<p>Petite introduction à propos de cette page.
Ceci est une page d'exemple qui permet de montrer
la structure correcte d'une page écrite en HTML. Pensez à
regarder
le code de cette page pour voir comment j'ai écrit les
différentes
parties.</p>
<h2>Première partie</h2>
<p>Un paragraphe intéressant. Ce <em>mot</em> est accentué. Ce
<strong>mot</strong>
est mis en gras</p>
<p>Un autre paragraphe.</p>
<h3>Première sous-partie</h3>
<p>Un paragraphe court.</p>
<p>Un autre plus long. Bla bla bla bla bla bla bla bla.</p>
<h3>Seconde sous-partie</h3>
<p>Voici un exemple de liste à puces :</p>
<ul>
<li>Premier élément de la liste</li>
<li>Deuxième élément</li>
<li>Troisième élément</li>
</ul>
<p>Voici un exemple de liste numérotée :</p>
<ol>
<li>Premier élément de la liste</li>
<li>Deuxième élément</li>
<li>Troisième élément</li>
</ol>
<h2>Seconde partie</h2>
<p>Voici un lien vers la <a href="http://www.pdimension.net/" title="Vers la Peutch
Dimension">Peutch Dimension</a>,
sur lequel il suffit de cliquer.</p>
<p>L'image ci-dessous, propagande pour un excellent navigateur, illustre le cas
d'une image
incluse dans un lien. Ainsi, l'image est cliquable.</p>
<p><a href="http://getfirefox.com/" title="Téléchargez Firefox, le navigateur
révolutionnaire.">
<img src="http://www.mozilla.org/products/firefox/buttons/getfirefox_88x31.png"
alt="Téléchargez Firefox"></a></p>
<h2>Conclusion</h2>
<p>Vous savez créer une page Web !</p>
</body>
</html>