HTML : à quoi ça sert ?

Cet article a pour but de présenter brièvement le fonctionnement du code HTML. Pour en savoir plus, il existe des tutoriels plus complets cités à la fin de l'article.

A priori, une plateforme de blogs doit fournir les outils qui évitent de toucher au code HTML. Mais en cas d'insuffisances du système, vous allez devoir mettre les mains dans le code..

Derrière les pages de votre blog, il y a du code HTML... Vous ne le voyez pas, vous voyez la façon dont il est décodé par le navigateur. Sur OverBlog, Blogger ou Tumblr, vous n'avez pas à saisir tout le code HTML. Mais pour le modifier, il faut connaître quelques bases...

D'abord, le code obéit à des règles strictes : chaque caractère à son importance. Le vocabulaire est accessoire mais voici déjà un terme à connaître : une balise délimite un contenu. Sans balise, les textes apparaîtraient de façon brute sans espace, retour à la ligne. Une balise commence par <balise> et se termine par </balise>

Balises principales

<html></html> : le code HTML en entier est divisé en deux grandes parties :

  • I) <head></head> : informations générales de la page

avec :

  1. <title></title> : titre de la page qui apparaît sur l'onglet du navigateur et dans les résultats des moteurs de recherche

  2. <meta name..../> : balises pour les moteurs de recherche

  3. <style></style> : feuille de style

  • II) <body>Contenu</body> : contenu du blog (brut)

Contenu du body

Balises simples
  • <p>Mon paragraphe</p> : paragraphe simple (provoque un retour à la ligne)

  • <span>Mot</span> : mettre en valeur un bout de texte dans un paragraphe

  • <h1>Mon titre</h1> : titre de niveau 1 (avec retour à la ligne)

  • <h6>Dernier sous-titre</h6> : titre de niveau 6 (dernier niveau)

  • <div>Contenu</div> : bloc dans une page

Balises sémantiques HTML5
  • <article>Mon article</article> : bloc article

  • <header>en-tête</header> : en-tête de page ou d'article

  • <footer>pied de page</footer> : pied de page ou d'article

  • <nav>liste de liens</nav> : élement de navigation

  • <aside>contenu</aside> : menu latéral ou contenu supplémentaire

Listes
 <ul>
 <li>Amérique</li>
 <li>Europe</li>
  <li>Afrique</li>
 </ul>
Liens
  • Lien simple : <a href="http://monblog.overblog.com/page2">Page 2</a>
  • Lien vers pas du blog : <a href="page2">Page 2</a>
  • Lien vers une ancre : <a href="#top">Haut de page</a> (si la page contient une balise avec id = "top" (ex : <div id = "top"></div> en haut de la page)
  • Bulle sur un lien : <a href="page2#top" title="Haut de la page 2">Haut de page 2</a>
Images

Pour insérer une image, il suffit d'écrire :

<img src="http://..../fete-anniversaire.jpg" alt="anniversaire de l'association" title="Quelle soirée !"/>

Avec src : adresse de l'image, alt : description, title : texte de la bulle

Images cliquables

Il suffit d'insérer l'image dans un lien :

<a href="page2"><img src="http://..../fete-anniversaire.jpg" alt="anniversaire de l'association" title="Quelle soirée !" /></a>

Note : éviter les accents,majuscules, espaces dans les noms d'images que vous téléchargez

Mise en forme (HTML et CSS)

En ne s'occupant que du body, on reste encore dans un contenu brut sans style.

Entre <style> et </style>, on va définir le style pour chaque balise. C'est ce qu'on appelle le CSS.

Marge de 20 pixels sous chaque paragraphe

.p{margin-bottom:20px)

  • p est le nom de la balise (paragraphe).
  • margin-bottom est une propriété (il en existe des dizaines)
  • 20px est une valeur de la propriéte
Titres de niveau 1 de taille 25

.h1{font-size:25px;}

Liens non surlignés

.a{text-decoration:none;}

Classes de style

Pour appliquer un style particulier à un bloc (ex : encadre noir) :

  • Dans le body : <div class = "bloc-article">Le texte de l'article<div>
  • Côté style :.bloc-article{border:1px solid black;}

Les nouvelles normes HTML5 change juste la balise utilisée :

  • Dans le body : <article class = "bloc-article">Le texte de l'article<article>
  • Côté style : .bloc-article{border:1px solid black;} 
Mettre un bout de texte en valeur (ici en rouge)
  1. Côté body : <p>Ceci est <span class = "test-class">un test</span></p>
  2. Côté style : .test-class{color:red;}
Balise contenue dans une autre
  1. Côté body : <article><h1>Titre de l'article</h1></article>
  2. Côté style : .article h1{color:red;}