Balises et attributs, suite

 

Le freeware

2010 10 31 X 00 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 :

2010 10 25 A 00 2010 10 25 A 01 2010 10 25 D

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é

2010 10 31 X 01

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

2010 10 31 X 02

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>

2010 10 31 X 03

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

2010 10 31 X 04 2010 10 31 X 05

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.

2010 10 31 X 06 2010 10 31 X 07

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 :

2010 10 31 X 08 2010 10 31 X 09

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

2010 10 31 X 10

 

 Nous retenons

 

 2010 10 28 A 00 Sur quelle touche dois-je agir ? Pressez la touche indiquée.

2010 10 28 E Lorsque c’est fait, cliquez sur  2010 10 31 X 11

2010 10 28 D Cliquez sur 2010 10 28 B 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.

2010 10 25 A 00

  1. #1 par Monique-Mauve le 6 novembre 2010 - 22 h 35 min

    Dans la même optique, le freeware Web-Design-Toy http://acme-web-design.info/ permet de visualiser instantanément le résultat de nos essais.

  2. #2 par Zéphyrine le 1 novembre 2010 - 22 h 51 min

    ahah..alors pourquoi se fatiguer avec ce teach me …pas envie de toucher, moi!

    • #3 par Monique-Mauve le 1 novembre 2010 - 23 h 01 min

      Pour ne pas faire de bêtises quand on est obligé de mettre les mains dans le cambouis. Un exemple au hasard : mes gifs animés ne s’animent que si je vais dans l’onglet Code, c’est à dire HTML de Writer et si je supprime leurs dimensions. Un bug de WordPress. Seulement, si tu effaces un caractère de trop, ou si tu en oublies un, si tu mets un espace là où il ne faut pas, si tu oublies un espace là où il en faut un et probablement si tu mets en majuscules ce qu’il attend en minuscules et vice-versa (comme en physique et en chimie, quoi)… tu coinces sans savoir pourquoi dans Writer.
      Peut-être TinyMCE met-il les fautes en rouge, je ne sais pas, je ne l’utilise pas beaucoup et de l’un à l’autre, ils me perdent l’alignement.

  3. #4 par Zéphyrine le 1 novembre 2010 - 22 h 16 min

    Il y a quand même plus simple de transformer n’importe quoi en html..il suffit de poser quelque chose dans un aticle et de cliquer sur la touche html..

    • #5 par Monique-Mauve le 1 novembre 2010 - 22 h 43 min

      Hi, hi, oui !

    • #6 par Monique-Mauve le 1 novembre 2010 - 23 h 05 min

      Faut dire aussi qu’en principe, c’est l’inverse : on programme en HTML pour obtenir quelque chose de « normal ».

  4. #7 par Fr@ne & @l le 1 novembre 2010 - 17 h 46 min

    Ouh bin vla une bonne chose les potes ! je ne parlais pas HTML comme ça ! et hop copié collé et téléchargé …
    Merci ! Gros bisous
    Fr@ne

  5. #8 par Monique-Mauve le 1 novembre 2010 - 16 h 56 min

    Bernie, si tu vois une sottise, dis-le-me-le, que je corrige, bises.

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s

%d blogueurs aiment cette page :