Apprendre l'xHtml
Dans ce tutorial, vous allez apprendre à créer vos propres pages web en xhtml, à la main, avec des règles de mises en forme basiques.
L'html est un langage balisé. Cela comprend quelques généralités pas forcément évidentes. Une balise doit être ouverte :
<balise> Puis fermée :
</balise> Elle peut être ouverte puis fermés en une fois, - c'est une balise qui ne contient pas - :
<balise /> Les options propres à la balise sont mises avant le > :
<balise option="paramètre"></balise> ou le /> :
<balise option="paramètre" /> La première étape est de dire au navigateur quel est le type de la page web qu'il doit interpreter
On met donc ceci en début de page :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Cela dit au navigateur que la norme de la page est XHTML 1.0 Strict et donne une url avec des informations.
On ouvre ensuite la balise <html> qui contient quelques spécifications
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> Bien entendu, "fr" est mis pour dire que la page html est en français
L'en tête <head> sert à mettre tout ce qui n'est pas du contenu, la mise en page, le titre de la page et éventuellement les métas données y sont présentes.
On ouvre l'en tête :
<head> On spécifie le titre le la page :
<title>Titre de la page</title> En option : On peut mettre des données de mise en forme (css), des métas données (pour le référencement) ...
Puis on ferme l'en tête :
</head> C'est ici que le contenu de la page va ! (enfin)
On ouvre le corps :
<body> C'est le point essentiel à connaitre. Grâce à ces balises on va pouvoir ajouter du contenu dans le corps
Pour faire un paragraphe on utilise la balise <p>, tout contenu texte doit être dans un paragraphe, sauf c'est c'est un titre
<p>Contenu du paragraphe, texte, blabla, ect ...</p> A la fin d'un paragraphe il est impératif de fermer avec </p>, sinon des erreurs apparaissent. On ne peut pas mettre un paragraphe dans un paragraphe.
Exemple de mauvais code :
<p>Contenu du paragraphe, texte, blabla, ect ... <p>Contenu de l'autre paragraphe, texte, blabla, ect ...</p> </p> Bon code :
<p>Contenu du paragraphe, texte, blabla, ect ... </p> <p>Contenu de l'autre paragraphe, texte, blabla, ect ...</p> Pour sauter une ligne dans un paragraphe, on utilise <br />, c'est une balise qui est fermée en elle même.
<p>Contenu du paragraphe, texte, blabla, ect ...<br /> Texte qui est dans la ligne en dessous</p> Donnera :
Contenu du paragraphe, texte, blabla, ect ...
Texte qui est dans la ligne en dessous
Ces balises permettent de mettre de la dynamique dans vos texte, d'attirer l'attention sur un point
Gras <strong> :
<p>Texte normal <strong>texte en gras</strong>, texte normal</p> Donne :
Texte normal texte en gras, texte normal
Italique <em> :
<p>Texte normal <em>texte en italique</em>, texte normal</p> Donne :
Texte normal texte en italique, texte normal
Barré <del> :
<p>Texte normal <del>texte barré</del>, texte normal</p> Donne :
Texte normal , texte normal
On peut mettre ces balises mixées en elles :
<p>Contenu <strong>du <del>paragraphe, <em>texte</del> </strong>, blabla</em>, ect ... </p> Donne :
Contenu du , blabla, ect ...
On fait, en général dans ses documents des parties, des sous-parties, des sous-sous-parties ect ...
Les titres sont dans des balises <hX> où X est un nombre qui va de 1 à 6 selon l'importance du titre.
<h1>Titre en général du site</h1> <h2>Titre de la page</h2> <h3>Titre de partie</h3> <h4>Titre de sous-partie</h4> <h5>Titre de sous-sous-partie</h5> <h6>Titre de sous-sous-partie</h6> Donne :
Titre de la page
Les liens hypertextes sont l'essence même du langage html, grâce à eux, on peut faire un lien vers une autre page, qui est sur son propre site ou un autre site.
La balise en elle même :
On met le texte du lien entre <a> et </a> et l'url du lien dans le premier <a>, avec un href="adresse_du_lien" placé après le <a.
Petit cours d'arborescence :
Pour faire un lien qui mêne à une page de votre site il faut savoir où elle est placée :
/ (slash) indique la racine du site.
C'est à dire qui si votre site est http://pouet-pouet-tagada.com/, mettre un lien vers / sur une page située n'importe où dans le site, le lien vous emmenera sur http://pouet-pouet-tagada.com/.
../ indique le dossier précedent dans l'arborescence
. C'est à dire qui si votre site est http://pouet-pouet-tagada.com/, mettre un lien vers ../ sur une page située dans http://pouet-pouet-tagada.com/undossier/unautredossier/, le lien vous emmenera sur http://pouet-pouet-tagada.com/undossier/.
On peut aussi les additionner : ../../ emmenera sur http://pouet-pouet-tagada.com/
./ indique le dossier actuel, mais ne rien mettre peut revenir au même et marche dans la plupart des cas.
<p>Blabla allez voir <a href="../photoshop/ciel-enhancement">ce tuto trop bien</a> que j'ai fait hier</p> Donne
Blabla allez voir ce tuto trop bien que j'ai fait hier
On met simplement l'adresse complète de la page avec http:// :
<p>Blabla allez voir <a href="http://blogphoto.org/83">cette super photo</a> que j'ai vue hier</p> Blabla allez voir cette super photo que j'ai vue hier
Il peut être souvent utile de mettre une image dans sa page, cela fonctionne d'une malière similaire au lien avec une balise <img src="adresse_de_l'image" alt="description de l'image" />, la description est obligatoire pour une meilleure accessibilité.
<img src="../media/photoshop/tuto_ciel_enhancement/4.jpg" alt="calques dans photoshop" /> Après avoir donné le contenu, on doit fermer le corps et la page html :
</body> </html> Vous savez faire une page basique en xhtml valide !
Source : http://designdesk.org/webmaster/apprendre-xhtml
