Cette page est en construction (je sais c'est pas bien) dernière mise à jour : 15 août 2001
Retour textes | Retour accueil
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.
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
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
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> |
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> |
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.
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 :
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 :
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.