Second opus qui vous conduira de nouveau dans les méandres du CSS (et de l’HTML). Bien que j’ai déjà mentionné tout ça dans un article précédent, je me répéterai ici plutôt que de vous y renvoyer. Ainsi cet article sera complet.

Lorsque l’on crée un blog, c’est pour y écrire quelque chose. Articles, avis, chroniques, billets d’humeur, annonces, tutoriels.

Un peu de tout ^^

Et l’important dans tout cela outre l’intérêt de la chose, c’est sa présentation.

Un texte fait de gros pâté est indigeste, alors qu’une présentation aérée est toujours plus sympa. Il y a également quelques petites règles à savoir. Pas forcément gravées dans la pierre.

On commence par les piqûres de rappel.

Qu’est-ce que le CSS ?

Acronyme de Cascading Style Sheets, le CSS est une suite de paramètres destinés à définir l’aspect de certains éléments de votre site.

Par exemple, vous voulez que vos titres soient en police Garamond, taille 14, gras, italique, souligné en pointillés d’une épaisseur de 1 pixel. Votre texte justifié en Arial 12 et dont chaque première ligne de paragraphe soit en retrait. Ceci est un exemple succinct de ce que vous pouvez faire en CSS.

Vous pouvez y ajouter de la couleur, des ombres, des effets (quoique ‘tention avec les effets, d’un navigateur à l’autre, cela peut être différent), des marges, des tailles… enfin bref, tout ce que vous avez déjà vu sur un site quoi.

Et cela ne marche pas que sur le texte, sur les images aussi. Sur tout le site.

C’est clair qu’un site complet requiert un code CSS assez conséquent et compliqué à force. Il faut alors tout définir, les marges, la taille et l’emplacement de chaque partie du site, et que ce soit Responsive (= pas tout pété sur téléphone et sur tablette) par-dessus le marché.

Mais ici, vous n’aurez besoin que de l’essentiel : les paramètres et la syntaxe.

Le HTML, qu’est-ce que c’est ?

C’est, en gros, le squelette du site. Autrefois (aux temps paléolithiques du net), les sites web n’étaient codés qu’en HTML. Ce langage est une série de balises destinées à afficher les éléments de votre site. Facile à reconnaître, elles s’écrivent entre crochets <>. Certaines seules, la plupart accompagnées de paramètres entre ces crochets.

De plus, la plupart vont par deux, l’une des balises “ouvrant” et l’autre “fermant”. Dans ces cas-là, on les reconnait aisément car la balise fermant est toujours accompagnée d’un slash /.

Exemple :

<bold>Votre texte en gras ici</bold>

Et comme vous le devinez, il est possible d’insérer des balises ayant les mêmes propriétés que certains paramètre CSS. C’était d’ailleurs la seule façon de faire à la préhistoire du web.

Si je voulais en venir là, c’est que non seulement de l’HTML, vous allez en croiser, mais vous devrez cette fois insérer votre CSS via certaines de ces balises HTML.

Comment éditer mon code HTML ?

Indispensable si vous souhaitez le modifier, isn’t it ?

A la différence du tuto précédent, bien que vous ne détruirez rien, ce sera plus ardu de revenir sur vos pas si vous changez d’avis. Il suffira certes de simplement effacer ce que vous avez ajouté et qui ne vous convient pas ou plus. Mais ceci pouvant, selon ce que vous avez souhaité modifier, se trouver un peu partout dans le code, ce sera un poil plus long si vous avez fait beaucoup d’ajouts.

Mais jamais impossible ! Au pire, effacez le formatage du texte et recommencez (bon ok, j’ai rien dit :p ).

Revenons à nos moutons. Comment éditer votre code HTML ou plus communément appelé Code source.

Tout d’abord, rendez-vous dans l’éditeur de votre article.

Sous WordPress.com :

Avec la nouvelle interface “Gutenberg” (qui l’aime ? Levez le doigt). Rendez-vous sur le bloc de texte à modifier. Une barre flottante apparaît. Choisissez les trois points puis Modifier en HTML.

Voilà, vous avez les mains dedans. Pour revenir à l’éditeur précédent, toujours les trois points puis Modifier visuellement.

Vous verrez sans doute les balises <p> et </p> entourant votre paragraphe. Et ça tombe bien car ces balises définissent justement un paragraphe ! Et vous pourrez entrer des modifications sur ce paragraphe dans cette balise (celle “ouvrante”).

Je vous avoue que j’utilise toujours l’ancienne interface. Si vous faites comme moi, cliquez sur le petit onglet texte (à côté de Visuel) en haut de la fenêtre d‘édition.

Sous blogger (Google) :

Lorsque vous êtes dans l’interface de création d‘un article, cliquez sur le bouton HTML. Bête comme chou.

Ici, par contre, pas de balise paragraphe p. Il devrait pourtant, mais ce n’est pas grave, il est possible d’en ajouter sans tout casser. Sous Wix : (je n’avais jamais testé cette possibilité et… apparemment il n’y a pas moyen). De même sous Weebly. Merci les gars, vous m’aidez pas beaucoup hein !

