naheulbeuk
Modérateur
Inscrit le: 07 Juin 2005
Messages: 6304
Localisation: dans un coin paumé au fin fond de la bretagne profonde...
|
 Posté le: Sam Nov 05, 2005 3:19 pm Sujet du message: Apprendre le HTML (naheulbeuk) |
 |
|
Le HTML
HyperText Markup Language
Le HTML est un language utilisé pour fabriquer des pages web statiques. Il est la base de plusieurs languages webs (PHP,...). Il peut s'éditer directement depuis le bloc note de windows ou par des programmes spécialisés.
Guide
Créer sa première page web est trés simple, nous allons voir les 3 étapes qui permettent rapidement et efficacement de démarrer son site web :
 étape 1 Création d'un répertoire de travail
Nous allons commencer par créer un Dossier de travail dans lequel nous mettrons tous les fichiers correspondants à notre site web. Pour cela ouvrez votre gestionnaire de fichiers (celui qui vous sert à voir la liste de vos documents). Là où cela vous convient cliquez sur le bouton droit de la souris et choisissez Nouveau et Dossier. Vous voyez apparaître un nouveau dossier, il vous reste à changer le nom.
étape 2 Création d'un nouveau fichier
De la même façon que nous avons créer notre répertoire nous allons créer un document Nouveau Document.
La première page d'un site web s'appelle traditionellement index.htm.
 Attention: Il est important de bien mettre les noms en minuscules, cela a de l'importance lorsque vous voudrez publiez votre site sur internet. index est bon, mais Index, INDEX... ne le sont pas.
Attention: si vous avez correctement saisi index.htm, vous devez avoir le petit icone de internet explorer qui s'affiche devant le nom du fichier, si ce n'est pas le cas, c'est que votre gestionnaire de fichiers est configuré pour ne pas montrer les extensions de fichier (il a ajouté .txt à la fin du nom mais vous ne le voyez pas, pour y remédier, rendez vous dans le menu Outils/Options... et désélectionnez la case Masquer les extensions de fichier)
étape 3 Edition du fichier dans un éditeur de texte
Nous allons a présent éditer la page que l'on vient de créer (pour le moment, elle est vide), pour cela nous avons besoin d'un éditeur de texte comme le bloc-notes (notepad en anglais). Dans le menu Démarrer de windows, vous allez trouver le menu "executer..."
tapez notepad
Une fois le notepad ouvert, allez dans le menu fichier, et ouvrez index.htm
il ne vous reste plus qu'à saisir votre texte (programme)
Vous disposez donc d'un repertoire avec un fichier index.htm, c'est votre page d'accueil. Créez de la même façon une page nommée page1.htm (attention pas de majuscule), une page2.htm, etc....selon votre nombre de pages !
Un site web est ni plus ni moins qu'un ensemble de pages html contenant du texte et des liens pour permettre la navigation d'une page à une autre.
Là, on va voir comment écrire un programme en HTML avec le bloc notes !
La structure
Le HTML se comporte de plusieurs balises (=tags), qu'on ouvre et qu'on ferme :
| Code: | <HTML> <!-- on ouvre -->
</HTML> <!-- on ferme --> |
Toute page bien écrite, devrait avoir 3 balises au moins comme ceci :
| Code: | <HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>
|
La balise HTML déclare que la page est codée en HTML
La balise HEAD déclare l'en-tête de la page, il ne sera pas visible, c'est là qu'on insert le titre de la page et d'autres informations (auteur, sujet ...)
La balise BODY déclare le début de la page, c'est ici qu l'on écrira l'ensemble de code qui sera affiché dans le navigateur (visible donc)
TAGS
Vous allez en tapant votre texte avoir besoin de quelques tags qui vont vous permettre de mettre en forme et de présenter votre document, voici quelques tags indispensables:
h1, h2 .. h6 : ces tags permettent de modifier la taille de votre texte, du plus gros h1 au plus petit h6.
b : pour écrire en gras
font : pour changer la taille (eg: <font size=+2> ) ou la couleur (eg: <font color=red> )
div : pour centrer un texte (eg: <div align=center> )
p : permet de définir un paragraphe
pre : la présentation du texte contenu dans une section pre ne sera pas modifiée, en effet en html une succesion de blanc ou de retour à la ligne sera considérer comme un seul blanc sauf a l'intérieur d'nue section pre, cela est très pratique pour présenter un code de programme
n'oubliez pas de toujours refermer un tag ouvert ( eg: </font> ).
IMAGES :
Pour égayer votre site il est indispensable d'y faire apparaitre des images (mais pas trop), pour afficher une image au milieu de votre texte c'est très simple, il suffit d'insérer la ligne suivante : <img src="nom du fichier">.
Si cette ligne est particulièrement simple, il est néanmoins important d'y ajouter deux paramètres pour optimiser l'affichage dans le navigateur : la hauteur et la largeur, ce qui donne finalement :
| Code: | | <img src="nom du fichier" height="hauteur" width="largeur" > |
TABLEAUX
C'est maintenant que ça se gate, lorsque vous souhaitez avoir une mise en page un peu sympa, le mieux c'est d'utiliser des tableaux.
Un petit exemple:
| Code: |
<table width="80%">
<tr>
<td valign=top>
cell 1
</td>
<td align=center>
cell 2
</td>
</tr>
<tr>
<td colspan=2>
cell 3
</td>
</tr>
</table>
|
Explications : le tag table permet de débuter un tableau, tr une ligne et td une cellule. Les attributs intéressants sont width pour table et td pour donner la largeur du tableau par rapport à la page ou de la cellule dans la ligne.
border permet de spécifier la bordure des cellules, par défaut il n'y en a pas ( i.e: border=0 ).
valign et align permettent de gérer l'alignement vertical et horizontal.
l'attributs colspan specifie que la cellule aura la largeur de deux cellules des autres lignes. ( rowspan s'utilise de la même manière pour les colonnes )
align center = texte au milieu de la cellule
align top = texte à l'extrémité de la cellule
LIENS
L'une des particularités d'un document web est de pouvoir cliquer sur une partie de texte ou une image et d'être renvoyé vers une autre page, c'est un lien.
Pour cela il suffit d'encadrer le texte ou l'image avec le tag a:
<a href="page_suivante.html">vers la page suivante</a>
Un attribut utile est target, il permet de spécifier ou la page pointée sera affichée, ex: target=princ affichera le résultat du lien dans la fenêtre principale.
Attention si vous voulez faire un lien vers un autre site n'oubliez pas de mettre l'addresse complète, c'est à dire précédée de http:// , ex:
| Code: | | <a href="http://www.dualforum.com">forum informatique</a>. |
 Il ne reste plus qu'à héberger votre site et donc vos pages ! Il y a des hébergeurs web gratuits et d'autres payants. Choisissez (recherche google). Je vous conseille voila.fr qui propose simplement de télécharger vos pages créées sur notepad sur un emplacement de 100Mo ! C'est simple et gratuit ! SInon il y a notre sponsor DualMedia !  |
|
