Les bases du (X)HTML



Imaginons que vous vouliez remplacer le texte par défaut de votre design par le (faux) texte suivant :

Titre important !

Petit titre :
Ceci est un paragraphe. Ceci est un morceau de paragraphe en gras. Ceci est un paragraphe. Ceci est un paragraphe.
Ceci est un paragraphe. Ceci est un paragraphe. Ceci est un paragraphe. Ceci est un paragraphe.
Ceci est un paragraphe. Ceci est un paragraphe. Ceci est un paragraphe. Ceci est un paragraphe.

Petit titre :
Ceci est un paragraphe. Ceci est un morceau de paragraphe en italique. Ceci est un paragraphe. Ceci est un paragraphe.
Ceci est un paragraphe. Ceci est un paragraphe. Ceci est un paragraphe. Ceci est un paragraphe.
Ceci est un paragraphe. Ceci est un paragraphe. Ceci est un paragraphe. Ceci est un paragraphe.

Petit titre :
Ceci est un paragraphe. Ceci est un morceau de paragraphe souligné. Ceci est un paragraphe. Ceci est un paragraphe.
Ceci est un paragraphe. Ceci est un paragraphe. Ceci est un paragraphe. Ceci est un paragraphe.
Ceci est un paragraphe. Ceci est un paragraphe. Ceci est un paragraphe. Ceci est un paragraphe.

On obtiendrait alors :

Tutoriel

Comme vous pouvez le constater, cela ne s'affiche pas du tout comme nous le voudrions...
Nous allons par conséquent utiliser un peu de (X)HTML pour améliorer tout ça.

Quelques balises utiles

Vous pouvez créer un paragraphe avec le code suivant :
<p>Remplacer ce texte par votre paragraphe</p>

Vous pouvez faire un saut à la ligne avec le code suivant :
<br />

Vous pouvez mettre un morceau de texte en gras avec le code suivant :
<strong>Remplacez ce texte par un texte que vous voulez mettre en gras.</strong>

Vous pouvez mettre en morceau de texte en italique avec le code suivant :
<em>Remplacez ce texte par un texte que vous voulez mettre en italique.</em>

Vous pouvez souligner un morceau de texte avec le code suivant :
<u>Remplacez ce texte par un texte que vous voulez souligner.</u>

Vous pouvez mettre un titre à un paragraphe avec le code suivant :
<h1>Remplacez ce texte par le titre de votre paragraphe.</h1>

Vous pouvez mettre un sous-titre à un paragraphe avec le code suivant :
<h2>Remplacez ce texte par le sous-titre de votre paragraphe.</h2>

Vous voilà à présent capable de mettre votre texte en page.

Faire un lien

Vous pouvez faire un lien avec le code suivant :
<a href="#">Texte cliquable</a>

Votre lien se compose en 2 parties :
- Le texte sur lequel on clique pour changer de page. Il s'agit ici de "Texte cliquable".
- L'adresse de la page vers laquelle on est redirigé lorsqu'on clique sur le lien. Il vous suffit donc de remplacer le # dans href="#" par l'adresse de la page vers laquelle vous voulez que votre lien redirige.
L'adresse de la page vers laquelle le lien redirige peut être exprimée de façon absolue ou relative.
En général, on utilise un lien absolu pour rediriger vers un autre site que le sien, et les liens relatifs pour faire des liens vers les page de son propre site.
Par exemple, si vous voulez faire un lien vers la page d'accueil de Générakit, vous utiliserez le code suivant :
<a href="http://www.creer-son-website.fr/">Visiter Générakit</a>

La notion de lien relatif est un peu plus complèxe mais incontournable. Un lien relatif s'exprime en fonction de l'emplacement de la page sur laquelle vous faites le lien.
Imaginons que votre site se compose de 2 pages se trouvant dans un même dossier.
Le code à intégrer dans la page "index.html" pour aller sur "seconde_page.html" serait tout simplement :
<a href="seconde_page.html">Passer à l'autre page</a>

Si à présent la page "seconde_page.html" se trouve dans un sous dossier, le code à intégrer dans la page "index.html" pour aller sur "seconde_page.html" serait :
<a href="nomdusousdossier/seconde_page.html">Passer à l'autre page</a>

Insérer une image

Si vous avez bien compris comment créer un lien, alors vous n'aurez aucun problème pour insérer une image.
Vous pouvez insérer une image avec le code suivant :
<img src="adresse_image.jpg" alt="description de l'image"/>

Comme pour les liens, l'adresse de l'image peut être absolue ou relative.
Signer le livre d'or - Conditions d'utilisation - Nous contacter - Devenir partenaire - Crédit à la consommation - Rachat de dette - Wix.com - Création site internet
Autres partenaires