Menu des cours HTML
Il vous intrigue, il vous interpelle, vous en avez besoin, et pour certains vous l'utilisez sans même vous en rendre compte de par un éditeur. Bref, il est temps de mettre les choses au clair et d'apprendre "enfin" l'HTML ... moins courament appellé l'hypertexte markup language.
Nous verrons ici plus précisemment la version 4 de HTML.

Mises en forme de textes

Formatage, mises en valeur, comment faire ce que Word fait en un clic sur un pitit bouton :D ?

Mettre en gras :

b est utilisé pour mettre le texte en gras. Son origine provient de l'anglais bold qui signifie graisse, dans le contexte informatique.

Exemple : <b>My flowers are beautiful</b>

Résultat :
My flowers are beautiful

Mettre en italique :

i est utilisé pour mettre le texte en italique. Son origine provient de l'anglais italic.

Exemple : <i>My flowers are beautiful</i>

Résultat :
My flowers are beautiful

Souligner :

u est utilisé pour souligner du texte. Son origine provient de l'anglais underline qui signifie souligner.

Exemple : <u>My flowers are beautiful</u>

Résultat :
My flowers are beautiful

Barrer :

s est utilisé pour barrer du texte. Son origine provient de l'anglais strike qui signifie barrer.

Exemple : <s>My flowers are beautiful</s>

Résultat :
My flowers are beautiful
Remarque :
strike lui-même est aussi accepté à la place du s seul :
<strike>My flowers are beautiful</strike>
Nous avons ici l'occasion d'expliquer un des fondements de HTML.

Nous voulons maintenant mettre My flowers are beautiful en gras-italique-souligné :
<u><i><b>My flowers are beautiful</b></i></u>

Nous remarquons que bien évidemment, toutes les balises ouvertes avant le texte sont bien entendu fermées aprés. Mais en respectant toujours un principe, les balises sont toujours fermées dans l'ordre inverse de leur ouverture.

Ainsi, <u><i><b>My flowers are beautiful</u></i></b> est complétement faux.

Centrer un texte :

Pour cela, ce sera principalement <div> qui sera utilisé, accompagné de son attribut align.
align prendra alors au choix 3 valeurs possibles : left, right, center (respectivement: gauche, droite, centré).

Exemple : <div align="center">My flowers are beautiful</div>
Remarque :
Il existe également justify qui justifiera le texte (de façon à en faire un rectangle le plus parfait possible). Cependant, cette valeur est très peu utilisée, fiable et compatible.

Mettre de la couleur à un texte :

<font> s'attribuera de cette tâche. Il prendra pour cela color comme attribut qui prendra la couleur désirée comme valeur.

Exemple : <font color="red">My flowers are beautiful</font>

