HTML : 10 codes pour débuter

Je vous l’expliquais dans l’article précédent, connaitre quelques notions et codes d’HTML peuvent vous aider pour bloguer plus facilement. Aujourd’hui, je vous présente 10 codes pour débuter. Il s’agit de notions de base mais ces codes peuvent vraiment être très utiles.

J’ai regroupé les 10 codes qui je trouve les plus intéressants pour les blogs, mais qui sont également accessibles quel que soit votre niveau.

On commence avec un premier exemple 😉

Cela vous est déjà arrivé de vouloir faire un espace dans votre texte, ou dans un widget de votre sidebar, et que le formatage automatique de WordPress/Blogger supprime cet espace ?

Passez en mode édition HTML et inscrivez simplement </ br>

Ce petit code est l’équivalent de la touche “enter” en HTML. De quoi vous faciliter la mise en forme de vos textes 😉

 

Deuxième exemple : tracer un trait, pour faire une séparation, comme celle-ci :

 


 

Cette petite barre de séparation s’affiche grâce au code <hr />

 

Passons à quelque chose de plus “complexe”. Vous souhaitez insérer une image, alors qu’il n’existe pas d’option pour illustrer à cet endroit-là? :

<img src=«URL DE VOTRE IMAGE» />

Mettez simplement l’URL de votre image à l’endroit indiqué dans le code, et votre image s’affichera.

 

Comme il n’est pas évident de se souvenir des codes, je vous ai préparé une “Cheat Sheat”, une feuille antisèche en français 🙂

Celle-ci regroupe les 10 codes de base que je trouve important, accompagnés d’une explication à chaque fois.

 

html_cheat_sheet_10_codes_debuter

 

Cette feuille se trouve dans la librairie. Rendez-vous là pour la télécharger 😉 Vous pourrez alors la garder sur votre ordinateur, et copier-coller les codes quand vous en avez besoin.

 

J’espère que cela vous sera utile. N’hésitez pas à poser vos questions dans les commentaires.

Merci d’être de plus en plus nombreux à lire les articles du blog. Bonne soirée 🙂

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 !

10 thèmes WordPress gratuits pour votre blog

Envie de changer le design le votre blog? La solution la plus fréquente et de se digérer vers des sites “bibliothèque” de thèmes et d’en acheter un. Je vous en parlais d’ailleurs dans un article précédent. Consciente que cela représente un budget, j’ai parcouru le web à la recherche de thèmes WordPress gratuits. Après plusieurs semaines de recherche, je vous présente ma sélection. Ces 10 thèmes ne sont pas payants mais sont travaillés au niveau du design et conviendront parfaitement à un blog.

 

Attention : ces thèmes fonctionnent avec la version “self-hosted” de WordPress. Si vous avez un blog hébergé sur wordpress.com, vous ne pourrez pas les utiliser. Pour plus d’informations, consultez mon article à ce sujet.

 

  1. Neverland

10_themes_gratuits_wordpress_blog_2

Un design modern avec un très chouette effet de défilement sur la photo du header. Idéal pour un blog lifestyle. Disponible ici.

 

2. Activello

10_themes_gratuits_wordpress_blog_3

Un de mes favoris. Un design moderne accompagné d’un slider et de nombreuses options de personnalisation. Il conviendra à tous les types de blog. Disponible ici.

 

3. Black and White

10_themes_gratuits_wordpress_blog

Gros coup de cœur ! Un esprit magazine, idéal pour un blog mode/streetstyle. Disponible ici.

 

4. Fashionista

10_themes_gratuits_wordpress_blog_Un design noir et blanc, parfait pour accompagner des photos de hautes qualités. Disponible ici.

 

5. Mary-Kate

10_themes_gratuits_wordpress_blog_6

Idéal pour un design épuré et féminin. Il existe une version premium de ce thème mais la version gratuite est déjà très complète. Disponible ici.

 

6. Enamored

10_themes_gratuits_wordpress_blog_7

Epuré dans les tons blancs et gris clair. Ici encore, il existe également une version premium pour plus de personnalisation. Disponible ici.

 

7. Ingrid

10_themes_gratuits_wordpress_blog_8

 

Très girly et graphique, ce thème est pourtant épuré et laisse la place au contenu. Il serait parfait pour un blog beauté ou lifestyle. Disponible ici.

 

8. Gridsby

10_themes_gratuits_wordpress_blog_9

Une présentation différente des blogs classiques. Mais un magnifique design pour mettre en valeur vos photos. Disponible ici.

 

9. Arcade Basic

