Le HTML (Terminé)

1. Présentation

Le HTML (abréviation de "HyperText markup Language") est le langage web qui vous permet de créer la base de votre site web. Il existe bien d'autres langages qui, après, vous aideront à améliorer votre site :

PHP (Hypertext Preprocessor)
Javascript
Flash
SQL (Structure Query Language)
CSS (Cascading StyleSheet)

Le format d'un fichier HTML est tout simplement ".html"

2. Les programmes

Pour coder uniquement du HTML, vous aurez besoin de deux programmes :

Notepad++
FileZilla

Notepad++ est un programme gratuit (d'où le ++) dans lequel vous coderez votre site. Vous pourriez utiliser uniquement le bloc-note pour le faire mais notepad colorise votre code (Non, non ce n'est pas pour une question d'esthétique ^^, cela facilitera votre relecture et vous permet de trouver des fautes de frappe) .

Filezilla vous permettra d'envoyer vos fichiers sur votre site internet.

Téléchargement :
http://www.01net.com/telecharger/windows/Internet/ftp/fiches/17966.html
http://www.01net.com/telecharger/windows/Internet/editeur_de_site/fiches/29119.html

Note :
Ces deux logiciels existent en version portable (pour votre clé USB) ce qui peut aider les personnes qui ne travaillent pas souvent sur le même ordinateur.

3. Les bases

Tout d'abord il va falloir indiquer au navigateur qui va lire le document que nous utilisons du HTML :

Code:: <html>

</html>

Bon maintenant si on fait lire ce fichier par un navigateur, ça ne donnera rien, logique, votre document est "vide".
Le contenu de votre "<html>" va se diviser en deux parties :

<head> va contenir toutes les informations concernant votre document, rien par rapport à l'affichage du navigateur (excepté le titre).
<body> va lui, contenir tout ce que votre navigateur va afficher.

Voici donc à quoi peut ressembler un document de base qui affichera sur votre navigateur "Bonjour" :

Code:: <html>
<head>
<title>Mon document</title>
</head>
<body>
Bonjour !
</body>
</html>

4. Mise en forme du texte

Maintenant que vous savez afficher du texte, nous allons apprendre à le mettre en page.

Texte en gras

Code:: <b>TEXTE</b>

Texte souligné

Code:: <u>TEXTE</u>

Texte italique/informatif

Code:: <i>TEXTE</i>

Pour ceux qui ne sont pas surs d'avoir tout compris, un texte souligné, en gras et en italique donne ceci :

Code:: <b><u><i>TEXTE</i></u></b>

Attention à refermer vos balises dans l'ordre ou vous les ouvrez.
Pour ceux qui connaissent le BBCode, il faut dire que à ce niveau les deux langages se ressemblent beaucoup.

5. Mise en page

La mise en page est un très gros morceau. Par mise en page, je veux dire le placement des paragraphes, alignement, etc... Je ne m'y attarderai pas parce que c'est un sujet dont nous discuterons plus dans la partie CSS.

5.1 Les tableaux

Certaines personnes (une minorité) utilisent les tableaux pour créer leurs sites web exemple tout simple :
Tableau de 3 colonnes de large et 2 lignes de haut.
La première lignes est fusionné sur 2 colonnes et sert pour mettre le titre et la bannière. La deuxième ligne sert, à gauche pour mettre le menu et à droite le contenu.

Illustration :

Bannière
Menu	Contenu

L'introduction sur les tableaux étant faîte, passons à la pratique.

pour ouvrir un tableau, nous utiliserons :

Code:: <table>

ensuite, pour ajouter une ligne :

Code:: <tr>

et finalement ajouter une cellule dans une ligne :

Code:: <td>

et une cellule de titre :

Code:: <th>

Maintenant que vous savez créer un tableau, il serait bien de savoir fusionner des cellules entre elles pour faire la cellule de la bannière par exemple :
fusion horizontale :

Code:: <td colspan="X">

fusion verticale :

Code:: <td rowspan="X">

Remplacez X par le nombre de cellules a fusionner.

Le code du tableau d'avant donne donc ceci :

Code:: <table>
<tr>
<td colspan="2">Bannière</td>
</tr>
<tr>
<td>Menu</td>
<td>Contenu</td>
</tr>
</table>

5.2 Les blocs

C'est sur cette partie que je ne m'attarderai pas trop parce qu'elles utilise des fonctions CSS qui ne nous intéressent pas pour le moment. Le but de cette façon de mise en page est de créer plusieurs blocs de différent largeur et de différente hauteur que l'on placera dans notre site. Ensuite on les organisera à l'aide du CSS et nous obtiendrons un site autant bien qu'avec un tableau et 10 fois plus clair.

Je vais vous donner uniquement le code HTML puis je vous expliquerai dans mon futur tuto sur le CSS comment améliorer ce code.

Créer un bloc :

Code:: <div>

Voici donc le code HTML :

Code:: <div id="header">Bannière</div>
<div id="menu">Menu</div>
<div id="contenu">Contenu</div>

L'attribut "id" permettra à CSS d'identifier le bloc.

6. Fin

Je pense avoir fait le tour du sujet assez rapidement. Bien sur je pense qu'un débutant aura plein de questions après avoir l ce tuto. Merci de les poser en répondant à ce tuto et je me ferai un plaisir de vous répondre puis d'améliorer mon tuto.
Merci de votre lecture.

Merci
C'est tres interessant

De rien ^.^

» HTML : les tableaux