Résultat :
My flowers are beautiful
Remarque :
Les couleur peuvent principalement s'exprimer de deux façon, en donnant leur nom anglais (cf: exemple) ou en utilisant le système hexadécimal.
Les codes hexadécimals commencent par un diése (#) et comportent 6 chiffres ou caractères.
En voici leur syntaxe : #RRVVBB (avec R pour rouge, V pour vert et B pour bleu).
Les codes vont de 0 à F (0 1 2 3 4 5 6 7 8 9 A B C D E F). 0 désigne l'absence de la couleur, F son maximum.

Ainsi, #FF0000 désignera un rouge parfait.
#00FF00 un vert parfait et #0000FF un bleu parfait.
Par logique, #FFFF00 donnera un jaune parfait (rouge + vert) !
Le #FFFFFF sera le blanc et #000000 le noir.
Des intermédiaires comme #A4BCE0 donneront le bleu qui entoure ces tutos.

Pour les codes constitués de 6 caractères identiques il est possible de n'en préciser que 3, ceci dans l'optique d'alléger le code.
Ainsi, #CCCCCC (gris) pourra s'écrire #CCC (qui entres parenthèses correspond à grey).

Choisir la police d'écriture :

Ici encore, <font> sera utilisé mais en employant ce coup-ci l'attribut face qui prendra un nom de police comme valeur.

Exemple : <font face="MS Sans Serif">My flowers are beautiful</font>

Résultat :
My flowers are beautiful
Remarque :
Les polices sont cherchées sur le poste (PC) du client (visiteur). Il faut donc qu'elles s'y trouvent pour pouvoir être utilisées. Si la police demandée par face n'existe pas, ce sera celle par défaut qui sera utilisée, en l'occurence New Times Roman.
Il est donc conseillé de n'utiliser que les polices courante comme Arial, New Times Roman, Verdana, Tahoma ou MS Sans Serif.
On peut aussi faire la liste des polices de remplacement, si la première n'est pas trouvée, la deuxième sera utilisée et ainsi de suite :
<font face="Verdana, Arial, Tahoma">My flowers are beautiful</font>

Définir la taille des caractères :

C'est cette fois-ci l'attribut size (de l'anglais taille) qui acceptera comme valeur les numéros de 1 à 7.

Exemple : <font size="5">My flowers are beautiful</font>

Résultat :
My flowers are beautiful
Remarque :
La taille des textes définie par font est assujettie aux paramétres du navigateur du client (visiteur).
Ainsi, dans Internet Explorer par exemple, on pourra changer/augmenter toutes les tailles ou au contraire les rabaisser en actionnant la touche Ctrl et en utilisant simultanément la molette de la souris.
Maintenant que nous avons passé en revue les trois attributs les plus courants de <font>, voyons pour les additionner.
Supposons la phrase traditionnelle en taille 5, en noir et avec la police Verdana :
<font face="Verdana" color="#000" size="5">My flowers are beautiful</font>


Des balises exprés pour la gestion des titres sont également disponibles :

<h1>My flowers are beautiful</h1> donnera :

My flowers are beautiful


<h2>My flowers are beautiful</h2> donnera :

My flowers are beautiful


<h3>My flowers are beautiful</h3> donnera :

My flowers are beautiful


<h4>My flowers are beautiful</h4> donnera :

My flowers are beautiful


<h5>My flowers are beautiful</h5> donnera :
My flowers are beautiful

<h6>My flowers are beautiful</h6> donnera :
My flowers are beautiful

Quelques balises en vrac :

<sub> met en indice
<sup> en exposant
<small> en plus petit que normal
<big> en plus gros que normal
Remarque :
Beaucoup de balises différentes comme entres autres <cite> (pour citer) sont disponibles, mais la plupart ne servent finalement pas à grand chose et s'avérent plus un luxe qu'autre chose.

Former un paragraphe :

Un texte entouré de <p> sera présenté comme un bloc délimité par deux entrées au dessus et en dessous de façon à faire ressortir un paragraphe.

Exemple :
...textotextatextotextatextotextatextotexta... <p>Coucou ! My flowers are beautiful !</p> ...textotextatextotextatextotextatextotexta...

Résultat :
...textotextatextotextatextotextatextotexta...

Coucou ! My flowers are beautiful !

...textotextatextotextatextotextatextotexta...
Remarque :
p peut accepter des attributs comme align.
Ainsi, <p align="center"> centrera le paragraphe, ce qui évite d'imbriquer un div au p.

Un simple retour à la ligne :

Vous pourrez toujours appuyer sur la touche Entrée pour revenir à la ligne ou en passer, la navigateur n'en tiendra pas compte.
<br> représentera donc un retour à la ligne.

Exemple : My flowers are beautiful<br><br>My flowers are beautiful

Résultat :
My flowers are beautiful

My flowers are beautiful
Remarque :
<br> est une balise orpheline. Elle n'attend donc pas de de fermeture, ce serait même une erreur.
Précisons aussi au passage que la version 5 de HTML (XHTML - eXtensible HyperText Markup Language) n'accepte pas les balises orphelines et demande de les fermer d'une certaine façon ; en l'occurence pour <br> : <br />.

Apprenons maintenant à créer des liens hypertextes....



<< Précédent - Sommaire - Suivant >>

Un problème ? Quelque chose que vous n'avez pas saisit ?
Posez vos questions sur les forums(+) !


Toute reproduction interdite - Intégralement écrits par le Webmaster
Valid XHTML 1.0! Valid CSS!
By JSAND [All right reserved] - Windows est une marque de Microsoft Corporation
Toute copie compléte comme partielle sans autorisation est passible d'amende - Avertissements