Vous voulez mieux maîtriser les étapes du processus de fabrication de votre Site
Web? Vous voulez savoir comment est interprété et affiché tout le contenu de vos
pages? Regardez plutôt à la source! Et explorez le monde du Web dans ses
rouages en mode texte! En effet, tout ce que vous consultez dans votre butineur
est l'interprétation d'un code quasi universel: le HTML pour 'HyperText Markup
Language', comprendre son fonctionnement et sa syntaxe vous permettra sans doute
de mieux appréhender la conception de votre Site!
››» Préambule
:: D'où ça vient?
L'informatique est riche de langages pour *communiquer* avec les machines, et ce
à différents niveaux. Le HTML qui est considéré comme le langage qui est à
l'origine de l'essor du Web en mettant en place le principe de lien hypertexte,
est en fait un descendant modifié (et nettement simplifié) d'un langage
complexe: le SGML. Pour l'interprétation du code HTML, des logiciels sont
développés depuis plusieurs années, ce sont les
butineurs comme par
exemple: Netscape, Internet Explorer, Opera, Firebird, Konqueror, Safari, etc.
:: Quelle structure?
En tant que descendant du SGML, le HTML a conservé grossièrement son
architecture en arborescence représentée par des balises (qui s'ouvrent et se
ferment). Cependant la simplification a été un peu trop brutale, aussi
préfère-t-on le langage XHTML qui est dit "bien formé" car il respecte
intégralement la grammaire primitive du SGML.
en HTML |
en XHTML |
<BaliseEncadrante>"Ce qui est écrit dans cette balise est faux"</BaliseEncadrante> |
<BaliseEncadrante>"Ce qui est écrit dans cette balise est faux"</BaliseEncadrante> |
<BaliseSolitaire> |
<BaliseSolitaire /> |
<grave>lala<fort>lala</grave>la</fort> |
<grave>lala</grave> <fort><grave>lala</grave>la</fort>
|
Une balise est une sorte de 'mot' précédé et suivi d'un signe '<' et '>'
respectivement. Quand on veut arrêter le champ d'action d'une balise, on doit
la répéter en insérant entre '<' et le 'mot': le signe '/'. Pour se
conformer à la règle, les balises qui n'encadrent rien sont affublées du signe
'/' entre le 'mot' et '>'. Les balises peuvent s'imbriquer mais
jamais se croiser!
Le langage XHTML qui est donc une évolution du HTML (pas seulement à cet égard)
est toujours autant conçu pour pouvoir être écrit *à la main*, à condition de
connaître ce à quoi correspondent les balises employées!
:: Comment se construit ce squelette?
Pour créer votre premier fichier Web à la main, lancez un
éditeur texte. Le
document doit être vierge avant de commencer. On va mettre en place le squelette
de page Web. Cet aspect peut sembler rébarbatif, mais il est réellement
nécessaire pour indiquer à votre butineur qu'il est en train de lire un document
web et pas un simple fichier texte.
- Inscrivez la balise: <html> puis </html>
- Le HTML vous permet d'inclure une balise d'en-tête pour y laisser diverses
informations, c'est <head></head>
- Enfin, vous devez insérer la balise <body> (et la refermer,
évidemment), qui représente le corps de la page. C'est là que votre page va
contenir le texte, les tableaux, images ou tout autre objet...
<html>
<head>
</head>
<body>
</body>
</html>
Voilà un exemple de structure basique de page Web.
:: Qu'est-ce que ça donne?
Enregistrez votre document (en texte brut: aucun formatage) avec l'extension
.htm ou .html
• L'utilisation de l'extension .xhtml peut induire des difficultés sous
certains butineurs.
Lancez votre butineur, puis entrez l'adresse de votre fichier. Vous pouvez
recourir à la commande 'Ouvrir'. Dés lors le fichier ouvert, le chargement et
l'affichage de la page s'effectue. Vous devriez obtenir une page blanche. Un peu
décevant? En fait non! Votre butineur a interprété la structure de votre
fichier, et il n'y a autre information *utilisateur* à afficher.
[Cette procédure d'ouverture de fichier n'est pas à recommencer à
chaque fois, si vous avez modifié (et enregistré) votre fichier et que vous
retournez au butineur, cliquez plutôt sur l'icône Actualiser.]
Maintenant que tout est en place, on va détailler un ensemble de balises: en
donnant leur signification et leur emploi.
››» Texte
:: Comment afficher un peu de texte?
Comme échantillon de test, on va utiliser une célèbre phrase paradoxale:
"Je rase tous ceux qui ne se rasent pas eux-mêmes et seulement ceux-là". On peut
lui affecter un formatage en changeant certains éléments comme la police, la
taille, la couleur. On utilise la balise <font></font>.
Tester en insérant la phrase de test produira la phrase avec le formatage par
défaut de votre butineur. Pour aller plus loin, on va ajouter des attributs à la
balise ouvrante, ainsi pour changer...
- la police: tapez face="Nom de la police"
- la taille: tapez size="n", n est un entier compris entre 1 et 7
- la couleur: tapez color="#RRVVBB", avec RougeRougeVertVertBleuBleu, et le
tout en héxadécimal s'il vous plaît!
[Le héxadécimal est un système à 16 *chiffres* contrairement au décimal
qui en compte 10. Les chiffres du héxadécimal sont donc (dans l'ordre
croissant): {0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f}. Pour obtenir le code
couleur, on inscrit en lieu et place de RR,VV,BB variant de 00 à ff, où 00
correspond au minimum de la couleur et ff au maximum. Donc du coup #000000 =
noir et #ffffff = blanc. Mais pour ne rien cacher, il existe un autre moyen
moins précis mais plus pratique, tapez color="nom de la couleur en anglais",
c'est à dire black, white, red, green, blue, orange, yellow, purple, pink... et
vous obtiendrez ce que vous voulez !o)]
:: Et les autres?
Pour préciser le format des caractères (gras, italique, souligné, etc.), il
existe différentes de balises bien pratiques.
- pour souligner: <u></u> (u pour underline en anglais),
- en gras: <b></b> (b comme bold),
- en italique: <i></i>,
- en indice: <sub></sub>,
- en exposant: <sup></sup>,
- barré <s></s> (s pour stroke).
<html>
<head>
</head>
<body>
<font><b><u>
"Je rase tous ceux qui ne se rasent pas eux-mêmes et seulement ceux-là."
</u></b></font>
<fontface="Nom de la police"size="5"color="red"><i>
"Je rase tous ceux qui ne se rasent pas eux-mêmes et seulement ceux-là."
</i></font>
<!---->
</body>
</html>
On a introduit au passage un commentaire (<!-- puis -->). Tout ce qui
se trouve à l'intérieur: que vous mettiez des chiffres, des phrases, du code
ou n'importe quoi d'autre (même sur plusieurs lignes) ce ne sera pas analysé
par le butineur!
• On ne peut pas imbriquer les balises de commentaire
:: Et les caractères spéciaux?
Pour ce qui est de l'utilisation des accents et du ç, tout va bien. Pour les
symboles et caractères exotiques, il faudra passer par un code particulier qui
est tenu à jour par une organisation unique appelé: unicode. Chaque caractère
est muni d'un code (variant selon le standard d'encodage choisit) dont on va se
servir pour l'insérer dans la page Web. Par exemple, pour afficher le symbole
Copyright: © on doit écrire (accollé) '&' '#' '169' ';'. Des
ressources bien précises sont
disponibles.
Qui dit texte, dit paragraphe...
››» Paragraphes
:: Comment organiser le contenu?
Pour organiser le texte, mais pas seulement (tous les objets en fait), plusieurs
balises existent dont certaines peuvent apporter un aspect structurel au contenu
du document. Pour marquer un retour à la ligne, ou ajouter des lignes, vous
pouvez utiliser la balise <br />. Elle marque un retour chariot
simple et n'indique rien de plus. Pour faire apparaitre un semblant de
structure, on peut employer deux balises complémentaires
<div></div> et <span></span>. La première
marque le début d'un bloc paragraphe et ajoute automatiquement un retour à la
ligne, la deuxième marque seulement la présence d'un élément particulier mais ne
modifie pas l'affichage. Cela parait à ce niveau inutile, mais elles sont très
appréciées quand on les utilise conjointement les
feuilles de styles (CSS).
[On peut déjà affecter un attribut à <div> d'alignement par:
align="alignement souhaité" c'est à dire: left, center, right, justify.]
:: Et les citations?
Une balise spéciale a été créée pour l'ajout de citation, c'est
<blockquote></blockquote>. Le texte compris dans les balises
est mis en valeur par un retrait à gauche, à droite, en haut et en bas. Si vous
essayez d'imbriquer ce type de balises, le texte contenu sera décalé d'autant à
chaque fois.
:: Et les lignes de séparation?
On peut aussi apprécier la séparation de groupes de paragraphes par des lignes
horizontales. Une balise solitaire nommée <hr /> y est dédiée. Par
défaut elle occupera toute la largeur possible, on peut cependant ces
paramètres:
- d'abord sa taille/épaisseur avec size="épaisseur souhaité en pixels",
- ensuite sa largeur via width="largeur en pixels ou pourcentage",
- puis son alignement align="ce que vous voulez", c'est à dire left, right,
center,
- enfin cerise sur le gateau pour annuler l'effet de relief, avec noshade.
<html>
<head>
</head>
<body>
<fontcolor="red">
"Je rase tous ceux qui ne se rasent pas eux-mêmes et seulement ceux-là."
<br />
<!---->
</font>
<fontsize="1">
Mais alors, le barbier est-il rasé?
<br /><br /><br />
<!---->
</font>
<blockquote>
<!---->
Text décalé par rapport aux précédentes phrases.
</blockquote>
<divalign="center">
Le texte qui est affiché est centré, si si!
</div>
<hralign="center"width="33%"/>
</body>
</html>
Après le textuel, le visuel...
››» Image & autres
:: Comment afficher une image?
La méthode est unique en XHTML, elle consiste en une balise solitaire
<img /> dans laquelle on indique différentes informations:
:: Comment mieux l'intégrer au document?
Vous vous rendrez vite compte qu'une image posée là à coté du texte impressionne
peu... Vous pouvez utiliser un alignement particulier:
align="alignement particulier", c'est à dire top: middle, bottom, left, right
(mais aussi: texttop, absmiddle, baseline, absbottom).
[Petite parenthèse: de retour sur les paragraphes, <br />
peut prendre l'attribut: clear="l'alignement de l'image", c'est à dire left,
right, all; afin de supprimer l'alignement de l'image]
Mais cette technique soulève un léger problème, le texte semble un peu trop
collé. Une parade existe: hspace="espace horizontal" et vspace="espace vertical"
(en pixels). Autre souci esthétique rencontré frequemment, si vous liez cette
image, elle va se parer d'une bordure de couleur, pour la supprimer:
border="largeur de la bordure, ici 0".
<html>
<head>
</head>
<body>
<imgsrc="/lechemin/del/image.png"width="40"height="40"alt="Le texte temporaire qui apparaît lors du chargement"align="left"/>
<font>
Ceci est une petite image accompagnée d'un peu de texte...
</font>
<brclear="all"/>
<font>
Voilà une phrase solitaire cette fois-ci...
</font>
</body>
</html>
[Bien que le détail n'en sera pas fait ici, sachez que la balise
<map></map> permet de créer des zones particulières de
liens dans une image, pratique parfois (mais fastidieux *à la main*)]
:: Et les autres médias?
On dispose d'autres ressources que les images, à savoir le son et la vidéo même
si à cause des débits limités ces ressources restent accessibles indirectement.
On ne doit pas oublier non plus les Applets Java ou Python, etc. qui peuvent
apporter une valeur ajoutée également. Cela étant multiplier les ressources
apporte des problèmes notamment de compatibilité. Une balise appelée
<object></object> offre d'intéressantes possibilités. On peut
par exemple imbriquer plusieurs types d'objets pour être à peu près certain
qu'un d'eux sera compris par le butineur (ou les plug-ins) de l'internaute;
mieux, elle offre une syntaxe commune pour les différents types d'objets. On
peut entre autres définir trois attributs:
- le titre de l'objet utilisé, title="titre de l'objet"
- la source, data="chemin/del/objet.extension"
- son type (MIME, c'est à dire à quelle famille il appartient),
type="type de l'objet" à choisir parmi:
image/png, image/jpeg, image/gif, image/tiff, image/svg-xml, etc. ou
application/mpeg, application/mp3, etc.
L'essence du Web: le lien hypertexte...
››» Lien
:: Quel enjeu?
Le concept de lien hypertexte a été la révolution qui a fait que le Web a
pris son essor: en permettant un accès rapide par simple clic à une nouvelle
zone d'informations.
:: Quelle syntaxe?
Pour créer un lien, il suffit d'inclure entre les balises <a></a>
l'objet que l'on veut (texte, image, etc.). Ensuite dans la balise, via
href="protocole:chemin", vous devez préciser le protocole puis le chemin du lien
(Internet regroupe une foule de protocoles dédiés aux différents types de liens).
Par ailleurs, pour le fonctionnement des cadres, vous pouvez donner la cible du
lien via target="cible du lien" c'est à dire le nom, mais on y reviendra.
Cependant si vous souhaitez ouvrir une nouvelle fenêtre par un lien, vous pouvez
utiliser target="new".
:: Une autre facette?
Cependant, la balise <a></a> ne sert pas seulement à
rediriger vers une nouvelle page (ou objet), elle peut aussi pointer vers un
secteur particulier. Vous avez certainement déjà rencontré ce type de lien, en
cliquant dessus, l'écran se déplace à un endroit précis de la page. Pour cela il
faut définir au sein de la page, un repère via: name="nom du repère". Ensuite
dans le lien pointant vers ce repère, tapez ceci href="#nom du repère". Le
caractère '#' indique au butineur qu'il doit se déplacer jusqu'à ce secteur.
Cependant, si vous souhaitez créer un lien vers ce secteur à partir d'une autre
page, il suffit d'indiquer href="lechemin/dela/page.html#nom du secteur"
• #nom du secteur doit être placé après l'extension!
<html>
<head>
</head>
<body>
<ahref="http://www.google.com/"target="new">
Rechercher via Google!
<a>
<ahref="#secteur situé plus loin">
Pointe vers un secteur de la page
<a>
<!---->
<br /><br /><br />
<br /><br /><br />
<br /><br /><br />
<br /><br /><br />
<br /><br /><br />
<br /><br /><br />
<br /><br /><br />
<br /><br /><br />
<aname="secteur situé plus loin">
Vous voici en lieu et place du secteur d'arrivée!
<a>
</body>
</html>
[Pour accéder à une page de votre site, il est déconseillé de taper
le chemin complet (ça ne fonctionnerait qu'en local), il faut préférer les
chemins relatifs, prenons un exemple. Votre page contient un lien une autre
situé un dossier plus loin, le lien peut très bien s'écrire comme ça
<a href="dossier/page.html">. Pour revenir à la page
précédente en créant un lien, utilisez ceci '../' comme suit
<a href="../page-initiale.html">. Enfin, cette technique du parcourt des
dossiers et fichiers est universelle et s'applique partout sur le Web et dans
les autres balises.]
Vous avez justement une liste de liens... mais comment l'afficher?
››» Liste
Pour énumérer ou organiser une progression logique, utiliser les listes est bien
pratique. Il en existe de plusieurs sortes.
- D'abord ce que l'on appelle communément les puces. Cette liste commence
toujours par <ul> (pour Unordered List) pour finir par
</ul>. En fonction de l'imbrication, le dessin de la puce varie.
Sachez cependant que vous pouvez le préciser de cette manière:
type="type de la puce" à remplacer par disc, circle ou square. Les éléments
sont introduits entre <li> et </li>.
- Mais on peut aussi préférer les numérotations, dans ce cas utilisez
<ol></ol> (pour Ordered List). L'imbrication
détermine également la numérotation que l'on peut préciser par:
type="type de numérotation" c'est à dire soit A, a, I, i, l. Les éléments
sont introduits entre <li> et </li>.
- Pratique aussi, même si l'assimilation avec une liste est moins évidente,
<dl></dl> permet d'énumérer des éléments et leur
définition. Pour ce faire inscrivez le mot dans <dt> et sa
définition dans <dd>.
<html>
<head>
</head>
<body>
<ul>
<!---->
<li>Elément de la liste</li>
<ultype="square">
<!---->
<li>Elément de la liste</li>
</ul>
</ul>
<ol>
<!---->
<li>Premier élémént de la liste</li>
<li>Deuxième élément de la liste</li>
</ol>
<dl>
<!---->
<dt>Elément</dt>
<dd>définition</dd>
</dl>
</body>
</html>
Pour ne pas surcharger l'exemple de code, chaque bloc de liste contient au
plus deux éléments, ce qui dans la réalité est rarement le cas. Aussi, il faut
attacher de l'importance au retrait au niveau des balises pour laisser
explicite la structure des listes...
[Ceci n'apporte qu'une lisibilité supplémentaire, mais ne modifie
aucunement le rendu de la page web.]
Après les listes... les tableaux!
››» Tableau
:: Un tableau?
Pour celui qui découvre ce langage, les tableaux n'ont pas tout à fait la
signification *réelle*. En fait, on appelle tableau tout ce qui comporte des
cases mais pas forcemment de bords bien visibles. Ils peuvent en effet être
utilisés (outre leur usage classique) comme ossature pour l'apparence d'une page
Web, permettant des présentations nettement plus complexe que le vulgaire retour
à la ligne... Si vous ne suivez pas vraiment, vous allez comprendre.
• cette notion est donc très large!
:: Quelle syntaxe?
Un tableau commence et se finit par <table></table>. Tout le
monde sait qu'un tableau comporte une (ou plusieurs) ligne et une (ou plusieurs)
colonne. Ici, on commence toujours par les lignes <tr></tr>,
pour finir par les colonnes <td></td> (une habitude de
mathématicien, sans doute). Pour ce qui ne connaissent pas les tableurs, le
croisement ligne/colonne s'appelle case, certes, mais surtout cellule.
Avant de poursuivre voilà comment ça s'organise...
<html>
<head>
</head>
<body>
<table>
<!---->
<tr>
<!---->
<td>
Je suis une cellule
</td>
<td>
Et moi aussi!
</td>
</tr>
</table>
</body>
</html>
On va maintenant affecter des attributs aux différentes balises:
- En ce qui concerne <table>, on peut définir:
- la largeur de sa bordure, via border="x" où x égale une certaine valeur
en pixels.
- la largeur du tableau: width="x" où x est un nombre ou un pourcentage,
- l'espacement et l'ajustement des cellules: cellspacing="x"
cellpadding="y", respectivement où x et y sont des nombres (petits).
- Ca va très vite pour <tr> car seul l'alignement horizontal et
vertical sont à voir:
- align="alignement horizontal", c'est à dire left, right, center;
- valign="alignement vertical", soit top, soit middle/center, soit bottom.
- Pour <td> c'est plus fourni. Comme précédemment, vous pouvez
déterminer
- l'alignement vertical et horizontal,
- ainsi que la largeur et la hauteur (comme pour <table>).
- De plus, cette notion est parfois difficile à assimiler/visualiser, on
peut fusionner soit horizontalement, soit verticalement. Pour ce faire,
inscrivez rowspan="nombre de cellules fusionnées à l'horizontale" et/ou
colspan="nombre de cellules fusionnées à la verticale".
<html>
<head>
</head>
<body>
<tablewidth="500"border="1">
<!---->
<tralign="center">
<!---->
<tdheight="20">
Je suis une cellule dont la hauteur vaut 20px
</td>
<td>
Et, moi je suis une cellule qui essaie de chanter: lala la laaaa!
</td>
</tr>
<tralign="right">
<!---->
<tdheight="300"colspan="2">
Je suis une grande cellule qui occupe toute la place
</td>
</tr>
</table>
</body>
</html>
On peut aussi configurer l'aspect général du tableau:
- l'espacement des cellules via, cellspacing="la valeur (petite)"
- le retrait à l'intérieur des cellules, cellpadding="une autre (petite)
valeur"
:: Et les couleurs?
Il est possible d'inclure une image de fond dans un tableau, placez vous dans
<table> et insérez background="lechemin/devotre/image.extension".
Vous pouvez appliquer une couleur de fond au tableau mais aussi pour chaque
cellule indépendemment. Il suffit d'inscrire bgcolor="couleur souhaitée", c'est
à dire soit des valeurs héxadécimales ou des noms (anglais) de couleurs comme
expliqué pour le texte...
Derniers paramètres... dans l'en-tête essentiellement!
››» En-tête & autres
:: Comment fournir des informations étendues?
L'en-tête du document regroupe en fait un ensemble d'informations qui ne sont
pas directement affichées. On les trouve uniquement entre les balises
<head> et </head> C'est ce qu'on appelle généralement
les meta data ou méta données. On peut y inscrire un peu ce qu'on veut,
mais prioritairement le nom de l'auteur, la date de création, les mots clefs,
une description, etc. selon la syntaxe 'name="type de renseignement"
content="contenu du renseignement"', à l'intérieur de balises solitaires
<meta />. On peut aussi donner le nom de la page
(qui apparait dans la fenêtre du butineur), tout simplement via la balise
<title></title>.
:: Comment mieux identifier les documents?
Ici, on sort du corps de l'arborescence du fichier xhtml... Avant la balise
initiale <html>, il faut inscrire ceci:
<?xml version="1.0" encoding="ISO-8859-1"?> ainsi que
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">. Il s'agit d'une
identification à la famille de technologie XML (une simplification et
optimisation du SGML fondateur) puis d'une déclaration du type de document lu:
on peut lire qu'il s'agit du langage XHTML version 1.1. Enfin, à l'intérieur de
la balise <html>, on peut insérer cette instruction d'espace de nom
xmlns="http://www.w3.org/1999/xhtml" (non abordé ici) et une indication quant à
la langue utilisée xml:lang="fr".
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="fr">
<head>
<metaname="keywords"content="html, xhtml, xml, css"/>
<metaname="author"content="votre nom/pseudo ici"/>
<metahttp-equiv="Refresh"content="10; URL=next.html"/>
<title>
Le titre de votre page Web!
</title>
</head>
<body>
<!---->
</body>
</html>
On a ajouté ici une ligne particulière dans l'en-tête pour effectuer un
changement de page automatique (bien pratique, lors d'un changement
d'adresse). Ainsi dans 10 secondes, le butineur ira automatiquement butiner la
page appelée 'next.html'.
• Dans le titre de la page Web, aucun formatage n'est possible!
[La balise <body> peut aussi prendre des attributs...]
Attention, tremplin!
››» Conclusion
:: Bilan
Au terme de ce tutoriel, vous connaissez a peu près bien le XHTML: sa
construction, son fonctionnement, ses règles (plus strictes que le HTML). Pour
autant, comme tout langage, le XHTML est en évolution et en outre ce qui a été
exposé ici n'embrasse pas avec exhaustivité toutes ses facettes. Cependant avec
ce bagage vous pouvez déjà réaliser un bon nombre de pages de qualité!
:: Comment améliorer son code?
C'est une bonne idée et plusieurs solutions vous sont offertes. Pour un usage
du XHTML particulièrement pointu: optez pour l'achat d'un bouquin spécialisé;
vous pouvez aussi réutiliser le code existant contenu dans les pages des sites
que vous butinez! La procédure est simple: dans votre butineur, cliquez sur le
menu "Affichage" puis rechercher quelque chose comme "HTML"
ou "Voir Source". Cela fait, une nouvelle fenêtre apparait vous
montrant le code HTML de la page en cours, c'est une mine d'or pour comprendre
l'encodage de telle ou telle présentation! La boucle est bouclée, vous apprenez
par vous même... Cela étant rien n'empêche d'appliquer les deux méthodes ;^)
:: W3C
Le Web possède une organisation nommée le W3 Consortium qui s'occupe de
l'évolution de toutes technologies qui y sont liées. Plusieurs groupes de
travail publie relativement fréquemment des recommandations qui précisent
explicitement tous les rouages des langages... Aussi pour être au faîte des
dernières publications, vous pouvez obtenir une copie des
recommandations officielles
du XHTML (versions: 1.0, 1.1 et 2), ainsi que du HTML 4.01. Cependant prudence,
les dernières versions des langages ne sont prises en compte que
progressivement, aussi un code trop basé sur les dernières version risque d'être
mal interprété par les butineurs...