admin

Tuto HTML
Inscription
<Mise en="Page">

1. Presentation de texte

<h1> a <h6> sont des balises de presentation de texte definissants les titres et sous-titre d'une page, le chiffre importe sur l'importance du texte attribué, <h1> étant la plus grande, <h6> la plus petite.


Code :
Resultat :
<h1>TITRE</h1>

TITRE

<h2>TITRE 2</h2>

TITRE 2

2. Ajout d'impression

Les balises d'ajout d'impression sur texte sont definies, elles aussi, par des balises dites "simples" (qui ne prend pas d'attribut) :


Code :
Resultat :
Normal
Normal
<u>Souligné</u>
Souligné
<b>Gras</b>
Gras
<strike>Barré</strike>

<del>Barré</del>
Barré
Barré
<i>Italique</i>

<em>Italique</em>
Italique
Italique
Il ne faut surtout pas oublier de refermer les balises sinon leur attributs s'appliqueront aux textes posterieurs.

3. Les Couleurs de texte

Le texte en HTML s'affiche directement, ainsi, par le biais des balises, le texte est modifiable au niveau de la couleur, de la police de caractere et de la taille.

La Couleur en HTML se fait de deux maniere, soit en ecrivant son nom en Anglais (ex : green, yellow, red) soit en l'ecrivant en hexadecimal.
Hein !?! l'hexdecimal c'est une base numerique, nous, etres humains, (je ne parle pas des geek qui compte en binaire) nous comptons en Decimal (de 0 a 9), l'hexadecimal se fait de 0 a 15

Le probleme c'est que la machine ne peut pas faire la difference entre "15" et '1''5', d'ou l'interet d'avoir remplacer tout chiffre superieur a 9 par une lettre alphabetique dans l'ordre.
Donc :
Decimal
Hexadecimal
00
11
22
33
44
55
66
77
88
99
10A
11B
12C
13D
14E
15F
Mais pour faire une couleur il n'y a pas que ca, il y a une synthaxe a respecter :
Le '#' precise que ce qui suit sera de l'hexadecimal, ce qui donne la forme #ROUGEVERTBLEU, donc si je met #FFFFFF je dit simplement de metre 255 dans chaque categorie (255 parce que FF en hexdecimal vaut 255 en decimal et c'est la valeur max attribuable a une couleur pour la raison qu'un octet vos 8 bit donc 2^8-1 = 255 et qu'une couleur est codé sur 1 octet).
Et ca fait quoi quand on melange toute les couleurs a fond ??? Du blanc !
On va appliquer ca a du texte, mais comment ?
la balise <font> (qui veut dire police) est la pour ca, elle permet par ses attributs de modifier du texte, l'attribut de la couleur est color.


Code :
Alternative :
Resultat :
<font color="#ff0000">Texte</font> <font color="red">Texte</font>
Texte
<font color="#00ff00">Texte</font> <font color="green">Texte</font>
Texte
<font color="#0000ff">Texte</font> <font color="blue">Texte</font>
Texte
<font color="#ffff00">Texte</font> <font color="yellow">Texte</font>
Texte
<font color="#ff00ff">Texte</font> <font color="pink">Texte</font>
Texte
<font color="#666666">Texte</font> <font color="grey">Texte</font>
Texte
<font color="#000000">Texte</font> <font color="black">Texte</font>
Texte
<font color="#ffffff">Texte</font> <font color="white">Texte</font>
Texte

De la meme maniere pour mettre une couleur en arriere plan (que ca soit dans votre page ou dans une cellule d'une table), il faut utiliser l'attribut bgcolor :
<body bgcolor="#ff00ff">

Le tableau, ci dessous, fait par mes soins, vous aidera a comprendre le principe des couleur en hexa, il possede les 222 couleurs standard.


4. La taille du texte

La balise <font> est a nouveau sollicité, l'attribut de la taille est size.
La taille varrie entre 1 et 7, a l'invers des balise <h1> etc... 1 est le plus petit format de texte, et 7 est le plus grand.
On a donc :
Code :
Resultat :
<font size="1">Texte</font>
Texte
<font size="2">Texte</font>
Texte
<font size="3">Texte</font>
Texte
<font size="4">Texte</font>
Texte
<font size="5">Texte</font>
Texte
<font size="6">Texte</font>
Texte
<font size="7">Texte</font>
Texte

5. Les polices de charactere

Encore une fois, c'est dans la balise <font> que ca ce passe, l'attribut de la police est face.
Toute police est accepté sans exception, meme celle que vous venez de telecharger sur un site specialisé, mais faites attention :
On va partir du principe que vous venez de telecharger la police Blasphemy et que vous l'avez placé dans "C:/WINDOWS/Fonts/", si vous utilisé cette police sur votre page web sachez juste que les visiteurs doivent la posseder aussi pour la voir.
Que ce passe t'il si le visiteur ne l'a pas ? Il ne voie que la police standard a la place (Times New Roman dans presque tout les cas).
Donc n'utilisez que des polices deja integré a votre OS (Wind0ws/Linux/Un*x/...).

Au final au niveau code on a donc :
Code :
Resultat :
<font face="arial">Texte</font>
Texte
<font face="comic sans ms">Texte</font>
Texte
<font face="times new roman">Texte</font>
Texte
<font face="arial black">Texte</font>
Texte
<font face="verdana">Texte</font>
Texte
<font face="blasphemy">Texte</font>
Texte
(pour ceux qui ont)

6. Aligner le texte

Les alignements sont particulier car il n'y a pas de balise predefinie qui permet d'aligner du texte, souvant on vera <div align="right">Texte</div> ou encore <p align="right">Texte</p>.
Vous l'aurez compris c'est l'attribut align qui se charge de l'alignement, il est compatible avec quasiment toute les balises HTML.
Il y a un cas particulier pour le fait de centrer du texte ou tout autre chose dans une page, c'est la balise <center>.
Exemple :
Code :
Resultat :
<div align="left">Texte</div>
Texte
<p align="left">Texte</p>

Texte

<div align="center">Texte</div>
Texte
<p align="center">Texte</p>

Texte

<center>Texte</center>
Texte
<div align="right">Texte</div>
Texte
<p align="right">Texte</p>

Texte

<div>Texte de preference long (de maniere a ce qu'il prenne plusieur lignes) pour montrer l'action de l'attribut Justify au sein d'un paragraphe.</div>
Texte de preference long (de maniere a ce qu'il prenne plusieur lignes) pour montrer l'action de l'attribut Justify au sein d'un paragraphe.
<div align="justify">Texte de preference long (de maniere a ce qu'il prenne plusieur lignes) pour montrer l'action de l'attribut Justify au sein d'un paragraphe.</div>
Texte de preference long (de maniere a ce qu'il prenne plusieur lignes) pour montrer l'action de l'attribut Justify au sein d'un paragraphe.
En ce qui concerne justify il faudra sans doute reduire la taille de la fenetre pour voir la difference entre les deux cas, son role est de "justifier" le texte dans son paragraphe

NB :<p> est un paragraphe, il ne fait qu'ajouter un saut de ligne lors de sa fermeture et espace legerement plus le texte qu'avec un saut de ligne classique <br />

Ajoutons des couleur a notre site, grace au chapitre suivant sur les images !

Introduction         Sommaire         Les Images




11125 visiteurs depuis 03/2005

Il y a actuellement 1 visiteur
Dont 0 membre