Le crâne ancestral

Les secrets de l'HTML

Mais comment il fait pour faire un site web ?
Trucs et Astuces pour faire un site efficace et l'optimiser pour les moteurs de recherche

Cette page est en construction (je sais c'est pas bien) dernière mise à jour : 15 août 2001

Retour textes | Retour accueil

0. Introduction

Internet n'est rien d'autre qu'un ensemble de machines connectées entre elles et forme un réseau informatique. C'est en réalité un réseau de réseaux. Internet regroupe un ensemble de protocols : Le mail, les news, Irc, le ftp, le http... Le http, c'est ce qui va nous interesser ici, il est constitutif du web.
Il n'existe que deux types de machines sur ce réseau : les serveurs et les clients. Les serveurs sont des ordinateurs (pc, unix etc...), ces machines peuvent tourner sous Windows, Unix, Linux... Jusque là ce sont des machines banales. Ce qui fait leur particularité c'est le logigiel spécifique qui tourne dessus : le serveur. L'internaute quant à lui a le même type type de machine, le même type système d'exploitation, sa spécificité c'est le logiciel client, par exemple un navigateur, Internet Explorer, Netscape, Opera... Le client dialogue avec le serveur grace au protocole HTTP, et fait des demandes de pages web que le serveur lui envoie.

1. Le web

Le web, ou la toile pour les francophiles, c'est la partie la plus connue et la plus exploitée de l'Internet. C'est là que se situent des sites Internet, des ensembles de pages web.
Aucun éditeur wysiwyg, même professionnels, n'écrit du code correct ; au mieux ils peuvent servir à faire des maquettes. Rien ne vaut un bon éditeur texte qui, paradoxalement, permet de développer des sites plus rapidement et plus efficacement. Citons, entre autres l'excellent éditeur html-kit téléchargeable sur le site de l'auteur http://www.chami.com, pour une édition rapide on peut conséiller notepad inclu dans windows, mais il existe metapad, beaucoup plus puissant mais tout aussi léger

2. Les moteurs de recherche

Les moteurs de recherche sont des robots qui parcourent le web et indexent les pages. Pour voir votre site présent sur un moteur il faut habituellement en faire la demande et attendre quelques semaines à quelques mois que votre site soit visité par le robot. Les robots lisent en général les pages dans leur intégralité et répertorient les mots qu'ils y trouvent. Il ne parvienent pas bien sûr à lire le contenu des images, des animations flash ; à noter que Google est capable de lire le contenu des fichiers acrobat (.pdf) qu'il indexe. On peut donc en conclure que les sites à fort contenu textuel sont mieux indexés que les sites graphiques ; ils seront mieux placés. Vous trouverez une petite liste de moteurs ici

3. Structure d'un page web

Une page web se compose des éléments suivants :


Le doctype, mettez celui-là pour débuter : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
La déclaration : <html>
L'entête : <head>
Le titre de la page, très important car c'est ce qu'affichera le moteur de recherche, il doit évoquer le contenun de la page : <title>le titre de ma page </title>
Une description, aussi utilisée par les moteurs : <META NAME="Description" CONTENT="Toutes les bonnes astuces pour faire un site web">
Les mots clés, qui peuvent aider lors des recherches : <META NAME="Keywords" LANG="fr" CONTENT="html, aide, tutorial, didacticiel, page web, site, internet">
La définition du charset, c'est pour afficher les accents correctement par exemple. Ici le charset français : <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
La définition de la feuille de style, nous verrons plus loins à quoi ça sert : <link rel="stylesheet" type="text/css" href="lmafeuilledestyle.css">
La fin du header : </head>
Le corps du document : <body>
La fin du document : </body>
</html>


ce qui donne :

4. Le html, un truc de gosses

Tout ce qui suit concerne le contenu des pages, le corps, ce qui est compris entre les balises <body> et </body>. Le HTML est un langage très simple. Il n'y a presque rien à savoir. Normalement le HTML ne donne que le contenu des pages mais les couleurs, les tailles, les typographies, le style en somme est donné par les feuilles de style que nous verrons plus loin.

On peut écrire le texte tel quel sans aucunes balises HTML. Le navigateur le formatera automatiquement. Pour créer un retour à la ligne, il faut utiliser la balise <br>. Par exemple le html c'est enfantin<br> et facile donnera:
le html c'est enfantin
et facile

On peut créer des titres avec <h1>, il existe différents niveaux de titre. <h2>, <h3> etc... par exemple <h1>apprendre le HTML</h1> affichera "apprendre le HTML" en plus grand.

Les paragraphes sont défins avec la balise <p>; par exemple <p>ceci est un paragraphe</p>.

Afficher une image se fait avec la balise <img>, qui accepte quelques paramètres, par exemple : <img src="monimage.jpg" border="0" width="100" height="150" alt="une belle image"> et c'est tout, il vaut mieux toujours indiquer la taille de l'image en pixel avec les propriétés width et height ainsi la page sera déjà formatée avant que l'image ne soit téléchargée ; la propriété alt permet un transcription textuelle de l'image, pour les moteurs de recherche par exemple.

Faire des liens est enfantin aussi : <a href="http://www.unsite.com/unepage.htm">lien vers le site</a>, affichera le texte "lien vers le site" qui sera un lien pointant vers le site. Au lieu de ce texte on pourra aussi mettre une image, un paragraphe etc.

Faire des tableaux est un peu plus complexe, mais les tableaux sont importants car ils permetent de srtucturer des contenus. Utiliser néanmoins avec parcimonie, les feuilles de styles sont bien plus adaptées à celà. <table><tr><td>contenu de la cellule</td></tr></table>, crée un tableau d'une ligne et d'une colonne, donc d'une cellule. La balise table définie un tableau la balise tr une rangée, et la balise td une colonne.
pour deux colonnes ou deux ligne on aura :

deux colonnes :
<table>
<tr>
<td>cellule1</td><td>cellule2</td>
</tr>
</table>
deux lignes :
<table>
<tr>
<td>cellule1</td>
</tr>
<tr>
<td>cellule2</td>
</tr>
</table>

Bien. La balise table a quelques propriétés : cellspacing donne l'écart entre les cellules, cellpadding donne une sorte de marge à l'intérieur des cellules. width et height donnent les dimensions minimales de la table en pixel ou en pourcentage (par rapport à la fenêtre du navigateur).

En gros voilà. Avec ça vous avez le minimum de survie. Le reste c'est du détail et du raffinement. Autrefois il existait une balise "font" pour décrire du texte, mais... comment dire, il s'agit d'une balise à éradiquer, ce genre de description est prise en charge par la feuille de style.
Merde mais c'est tout ? ben ouais il y a du texte, des images et des liens dans une page web et quoi d'autre ? des conneries. Bon alors. Y a-t-il vraiment besoin de drimouaivère pour taper ces petits trucs ? En plus drimouaivère le fait très mal, relire du code écrit par cette chose fait très mal à la tête et je ne parle même pas de l'infâme frontepaidje beurk !

5. Les feuilles de style, du lego

La feuille de style va permettre de formater le texte et d'autres éléments une fois pour toute. Là encore, c'est assez simple. Le plus courant est tout mettre dans un fichier à part que l'on appelera par exemple : mafeuilledestyle.css. Ce fichier sera appelé par : <link rel="stylesheet" type="text/css" href="mafeuilledestyle.css">, balise à mettre dans le header de chaque page. Voici un exemple de feuille de style, les commentaires sont entre /* et */ :

Pour résumer :
On peut surcharger toutes les balises HTML ou créer des classes (.maclasse). ceci est très souple et permet de séparer le contenu d'un document de sa forme. Cela allège considérablement les pages HTML, permet de les créer plus vite et d'uniformiser l'apparence d'un site, c'est ce que l'on appelle un charte graphique.

6. Le javascript, aussi simple que le basic

* à faire *

7. Les cadres, simples en apparance, complexe en réalité

Leur gestion est complexe, les moteurs n'aiment pas en général, sauf si c'est fait intelligement. Les cadre sont un agencement de plusieurs pages. Typiquement une page menu à gauche et la page de contenu à droite.

La page d'appel (frame.htm) par exemple :

<noframe">
cette page parle de....
<a href="main.htm">main&lgt;/a>
</noframe">
<FRAMESET FRAMEBORDER=0 BORDER=0 COLS="125,*">
<FRAME FRAMEBORDER=0 NORESIZE NAME="nav" SRC="nav.htm">
<FRAME FRAMEBORDER=0 NAME="main" SRC="main.htm">
</FRAMESET>

Ce code est à mettre en </head> et </html>, on omet la balise <body>. La balise <noframe> est à l'usage des moteurs et des navigateurs (rares) incapables de lire les frames, on peut y mettre un résumé de la page main.htm. Les moteurs suivront les liens pour retrouver la page main.htm qui expose le contenu.

Il faut dans chaque page inclure un script de reconstruction des cadres au cas où la page serait affichée de manière isolée, pour un internaute qui vient d'un moteur par exemple. voici le script :

8. Flash, c'est du multimédia et non du web

* à faire *

9. Les images

* à faire *

10. Dernières optimisations pour moteurs de recherche

Certaines parties d'une page sont plus importantes que d'autres et vont permettre d'améliorer le position dans le moteur de recherche, dans l'odre d'importance :

L'indice de popularité est de plus en plus important, si beaucoup d'autres sites pointent vers votre site, il sera mieux placé, certains conseillent même de ne pas soumettre son site au moteur google, mais de laisser le moteur trouver le site par des liens sur d'autres site, à voir...

Certains moteurs lisent le contenu de "alt", paramètre dans les balises pour les images, il faut toujours les renseigner, les commentaires peuvent aussi être pris en compte.

11. Liens utiles

* à faire *
Retour textes | Retour accueil
mise en ligne le 15 août 2001 © lipsheim.org 2001