Pierre Lafaye de Micheaux
 
Français  English 

Création d'une page HTML simple

There are no translations available.

Outils nécessaires:

  1. un éditeur de texte: wordpad.exe (ne pas utiliser le bloc-notes notepad.exe) sous Windows, emacs sous Unix/Linux;

  2. un navigateur: Internet explorer ou Firefox;

  3. de la motivation et quelques connaissances de base dans l'utilisation d'un ordinateur.

Remarque: Il y a deux avantages à utiliser un éditeur de texte simple pour faire des pages web par rapport à un logiciel spécialisé: (1)-la mise à jour par des personnes différentes d'une année sur l'autre est grandement facilitée et (2)-les prochains navigateurs seront bien plus stricts quand à la validité du code HTML et refuseront d'afficher des pages contenant des erreurs, on a donc tout intérêt à utiliser du code HTML standard.

Une page web, c'est quoi?

Il s'agit d'un sorte de petit programme (du style Latex) écrit dans un langage appelé le HTML (HyperTextMarkupLanguage).
Ce "programme" possède toujours la syntaxe suivante:

<HTML>
<HEAD>
<TITLE>Votre titre</TITLE>
</HEAD>
<BODY>
C'est ici que l'on écrit tout le reste du "programme".
</BODY>
</HTML>

Votre premier programme HTML

Vous devez commencer par ouvrir un des éditeurs de texte mentionné plus haut.
Ensuite, faites un copier-coller du bout de code juste au dessus: copier ce bout de code dans la fenêtre de votre éditeur.
Puis il faut enregistrer ce que vous venez de faire en utilisant un format de Type: Texte seulement. Choisissez comme nom de fichier: index.htm
Remarque: Vos noms de fichiers ne doivent pas dépasser six lettres, doivent être en minuscule et doivent se terminer par l'extension .htm

Maintenant, vous pouvez voir le résultat (de la même façon que sous Latex où l'on tape du code Latex et ensuite on peut voir le résultat avec xdvi ou xpdf ou acrobat reader); pour cela aller dans votre navigateur et aller dans le menu Fichier, puis Ouvrir (ou Consulter une page) et ouvrez le fichier index.htm que vous venez de créer.
Une autre possibilité est de double-cliquer sur le fichier index.htm.
Le résultat devrait être le suivant:

--Début de ce que vous voyez--

Votre titre

C'est ici que l'on écrit tout le reste du "programme".

--Fin de ce que vous voyez--

Si tout fonctionne jusqu'ici vous venez de créer votre première page HTML !
Maintenant, il ne reste plus qu'à compléter le corps de votre programme, c'est-à-dire rajouter tout le texte que vous voulez voir apparaitre à l'écran, entre les balises (je vais expliquer ce terme un peu plus loin) <BODY> et </BODY>.

Comment programme t-on en HTML?

Le HTML est une façon de mettre en forme un texte.
L'idée est la suivante: on tape le texte que l'on veut et ensuite on utilise ce que l'on appelle des balises HTML pour mettre en forme des parties de notre texte, par exemple pour que certaines phrases apparaissent en gras, que certains mots soient en italique, etc ...
En général, il y a une balise de début et une balise de fin, de la forme:

<BALISE ATTR1="valeur1" ATTR2="valeur2"> texte qui doit être mis en forme </BALISE>

où BALISE doit être remplacé par le code de la balise que l'on souhaite (balise pour mettre en gras, balise pour mettre en italique, etc ...).
Certaines balises ne prennent pas de "fin de balise".
Les termes ATTR désignent ce que l'on appelle les attributs d'une balise. Certaines balises n'ont pas d'attributs, d'autres en ont plusieurs. Il faut bien sur là aussi remplacer les ATTRi par les noms des attributs de la balise que l'on utilise, et leur donner des valeurs.

Vous pouvez essayer d'utiliser les balises <B> et </B> (qui permettent de mettre en gras) dans le bout de code que vous avez utilise plus haut (fichier index.htm):
Remplacez
C'est ici que l'on écrit tout le reste du "programme".
par
C'est <B>ici</B> que l'on écrit tout le reste du "programme".

Puis enregistrez vos changements, et ouvrez a nouveau votre fichier index.htm dans votre navigateur (ou bien cliquez sur Recharger ou Reload, s'il était encore ouvert).
Vous devriez voir cette fois que le mot "ici" apparait maintenant en gras.
Remarque: on peut écrire les balises en minuscule ou majuscule, ça n'a pas d'importance, mais je vous conseille de les écrire en majuscule pour bien les distinguer.

Pour finir

Maintenant vous devriez avoir compris les principes de base de la programmation en HTML.
Tout ce qu'il vous reste à faire est d'apprendre les nouvelles balises dont vous aurez besoin: cliquez ICI

Une autre façon très intéressante de procéder est la possibilité de voir le code source de n'importe quelle page HTML que vous consultez sur internet (par exemple celle de cette page!). Pour cela, cherchez dans les menus de votre navigateur "Afficher le code source". Vous pourrez ainsi apprendre de nouvelles balises ou modifier une page qui vous intéresse pour l'adapter a vos besoins.

Last Updated on Friday, 28 January 2011 03:04  

Curriculum

Advertising