É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 :

• Le code est monstrueux.

• Les pages ne sont pas lisibles sur MAC et UNIX. WORD met des adresses avec \ au lieu de /...

• Les images sont placés dans un sous répertoire pas pratique du tout.

Ce bout de texte en html WORD :

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

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.

 

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 :

• Un répertoire pour les pages html : html.

• Un répertoire pour les pages php : php

• Un répertoire pour les images : images.

• Un pour se chapitre : web.

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.

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 :

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 :

• Les "../" servent à remonter d'un répertoire.

• "images/" change de répertoire.

• image423.jpg est le nom de l'image.

• alt="texte" affiche le texte entre guillemets si l'image n'est pas trouvée.

• Et pour être lu par tous les systèmes, on utilise des "/" et non des "\" comme WORD, qui est bon à rien en html.

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 :

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

 

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

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 :

• Cette page html.
• La page en php, ce site est en php. (hors sujet)
• Les images.
• Un petit pdf sur les images

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

• html, qui contient web.htm et menu-tete.htm
• php, qui contient web.php
• images / web, qui contient les images jpg. web est un répertoire placé sous le répertoire images.
• gratuit, qui contient le zip
• pdf, qui contient le pdf

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.