piratage uniquement - comment creer un site(beh voila le language html)

Intro

HTML (Hyper-Text Mark-up Language)
Ce langage de programmation, actuellement dans sa version 4, se présente sous forme de lignes de codes (appelé code source), que les navigateurs Internet compilent afin de l'afficher. Une erreur dans le code peut donc provoquer un mauvais affichage de la page; néanmoins, c'est un langage assez souple, et surtout universel qui s’adapte à toutes les plates-formes.
En plus un simple éditeur texte vous permet de programmer, un éditeur html serrai le bienvenus puisque il vous facilitera le travail, moi j’utilise DreamWeaver et je vous le conseil.

¤ En-tête et Corps de page
Schématiquement, le code source d'une page web se divise en deux parties principales: la première, l'En-tête (en-capsulée par les balises "<Head></Head>") contient le titre de la page, les mots clés, scripts, styles, appels à des fichiers externes... etc Les éléments de l'en-tête sont invisibles lors de l'affichage dans un navigateur Internet, à l'exception du titre qui apparaît dans la barre du haut.

La seconde partie, le Corps de la page (encapsulé par les balises "<body></body>") contient tout ce qui est visible lors de l'affichage de la page, textes, images, tableaux, animations... etc Contrairement au reste du code source qui obéit à certaines règles dans l'organisation des balises, cette partie est laissée au libre arbitre du créateur de la page.

Schéma d'une page html avec un contenu vide :
<html>
<head>
<title>Titre de la page </title>
</head>
<body>
le corps de la page serra affiché
</body>
</html>

¤ Création d’un fichier html grâce à un éditeur texte
Pour cela rien de plus simple, ouvrez votre éditeur - Ecrivez les codes Html suivants:
<HTML>
<HEAD>
<TITLE>mon fichier html</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
- Enregistrez le fichier avec l'extension .html ou .htm
- Cliquez dessus et vous verrez une page blanche ouverte par votre navigateur.
Normalement vous avez compris, alors maintenant il ne vous reste plus qu’a remplir votre page avec du texte, images, tableaux ... etc.

Le texte
Tout document Html contiendra en majorité du texte. Voyons comment l'agrémenter par quelques balises élémentaires.

