« Le langage HTML/Structure de base d'un document HTML » : différence entre les versions

Un livre de Wikilivres.
Contenu supprimé Contenu ajouté
On parle de HTML ici. Soyons cohérents
→‎Les balises : Selon commentaire de LgD du 15 mars 2007
Ligne 47 : Ligne 47 :
Les attributs sont toujours de la forme <code>nom_de_l'attribut="valeur"</code>.
Les attributs sont toujours de la forme <code>nom_de_l'attribut="valeur"</code>.


Il peut y avoir un nombre illimité d'attributs dans une balise. Bien sûr, comme pour les balises, il est inutile de connaître par coeur tous les attributs et toutes les valeurs.
Chaque balise peut posséder plusieurs attributs différents. Bien sûr, comme pour les balises, il est inutile de connaître par cœur tous les attributs et toutes les valeurs.


Si ce qui précède n'est pas clair, retournez lire [[Programmation HTML/Introduction|l'introduction]].
Si ce qui précède n'est pas clair, retournez lire [[Programmation HTML/Introduction|l'introduction]].

Version du 24 janvier 2009 à 15:21

Les documents HTML doivent tous avoir une structure minimale. C'est-à-dire des balises qui sont toujours présentes et au milieu desquelles vous allez ajouter votre propre contenu. Ce chapitre présente cette structure en donnant quelques explications sur les mots-clefs principaux (aussi appelés balises).

Voici un exemple de page minimale :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>

  <head>
    <title>Titre affiché dans la barre de titre du navigateur</title>
  </head>

  <body>
    <!-- C'est ici que vous mettrez votre contenu  -->
  </body>

</html>

Les balises

Comme vous le savez, le HTML utilise ce que l'on nomme des balises afin de structurer les informations et pour transformer votre code source en document correct affiché à l'écran. Connaître toutes les balises par coeur n'est heureusement pas nécessaire mais il faut en avoir bien compris le principe pour pratiquer le HTML. On a de plus tendance à utiliser un nombre de balises plus restreint qu'il n'y paraît.

Pour rappel une balise est composée du nom de l'élément entouré des symboles « < » et « > ». Par exemple <html> est une balise.

Les balises viennent en général par deux.

  • Une ouvrante dont la syntaxe est décrite juste au dessus.
  • Une fermante qui s'écrit comme l'ouvrante sauf que l'on fait précéder de mot clef par le caractère « / ».

Certaines balises sont dites vides, c'est-à-dire qu'elles ne contiennent pas d'autres éléments. Ces balises ne possèdent donc pas de balises de fermeture. Pour indiquer qu'il n'y a pas de balise de fin, en XHTML on ajoute le caractère « / » à la fin de la balise.

Lorsqu'une balise n'est pas vide, vous pouvez mettre différentes choses entre la balise d'ouverture et la balise de fermeture comme du texte ou d'autres balises.

Il est interdit de « croiser les balises » c'est-à-dire qu'il n'est pas permis de fermer une balise alors qu'une autre, ouverte après elle, n'est pas encore fermée. Il faut toujours faire attention à bien les emboîter.

Un grand nombre de balises prennent des attributs. Ils servent à paramétrer finement la sémantique d'une balise (par exemple en indiquant la cible d'un lien). Après le mot-clef, il suffit de mettre le nom de l'attribut suivi du symbole = et d'une valeur à donner à l'attribut, placée entre guillemets.

Ainsi dans la balise <a href="http://fr.wikipedia.org">Lien vers wikipedia</a> :

  • le mot-clef est « a »
  • elle contient un attribut nommé « href » qui a pour valeur « http://fr.wikipedia.org ».

Les attributs sont toujours de la forme nom_de_l'attribut="valeur".

Chaque balise peut posséder plusieurs attributs différents. Bien sûr, comme pour les balises, il est inutile de connaître par cœur tous les attributs et toutes les valeurs.

Si ce qui précède n'est pas clair, retournez lire l'introduction.

La page minimale

Voici une page minimale dont nous allons expliquer tous les éléments :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

  <head>
    <title>Titre affiché dans la barre de titre du navigateur</title>
  </head>

  <body>
    <!-- C'est ici que vous mettrez votre contenu  -->
  </body>

</html>

La définition de type de document

