Crée sa propre page de hack !

14-04-2012 à 14:29:37
Je vous présente un tuto comment crée sa propre page de hack !


Organisation d’une page

Eléments généraux

<html> Définit le contenu HTML d'un document et nécessite un marqueur de fin.
Règle : <html>.....</html>

<head> Définit l'en-tête d'un document HTML et nécessite un marqueur de fin.
Règle : <head>.....</head>

<title> Définit le titre d'un document HTML et nécessite un marqueur de fin.
Règle : <title>.....</title>

<body> Définit le corps du document HTML et nécessite un marqueur de fin.
Règle : <body>.....</body>

Exemple de la base d'une page HTML :

<html>
<head>
<title> Titre de votre page </title>
</head>

<body>

Insérer vos textes, images, tableaux...

</body>
</html>

Définir une couleur de fond pour la page

<body bgcolor=""> définit une couleur de fond et nécessite un de marqueur de fin.
Règle : <body bgcolor=blue>.....</body>

Exemple :

<body bgcolor=blue>.....</body>


Définir une image de fond pour la page

<body background="chemin et nom du fichier image"> définit une image de fond et nécessite un de marqueur de fin.
Règle : <body background=image.gif>.....</body>

Exemple :

<body background=image.gif>.....</body>




Formatage du texte

Formater un paragraphe

<p align=""> définit le début d'un paragraphe et nécessite un marqueur de fin.
Règle : <p align="">.....</p>

Exemple :

<p align="left">Votre texte aligné à gauche</p>

Votre texte aligné à gauche, ce qui nécessite plusieurs lignes pour l'exemple de mise en forme du paragraphe.

<p align="right">Votre texte aligné à droite</p>

Votre texte aligné à droite, ce qui nécessite plusieurs lignes pour l'exemple de mise en forme du paragraphe.

<p align="center">Votre texte centré</p>

Votre texte centré, ce qui nécessite plusieurs lignes pour l'exemple de mise en forme du paragraphe.

<p align="justify">Votre texte justifié</p>

Votre texte justifié, ce qui nécessite plusieurs lignes pour l'exemple de mise en forme du paragraphe.

Forcer un retour à la ligne

<br> définit la fin d'une ligne mais ne nécessite pas de marqueur de fin.
Règle : <br>

Exemple :

Votre texte avec un saut de ligne forcé,<br>ce qui nécessite plusieurs lignes pour l'exemple de mise en forme du paragraphe.

Votre texte avec un saut de ligne forcé,
ce qui nécessite plusieurs lignes pour l'exemple de mise en forme du paragraphe.
Insérer un espace insécable

&nbsp; définit un espace insécable dans un texte, notamment lorsqu'on utilise les deux points (, le point virgule ou pour séparer les milliers dans un nombre.
Règle : &nbsp;

Exemple :

Votre texte avec un espace insécable, pour un nombre 10&nbsp;000 euros.

Votre texte avec un espace insécable, pour un nombre 10 000 euros.



Formatage du texte

Formater un texte en gras

<b> définit un texte en gras et nécessite un marqueur de fin.
Règle : <b>.....</b>

Exemple :

Votre texte en <b>gras</b>

Votre texte en gras
Formater un texte souligné

<u> définit un texte souligné et nécessite un marqueur de fin.
Règle : <u>.....</u>

Exemple :

Votre texte <u>souligné</u>

Votre texte souligné
Formater un texte en italique

<i> définit un texte en italique et nécessite un marqueur de fin.
Règle : <i>.....</i>

Exemple :

Votre texte en <i>italique</i>

Votre texte en italique
Formater un texte rayé

<strike> définit un texte en italique et nécessite un marqueur de fin.
Règle : <strike>.....</strike>


Exemple :

Votre texte <strike>rayé</strike>

Votre texte rayé
Afficher une formule (indice)

<sub> définit une formule en indice et nécessite un marqueur de fin.
Règle : <sub>.....</sub>


Exemple :

Votre texte en indice : H<sub>2</sub>O

Votre texte en indice : H2O
Afficher une formule (exposant)

<sup> définit une formule en exposant et nécessite un marqueur de fin.
Règle : <sup>.....</sup>

Exemple :

Votre texte en indice : Fe<sup>+</sup>

Votre texte en exposant : Fe+

Formater la taille du titre

<H1> définit la taille de vos titres et nécessite un marqueur de fin. Par défaut, 6 tailles de titres sont prédéfinies, de H1 à H6, cette dernière étant la plus petite.
Règle : <H1>.....</H1>

Exemple :