Texte en Gras [Bold]	<B>...</B> ou <STRONG>...</STRONG>
Texte en Italique [Italic]	<I>....</I> <EM>....</EM>
Taille de caractère [Font size]	<FONT SIZE=3>...</FONT> (3 la taille par défault)
Couleur de caractère [Font color]	<FONT COLOR="#000000"></FONT> (#000000=couleur noir.)
A la ligne [Line break]	<BR>
Commentaires [Comments] ne s'affiche pas.	<!-- ..... -->

Exemple :
Ouvrir l'éditeur de texte
<HTML>
<HEAD><TITLE></TITLE></HEAD>
<BODY>texte simple<BR>
<B>Texte en gras</B><BR>
<STRONG>un autre texte en gras</STRONG><BR>
<I>texte en italique</I><BR>
<EM>un autre texte en italique</EM><BR>
<B><I>texte en gras et en italique</I></B><BR>
<FONT SIZE=10>texte</FONT>
<FONT COLOR="#ff0000">en rouge</FONT>

</BODY>
</HTML>

Ouvrez avec votre navigateur :
Voici le résultat de l'exemple

Remarques:
-Un browser ne tient compte que d'un seul espace entre les mots les saut de ligne ne sont pas valide. Ainsi pour lui :
<FONT SIZE=5>texte</FONT>
<FONT COLOR="#ff0000">en rouge</FONT> est équivalent à
<FONT SIZE=5>texte</FONT><FONT COLOR="#ff0000">en rouge</FONT>

Voici les codes des couleurs basiques :
Bleu #0000FF
Vert #00FF00
Blanc #FFFFFF
Rouge #FF0000
Jaune #FFFF00
Gris #CCCCCC
Noir #000000

- Voici les autres tag ou balise qui embellirant vos textes

° Le tag <BLOCKQUOTE>...</BLOCKQUOTE> introduit une citation.Il fait un léger retrait à gauche ou à droite.

Voici un texte avec blockquote. Remarquez le retrait.

° Vous savez déjà que les browsers ne reconnaissent qu'un espace entre les mots. Ce qui peut se révéler gênant dans certaines situations.
La balise <PRE>...</PRE> affiche un texte dit pré formaté. Le browser prend ainsi en compte tous les espaces et sauts de ligne définis à l'écran.

° Le tag <ADDRESS>...</ADDRESS> pour indiquer une adresse.

° Le tag <U>...</U> souligne le texte.
Evitez le souligner des éléments de texte pour lui donner de l'importance. On préfèrera la mettre en gras ou dans un format ou une couleur de police différent. Il ne faut donc pas en abuser sinon on pensera que c'est un lien (vous verrez ça plus tard).

° Les tags <SUB>...</SUB> et <SUP>...</SUP> placent le texte respectivement en indice et en exposant.
Ainsi, <SUB>un</SUB>deux<SUP>trois</SUP> aura comme résultat
_undeux^trois

° Pour aligner du texte, on a utilisé l'attribut ALIGN ou le tag <CENTER>. Il existe une balise permettant d'aligner différents éléments. C'est le tag :
<DIV align=left>...</DIV> texte à gauche.
<DIV align=center>...</DIV> texte au centre.
<DIV align=right>...</DIV> texte à droite.

° Les tags pour titres et listes ( vous ferrez une tables des matières par exemple)

Elément de liste [List items] <LI> Voici un élément de la liste.

Liste non-ordonnée sans numérotation [Bullet list] <UL></UL>
Exemple:
<ul><li> Mas hax <li> Staan <li> Brain </ul>

Liste ordonnée avec numérotaion [Numbered list] <OL></OL>
exemple:
<ol><li>Mas hax
<li> Staan
<li> Brain </ol>

Paragraphe [Paragraph] <P></P> Saut de ligne, insérer une ligne vierge et commencer
un paragraphe.

_______________________________________________________

¤ Liens hypertextes
Un lien hypertexte est comme son nom l’indique un lien entre deux pages ou fichiers, programmes... etc. ce dernier alors sert à vous transporter directement juste en cliquant dessus.

Syntaxe :
<A HREF="URL ou adresse">ici un texte</A>
Une url est par exemple http://www.hackersland.tk

-Attribut targets
Ce sont des attributs qui permettent de modifier ou s'affiche le lien.
Si on veut affiché le lien sur une autre page alors on ajoute target="_blank" pour l'affiché on haut de la page c'est target="_top".
Vous pouvez même en créer de nouveaux cela vous serra utile si vous utiliser des frames. C'est en bas les frames

- Les ancres
Les ancres sont des lien qui permettent de se déplacer un l’intérieur de la page même.

Syntaxe
<A NAME="lacible">...</A> vous placerez cette ancre à l’endroit ou vous voulez que la page commence.
Pour accéder à cette ancre il vous faudra un lien simple avec une petite modification, vous ajoutrez # à l'emplacement (# = Alt Gr+3)

Exemple :
Pour accéder à l’ancre la cible en fera ce lien <A HREF="#lacible">accéder à la cible</A>

> Accéder au chapitre précédant.

______________________________________________________

¤ Les images
Aujourd’hui il est impossible de concevoir un site sans images cela donnera un effet raz à votre site, seulement vos images ne devrant pas êtres lourde (grande) cela augmente le chargement donc contentez vous de faire de petite image ou encore de diviser votre image en plusieurs images seulement ne faites pas un puzzle non plus lol.

Le code Html est :
<IMG SRC="Adressedel'image"> Afficher l'image qui se trouve à l'adresse...

La balise image possède de nombreux attributs :
Texte alternatif alt="****" pour affiché un texte genre commentaire au survol de l’image ou si elle ne s’affiche pas.

- Dimensions
width=? largeur
height=? Hauteur
border=? Bordure

Remarque: la taille est en pixel.

- Alignement
align=top
align=center
align=botton
align=left
align=right

Exemples :
Si vous ajouter du texte à coté de votre image celui si serra placer soit :
-en haut <IMG SRC="image.gif" align=TOP>texte
-en millieu <IMG SRC="image.gif" align=CENTER>texte
-en bas <IMG SRC="image.gif" align=BOTTOM>texte

- Faire un lien sur image
Les balises sont :
<A HREF="emplacement.html"><IMG SRC="image.gif"></A>

- Insérez une ligne horizontale avec <HR>

Exemple :
Vous lui associer ces attributs
<HR size=?> Epaisseur
<HR width=?> Largeur
<HR align=left> Alignement gauche
<HR align=right> Alignement droite
<HR align=center> Alignement centré

__________________________________________________________

¤ Modifier l’arrière plan ( les attributs par défaut)
Le langage Html permet d'agrémenter la présentation du document d'un arrière-plan [background] coloré ou composé d'une image. Ce qui lui apporte un élément artistique.

La balise à utiliser :
Couleur d'arrière-plan <BODY BGCOLOR="#******">
Pour l’image :
<BODY BGCOLOR="adresseimage">

Vous pouvez aussi modifier la couleur du texte et des liens par défaut :
Couleur de texte <BODY TEXT="#******">
Couleur de lien <BODY LINK="#******>
Lien visité <BODY VLINK="#******>
Lien actif <BODY ALINK="#******>

Exemple:
<BODY BGCOLOR="#000000" TEXT="#FFFFFF"> l'arrière plan est en noir et le texte et en blanc.

____________________________________________________________

¤ Les tableaux
Un tableau se compose de lignes et de colonnes qui forment les cellules du tableau.

Les balises de base sont donc :
Définition du tableau [Table] <TABLE></TABLE> Début et fin de tableau
Définition d'une ligne [Table Row] <TR></TR> Début et fin de ligne
Définition d'une cellule [Table Data] <TD></TD> Début et fin de cellule

Exemple:
<TABLE>
<TR><TD>cellule1</TD><TD> cellule 2</TD></TR> première ligne.
<TR><TD> cellule 3</TD><TD> cellule 4</TD></TR> deuxième ligne.
</TABLE>

On voit sur l'exemple que le tableau a deux lignes <TR></TR> et 2 colonnes <TD></TD> ce qui fait quatre cellules

¤ Les attributs du tableau
Pour nommer votre tableau ajouter "name" à la balise table : <TABLE name="nondetable">

- les bordures :
Vous pouvez mettre des bordure à votre tableau pour cela simplement :
" Border " à la balise table ce qui donne <TABLE border="1">
La balise <TABLE bordercolor="#CCCCCC" border="1">
Pour donner une couleur à vos bordures mettez "bordercolor"
Pour donner une couleur à l'arrière plan de la table <TABLE bgcolor="#000000">
Ou mettre aussi une image d'arrière plan <TABLE bgcolor="image.jpg">

- La taille :
Ajouter les attributs :
width="X" largeur
height="X" hauteur

cellpadding="X" vous permet d'agrandir la table par à port au cellules.
Cellspacing="X" vous permet d'agrandir la table par à port au cellules.

Remarque: Pour modifier (traiter) les cellule chaque une seul utilisez ces attributs pour la balise de cellule c'est-à-dire <td></td>

____________________________________________________________

¤ Les frames
Ça consiste à diviser la page en plusieurs fenêtres, gain d'espace mais aussi gain de temps notre site Hackers Land en est le parfait exemple, vous avez certainement remarqué le frame sur qui se charge. Et cela grâce a l'attribut " target " on y reviendra plus tard.

Les balises
<frameset></frameset>

Pour affiché les fenêtres en horizontal en ajoute l'attribut " rows " ce qui donne <FRAMESET ROWS="X">
Pour affiché les fenêtres en verticales en ajoute l'attribut " cols " ce qui donne <FRAMESET COLS="X">

Exemple :
<HTML>
<HEAD></HEAD>
<FRAMESET ROWS="30%,70%">
<FRAME src="UntitledFrame-9">
<FRAME src="UntitledFrame-10">
</FRAMESET>
</HTML>

les deux fenêtre sont séparer par un trait horizontal puisque l'attribut 'Rows' est ajouté.
<FRAME src="UntitledFrame-9"> désigne la pages à affiché dans le première fenêtre
<FRAME src="UntitledFrame-10"> la page à affiché dans la deuxième fenêtre.

Remarque :
Les balises <frameset></frameset> remplace <body></body>.

Sachez aussi que vous pouvez séparer la page en plusieurs fenêtres 3 ou 4 même plus, seulement éviter de faire une mosaïque.

Exemple :
Pour séparer la page en trois parties.

Explications:
Au début de l'exemple nous avant créer un frame avec l'attribut 'Rows' ce qui a deviser horizontalement la page en deux fenêtres, ensuite on ajouter un autre frame cette fois ci en verticale qui à deviser la deuxième fenêtre en deux aussi.
Ce qui fait qu'on à trois fenêtres.

2ème exemple :
<FRAMESET ROWS="12%,38%,50%">
<FRAME src="UntitledFrame-24">
<FRAME src="UntitledFrame-25">
<FRAME src="UntitledFrame-26">
</FRAMESET>

Explication :
Ici la page est deviser en trois partie par des frame horizontaux et pour cela on à juste ajouté une autre donnée 50% ce qui veut dire que la premier page aura 12% d'espace sur la page, la seconde aura 38% et la dernière 50% l'addition égale à 100% c'est-à-dire la page toute entière.

¤ Les autres attributs des frame

- Les bordures
frameborder="NO"> les bordures ne sont pas affichées.
border="5" bordercolor="#CCCCCC"> changer la couleur des bordure est leurs tailles dans l'exemple border= '5'.

- Les barres de défilements ( scrollbar )
scrolling="no/yes/auto">

- Le nom
on peu attribuer un nom à chaque frame pour faire un " target "
Pour cela rein de plus simple <FRAMESET ROWS="12%,38%,50%" name "centre">

- Les targets
Si on veux par exemple faire un lien qui s'affichera sur la deuxième fenêtre sans recharger la première alors on ajoute au lien le target="centre" ce qui signifie que le lien serra fiché sur la fenêtre centre.
C'est ce que j'ai fait sur ce site.