Débuter en HTML

Il ne s'agit pas ici d'élaborer un site web, mais seulement de se familiariser avec le langage de base qui permet d'élaborer les pages d'un site web.
Une page HTML ne peut être affichée correctement que par un logiciel navigateur.
Comme la finalité d'une page HTML est d'être consultée par des visiteurs (clients), il semble indispensable d'avoir des notions de base sur les serveurs de pages web.

Servir des pages web

Le serveur de pages web est obligatoirement doté d'une adresse IP et le plus souvent cette adresse est transformée "en clair" par les serveurs DNS (voir cette page).
Sur cette machine est installé un logiciel "serveur HTTP", le plus célèbre et le plus utilisé étant APACHE. Ce logiciel aménage un dossier à partir duquel il faudra déposer les pages HTML (hébergement des pages). Le protocole HTTP permet de transmettre aux navigateurs des clients les informations contenues dans ces pages.

Le serveur web peut être public, c'est-à-dire avoir une adresse IP publique visible de tous ; il fera donc partie de l'Internet.
Il peut aussi être privé, faisant partie d'un réseau quelconque de machines (invisibles depuis l'Internet) ; il fera alors partie d'un Intranet.

Les pages web peuvent être confiées à une entreprise (hébergeur) qui s'occupera de l'entretien et de la sécurité du serveur. Le serveur peut aussi être "local", mais dans ce cas, pour faire partie de l'Internet il doit être connecté en permanence avec une adresse IP fixe.

Chacune des pages web visibles sur l'Internet est accessible par une adresse unique (URL) dans laquelle figure aussi bien sûr l'adresse du serveur (voir cette page).

Pages statiques ou dynamiques

Le langage HTML pur crée des pages statiques, qui ne peuvent changer que par une intervention humaine ; c'est un langage de description de la page web. Les évolutions plus récentes (XML, DHTML) tendent à "faciliter" et à systématiser la construction d'un ensemble de pages, d'un site, d'un blog.

Le HTML a été normalisé en 1997 dans sa version 3.2 ; la dernière version 4 date de 1999. Les éditeurs HTML ne sonr pas tous conformes aux normes du consortium W3C.

Pour animer les pages, on utilise souvent des images animées : les images GIF ; c'est une image contenant plusieurs images défilant à une cadence choisie ; la construction d'une image GIF nécessite un logiciel particulier (Gif Animator).

Des logiciels comme Shockwave ou Flash permettent de créer de véritables animations multimedia ; pour les visualiser, le navigateur du client devra être mis à jour en installant un composant supplémentaire (plugin) ou une visionneuse (player).

Pour dynamiser les pages HTML, on peut aussi utiliser des scripts (petits programmes ou routines) qui s'incluent dans la page HTML ; ainsi JavaScript et VBScript sont des langages de programmation qui se fondent facilement dans une page web (voir ici quelques exemples de scripts).

