04-07-2008 : 1h57 min - non connecté
Dernière modification le 12 août 2007

 

Le code source

 

La meilleure façon de se faire une idée de ce qu'est le code source, c'est d'aller voir ! Regardez le code source de cette page en cliquant sur "Affichage" puis "source" (l'intitulé exact du menu dépend de votre navigateur).

Ca y est ? Je sens dans votre regard que vous êtes plutôt dégouté :-)

A priori cela n'a pas l'air très motivant. Mais dans certains cas on aura besoin de modifier directement le code source :

  • pour y inclure du code php
  • pour corriger des bugs (lorsqu'un bloc est trop petit pour le voir dans l'éditeur WYSIWYG par exemple)
  • pour ajouter des éléments qui n'existe pas dans l'éditeur utilisé.

Les balises

Le langage HTML est composé de balises. Une balise est un mot clé entouré des symboles < et >. On écrit un mot clé pour ouvrir la balise et le même mot clé avec un "/" en plus pour la fermer.

Par exemple lorsque j'écris <strong>coucou</strong>, cela signifie que "coucou" doit être mis en valeur. Cela se traduit par l'écriture en gras du texte dans la plupart des navigateurs. <strong> est la balise ouvrante et </strong> la balise fermante.

Le squelette d'une page

Toute page commence par la balise <html> et se termine par la balise </html>.

Ensuite on trouve <head> et </head>. Entre ces deux balises on écrira les informations d'entête. Elles sont invisibles pour le lecteur mais apportent des informations pour le logiciel navigateur ou pour les moteurs de recherche. Cela peut être une description de la page, des mots clés, le nom de l'auteur, le type de police, le nom de l'éditeur utilisé pour créer la page, ...

Vient ensuite la balise la plus importante qui va délimiter le code qui génèrera la partie visible de la page : <body> et </body>.

Ce qui donne donc pour la page :

<html>
<head>
contenu de l'entête
</head>
<body>
Contenu du corps de la page
</body>
</html>

Quelques balises

Voici quelques balises qui vous permettront de repérer les éléments les plus importants d'une page :

<table></table> Tableau. Tout ce qui se trouve entre ces balises fait partie d'un tableau.
<tr></tr> ligne d'un tableau
<td></td> à l'intérieur d'une ligne, délimite chaque cellule
<form></form> formulaire
<li></li> liste à puce
<a></a> lien hypertexte
<p></p> Paragraphe
<center></center> centrer du texte (balise abandonnée en XHTML Strict)
<br /> passer à la ligne. Pas de balise fermante, donc on rajoute un / en XHTML
<title></title> permet de spécifier le titre de la page.

Les attributs

Toutes ces balises sont accompagnées d'attributs. En effet, tous les tableaux n'ont pas la même apparence. Pour les différencier on ajoute des mots clés que l'on appelle attributs.

Exemples : un tableau avec une bordure de 1 pixel s'écrira :

<table border="1"> Contenu du tableau </table>

Un lien hypertexte s'écrira :

<a href="toto.htm">La page de toto</a>

Rappel : en XHTML on n'utilise pas les attributs de mise en page. Dans l'exemple ci-dessus on n'écrirait pas "border=1", mais on mettrait cette information dans une feuille de style.

Exercice :

Affichez le code source de cette page et essayez de repérer quelques balises.

Vous pouvez voir un code source (une ancienne version de cette page) commenté tout en bas de cette page en cliquant ici.

Insérer un bloc

Voyons comment créer un bloc avec le code source. On peut l'écrire entièrement à la main ou alors utiliser une feuille de style. Voyons comment faire à la main. Nous verrons comment faire plus simple et plus efficacement avec une feuille de style dans un autre chapitre. Il est donc inutile de passer trop de temps sur ce paragraphe, prenez le comme une information pour mieux comprendre les feuilles de styles dans le prochain chapitre.

La balise qui permet d'insérer le bloc est <div>. L'attribut Id permet de spécifier un nom. Donc pour insérer un bloc on écrit :

<div id="bloc1"> contenu du bloc </div>

Tout ce qui doit se trouver dans le bloc (tableau, texte, liste à puces, ...) doit se trouver entre les balises <div> et </div>.

Cela n'a pas vraiment d'intérêt de mettre un bloc juste pour cela. Il faut lui ajouter des attributs. On note les attributs après le mot-clé "style".

<div id="bloc2" style="position:absolute; width:200px; height:115px; background-color: #996600; border: 1px solid #000000; left:0;top:190">contenu du bloc</div>

Explications :

position:absolute indique que le bloc est placé par rapport au coin supérieur gauche de la page. On aurait pu mettre "relative" à la place de "absolute", dans ce cas la position aurait été donné par rapport à l'endroit de la page où est inséré la balise <div>. Si on ne spécifie pas la position avec "top" et "left" le bloc est placé à l'endroit où se trouve la balise <div>.

width:200px et height:115px spécifie la largeur et la hauteur du bloc.

background-color: #996600 spécifie la couleur de l'arrière-plan du bloc.

border: 1px solid #000000 indique une bordure de largeur 1, en trait plein et de couleur noire (#000000).

left:0;top:190 donne la position du bloc dans son conteneur (un autre bloc, la page, ...). 0 pixel à partir de la gauche et 190 depuis le haut.

Il existe bien sur beaucoup d'autres paramètres pour les blocs. Nous verrons comment affiner cela et comment créer des blocs de façon plus simple dans le chapitre sur les feuilles de style.

L'affichage "Balises HTML" de Nvu

En bas du composeur Mozilla / Nvu vous pouvez voir 4 onglets qui permettent de voir différents affichages de la page. Vous avez déjà utilisé l'affichage "normal" et l'affichage "Source". Regardez l'affichage "Balises HTML".

C'est un intermédiaire entre l'affichage normal et le code source. Les noms des balises sont affichés de manière graphique mais sans les différents attributs. On peut cliquer sur la balise pour obtenir les propriétés et pour en rajouter.

 

 

 

Cours suivant : utilisation des feuilles de styles