<map name="CoucouMap"> <area shape="rect" coords="0,0,70,30" HREF="rond1.gif"> <area shape="rect" coords="71,0,100,30" HREF="#debut"> </map> <IMG SRC="rond1.gif" WIDTH=100 HEIGHT=30 usemap="#CoucouMap">
La vague Internet est souvent comparée à la ruée vers l'or. Trouver une information correcte n'est pas plus facile que trouver des pépites, et j'espère que ce texte vous aidera.
Une fois les bases acquises, un bon livre de référence comme "Webmaster in a Nutshell" (en français) de chez O'Reilly est l'outil le plus rapide pour affiner.
|
Présenter un site sur le Web est le soumettre au public. La page de garde présente un fil directeur qui vous catalogue, pour le meilleur et pour le pire. Les thèmes sont multiples. De nombreux e-auteurs n'ont rien à dire et tiennent absolument à le faire savoir, avec talent parfois.
Organisez votre site en courtes pages (ce document est presque trop gros), structurées en arborescence. Si le site est volumineux, prévoir un plan.
Pour créer votre document, un simple éditeur texte suffit. Basculer de temps en temps sur un navigateur en utilisant l'option "Actualiser" pour voir le résultat.
Un outil de conception spécialisé peut vous faciliter le tâche, à condition qu'il n'introduise pas trop de code parasite. Les meilleurs éditeurs HTML permettent de basculer facilement sur une saisie directe de code, ce qui est un bon compromis.
Les classiques (au bureau) sont FrontPage et le Composer Netscape. Word dispose d'un mode HTML utilisable. Pour les curieux, je recommande d'aller voir Amaya, éditeur du W3C en pointe pour les nouvelles technnologies.
<tag couleur='bleu'> ...du texte...</tag>
La liste des balises et de leurs paramètres est figée et assez courte. Les balises les plus utiles tiennent en quelques lignes. Voici la structure d'un document HTML typique:
<HTML> <HEAD> <META NAME="description" CONTENT="Ouvrir son site Web, guide de survie"> <META NAME="author" CONTENT="Patrick LARREYA"> <META NAME="keywords" CONTENT="site, Web, ouvrir, HTML, CSS"> <META NAME="robots" CONTENT="all"></HEAD> <TITLE>Ouvrir son site Web</TITLE> <BODY> ... le corps du document ... </BODY> </HTML>HTML est très tolérant. Majuscules et minuscules ne sont pas distinguées, certaines balises peuvent ne pas être fermées.
Les balises <h1> à <h6> gèrent les niveaux de titre. La numérotation n'est pas automatique.
<h1>Un gros titre</h1> <h4>Un plus petit titre</h4>La balise <P> est un saut de paragraphe, <BR> provoque un simple passage à la ligne. La présence de blancs et de sauts de ligne dans le texte d'origine n'a rigoureusement aucune influence sur la mise en page.
Plusieurs type de liste sont disponibles. J'utilise surtout la liste à puce ou "UnOrdered List", qui comprend des éléments de liste "List Items". Les listes peuvent être imbriquées.
<ul>
<li>Premier élément
<ul>
<li>Un sous-élément
<li>Un autre sous élément
</ul>
<li>Second élément
</ul>
|
|
<DL compact> <DT>DL</DT> <DD>Liste de définition</DD> <DT>DT</DT> <DD>Terme à définir</DD> <DT>DD</DT> <DD>Définition du terme</DD> </DL> |
|
Les tables sont utilisées pour décrire des tableaux, mais aussi chaque fois qu'il est nécessaire de découper l'écran en zones rectangulaires (les frames sont une autre approche, non abordée ici).
Une table "TABLE" est organisée en lignes, "TR" pour table Rows, contenant plusieurs colonnes "TD". Les colonnes d'entête "TH" sont simplement des "TD" avec une mise en page particulière.
Une cellule peut être étendue pour occuper plusieurs rangées "ROWSPAN" et/ou
plusieurs colonnes "COLSPAN".
La largeur de la table peut être spécifiée
de manière absolue (SIZE='400') ou relative à la largeur de la page (SIZE='60%').
La largeur d'une cellule peut être spécifiée de manière absolue ou relative
à la taille des autres cellules. En cas de conflit, le navigateur choisira en
général les tailles les plus élevées, ou pondèrera comme il pourra.
Les outils visuels de mise en page on une tendance lourde à surcharger considérablement les instructions de calibrage des cellules. Un nettoyage manuel radical est souvent nécessaire dès que l'on veut personaliser.
<TABLE WIDTH='300' BORDER='1'>
<TR>
<TH>Balise<TH WIDTH='30%'>Description
<TH WIDTH='50%'>Mots clé
</TR>
<TR>
<TD ROWSPAN=2>TABLE</TD>
<TD ROWSPAN=2>Tableau</TD>
<TD>WIDTH: taille absolue ou relative...
</TR>
<TR><TD>BORDER: 1=avec bordure, 0=sans</TD></TR>
<TR>
<TD>TD</TD>
<TD COLSPAN='2'>Cellule.
COLSPAN et ROWSPAN permettent...</TD>
</TR>
</TABLE>
|
| |||||||||||||
<IMG SRC="../imgs/rond1.gif" HEIGHT=10 WIDTH=10 ALT='Un petit rond'>
<IMG SRC="ronX1.gif" HEIGHT=25 WIDTH=10 ALT='Un petit rond (Avec Erreur)'>
Les images doivent être au format GIF ou JPG.
Pour transformer rapidement des images BMP, je n'ai trouvé qu'une astuce assez lourde.
Inclure les images à convertir dans un document Word, et le sauvegarder au format HTML.
Renommer les images générées.
L'hypertexte permet de se brancher vers un nouveau document ou vers un point précis d'un document.
<h1 ID='debut'>Ouvrir son site Web</h1> ... quelques pages ... <A HREF='#debut'>Retour au début (lien interne)</A> <A HREF='rond1.gif'>Détail du petit rond (lien externe)</A>Pour activer un lien en cliquant sur une image, deux solutions existent :
<map name="CoucouMap"> <area shape="rect" coords="0,0,70,30" HREF="rond1.gif"> <area shape="rect" coords="71,0,100,30" HREF="#debut"> </map> <IMG SRC="rond1.gif" WIDTH=100 HEIGHT=30 usemap="#CoucouMap"> |
|
& pour "&"
< pour "<"
et > pour ">"
" pour ‘"’
‘ pour "‘",
’ pour "’" ou
å pour "å"
Pour les cas particuliers, CSS gère des classes de style qui favorisent une approche sémantique du balisage, ce qui veut dire que si vous voulez mettre en valeur les "astuces", vous déclarez une classe de style, en précisant que le texte sera en gras et rouge. Voici le code, en vrac pour l'instant.
.astuce { font-weight: bold; color: red }
<p class='astuce'>Utilisez CSS !</p>
Si, après réflexion, vous pensez que le résultat est un peu agressif, vous aurez
une ligne à changer pour modifier la présentation de toutes les astuces,
et vous ne risquerez pas de toucher par erreur aux "interdictions".
Pour modifier une portion de texte en ligne, utiliser la balise SPAN:
Pour améliorer la présentation,<SPAN class='astuce'>Utilisez CSS !</SPAN>.
Certains mettent du
<SPAN style='background-color: blue; color: pink;'>rose</SPAN>
dans leur textes.
Le codage interne est à utiliser pour s'assurer que la présentation est présente
avec la page (si vous l'envoyez par mail par exemple),
ou en complément d'un codage externe.
Les balises <!-- et --> marquent les commentaires
HTML et rendent le texte invisible aux navigateurs qui ne comprennent pas CSS.
<HEAD>
<STYLE>
<!--
H2 {color: #cc9966; font-style: normal; margin-top: 0.0em; margin-bottom: 0.7em; font-weight: bold}
.astuce { font-weight: bold; color: red }
-->
</STYLE>
... suite de l'entete ...
</HEAD>
Le codage externe permet d'utiliser des fichiers séparés.
La présentation est utilisable pour tous les documents d'un site.
Les gros sites techniques utilisent ce principe.
L'entete du document devient :
<HEAD> <LINK REL="STYLESHEET" TYPE="text/css" HREF="unStyle.css"> ... suite de l'entete ... </HEAD>Le document CSS contient le code, et peut lui-même faire référence à un document plus générique.
autreStyle.css :
@import url(../styles/unStyle.css);
h5 { font-style: italic }
color : couleur du texte
background : couleur du fond. On peut aussi rattacher une image.
font-size: 8pt;
font-family: Georgia, Minion Web, Times New Roman, serif;
font-style: italic;
font-weight: bold
text-decoration:
blink
| line-through
| overline
| underline
| none
text-align: center | justify | left | right
margin-top: 0pt; margin-bottom 0.4pt
Exemple : border-color: yellow; border-width: 10px; border-style: ridge; margin-top: 0pt; margin-bottom 0pt;
Astuce !
h1 {color: blue; text-align: center }
H3 {color: green}
TABLE, TBODY, TR, TD { font-size: 8pt }
P.astuce { font-weight: bold; color: orange }
.astuce { font-weight: bold; color: red }
BODY.moderne H3 {color: blue}
A:link { font-weight: bold; color:#C00; background: #FFC }
A:visited {font-weight: bold; color: #999; background: #FFC }
A:active {font-weight: bold; color: #F00; background: #FC0 }
A:hover { color: #C00; background: #FC0 }
Si vous avez du temps et un accès internet, faites un test auprès d'un hébergeur gratuit.
Vous trouverez facilement un fournisseur pour vous donner une adresse mail et un accès modem, c'est à peu près aussi compliqué qu'une boîte à lettres avec une clé.
Pour le reste, je suis loin d'avoir réglé tous mes problèmes et je n'ai aucun conseil à vous donner.
En théorie, c'est d'une simplicité biblique.
Votre fournisseur vous fournit un accès, vous vous connectez dessus,
et vous copiez tout ce que vous avez préparé localement
en respectant la structure des répertoires.
Le serveur peut être beaucoup plus restrictif que votre poste.
Pour limiter les problèmes
La destination de la machine cible est une adresse IP de la forme "123.123.123.123", qui traine quelque part dans la configuration de votre navigateur.
A titre d'information, voici une liste de commandes FTP pouvant être passée à la console (sans les messages en retour du serveur).
ftp monServeur monIdentifiant (mon mot de passe) put index.html quit
Il n'est pas vraiment souhaitable de travailler de cette façon, et certains providers la bloquent.
On ouvre directement une session FTP depuis le navigateur en fournissant dans l'adresse une cible, un identifiant et le mot de passe. On arrive alors sur la racine, et sous windows la fenêtre fonctionne comme l'explorateur (glisser-déplacer et clics droits).
Ceci n'est possible que si vous maîtrisez FTP et sa sécurité.
Sinon, utilisez la méthode suggérée votre fournisseur d'accès.
Il ne reste plus qu'à enlever sa casquette de webmestre pour surfer vers son nouveau site. . .
Mon fournisseur met les sites nouvellement créés "en travaux". Ils sont inaccessibles au public, et doivent être décoincés en appuyant sur un bouton très visible, avec un message limpide, mais situé au fin-fond d'une page d'information sur le compte. Les explications de l'assistance technique sont conceptuelles, sans grand rapport avec ce qu'on voit à l'écran (en fait, ça dépend sur qui on tombe). Ce style de détail m'a bloqué trois jours, et est assez typique de tous les petits obstacles qui jalonnent une installation.
Votre site est là. Encore faut-il qu'il soit lu.
Note 2011:
Cet article a été écrit en 2000.
L'arrivée de nouveaux modes de gestion des moteurs
rang peu utile l'indexation manuelle.
Les moteurs utilisent les balises META situées dans l'entête de votre document HTML. Voici un exemple simple :
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta http-equiv="Content-Language" content="fr-FX"> <title>Un titre d'une douzaine de mots</title> <meta name="robots" content="index, follow"> <meta name="revisit-after" content="1 month"> <meta name="description" content="Une description en une phrase"> <meta name="keywords" content="mots, clé, significatifs, pas, trop, quand, même"> <meta name="author" content="prénom Nom"> <meta name="reply-to" content="id@hebergement"> <meta name="owner" content="id@hebergement"> <meta name="copyright" content="nom, Aout 2000">
Si un document ne doit pas être indexé:
<META NAME="robots" CONTENT="noindex,nofollow">
En cas d'erreur intentionnelle ou pas, votre site peut être rejeté plus ou moins définitivement.
Je suppose que le serveur dispose du formulaire d'enregistrement de chacun des moteurs, le génère automatiquement avec le contenu de vos métas et des informations que vous fournissez, et soumet le tout en vous laissant éventuellement suivre le déroulement. Si vous avez déjà écrit un CGI ou une servlet, vous savez que ce n'est pas très complexe.
Dans mon cas, ça c'est planté au tiers, et je ne sais pas quels moteurs sont concernés. J'ai simplement reçu un mail de prise en compte pour 2 moteurs.
Vous vous inscrivez auprès d'un serveur (nom et mot de passe) qui vous fournit une référence de compteur et le code à inclure dans la page à suivre. A chaque chargement, la page envoie cette référence au serveur, qui note la note ainsi que les caractéristiques de la connexion.
La démarche est simple, il suffit de suivre le mode d'emploi. La page risque de ne pas s'afficher correctement hors connexion ou si le site d'audience est inaccessible