10_themes_gratuits_wordpress_blog_10

Vous aimez écrire ? Ce thème est fait pour vous ! Un design simple et épuré pour les longs textes. Disponible ici. 

 

10. Amadeus

10_themes_gratuits_wordpress_blog_11

Un design noir et blanc, un peu plus rock que les autres présentés ci-dessus. Disponible ici.

 

Et voilà ! J’espère que cette sélection vous sera utile. Si vous en utilisez un pour votre blog, n’hésitez pas à me donner l’adresse en commentaire que je vois le résultat final 🙂

 

Bon dimanche !

 

Comment choisir un thème pour son blog?

Le contenu est l’élément le plus important dans la réussite d’un blog. Mais la mise en page, le look et l’esprit général de votre espace personnel ont une grande importance qu’il ne faut pas négliger. Le choix d’un thème doit donc être bien réfléchi. Je vous présente ici quelques points qui vous aiderons dans vos recherches.

 

Cet article est plus orienté pour les blogs WordPress mais ces conseils sont bien entendu valables également pour les blogs Blogger.

 

Ou acheter un thème et à qui?

Tout d’abord, pourquoi devez-vous acheter un thème? 🙂

Il existe bien sur des thèmes gratuits. Le choix est assez grand sur WordPress mais les designs sont loin d’être fabuleux…Il est possible d’acheter des thèmes sur d’autres plateformes afin d’avoir un blog au design un peu plus évolué. Voici mes préférés:

Creative Market: Ce site reprends une excellente sélection de produits pour les graphistes, webdesigners,… Je l’utilise moi-même dans mon travail. Les payements sont sécurisés et je n’ai jamais eu de problème. De nombreux thèmes pour blogs sont repris sur ce site.

Theme Forest : La référence en matière de thème pour WordPress. Le choix est immense.

Etsy : La plate-forme de vente pour les créatifs. De nombreux webdesigners présentent également leurs travaux ici. A noter, les thèmes présentés sont plus orientés blogs, alors que Theme Forest est plus « corporate ».

 

choisir_theme_blog_001

 

 

Et le prix ?

Entre 20€ pour les designs les plus simples et 60€ pour les plus complexes. Plus chers, cela me parait un peu excessif.

 

Et si je veux un thème créé pour moi uniquement ?

Adressez-vous à un webdesigner, comme moi. Mais le prix sera plus élevé que 60€…

 

Vous avez flashé sur le design d’une autre bloggeuse….

Et oui, cela arrive. Vous avez beau chercher après un autre design, c’est celui-là qui vous plait. D’un point de vue légal, tout le monde a le droit d’utiliser le même thème qu’un autre. A partir du moment ou celui-ci est disponible à la vente en ligne, il appartient à son designer et non aux bloggeurs qui l’achètent. Mais d’un point de vue stratégique, je vous déconseille d’utiliser le même thème utilisé par un blog existant que vous suivez.

Petite solution : consultez les autres thèmes créés par le designer ! Pour cela, rien de plus simple. Le site “Wat WordPressTheme Is That” vous permets de retrouver le thème utilisé, son auteur et son site. De quoi retrouver rapidement d’autres idées de thèmes dans un style qui vous plait.

 

Les éléments à vérifier :

 

  • Le thème est responsive

Premier réflexe à avoir : vérifier que le thème s’adapte à tous les écrans : ordinateur, smartphone, tablette, …

De mon coté, je préfère toujours lire les blogs sur “ordinateur” mais votre blog sera lu en grande partie via un appareil mobile. Veillez donc à ce que votre thème soit “responsive” et s’adapte à toutes les tailles d’écran. Presque tous les thèmes sont maintenus conçus comme cela, mais vérifier que vos articles soient agréables à lire sur mobile.

choisir_theme_blog_002

 

  • Le thème s’adapte à votre contenu

Quand vous parcourez des thèmes, vous regardez la démo live créée par le designer. Le contenu de cette démo est bien entendu créé de façon à mettre en valeur le thème. Imaginez donc bien celui-ci avec vos propres photos et textes.

On pourrait comparer cela avec un vêtement que vous voyez dans un magasin, qui est magnifique avec l’ensemble proposé. Mais une fois rentré chez vous, vous vous rendez compte que cette pièce ne s’accorde pas avec le contenu de votre garde-robe.

Par exemple, je suis complètement fan de ce thème, très sophistiqué. Le rendu donne très bien grâce aux photos utilisées dans la démo. Imaginez ce même thème avec des photos de différents styles… Le résultat serait visuellement chaotique. Veillez donc bien à imaginer comment le thème et le contenu que vous proposerez fonctionneront ensemble.