<h1>Votre texte</h1> Grand


<h2>Votre texte</h2> Un peu grand


<h3>Votre texte</h3> Normal


<h4>Votre texte</h4> Petit


<h5>Votre texte</h5> Très petit


<h6>Votre texte</h6> Minuscule



Formatage du texte


Formater une police de caractère

<font face=""> définit le type de police que l'on souhaite et nécessite un marqueur de fin.
Règle : <font face="">.....</font>

Exemple :

<font face="times new roman">Votre texte</font>


<font face="symbol">Votre texte</font>


<font face="arial">Votre texte</font>


Formater la taille d'une police de caractère

<font size=""> définit la taille d'une police en valeurs relatives (+x ou -x, x variant entre 1 et 7) et nécessite un marqueur de fin.
Règle : <font size="">.....</font>

Exemple :

<font size="+3">Votre texte</font> Très Grand

<font size="+2">Votre texte</font> Grand

<font size="+1">Votre texte</font> Normal

<font size="0">Votre texte</font> Minuscule

<font size="-1">Votre texte</font> Petit

<font size="-2">Votre texte</font> Minuscule

<font size="-3">Votre texte</font> Minuscule



Formater la couleur d'une police de caractère

<font color=""> définit la couleur d'une police et nécessite un marqueur de fin.
Règle : <font color="">.....</font>

Exemple :

<font color="black">Votre texte</font> Noir


<font color="gray">Votre texte</font> Gris


<font color="marroon">Votre texte</font> Marron


<font color="olive">Votre texte</font> Vert Kaki


<font color="green">Votre texte</font> Vert claire


<font color="teal">Votre texte</font> Bleu turquoise


<font color="navy">Votre texte</font> Bleu marine


<font color="purple">Votre texte</font> Violet


<font color="white">Votre texte</font> Blanc


<font color="silver">Votre texte</font> Gris claire


<font color="red">Votre texte</font> Rouge


<font color="yellow">Votre texte</font> Jaune claire


<font color="lime">Votre texte</font> Vert fluo


<font color="aqua">Votre texte</font> Bleu Turquoise fluo


<font color="blue">Votre texte</font> Bleu


<font color="pink">Votre texte</font> Rose



Insérer une image

Définir le chemin de l'image

<img src="?"> ajoute une image à votre page et ne nécessite pas un marqueur de fin.
Règle : <img src="?">

Exemple :


<img src="image.gif"> Entre les " " mettez l'url de l'image



Ajouter un cadre à l'image

<img src="?" border="x"> définit l'épaisseur du cadre de l'image
Règle : <img src="?" border="x">

Exemple :

<img src="image.gif" border="1">



<img src="image.jpg" border="5">



Mettre un commentaire à l'image


<img src="?" alt="je ce je veux"> Le texte s'affiche lorsque le curseur est sur l'image mais il remplace aussi l'image quand celle-ci ne peut être affichée.
Règle : <img src="?" alt="je ce je veux">

Exemple :

<img src="image.gif" alt="Une jolie corbeille de Windows">


Aligner une image

<img src="?" align="?"> aligne l'image
Règle : <img src="?" align="?">

Exemple :

<img src="image.gif" align="left"> A gauche


<img src="image.gif" align="right"> A droite


<img src="image.gif" align="center"> Au milieu




Formater une ligne


Définir une ligne de couleur

<hr color=""> ajoute une ligne à votre page et ne nécessite pas un marqueur de fin.
Règle : <hr color="">

Exemple :


<hr color="blue">


Définir la longueur d'une ligne


<hr width="%"> définit la longueur de votre ligne et ne nécessite pas un marqueur de fin.
Règle : <hr width="%">

Exemple :

<hr width="100%" color="blue">

<hr width="75%" color="blue">

<hr width="50%" color="blue">

<hr width="25%" color="blue">


Définir l'épaisseur d'une ligne

<hr size=""> ajoute une épaisseur ligne à votre page et ne nécessite pas un marqueur de fin.
Règle : <hr size="">

Exemple :

<hr size="1" color="blue">

<hr size="2" color="blue">

<hr size="3" color="blue">

<hr size="4" color="blue">


Définir l'alignement d'une ligne


<hr align=""> définit l'alignement de votre ligne et ne nécessite pas un marqueur de fin.
Règle : <hr align="">

Exemple :

<hr width="50%" color="blue" align=left> A gauche

<hr width="50%" color="blue" align=right> A droite

<hr width="50%" color="blue" align=center> Au milieu
Lacoste. Hackeur Anonymous