Le serveur de pages web peut aussi faire appel à de véritables langages de programmation (PHP, PERL, ASP) ou même à des bases de données (MySQL) par l'intermédiaire d'une passerelle qui doit être installée ; le serveur de pages web peut alors transmettre des requêtes à la passerelle qui renvoie alors au serveur une autre page HTML.
(un moteur de recherche interne à un site est un exemple, parmi tant d'autres, de ce type de fonctionnement)

Les outils

Un éditeur de texte pur
le bloc-notes (notepad.exe) de Windows par exemple, mais surtout pas un traitement de texte. Cet éditeur permet de visualiser le code source HTML.

Un éditeur HTML
qui permet de construire la page (à peu près) telle qu'on va la voir dans le navigateur (wysiwyg), sans écrire de code.
Citons FrontPage Express (maintenant gratuit) ; NVU (gratuit) ; FrontPage ; FirstPage ; WebExpert ; Namo ; Dreamweaver ; ...
Ces logiciels sont plus ou moins volumineux et complexes ; ils incluent souvent plusieurs autres outils.

Un ou deux navigateurs
pour visualiser effectivement le travail réalisé ; Internet Explorer, Firefox et Opéra sont les plus utilisés. Le code HTML est différemment interprété par les navigateurs et l'affichage d'un navigateur à l'autre peut être surprenant, surtout quand on utilise des scripts.

Un éditeur d'images
les images inclues dans les pages web doivent être légères et correctement taillées ; de plus les navigateurs ne supportent que certains formats d'images (essentiellement .gif, .jpg, .png).
Citons Gimp (gratuit) ; Irfanview (gratuitiel) ; Photofiltre (gratuit) ; PaintShop Pro et Gif Animator ; Adobe PhotoShop ; ......

Un logiciel FTP
qui permet de transférer les pages vers le serveur web, si celui-ci est distant.
LeechFTP (gratuit) ; CuteFTP (gratuitiel) ; WS_FTP ; FTP Expert ; ....

Conseils de base

Une page HTML est un fichier qui se reconnaît par son nom et son extension (.htm ou .html) ; utiliser des noms le plus courts possible (le maxi de 12 caractères est un standard), bien explicites, en minuscules, sans espace ni caractères accentués ou spéciaux.
Attention aux doublons dans le même dossiers.

Classer correctement les autres fichiers appelés par la page HTML (images, sons, fichiers .pdf, ...) dans des sous-dossiers bien différenciés.

Quant à la définition des hyperliens (qui relient les pages entre elles), utiliser un adressage relatif (à la page web elle-même) ; de cette manière, lorsqu'on transfère tous les fichiers qui concernent la page web dans un autre dossier ou sur une autre machine, la page reste visible dans son intégralité.
Le transfert de tous les fichiers dans un autre dossier est d'ailleurs le meilleur test pour vérifier la validité de tous les liens.

Les pages HTML ne doivent être ni trop longues à faire défiler ni trop lourdes à charger ; les grandes images et les scripts sont des éléments qui ralentissent le chargement d'une page. D'une manière générale, l'internaute ("zappeur potentiel") est impatient et lit rapidement, son regard restant le plus souvent accroché aux titres.
Le texte doit donc être le plus lisible possible et le fond de page doit rester discret et (ou) mettre en valeur le texte.
Prévenir le visiteur qu'un chargement (image, son, vidéo, ...) risque d'être long.

Le lecteur n'utilise pas le même ordinateur que le concepteur. Il faut donc essayer de rester dans les "standards du moment" : tester la page avec une résolution de 800 x 600 ou de 1024 x 760 pixels ; utiliser les polices de caractères les plus courantes ; ne pas justifier du texte des deux côtés ; utiliser des tableaux et des sous-tableaux pour positionner précisément les éléments de la page ; dimensionner les cellules d'un tableau en pourcentage pour une meilleure adaptation aux différents écrans ; ...

D'une manière générale, tester la page avant de la divulguer ; tester au besoin avec des navigateurs et des affichages différents.

Le code HTML

Un document HTML est composé de texte et de marqueurs (ou balises ; en Anglais "tag"). Les éléments textuels sont affichés par le navigateur, alors que les marqueurs sont les instructions du langage. Ces derniers permettent de réaliser la mise en page du texte et d'intégrer des éléments multimedia (images, sons, vidéos) dans le texte.

Quand on charge un éditeur HTML, une page blanche s'affiche ; si on visualise le code HTML, on peut lire :

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title> sans titre</title>
</head>

<body>

</body>

</html>

Une page commence toujours par la balise <html> et finit par </html> ; elle comporte un en-tête, entre <head> et </head>, qui ne s'affiche pas sauf pour le titre de la page (compris entre <title> et </title>) qui apparaît dans le bandeau supérieur de la fenêtre du navigateur. Le texte de la page proprement dite se place dans le corps, entre <body> et </body>.

Si on sauvegarde cette page blanche sous le nom "blanc.htm" et que l'on affiche le fichier dans un navigateur, on obtient une page blanche avec la mention "sans titre" dans le bandeau du navigateur.

En revanche, si on édite ce même fichier "blanc.htm" dans un éditeur de texte, c'est le texte bleu précédent (le code HTML de la page ou le code source) qui s'affiche.

Tous les navigateurs et tous les éditeurs HTML ont une fonction qui permet d'afficher le code source d'une page HTML.

On peut donc naviguer sur l'Internet et voir le code source de n'importe quelle page ; on peut donc aussi, à la volée, modifier ce code à sa guise et l'enregistrer sur sa machine.
Ainsi, de fil en aiguille, avec un peu d'esprit de déduction et du plus simple au plus complexe, on peut apprendre le langage HTML en autodidacte.

Quelqu'un qui maîtrise les marqueurs HTML peut parfaitement composer sa page web avec un simple éditeur de texte. Mais dès que la mise en page se complique (insertion de tableaux, d'images, scripts, ...), l'éditeur HTML devient nécessaire.

Les balises

L'éditeur HTML se manie un peu à la manière d'un traitement de texte. Il permet de mettre en forme rapidement le document en insérant discrètement les balises qui correspondent à la mise en forme désirée.

L'exemple le plus simple est le "retour à la ligne" ;
si on écrit la page web avec un éditeur de texte, un retour chariot amène le texte en début de ligne suivante, mais ce retour à la ligne n'est pas pris en compte par le HTML ; si on écrit la page web avec un éditeur HTML, un retour chariot amène le texte en début de ligne suivante et ce retour à la ligne est effectivement visible dans un navigateur.
En fait, l'éditeur HTML a introduit la balise <P> dans le code source et cette balise est effectivement interprétée comme un retour à la ligne par le navigateur.

Une liste des balises serait ici bien redondante puisque les cours sur le HTML pullulent sur l'Internet ; une requête bien simple avec un moteur de recherche donnera l'adresse d'un bon nombre d'entre eux.
Un peu au hasard, on peut donc trouver :

une liste des principales balises HTML classées par leur fonction :
http://www.ccim.be/ccim328/html/REF.htm

une liste des principales balises classées par ordre alphabétique :
http://www.ccim.be/ccim328/html/glossair/tout.htm

Une remarque importante concerne les caractères accentués ou spéciaux propres à chaque langue.
Un éditeur HTML permet de régler correctement le jeu de caractères à utiliser ; dans les propriétés du document choisir "Western European ISO" ou "UTF-8". Ce choix est renseigné par une balise <meta> qui se trouve dans l'en-tête de la page web.
Par exemple : <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
Si cette balise est mal renseignée, il faudra taper dans le code source (avec un éditeur de texte) le codage correct du caractère spécial ;
par exemple "é" s'écrit é et "è" s'écrit è .
On peut trouver un tableau complet du codage HTML des caractères spéciaux à cette adresse.