Autre exemple : les sliders du haut. Très tendance en ce moment, ils permettent de mettre en valeur certains articles. Attention cependant au texte qui s’affiche sur la photo.

Ici, le texte blanc ne pose pas de problème sur les photos. Mais si vous avez l’habitude de poster des photos plus claires, le texte sera juste illisible.

choisir_theme_blog_003

 

Préférez donc un thème avec un slide de ce type :

choisir_theme_blog_004

 

 

 

  • Le support technique

Sur certains thèmes, un support technique est offert. Cela veut dire que vous pouvez envoyer toutes vos questions au designer du thème et qu’il vous aidera. Hyper pratique si vous calez lors de l’installation ou qu’un bug apparait dans le fonctionnement. Parfois même, certains designers acceptent de changer quelques parties uniquement pour vous, si vous souhaitez une petite personnalisation dans la mise en page.

Une excellente option donc à ne pas négliger.

 

  • Les mises à jour

Vérifiez depuis quand le thème a été mis à jour. WordPress est un CMS qui évolue et est souvent mis à jour. Votre thème doit donc suivre la route au niveau de cette évolution (un peu comme vos applis sur votre smartphone). Si votre thème n’a pas été mis à jour depuis 2013, évitez d’acheter celui-là.

 

Mais, tout est modifiable avec un thème WordPress ?

Oui et non. Si vous savez coder et maitrisez l’HML, le CSS et le PHP, aucun souci, vous pourrez modifier votre thème à votre guise. Mais si vous lisez cet article, ce n’est probablement pas le cas 😉

Lisez donc bien quelles options de personnalisation sont permises avec le thème.

Parfois, vous pouvez juste changer la police d’écriture.  Pas très pratique donc si la sidebar se met automatiquement à gauche et que vous la souhaitez à droite.

De plus, si vous achetez un thème, c’est pour vous faciliter la vie niveau design. Il vaut donc mieux chercher le bon et avoir le moins de modifications techniques à faire.

 

choisir_theme_blog_005

 

 

Il est possible d’ajouter des options ?

Oui, il est possible d’ajouter des widgets. Et cela se fait même assez facilement.

Imaginons que vous souhaitez ajouter les 6 dernières photos de votre Feed Instagram dans la sidebar, c’est tout à fait possible grâce au widget Instagram Slider Widget.

Petit tips : le site « What WordPress Theme is That? » cité plus haut permets également de connaitre les widgets utilisés par les autres blogs.

 

Un dernier conseil?

Less is more. Il est tentant d’acheter un design super évolué pour son blog. Mais n’oublions pas que le contenu est le plus important. Veillez donc à ce que celui-ci reste lisible 🙂

 

J’espère que cet article vous a plu et surtout, qu’il vous sera utile dans le futur. Si vous avez des questions, n’hésitez pas à les poser dans les commentaires!

La différence entre WordPress.com & WordPress.org

 

WordPress : un CMS

Tout d’abord, qu’est-ce que WordPress? Comme expliqué dans l’introduction, WordPress (« WP » pour les intimes) est un CMS (un système de gestion de contenu). Rassurez-vous, je ne vais pas m’étendre ici sur une série de notions informatiques 😉 Mais notons tout de même que chaque CMS utilise une base de donnée et qu’il permet de gérer automatiquement le contenu d’un site.

 

Exemple : le système d’archivage d’un blog. Grâce au « système CMS », vos articles se placent automatiquement dans les bonnes archives (octobre 2014, novembre 2014,….) Cela peut paraitre un peu bête mais avant l’apparition de WordPress ou Blogger, cela devait se faire manuellement (true story).

WordPress est également un éditeur WYSIWYG (abréviation de What You See Is What You Get – Ce que vous voyez est ce que vous obtenez). Cela veut tout simplement dire que vous allez pouvoir éditer directement le texte ou le design sans passer par du code. Par exemple, quand vous travaillez sur Microsoft Word, il suffit de cliquer sur la touche « italique » pour avoir le texte en italique.

C’est pareil sur WP. Vous pouvez mettre en page vos articles sans vous soucier du code HTML/CSS qui travaille en arrière plan pour faire afficher, sur l’écran, votre texte en italique.

wp-01

 

WordPress est donc une plate-forme surpuissante qui permet de créer un site ou un blog sans notion de webdesign/d’informatique.

Convaincu d’ouvrir votre blog avec ce CMS? Parfait ! Il existe deux options pour utiliser WordPress. Je vous les détaille ci-dessous.

 

