Création du contenu du site web
C'est l'abréviation de eXtensible HyperText Markup Language.
Ce langage XHTML, c'est celui avec lequel vous taperez le contenu de votre site web. Il contient des informations logiques : vous direz par exemple "Ceci est mon titre, ceci est mon menu, là c'est le texte principal de la page, là il y a une image etc etc...".
Un site web se développe à l'aide d'un simple éditeur de texte : notepad, emacs, vi, ...
Il existe un grand nombre de navigateurs internet, tous ne donnent pas le meêm rendu. Citons les principaux:
-
Internet Explorer
-
Mozilla Firefox
-
Opera
-
Google Chrome
-
Netscape
-
Konqueror (pour Linux)
-
Lynx (pour Linux)
-
Apple Safari (pour Mac et Windows)
-
etc...
XHTML : petit tour d'horizon des principaux éléments
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Mon premier site XHTML</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
</body>
</html>
Recopiez ce code dans votre éditeur, et enregistrez la page avec l'extension .html (ou .htm ça marche aussi).
Dans le navigateur de fichier, double-cliquez sur votre fichier .html pour l'ouvrir dans votre navigateur...
La page est vide, mais il y a un titre dans votre navigateur.
Nous allons maitenant ajouter du contenu à la page : titres, paragraphe et mise en valeurs de certains mots
Les paragraphes : balise <p>...</p> : à ce sujet, regardez sur le web ce qu'il se dit du Lorem Ipsum !
Sauter une ligne : cela ne sert à rien dans le code source (non interprété) : aller à la ligne revient à créer un nouveau paragraphe !
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Mon premier site XHTML</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<p> Mon premier paragraphe : à ce sujet, regardez sur le web ce qu'il se dit du Lorem Ipsum ! </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis sem eget justo sagittis commodo. Cras commodo malesuada felis et lobortis. Praesent eleifend arcu a magna sagittis accumsan. Aenean id lacus nisi. Pellentesque non ultricies purus. Sed luctus nunc non neque ullamcorper aliquam. Fusce posuere tempus adipiscing. Proin a neque ut nisi tempor volutpat. Nulla eu purus vel mauris commodo laoreet. Aliquam pulvinar pellentesque erat ac viverra. Integer sit amet velit at nibh porta sagittis eu quis dolor. Donec velit massa, fermentum at mollis nec, pharetra vitae lacus. Nunc lacus nisi, facilisis quis ultricies eu, blandit quis augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nisi turpis, hendrerit eget aliquam non, pretium vitae turpis. Curabitur rutrum mollis quam, ac porttitor erat tempus sit amet.</p>
</body>
</html>
En XHTML on a 6 niveaux de titres différents.
<h1> </h1> : En général, on s'en sert pour afficher le titre de la page en haut.
<h2> </h2> : "titre important".
<h3> </h3> : titre un peu moins important
<h4> </h4> : titre encore moins important.
<h5> </h5> : titre pas important.
<h6> </h6> : titre vraiment pas important du tout.
Attention : ne confondez pas avec la balise <title> ! La balise <title> affiche le titre de la page dans la barre de titre du navigateur.
Essayez d'insérer des titres de différents niveaux dans votre page.
Mettre en valeur le texte : Si, à l'intérieur de vos paragraphes, il y a plusieurs mots que vous aimeriez mettre en valeur, XHTML met à votre disposition 2 balises .
Pour mettre "un peu" en valeur votre texte, vous devez utiliser la balise <em> </em>
Pour mettre un texte bien en valeur, on utilise la balise <strong> </strong>.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Mon premier site XHTML</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<h1> Mon Site!</h1>
<h2> Première partie de mon contenu</h2>
<p> Mon premier paragraphe : à ce sujet, regardez sur le web ce qu'il se dit du Lorem Ipsum ! </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis sem eget justo sagittis commodo. Cras commodo malesuada felis et lobortis. Praesent eleifend arcu a magna sagittis accumsan. Aenean id lacus nisi. Pellentesque non ultricies purus. Sed luctus nunc non neque ullamcorper aliquam. Fusce posuere tempus adipiscing. Proin a neque ut nisi tempor volutpat. Nulla eu purus vel mauris commodo laoreet. Aliquam pulvinar pellentesque erat ac viverra. Integer sit amet velit at nibh porta sagittis eu quis dolor. Donec velit massa, fermentum at mollis nec, pharetra vitae lacus. Nunc lacus nisi, facilisis quis ultricies eu, blandit quis augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nisi turpis, hendrerit eget aliquam non, pretium vitae turpis. Curabitur rutrum mollis quam, ac porttitor erat tempus sit amet.</p>
<h2> Seconde partie de mon contenu</h2>
<p> voilà des choses <strong>à dire</strong> </p>
<h3> Sous partie </h3>
<p> et encore <em>un peu plus de détails</em> sur le sujet. </p>
</body>
</html>
Les citations
On peut faire 2 types de citations :
-
Des citations courtes, dans un paragraphe : on encadre la citation par la balise <q>
-
Des citations longues, hors d'un paragraphe : si vous avez besoin d'effectuer une citation assez longue, vous devrez utiliser la balise <blockquote>. Vous devez mettre des balises de paragraphe <p> à l'intérieur du blockquote.
Les acronymes
<p>Le terme <acronym title="Local Area Network">LAN</acronym> désigne un réseau local qui relie plusieurs ordinateurs dans une zone limitée.</p>
<h2> Les citations </h2>
<p>Vous souvenez-vous de la phrase célèbre
qu'a prononcée Neil Armstrong en posant le premier pied sur la Lune ?
<q>C'est un petit pas pour l'Homme, un grand pas pour l'Humanité</q>.
C'était un certain 20 Juillet 1969...</p>
<p>Fable de <em>La Fontaine</em> :</p>
<blockquote>
<p>
Maître Corbeau, sur un arbre perché,<br />
Tenait en son bec un fromage.<br />
Maître Renard, par l'odeur alléché,<br />
Lui tint à peu près ce langage :<br />
"Hé ! bonjour, Monsieur du Corbeau.<br />
Que vous êtes joli ! que vous me semblez beau !<br />
Sans mentir, si votre ramage<br />
Se rapporte à votre plumage,<br />
Vous êtes le Phénix des hôtes de ces bois."<br />
A ces mots le Corbeau ne se sent pas de joie ;<br />
Et pour montrer sa belle voix,<br />
Il ouvre un large bec, laisse tomber sa proie.<br />
Le Renard s'en saisit, et dit : "Mon bon Monsieur,<br />
Apprenez que tout flatteur<br />
Vit aux dépens de celui qui l'écoute :<br />
Cette leçon vaut bien un fromage, sans doute. "<br />
Le Corbeau, honteux et confus,<br />
Jura, mais un peu tard, qu'on ne l'y prendrait plus.
</p>
</blockquote>
Remarque : les listings ne contiennent maintenant plus que les choses à ajouter à la page et non la page complète !
Le principe de la navigation est au coeur des site web. Voici les différents types de liens.
Relatif ou absolu ?
On distingue 2 types de liens :
-
Les liens internes à son site : normalement, votre site comportera plusieurs pages XHTML. Si vous voulez faire un lien d'une page à une autre, vous ferez le plus souvent ce qu'on appelle des liens relatifs. Un lien relatif est assez court, par exemple "fichiers/cible.html".
-
Les liens vers d'autres sites : ce sont par exemple des liens vers "http://polytech.univ-bpclermont.fr", ou vers un fichier précis. Ces liens sont appelés liens absolus et, contrairement aux liens relatifs, ils commencent souvent par "http://".
<p>mon lien: <a href="http://cours.loosli.fr">Quelques cours</a><br />
N'hésitez pas à aller le visiter, il vaut <em>vraiment</em> le coup d'oeil ;)</p>
Créez 2 pages : source.html et cible.html.
source.html contient un lien vers cible.html, et les 2 pages se trouvent dans le même dossier.
<h1>source.html</h1>
<p>Tu te trouves sur source.html<br />
Souhaites-tu visiter <a href="cible.html" title="aller vers la cible">le fichier cible.html</a> ?</p>
<h1>cible.html</h1>
<p>Bravo ! Tu viens d'atterrir sur cible.html !</p>
Et si je veux que mon lien s'ouvre dans une nouvelle fenêtre ?
Ce n'est pas possible.
Beaucoup de sites le font, c'est vrai, mais en XHTML il n'est plus possible d'ouvrir les liens dans une nouvelle fenêtre.
Enfin, chose importante à savoir pour que vous compreniez un peu mieux : les personnes non-voyantes qui surfent sur le web sont perturbées par l'ouverture d'une nouvelle fenêtre de leur navigateur. Quand une nouvelle fenêtre s'ouvre, il n'est plus possible de faire "Précédente", et cela perturbe beaucoup les personnes handicapées.
Toutes les images diffusées sur Internet ont un point commun : elles sont compressées.
Voici les formats d'images que l'on utilise sur le web :
JPEG : le format JPEG est très répandu. Il est particulièrement adapté pour les photos
PNG : le format PNG est le plus récent de tous. Ce format est adapté à la plupart des graphiques. L'avantage du PNG, c'est qu'il peut être rendu transparent.
GIF : c'est un format assez vieux, qui a été néanmoins très utilisé (et qui reste très utilisé par habitude). Aujourd'hui, le PNG est bien meilleur que le GIF : les images sont plus légères et la transparence est meilleure.
Insérer une image
Pour insérer une image, on doit utiliser la balise <img />.
Elle peut prendre plusieurs attributs, et 2 d'entre eux sont indispensables :
-
src : il permet d'indiquer où se trouve l'image que l'on veut insérer.
-
alt : cela signifie "texte alternatif". On doit toujours indiquer un texte alternatif à l'image, c'est-à-dire un court texte qui décrit ce que contient l'image.
<p>
Vous souhaitez vous rendre vers un endroit magique ?
Rien de plus simple, cliquez sur l'image ci-dessous :<br />
<a href="http://cours.loosli.fr"><img src="images/hawai.jpg"
alt="Photo de Hawaii" title="Clique pour voyager !" /></a>
</p>
Il y a deux types de listes : numérotées ou non. On déclare une liste numérotée à l'aide de la balise <ol> et l'autre avec la balise <ul>.
Les item de chaque liste sont déclarés avec la balise <li>
<p> Voici une liste </p>
<ul>
<li> premier </li>
<li> second </li>
</ul>
<p> Voici une liste numérotée </p>
<ol>
<li> premier </li>
<li> second </li>
</ol>
Les tableaux fonctionnent de manière similaire. Ils sont déclarés par une balise <table>. Ensuite, chaque ligne est annoncée par une balise <tr>, à l'intérieur de laquelle les balises <td> permettent de changer de colonne. Ainsi le tableau est rempli ligne par ligne, de gauche à droite.
<table>
<tr>
<td> 1 </td><td> 2 </td>
</tr>
<tr>
<td> voilà </td><td> voici </td>
</tr>
</table>
Les tableaux peuvent s'impbriquer pour obtenir des structures plus complexes
<p> Et maintenant, le super tableau imbriqué </p>
<table>
<tr>
<td> 1 </td><td> 2 </td> <td> 3 </td> <td> 4 </td>
</tr>
<tr>
<td> voilà </td><td> voici </td> <td> par ici </td> <td> par là </td>
</tr>
<tr>
<td>
<table border=1>
<tr>
<td> miam </td> <td> miam </td>
</tr>
<tr>
<td> tut </td> <td> tut </td>
</tr>
</table>
</td>
<td> voici encore </td> <td> pas par ici </td> <td> ni par là </td>
</tr>
</table>
De manière tout à fait exceptionnelle, nous avons utilisé ici un élément de mise en forme, qui devra figurer à terme dans le CSS : on fait apparaître les bordure du tableau à l'aide de l'attribut <table border=1>. Mais cela ne sert qu'à bien voir la structure du tableau.
Si les tableaux ont beaucoup été utilisés pour faire le la mise en page des site web, ceci est complètement obselète : on utilise le CSS !
Et voilà pour le contenu. Rien de plus simple ! Il suffit de savoir ce que l'on veut dire. Tout le reste n'est que mise en forme (bon, on reviendra quand même au XHTML pour organiser le contenu de manière un peu plus fine pour en faire un site un peu plus complet !)
Voici le résultat de cette partie (enfin un résultat possible !)