Vous le savez, on en a parlé en long en large et travers dans l'introduction, il existe plusieurs versions du HTML et avec ça plusieurs variantes. On a aussi dit qu'une fois la version (et le cas échéant la variante) choisie, il fallait s'y tenir. Mais pour savoir si vous respectez bien les règles d'une certaines version, il faut dire la version que vous utilisez ! C'est à ça que sert la première ligne. Elle paraît barbare mais ne vous inquiétez pas, vous n'aurez pas à l'apprendre par coeur (franchement je me demande si quelqu'un la connaît). Cette première balise donc est la déclaration de type document (appelée couramment doctype). Dans le cas présent, on devine facilement qu'il s'agit du XHTML 1.0 Strict.

Vous avez ci-dessous une liste des Doctype les plus utilisés que vous pouvez directement copier / coller.

Importance du DOCTYPE

Sans un DOCTYPE, vous ne pourrez pas faire passer votre page par un validateur.

Vous avez sûrement remarqué qu'il n'y a pas de / final: il ne faut pas en mettre même en XHTML. En effet, le DOCTYPE n'est pas une balise, en fait, mais a un statut bien particulier.

Les trois variantes du HTML 4.01


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
	
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">      

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
    "http://www.w3.org/TR/html4/frameset.dtd">


Les trois variantes du XHTML 1.0


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Le XHTML 1.1 (qui n'a pas de variantes)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Les Balises

Nous retrouvons ici notre exemple du haut de page, pour en expliquer les principales balises.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

  <head>
    <title>Titre affiché dans la barre de titre du navigateur</title>
  </head>

  <body>
    <!-- C'est ici que vous mettrez votre contenu  -->
  </body>

</html>

La balise <html>

Là, on entre dans le vif du sujet, les balises.

Un document HTML est entièrement compris dans une balise html. Même si le navigateur s'y attend, vous êtes poli et vous lui dites que vous commencez votre document HTML, puis que vous le terminez. Ainsi la balise <html> sera toujours la toute première après le doctype, et la balise </html> la toute dernière.

À l'intérieur on trouve deux parties principales : un en-tête et un corps, placé respectivement entre les balises head et body. L'en-tête est constitué de déclarations générales concernant la page HTML, destinées au navigateur, aux moteurs de recherche etc. Le corps contient le document lui-même : ce qui sera affiché par le navigateur dans la fenêtre de rendu. Cette partie ne contient aucun élément obligatoire.

La balise <head>

La balise <head> délimite l'en-tête de la page dont on vient de parler. On y trouve des informations qui ne seront pas affichées directement dans la zone de rendu du navigateur. Par exemple le titre de la page, le lien vers la feuille de style, etc... L'en-tête des documents HTML est l'objet du chapitre L'en-tête.

La balise <title>

L'en-tête contient un élément obligatoire : title qui indique le titre de la page. C'est le titre qui s'affiche ensuite en haut de la fenêtre du navigateur.

Essayez de mettre un titre pertinent et différent pour chaque page, qui permette d'identifier le site et la page en elle-même. Par exemple, "Sommaire" est un très mauvais choix. Quand votre page se retrouvera dans les favoris de quelqu'un, cette personne sera incapable de savoir de quelle page il s'agit rien qu'en regardant le nom. Préférez des choses du style "Accueil - www.ladressedemonsite.com".

En parlant de ça, accueil s'écrit accueil et non acceuil. C'est une erreur fréquente.

La balise <body>

Tout le corps de notre document est dans la partie body. Elle comprend donc le texte, les liens, la référence des images et tout ce qu'un auteur peut vouloir mettre dans un document HTML.

Les commentaires

Les commentaires sont du texte écrit dans le code HTML qui n'est pas visible dans le rendu de la page. Les commentaires jouent habituellement le rôle de notes pour expliquer ce qui a été fait dans la page, ou bien tout simplement pour indiquer des modifications à faire ultérieurement. Ils sont biens sûr facultatifs, mais ils peuvent vous être utiles !

Un commentaire commence par les caractères <!-- et se termine par les caractères -->.

Pratiquement n'importe quelle chaîne de caractères peut être placée à l'intérieur d'un commentaire : du texte, des balises, etc.

Conclusion

Dans cette partie vous avez appris vos premières vraies balises. Elles sont importantes car elles doivent toujours être présentes (en dehors des balises de commentaires, qui sont uniquement là à titre de... commentaires).

Dans le chapitre suivant, on va remplir un peu le corps !