WordPress.com

La solution idéale pour les débutants ou ceux qui ne souhaitent pas dépenser d’argent. WordPress.com est en effet entièrement gratuit. En 5 minutes, votre blog est créé. Génial, non?

Si vous souhaitez lancer un blog, je vous conseille largement de commencer par cette version gratuite. Certes, vous n’aurez pas un nom de domaine bien à vous ni un design fantastique. Mais un blog, cela prends du temps, de l’énergie et vous serez peut-être lassé au bout de quelques semaines. D’ou l’intérêt de tester d’abord la version gratuite.

A noter : WordPress.com propose des packs payants. Ils sont tout simplement trop chers pour ce qu’ils proposent. (ex : 18€ par an, uniquement pour le nom de domaine. C’est 10€ en moyenne). Si vous souhaitez professionnaliser votre blog, optez pour la version wordpress.org, qui est expliquée ci-dessous.

wp-02

 

Mais revenons à la version « .com ».

Pour créer votre blog, suivez simplement les étapes requises. Vous arriverez alors au “tableau de bord” de votre tout nouveau blog. Le menu, à gauche, vous propose tout ce dont vous avez besoin : créer vos catégories, votre menu, et surtout, vos premiers articles !

wp-03

 

Au niveau du design, vous avez le choix entre plusieurs thèmes gratuits. Ils ne sont peut-être pas très originaux mais très bien pour commencer. Il existe également des thèmes “Premium”. Ici encore, le prix est beaucoup trop élevé. Sauf si vous avez vraiment un gros coup de cœur, n’achetez jamais un thème directement sur WordPress 😉

 

Point positifs :

  • Un blog créé en 5 minutes
  • Entièrement gratuit
  • Facilité d’utilisation

Point négatifs :

  • Pas de nom de domaine
  • Petite pub en bas de la page
  • Peu de possibilité pour personnaliser le design

 

WordPress.org

Après avoir testé la première version, vous avez peut-être envie de passer à la vitesse supérieure. Rendez-vous sur WordPress.org pour cela.

Changement de look au niveau du design, on est loin de la homepage “user friendly” de WordPress.com.

wp-04

 

Bon concrètement, qu’est-ce que ce wordpress.org? Il s’agit simplement du site sur lequel vous aller télécharger le “programme” WP pour ensuite l’installer sur votre propre hébergement.

Voici donc la différence principale avec wordpress.com : votre blog est hébergé sur votre propre espace.

Pour avoir cet espace, vous devez l’acheter. Il existe de nombreuses solutions mais OVH.com est très bien. Une fois cet hébergement (et votre nom de domaine) acheté, vous devez installer WordPress dessus. Et voilà. (Cette étape sera détaillée dans un futur article).

Autre atout d’un blog WordPress “self-hosted” : la liberté au niveau du design ! Alors que WordPress.com ne vous autorise pas à toucher à de nombreuses options, tout peut être fait dans ce cas-ci.

Vous pouvez également y installer un thème acheté sur internet. Vous avez donc une multitude de possibilités au niveau du design.

wp-04

 

Une fois l’installation du blog faite, la gestion quotidienne se fait comme sur WordPress.com. Le tableau de bord est le même MAIS avec beaucoup plus d’options. Vous pouvez en effet ajouter de nombreuses extensions (gratuites la plupart du temps) qui fous faciliteront la vie et vous aideront, comme des outils de statistiques par exemple.

Installer son blog sur son propre hébergement est donc la suite logique si vous avez démarré un blog gratuit et souhaitez le faire évoluer. Comptez 50€ par an pour l’hébergement et le nom de domaine. Si vous souhaitez acheter un thème, il vous reviendra entre 25 et 75€ en moyenne. Il s’agit donc d’un petit investissement mais qui en vaut la peine. Notons également qu’il s’agit de prix bien plus bas que ceux proposé par WordPress.com. Il est donc beaucoup plus intéressant d’acheter son propre hébergement séparément.

 

Point positif :

  • Totale liberté au niveau du design
  • Résultat plus professionnel
  • Plus d’outils pour la gestion quotidienne

Point négatif :

  • Nécessite quelques notions pour l’installation

Selon moi, c’est tout 😉

 

Conclusion

J’espère que cet article vous a permis de mieux comprendre ces deux versions de WordPress. Les démarches et conseils concernant les étapes de l’installation de WordPress.org seront très prochainement détaillées dans de futurs articles. En attendant, si vous n’avez pas encore de blog, je vous conseille de tester WordPress.com afin de vous familiariser avec la plate-forme 😉