HTML signifie 'HyperText Markup Language'. Le langage HTML est plus ou moins un langage de mise en page. Il gère donc la manière dont sera affiché sur le navigateur de vos visiteurs, le contenu que vous publiez au travers de votre blog. Cet article introduit les bases sur le langage HTML et vous permettra de rapidement effectuer vos premières rédactions à l'apparence personnalisée.

HTML fonctionne par balises. Une balise se compose d'un symbole d'ouverture (le 'plus petit que'), un symbole de fermeture (le 'plus grand que') ainsi qu'un ou plusieurs mots-clés situé(s) entre les deux symboles.

Quelques exemples de balises :

<gras>
<paragraphe>

En HTML, ces balises sont 'ouvertes' puis 'fermées'. C'est à dire que l'on spécifie le moment où la modification débute puis le moment où elle s'arrête. La balise de fermeture porte le même nom que la balise d'ouverture, il y a juste une barre oblique pour symboliser la fermeture :

<gras>du contenu</gras>
<paragraphe>du contenu</paragraphe>
etc.

Bien entendu, ces exemples ne sont pas exhaustifs. Il existe des mots-clés pour la majorité des modifications textuelles. Par exemple pour le gras et l'italique :

<b>texte en gras</b> (b pour Bold)
<i>texte en italique</i> (i pour Italic)

Ou encore pour les paragraphes :

<p>Un paragraphe</p> (p pour Paragraph)
<p>Un autre paragraphe</p>

Et les en-têtes :

<h2>Un titre de taille 2</h2>
<p>Un paragraphe dont le titre est de taille 2</p>

Bien entendu, il est possible de combiner le tout :

<h2>Un titre de taille 2 avec un <i>mot</i> en italique</h2>
<p>Un paragraphe avec du <b>gras</b> et de l'<i>italique</i></p>


Il existe certaines exceptions. Les balises citées ci-dessus sont des balises descriptives. Il existe également des balises de contenu, la plus intéressante est la balise d'image, permettant d'insérer une image dans votre article.

P.ex. : dans un article je parle du réseau genevois de services web nxtg. Je souhaite placer le logo, se trouvant à l'adresse : http://www.nxtg.net/nxtg_logo.jpg

Il faudra alors placer une balise IMG (Image) :

<img src="http://www.nxtg.net/nxtg_logo.jpg">

Vous l'avez remarqué, nous avons ici dérogé aux habitudes en plaçant ce que l'on appelle un 'attribut' au sein d'une balise. L'attribut permet de donner une valeur à un paramètre de la balise. Toutes les balises possèdent des attributs, la majorité étant facultatifs.

L'autre balise nécessitant l'usage d'un attribut est la balise de lien. La balise de lien vous permet de créer des liens hypertextes partant de votre site vers un autre, ou vers une autre page au sein de votre propre site.

Voici quelques exemples de liens et d'images pour vos premiers pas :

Un lien pointant sur la page d'actualités Romandie.com
<a href= "http://www.romandie.com">Lien vers Romandie.com</a>

Un lien pointant sur le site cnn.com, mais ouvrant une nouvelle fenêtre lors du clic
<a href="http://www.cnn.com" target="_blank">Lien vers cnn.com avec nouvelle fenêtre</a>

Une image contenant le logo nxtg
<img src="http://www.nxtg.net/nxtg_logo.jpg">

Une image contenant le logo nxtg et affichant 'site nxtg' lorsque l'on passe la souris par-dessus
<img src="http://www.nxtg.net/nxtg_logo.jpg" title="Site nxtg">

On pousse un peu le vice cette fois en créant une image cliquable. Vous remarquerez ici que l'on place une image, que l'on entoure des balises A pour en faire un lien
<a href="http://www.nxtg.net" target="_blank"><img src="http://www.nxtg.net/nxtg_logo.jpg" title="Site nxtg"></a>

Mot de la fin
Voilà, vous en savez assez pour faire joujou dans vos prochains articles ;)