Comment s’écrit concrètement le HTML

(Rappel) Le HTML s’écrit via des balises entre crochets. Le CSS, lui, s’écrit entre accolades. Mais pas ici.

Pourquoi faire simple quand on peut faire compliqué, vieil adage d’informaticien.

Si précédemment nous écrivions du code CSS à part du code HTML, ici, nous l’allons l’insérer directement dans celui-ci. Il n’y aura pas d’accolade, mais des guillemets.

Ce n’est pas pour rien que les éditeurs de blogs modernes permettent de construire leurs articles au moyen de blocs. En HTML, tout est également construit à partir de blocs. Repérez dans le code source le bloc contenant le texte ou le titre à modifier.

Les titres

Ils s’écrivent uniquement avec une balise H. Comme ils peuvent être hiérarchisés, plus exactement Hn. Tout à fait concrètement H1, H2, H3, H4, H5 et H6.

Les paragraphes

Comme nous l’avons vu, ils sont censés être entourés de balises <p> et </p>. Mais ce n’est pas toujours le cas. Ça marchera aussi. Vous pouvez soit ajouter cette balise p (paragraphe) ou une balise passe partout telle que <div> ou <span>.

Les images

La balise image est de celles qui contiennent des paramètres. Obligé pour indiquer l’adresse de l’image, mais aussi d’autres petites choses. En outre, c’est une balise solitaire. Et non <image> ne possède pas de balise fermante </image>.

Exemple :

<image src=”dossier_images/paysage.jpg”>

Listes à puces

La balise principale de la liste à puce est <ul>pour des puces graphiques, <ol> pour de puces alphanumériques. Chaque élément étant défini ensuite, à l’intérieur par une balise <li>.

Exemple :

<ul>
<li>Puce 1.</li>
<li>Puce 2.</li>
<li>Puce 3.</li>
</ul>

Vous pouvez insérer du CSS dans ces balises (voir ci-dessous) OU utiliser des balises HTML permettant de personnaliser votre texte. Certaines seront à double emploi, d’autres uniquement en CSS. Par exemple, passer un texte en italique se fait en HTML comme ceci :

<p><em>Mon texte en italique version HTML.</em></p>

Ou en CSS comme ceci :

<p style=”font-style:italic;”>Mon texte en italique version CSS.</p>

Cet exemple ne vous servira pas vraiment puisque tout bon éditeur permet de passer en italique d’un clique.

Quelques balises HTML

<b>Texte en gras</b> ou <strong>Texte  en gras</strong>
<i>Texte en italique</i> ou <em>Texte en italique</em>
<sub>Petits caractères bas</sub>
<sup>Petits caractères hauts</sup>
<del>texte barré</del>
<mark>Texte mis en évidence</mark>

<ol type="1">Liste numérique (par défaut).             
<ol type="A">Liste alphabétique, majuscules.
<ol type="a">Liste alphabétique, minuscules.
<ol type="I">List numérique en chiffres romains, majuscules.
<ol type="i"> List numérique en chiffres romains, minuscules.

Quelques styles CSS

<p style = « text-decoration: underline; »>Souligné</p>
<p style = « text-decoration: overline; »> Surligné </p>
<p style = « text-decoration: line-through; »>rayé</p>
<p style = « text-decoration: blink; »>Clignotant</p>
<p style = « text-transform: capitalize; »>Première lettre en majuscules</p>
<p style = « text-transform: uppercase; »>Tout en majuscules</p>
<p style = « text-transform: lowercase; »>Tout en minuscules</p>

Pour un effet ombré :

<p style = « text-shadow: 5px 5px 5px black; »>Ce texte est ombré.</p>

Pour une indentation de 20 pixels sur la première ligne uniquement :

<p style= « text-ident :20px ;»>…</p>

Les marges

Intérieures avec :

<p style= « padding :50px ;»>Texte/<p>

Ou, définissant certaines marges (haut, gauche, bas, droite) :

<p style= « padding :10px 50px 10px 50px ;»>Texte/<p>
<p style= « padding-top :50px ;»>Texte/<p>
<p style= « padding-left :50px ;»>Texte/<p>
<p style= « padding-bottom :50px ;»>Texte/<p>
<p style= « padding-down :50px ;»>Texte/<p>

Extérieures avec :

<p style= « margin :50px ;»>Texte/<p>

Ou, définissant certaines marges (haut, gauche, bas, droite) :

<p style= «margin :10px 50px 10px 50px ;»>Texte/<p>
<p style= «margin-top :50px ;»>Texte/<p>
<p style= «margin-left :50px ;»>Texte/<p>
<p style= «margin-bottom :50px ;»>Texte/<p>
<p style= «margin-down :50px ;»>Texte/<p>

Articles similaires

%d blogueurs aiment cette page :