Apprendre les bases de l'xhtml
Dans ce tutorial, vous allez apprendre à créer vos propres pages web en xhtml, avec des règles de mises en forme basiques, en utilisant n'importe quel éditeur de texte type notepad.
Introduction au langage balisé
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" />
Le doctype, puis l'ouverture de la balise <html>
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>
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>
Le corps de la page <body>
C'est ici que le contenu de la page va ! (enfin)
On ouvre le corps :
<body>
Balises de mise en forme
C'est le point essentiel à connaitre. Grâce à ces balises on va pouvoir ajouter du contenu dans le corps
Paragraphe <p>
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>
Saut de ligne <br />
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
Gras, italique et barré
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 barré, 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 paragraphe, texte
, blabla, ect ...
Titres <hX>
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 en général du site
Titre de la page
Titre de partie
Titre de sous-partie
Titre de sous-sous-partie
Titre de sous-sous-partie
Les liens <a href="...">
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.
Lien interne
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
Lien externe
On met simplement l'adresse complète de la page avec http:// :
<p>Blabla allez voir <a href="http://blogphoto.org/482">cette photo</a> que j'ai vue hier</p>
Blabla allez voir cette photo que j'ai vue hier
Image <img />
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 photoshop" />
Donne :
Fermeture de la page html
Après avoir donné le contenu, on doit fermer le corps et la page html :
</body> </html>
Voila !
Vous savez faire une page basique en xhtml valide !
Bientôt une suite, "pour aller plus loin".