Créer son site :

Mise à jour : 2006-12-22.

Valid HTML 4.01 Transitional

Si vous n'avez rien au
dessus de cette ligne :
Ce chapitre avec en tête


Éditeur de page WEB :

Une page WEB se rédige dans un langage particulier le HTML.

Il est possible de le faire directement avec un éditeur de texte de très bas de gamme type NOTE PAD de WINDOWS, mais la lecture est très difficile.
Déconseillé.

J'utilise FrontPages de WINDOWS qui est pratique.
Il permet aussi bien de taper un texte comme avec WORD, que de "rentrer dans le code" pour peaufiner la mise en page.
Il faut garder un oeil sur le code généré par FrontPage.

J'ai essayé WEB EXPERT qui permet de rentrer un texte avec le code, moins pratique que FrontPage.

L'erreur a ne pas faire et d'utiliser WORD pour le texte et de lui demander la conversion en html :

Ce bout de texte en html WORD :

image002.jpg

Le même en html FrontPage "sous contrôle" :

image003.jpg

Comme vous pouvez le constater, il n'y a pas photo. Et la conversion par WORD reste encore acceptable dans ce cas, j'ai vu pire.


Rédaction et structure du site :

La rédaction des pages se fait directement hors connexion sur votre PC.

Il faut envoyer les pages dans l'espace PAGE PERSO de votre fournisseur d'accès avec un outil FTP.
Il existe des outils FTP dans le commerce tel que FilleZilla, en téléchargement gratuit.
Une fois connecté, il suffit de faire glisser les fichiers de la fenêtre de gauche dans la fenêtre de droite.
C'est très simple et rapide.

image004.jpg

 

La page d'accueil d'un site s'appelle index.htm.
Vous pouvez créer des répertoires au même niveau que cette page. J'en ai au moins 4 :

Vous faites un peu ce que vous voulez. pdf, charger, visiteur.

Le point important de cette structure est qu'il n'y a qu'un seul fichier HTML : index.htm sous votre nom de site.
Ainsi, même si le nom de la page d'accueil n'est pas précisée, le navigateur trouvera la page.
A vous de mettre les liens hypertexte de cette page d'accueil vers les autres pages.


Le html :

Je ne vais pas faire un court complet sur le HTML. D'autres sur le WEB le font beaucoup mieux que moi.
Je vais simplement vous indiquer les quelques commande que j'utilise.
Il faut surtout utiliser un code html très simple : ce qui passe sur PC avec WINDOWS ne passe pas forcément avec UNIX ou sur les MAC.

image001.jpg


Une ligne :

Une ligne normale commence par <p> et se termine par </p>

align="justify" force la justification du texte de chaque coté, comme un texte dans un journal.
Les autres valeurs possibles sont align="left", align="center", align="right".
left est pris par défaut quand rien est spécifié.

<br> permet de revenir à la ligne, dans le même paragraphe.

<font> et </font> définissent la police de caractère.
<font face="Arial" size="2"> dans notre cas, c'est une police Arial, en taille 2.
J'utilise la taille 4 pour les titres des rubriques, et la taille 5 pour les titres des chapitres.

Le titre utilise les balises <b> et </b> pour les caractères gras.
Le titre utilise les balises <u> et </u> pour souligner.
Il existe les balises <i> et </i> pour italique.


Les décalages :

<blockquote> et </blockquote> décale le texte de chaque coté a gauche et a droite de la même valeur.
Je décale le texte par rapport aux titres de 2 <blockquote>

<dir> et </dir> ou <ul> et </ul> sont assez semblable a <blockquote> pour la partie gauche du texte.
Mais ils ne décalent pas sur la droite.
<dir> et </dir> ne passe pas la validation des pages html.
<ul> et </ul> s'utilise avec <li> et </li> pour les listes à puces.


Des adresses :

http://www.medsyn.fr/perso/g.perrin/webmaster/main.htm
http://www.lehtml.com/index.htm
http://perso.wanadoo.fr/coin.des.experts/
http://perso.wanadoo.fr/coin.des.experts/reponses/faq9_49/codage_main.html


Les images :

Le html accepte deux formats d'image, gif et jpg.
gif est réservé aux toutes petites mages.
jpg est le plus utilisé.


Taille et temps :

Le gros problème des images est le volume qu'elles prennent sur un site, et le temps qu'elles mettent pour se charger.
Prenons une image de 677x412 pixels en jpg, la taille est de 83.3 Ko = 83.3 * 8 = 666 Kb.
Prenez un modem à 56 kbps (kilo bits par seconde). La vitesse réelle de transmission ne dépasse pas 40 kbps.
Le temps de chargement sera de 666 / 40 = 16.7 s.

Conclusion, si vous avez 4 images comme cela dans votre page, il faut attendre une minute pour tout voir. Pour moi c'est trop long...

Je vous invite a limiter la taille de vos images à 600 pixels maximum sur la plus grande dimension en pensant à ceux qui n'ont pas la chance d'avoir l'ADSL, et qui sont plus nombreux qu'on le croit.


Format :

Une autre erreur est de charger dans votre site une image de 677x412 pixels, et d'afficher dans votre page une image de 339x206 pixels.
Les éditeurs de html sont bien fait, cela fonctionne parfaitement.

Mais quel est l'intérêt, du point de vue temps de chargement, de charger une image à un format supérieur à celui de l'affichage ?
Si vous affichez une image dans un format, chargez là dans ce format.

La troisième erreur et de ne charger qu'une seule image, pour l'afficher en tout petit dans la page, mais avec la possibilité de l'afficher en plus grand en double-cliquant dessus.
La page sera beaucoup trop longue a charger, et ceux qui ne doublent click pas sur l'image sont pénalisés.

Dans ce cas, vous mettez dans votre site deux images, l'une au petit format, l'autre au grand format, avec deux noms différents.


Code html :

image005.jpg

L'image est centrée, sans bordure.
Elle s'appelle image423.jpg et fait 824x617 pixels. (Oui, c'est grand, mais l'ADSL est passé par là).
Elle se trouve dans un répertoire images, différent de celui qui contient cette page :


Un compteur :

Ce n'est pas le seul...
http://www.compteur.com/


Un bon livre :

"Créez votre site WEB" chez Micro Application.
Indispensable pour moi qui suis plus a l'aise avec un livre plutôt qu'avec un lien et des pages internet.
A lire absolument. Il faut commencer par là.


Balises META :

Le minimum :

image006.jpg

doctype est indispensable, rigoureusement dans les même termes pour le HTML 4.01.

 

Ce qu'il faut pour être référencé :

image007.jpg


Validation et contrôle du code :

C'est surtout pour l'aspect contrôle du code que je mets le lien.
Une page qui passe le contrôle pourra être lue par tous les PC, qu'ils soient sous WINDOWS, UNIX, MAC, LINUX, ect...
L'organisme est W3C : http://validator.w3.org
L'icône est au début de cette page, mes pages sont systématiquement contrôlées.


Téléchargez cet exemple complet :

Le fichier zip comprend toute la mise à jour du 22/12/2006 :

L'installation de cet exemple demande la création de 5 répertoires côte à cote, et d'un sous répertoire :

  image008.jpg Si vous avez 4 ou 5 pages et 10 images la structure vous semblera lourde.

Si vous avez comme moi 120 pages html et php, 450 images, plus des zip, pdf, js, la structure est bien adaptée.

index.htm est la première page du site.