Apprendre HTML, Formatage de texte, liens et images

Tous les élements qui doivent apparaître sur vos pages HTML sont insérés entre la <body> et </body>

Formatage de texte

Texte en gras

Exemple:

Texte en gras

Code:
<strong> Texte en gras </strong>

Texte en italique

Exemple:

Texte en italique

Code
<em> Texte en italique </em>

Texte en souligné (Plus trés conforme)

Exemple:

Texte souligné

Code:
<u> Texte souligné </u>

Citation de paragraphe

Exemple:

Citation de paragraphe

Code:
<blockquote> Citation de paragraphe</p>

Texte préformaté

Exemple

Texte préformaté

Code:
<pre>Texte préformaté</pre>

Les balises d'entête

Ces balises n'ont pas le "look classique" des balises d'entête.
Dans notre exemple, elles sont modifiées avec CSS

Exemple

Balise d'entete h2

Balise d'entete h3

Balise d'entete h4

Balise d'entete h5

Balise d'entete h6

Code:
<h2>Balise d'entete h2</h2>
<h3>Balise d'entete h3</h3>
<h4>Balise d'entete h4</h4>
<h5>Balise d'entete h5</h5>
<h6>Balise d'entete h6</h6>

Listes non ordonnée, liste à puce

Elément liste
Elément liste
Elément liste
Elément liste

Code:
<ul>
<li>Elément liste</li>
<li>Elément liste</li>
<li>Elément liste</li>
<li>Elément liste</li>
</ul>

Listes ordonnée

Elément liste
Elément liste
Elément liste
Elément liste

Code:
<ol>
<li>Elément liste</li>
<li>Elément liste</li>
<li>Elément liste</li>
<li>Elément liste</li>
</ol>

Un paragaraphe

Exemple:

Voici un paragraphe en XHTML certes qui ne contient pas beaucoup de contenu, certes, mais mieux que rien !

Code:
<p>Voici un paragraphe en XHTML certes qui ne contient pas beaucoup de contenu, certes, mais mieux que rien !</p>

Bien moins utilie!

FORMATAGE DE TEXTE	CODE HTML / XHTML
Liste des définition	<dl>Liste des définition</dl>
Terme de définition	<dt>Terme de définition</dt>
Description de définition	<dd>Description de définition</dd>
Abréviation	<abbr title="Abréviation de je ne sais quoi" lang="fr">Abréviation</abbr>
Acronyme	<acronym title="Acronyme de je ne sais quoi" lang="fr">Acronyme</acronym>

Les attributs en HTML

FORMATAGE DE TEXTE	CODE HTML / XHTML
Texte aligné à gauche	Texte aligné à gauche
Texte aligné au centre	<div align="center">Texte aligné au centre</div>
Texte aligné à droite	<div align="right">Texte aligné à droite</div>
Texte justifié, texte justifié, texte justifié, texte justifié, texte justifié, texte justifié, texte justifié, texte justifié, texte justifié, texte justifié, texte justifié, texte justifié, texte justifié, texte justifié	<div align="justify">Texte justifié, texte justifié, texte justifié, texte justifié, texte justifié, texte justifié, texte justifié, texte justifié, texte justifié, texte justifié, texte justifié, texte justifié, texte justifié, texte justifié</div>

Insertion d'images

Exemple:

1- Vers une images qui se trouve dans mon répertoire "images" (Si ce n'est pas clair, regardez l'organisation d'un site web)

Code:
<img src="../../images/formation-webmaster-nord.jpg" width="31" height="31" alt="Formation webmaster" />

2- Vers une image en ligne, que l'on va lire chez votre hébergeur

Code:
<img src="http://www.conseil-webmaster.com/images/formation-webmaster-nord.jpg" width="31" height="31" alt="Formation webmaster" />

Les attributs des images

src: Ou se trouve mon image, son chemin
width: Permet de préciser la largeur de l'image
height: Permet de préciser la hauteur de l'image
alt: Affiche un texte de remplacement dans le cas ou l'image ne peut être lu, si vous passez votre curseur sur l'image avec IE vous pouvez voir une info bulle qui contiendra le texte de remplacement

Les liens hypertexte

Exemple:

Formation webmaster

Liens vers une page qui se trouve dans votre répertoire

Code:
<a href="formation-webmaster-nord.html" title="Formation webmaster">Formation webmaster</a>

Liens vers un autre site web

Code:
<a href="http://www.conseil-webmaster.com/formation-webmaster-nord.html" title="Formation webmaster">Formation webmaster</a>

Un lien qui s'ouvre dans une nouvelle fenêtre

Exemple:

Formation webmaster

Code:
<a href="formation-webmaster-nord.html" title="Formation webmaster" target="_blank">Formation webmaster</a>

Utile lorsque vous faîtes des liens vers d'autres sites web pour éviter que votre visiteur parte de votre site !

Un lien vers une seveur ftp

Exemple:

ftp://ftp.toto.com

Code:
<a href="ftp://ftp.toto.com" title="Se connecter au serveur à toto">ftp://ftp.toto.com</a>

Liens vers messagerie

Exemple:

Contactez moi par mail en cliquant qur ce lien

Code:
<a href="mailto:contact@toto.com">Contactez moi par mail en cliquant qur ce lien</a>

Ajouter le sujet:
<a href="mailto:contact@toto.com?subject=informations">Contactez moi par mail en cliquant qur ce lien</a>

Liens vers une ancre

Exemple:

Cliquez ici pour revenir en haut de la page

Code positionné juste aprés la balise Body pour revenir tout en haut de cette page dans notre exemple
<a name="haut1"></a>
Code:
<a href="apprendre-xhtml-base.html#haut1" title="Revenir au début de cette page">Cliquez ici pour revenir en haut de la page</a>

Les attributs des liens hypertextes

href: Ou se trouve ma page, son chemin
title: Affiche une info bulle sur le lien (Util pour l'accessibilité
height: Permet de préciser la hauteur de l'image
target:

_blank : Ouverture de la page cible dans une nouvelle fenêtre

_parent : Ouverture de la page cible dans le cadre parent ( de niveau immédiatement supérieur)

_self : (Valeur par défaut) Ouverture de la page cible dans le cadre d'appel

_top : Ouverture de la page cible dans la fenêtre hôte (par-dessus le FRAMESET)

DIVERS	HTML / XHTML
Insérer un commentaire dans votre code source	<!-- Mon commentaire -->