Le freeware

Apprends-moi l’HTML, apprentissage facile

La table des matières

le menu Leçons/Lessons nous indique ce que nous allons apprendre à mettre en HTML :

Les En-têtes / Headings : pourquoi faire ?

Les Lignes / Lines : pour quoi faire ? pour insérer une ligne ou un trait horizontal

Les Paragraphes / Paragraphs :

Les Liens/Links :

Une Liste/Lists : ordonnée / ordered list – non ordonnée / unordered list – définition d’une liste / Definition List

Une Image / Image

La Présentation du Texte / Text Presentation : gras / bold, italique / italic, souligné / underligned

Manipulation

Suivons ensemble les instructions pour la première leçon, les En-têtes / Headings

pour ajouter le titre/title au début de votre billet et les sous-titres dans le corps/body du billet.

Sélectionnons la taille que nous voulons donner au titre dans le menu déroulant qui nous est proposé

cet écran n’apparaît que dans cette leçon.

Nous allons commencer par la balise d’ouverture pour la taille du titre que nous avons choisie.

Une balise commande à votre navigateur Web favori de faire une action.

“Sur quelle touche dois-je agir ?” vous demandez-vous :

Appuyez sur la touche < répond le logiciel

Faisons-le, il nous guide ensuite de même jusqu’à ce que nous ayons tapé <H3>,

ce qui correspond à une police grande / big.

La balise d’ouverture est complète, maintenant, entrez la balise de fermeture d’en-tête </H3>

Et, tout de suite, le logiciel nous fait taper la balise de fermeture correspondante </H3>,

autrement dit la même chose si ce n’est qu’il y a en plus le signe / tout de suite après le premier caractère <.

Vous avez réussi à entrer les balises pour avoir un en-tête de taille 3, cliquez sur le bouton Étape suivante pour continuer

Le curseur est entre les deux balises, il ne se voit pas sur la saisie d’écran.

Vous pouvez maintenant taper le titre à l’emplacement actuel du curseur

Faites bien attention à ce que ce titre soit bien encadré par les balises <H3> et </H3>.

Lorsque vous aurez entré le titre de votre choix, vous cliquerez sur le bouton  Étape suivante.

Nous devons préciser comment le titre va être aligné sur la page écran.

Pour ce faire, nous entrons un attribut ALIGN.

L’attribut vient se placer entre les balises et indiquer comment faire au navigateur.

“Sur quelle touche dois-je agir ?” vous demandez-vous :

Tapez A répond le logiciel…

Le curseur clignote à un intervalle de <H3, lettre après lettre, nous tapons ALIGN puis =

Choisissez l’alignement de votre titre et entrez exactement comme il est montré :

“Left” pour aligner à gauche,

“Right’ pour aligner à droite

ou “center” pour centrer :

La leçon sur les en-têtes est finie, cliquons sur le bouton Prévisualisation pour voir le résultat :

 Nous retenons

  Sur quelle touche dois-je agir ? Pressez la touche indiquée.

Lorsque c’est fait, cliquez sur 

Cliquez sur pour voir le résultat.

Remarque

Le freeware date de 2004, aujourd’hui l’HTLM accepte les minuscules, c’est pourquoi il faut respecter la casse indiquée par WordPress pour nuancer vos comms lorsque le thème du blog visité vous le permet.

Pourquoi faire ?

pour modifier l’aspect du commentaire.

Les balises que nous offre WordPress pour les commentaires

Prenons tout de suite de bonnes habitudes, quand on ouvre une balise, il faut la fermer après, donc en premier la balise d’ouverture, entre les signes < et > , en second la balise de fermeture, la même, entre les signes </ et >. Entre les deux, le texte dont vous voulez modifier l’aspect dans votre commentaire.

<a href="" title=""> et </a href="" title=""> encadrent un titre en y ajoutant un lien

<abbr title=""> et </abbr title=""> encadrent un titre

<acronym title=""> et </acronym title=""> encadrent un titre acronyme

<b> et </b> encadrent un texte en gras, équivaut à un clic sur G après sélection dans Writer,

<blockquote cite=""> et </blockquote cite=""> encadrent une citation indentée,

<cite> et </cite> encadrent une citation,

<code> et </code> encadrent une instruction,

<pre> et </pre> encadrent un texte préformatté en conservant les espaces, les retours à la ligne et les tabulations,

<del datetime=""> et </del datetime=""> encadrent

<em> et </em> encadrent un texte avec emphase,

<i> et </i> encadrent un texte q en italique, équivaut à un clic sur I après sélection dans Writer,

<q cite="">  et </q cite="">  encadrent un texte qui apparaîtra entre guillemets,

<strike> et </strike> encadrent un texte barré, équivaut à un clic sur a après sélection dans Writer,

<strong>  et </strong> encadrent un texte avec forte accentuation rendue par du gras.

Exemples :

J’ai copié-collé les lignes suivantes en commentaire chez moi

<a href="" title="">titre</a href="" title="">

<abbr title="">titre</abbr title="">

<acronym title="">titre acronyme</acronym title="">

<b>texte en gras</b>

<blockquote cite="">citation indentée</blockquote cite="">

<cite>citation</cite>

<code>instruction</code>

<pre>texte préformatté en conservant les espaces, les retours à la ligne et les tabulations</pre>

<del datetime=""> et </del datetime=""> 

<em>texte avec emphase</em>

<i>texte en italique</i>

<q cite="">texte entre guillemets</q cite=""> 

<strike>texte barré</strike>

<strong>texte avec forte accentuation rendue par du gras</strong>

Voici un copié-collé de ce que ça a donné :

titre

titre

titre acronyme
texte en gras

citation indentée

citation
instruction

texte préformatté en conservant les espaces, les retours à la ligne et les tabulations

et
texte avec emphase
texte en italique
texte entre guillemets
texte barré
texte avec forte accentuation rendue par du gras

On peut utiliser plusieurs balises pour un même texte mais

on doit fermer d’abord la dernière balise, puis l’avant dernière et ainsi de suite.

jusqu’à présent, le freeware me permettait d’avoir des images carrées de 500*500 pixels m’imposant un nécessaire travail sur les tracés

enregistré en 300*300 pixels (et en .bmp, on n’a pas le choix)

puis réduit à 100*100 pixels, cela donne :

alors que directement enregistré en 100*100 pixels nous obtenons :

• récupérons la moitié inférieure du premier

• inversons l’intensité des couleurs et rendons le fond transparent

• choisissons une jolie couleur mauve

• sous un zoom de 400, confectionnons le cadre de 800*600 pixels,

il va dépasser dans la colonne de droite, mais il faut que ses deux dimensions soient multiple entier de 200 pixels qui est la largeur de la tuile.

• redimensionnons le dessin à 600 pixels de large, soit un rectangle de 600*450 pixels

• agrandissons la zone de dessin en prévoyant un cadre rectangulaire de 10 pixels d’épaisseur, soit un rectangle de 620*470 pixels

• sous un zoom de 800 sélectionnons un rectangle que nous remplissons avec la couleur mauve semi-transparente repérée à la pipette sur le motif de la dentelle,

• nous répétons trois fois l’opération pour avoir le cadre entier mauve semi-transparent et fusionnons les cinq calques

• finissons par deux rectangles de 1 pixel de large mauve opaque repéré à la pipette sur un motif tracés sous un zoom de 800 que nous doublerons pour une meilleure finition :

le cadre est terminé