HTML : connaitre les bases pour bloguer plus facilement

Je vous parle aujourd’hui d’HTML, un language utilisé pour coder et créer des sites. Ce sujet peut faire peur et être compliqué à aborder. Le but de cet article n’est pas de vous former de A à Z à l’HTML (il faudrait bien plus que 500 mots pour ça) mais de vous donner quelque clés pour aborder ce langage. En effet, pas besoin d’être un expert pour utiliser quelques codes qui vous faciliteront la vie. Je vous propose donc de découvrir quelques notions et vous explique comment les utiliser.

 

HTML?

Pour bien commencer, c’est quoi l’HTML? De son nom complet Hypertext Markup Language, c’est le format de données conçu pour représenter les pages. (Merci Wikipédia 😉 ). Vous voulez voir à quoi ressemble de l’HTML ? Faites simplement un clic droit sur cette page et sélectionner « afficher le code source ». Une nouvelle fenêtre va s’ouvrir avec cela :

 

html_blog_bloguer_wordpress_code

 

Il s’agit code entier de cette page, en HTML. Je vous rassure, pas besoin de défricher tout ça. Mais il y a une notion importante à connaître avant d’aborder la suite : les balises.

 

 

Les balises

Le langage HTML est composé de balises. Ce sont des « mots-clés », placés entre ces signes < >, qui donnent des indications au navigateur. Les balises expliquent comment une page, des photos, des parties de texte,… doivent être affichées.

A chaque fois que vous utilisez une balise, vous devez la fermer en utilisant la balise de fin. Il s’agit de la même balise avec un « / »

Par exemple :

<title>The Cherry on the Web</title>

La balise title indique qu’il s’agit du titre de mon site. C’est donc ce titre là qui s’affiche sur la fenêtre d’un navigateur.

 

Un autre exemple ?

<strong> Bonjour tout le monde ! </strong>

La balise strong indique que le texte doit être affiché en gras. Ici, le texte Bonjour tout le monde ! s’affiche donc en gras. Comme j’ai bien placé ma balise de fin après le point d’exclamation, le texte après ne s’affiche plus en gras.

 

Il se peut que vous utilisiez des balises dans des balises. L’ordre d’ouverture et de fermeture des balises doit être respectées.

Exemple :

 

html_blog_bloguer_wordpress_code2

 

Utilisation de l’HTML

 

Alors c’est bien chouette ces détails techniques mais concrètement, que pouvez-vous faire avec ces codes HTML ?

A un niveau débutant pour un blog, je vois deux aspects très pratiques :

–        Travailler dans l’éditeur de texte

–        Forcer certaines options dans les widgets

 

L’éditeur de texte.

Vous avez certainement déjà remarqué qu’il y a deux options pour écrire vos articles : Visuel & Texte.

html_blog_bloguer_wordpress_code3

La première, et certainement la plus utilisée, et un éditeur WYSIWYG. Vous avez un aperçu direct de votre texte. Pour mettre du texte en gras, il suffit de cliquer sur le bouton « bold ». Mais vous avez certainement déjà été bloqué par WordPress pour des mises en page plus complexes. Et oui, cet éditeur hyper pratique a ses limites. Si vous souhaitez avoir une meilleure prise en main de l’affichage de votre texte, et pouvoir jouer avec des options non présentes dans l’éditeur visuel, il est temps de passer au mode « texte ».

 

html_blog_bloguer_wordpress_code4

Votre article est ici en HTML. Vous pouvez désormais intégrer des balises HTML.

 

Les widgets

Pour la sidebar d’un blog, les widgets sont très utiles. Par contre, il n’y a pas toujours toutes les options nécessaires. Vous pouvez par exemple utiliser un widget pour indiquer vos réseaux sociaux et n’être pas satisfait car les liens s’ouvrent dans la fenêtre actuelle. Pour « débloquer » ce style de problème, utiliser les bons codes HTML est une solution très rapide et très facile.

Je vais vous donner un exemple concret. La partie « Librairy » du footer en bas de cette page est présentés comme cela :

html_blog_bloguer_wordpress_code5

 

Pour avoir exactement la mise en page que je souhaitais, j’ai simplement utilisé un widget de base « Texte » et ai ajouté mon image et le lien en dessous en html.

 

html_blog_bloguer_wordpress_code6

 

Connaître des codes HTML et savoir comment les utiliser est donc très pratique pour des blogueurs. Ils vous permettent d’avoir le rendu que vous souhaitez de manière très rapide.

 

Il reste un dernier élément : comment connaître les codes ? 🙂

Vous ne pouvez pas deviner par vous même quelle balise utiliser pour mettre du texte en gras ou en italic. Cela s’apprend. C’est pour cela que le prochain article vous présentera une première liste de code.

J’ai volontairement couper les deux parties sur deux jours, afin de vous laisser « digérer » cette théorie.

 

Si quelque chose n’est pas clair, n’hésitez pas à les poser dans les commentaires.

 

Bonne soirée et à bientot pour la suite !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *