Vous vous apprêtez à lire un tutoriel rédigé par un membre de ce site. Malgré tout le soin que ce membre a pu apporter au tutoriel, nous ne pouvons pas garantir que les informations contenues sur cette page sont exactes à 100%. Merci de garder cela en tête lorsque vous lirez cette page ;o)
Avant toute chose, bienvenue dans ce chapitre qui sera assez théorique, mais qui a son importance pour comprendre ce que l'on va faire.
Ça veut dire qu'on ne va pas coder ?
Non, en effet vous pouvez ranger vos Notepad++ et autres éditeurs : vous n'en aurez pas besoin.
Avant de commencer à voir comment fonctionnne le DHTML, il va falloir se pencher un peu sur la structure d'un document XHTML pour bien comprendre les mécanismes mis en jeu lors d'une dynamisation de votre page.
Comme vous avez dû l'apprendre dans les cours sur ce site,
XHTML signifie
eXtensible HyperText Markup Language. Vous n'aurez pas besoin de retenir ce nom, mais sachez juste qu'il a été créé à partir d'un autre langage, le
XML, pour
eXtensible Markup Language.
Tu ne nous a pas dit qu'on allait voir le XML !!
Et il y a bien une raison. C'est que nous n'en aurons pas besoin. C'était juste pour votre culture. Le XHTML a donc été créé à partir d'un langage très strict au niveau de la syntaxe. Il en a donc résulté un langage très strict pour l'affichage de contenu web. Les quelques règles à connaître sur le XHTML sont simples :
- Balises : tout d'abord, quand on utilise ce langage, on utilise des balises de cette forme : <balise>. Chaque balise a un double, qui est une balise fermante, écrite sous cette forme : </balise>.
- Texte : entre deux balises peut se trouver du texte. Mais pas forcément. Ce qui signifie qu'il peut exister des balises sous la forme : <balise></balise>. Dans ce cas, la balise s'écrit plus simplement <balise />.
- Attribut : toute balise peut avoir un ou plusieurs attributs, ou encore aucun. La forme d'un attribut est la suivante : <balise attribut="valeur">Blabla</balise>. A chaque attribut est associée une valeur, toujours entourée de "".
Voilà : vous connaissez maintenant (ou vous avez revu) les règles. Celle qui nous intéresse est la première, qui dit que toute balise ouvrante a une balise fermante, sous forme contractée ou non. Cela signifie que dans un document XHTML, toute balise ouverte est fermée. On peut donc schématiser une page XHTML par un arbre, comme celui-ci :
On voit ici que dans chaque balise, on peut ouvrir d'autres balises (tant que vous n'ouvrez pas une balise de type
block dans une balise
inline). Elles seront bien sûr toutes refermées avant de refermer ce qu'on appelle la balise-
mère (ou
-parente, comme on le verra plus tard).
Nous avons donc au final un beau document XHTML bien structuré de manière très logique.
Mais en quoi ça concerne le DHTML alors, ça ?
Eh bien tout simplement parce que lorsque l'on va manipuler ces pages avec du javascript, il va falloir se balader dans notre page. Et comprendre comment la page est ordonnée devient alors très important.
Ce qui nous amène à notre deuxième sous-partie :
Notion de noeud.
Nous allons reprendre le schéma précédent.
Je vais par la suite utiliser pas mal la notion de parent, enfant. Un arbre se lit du haut vers le bas. Dans notre exemple, html est le parent de head et body. Et h1 est un enfant de body.
En langage Javascript, chaque séparation d'une branche en plusieurs s'appelle un
node (noeud en français). Nous avons alors le noeud
html, le noeud
head, etc. Il existe deux grands types de
node.
- élément : tout d'abord, les noeuds que l'on va appeler éléments, qui sont les balises du xhtml que vous connaissez.
- texte : ces noeuds un peu spéciaux sont en fait du texte brut qui se trouve entre les balises.
Nous allons donc revoir notre schéma en le compliquant un tout petit peu. Retenez bien qu'un
node élément peut avoir un autre
node élément, ou un
node texte en enfant ; alors qu'un
node texte ne peut pas avoir de
node enfants. Voilà donc ce que peut devenir notre schéma :
Je crois que ce schéma mérite quelques petits mots pour bien vous faire comprendre le système. En fait, le mieux c'est que je vous écrive la page associée. Voilà ce que serait ma page XHTML mot pour mot si c'était son arbre.
Code : HTML 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Nom de la page</title>
</head>
<body>
<h1>Titre</h1>
<p><em>Gras</em>Paragraphe<a href="toto.html">Lien</a></p>
</body>
</html>
|
J'espère que vous avez bien compris ce système de
node, parce que comme je l'ai dit précédemment, c'est la base pour apprendre à se repérer dans un document XHTML.
Vous savez maintenant comment se construit une page XHTML, et vous devez avoir une bonne idée du mécanisme parent / enfant.
En tout cas, j'espère que c'est le cas.
Nous allons ensuite voir comment notre page va pouvoir être dynamique, et comment nous allons pouvoir nous promener dans un document XHTML à l'aide de Javascript.
Tutoriels
Communauté
Mon compte
Recherche
Livre d'or
Publicité
96 Zéros connectés |
8 requêtes |
0.02s (0.0097s)
