Organisation des fichiers :

Commencez par créer un nouveau dossier dans lequel vous allez travailler. C'est cet espace nouvellement créé que vous allez transférer sur votre serveur pour mettre vos documents en ligne sur Internet.

Attention : Ne faites aucun lien avec une image ou un fichier extérieur à ce dossier, cela fonctionnera sur votre ordinateur mais non sur Internet !

Il est conseillé de séparer les images des textes. Créez à cet effet des dossiers propres.

L'arborescence peut être la suivante :
 

Remarque : Notez la présence d'un fichier index.html. Ce fichier est essentiel. Il est la porte d'entrée de votre site. C'est ce ficher que le browser ouvrira en premier. Il est nécessairement placé à la racine du dossier.

Admettons que votre site soit transféré sur un serveur à l'adresse suivante : http://www.website.com.
Quand un visiteur affiche l'adresse http://www.website.com, ce sera le fichier index.html qui sera ouvert, cela équivaut à afficher l'adresse, http://www.website.com/index.html.

Il est toutefois possible d'aller directement à une page précise d'un site : http://www.website.com/doc-text/text4.html.

Il est aussi possible de placer un fichier index.html dans le dossier textes l'adresse sera alors : http://www.website.com/doc_text
Ceci est fort utile si votre site à plusieurs parties bien distingues.
En plusieurs langues : http://www.website.com/deutch  et  http://www.website.com/english
 
 

Liens hypertextes, mail et insertions d'images :

Avant d'aborder les liens hypertextes et les insertions d'images, il nous faut parler de l'adresse du document.
Celle-ci peut être relative ou absolue.

Vous avez noté la fonction du slache  " /  "  qui   signifie descendre dans l'arborescence. Précedé de deux points " ../ " sa fonction est remontée dans l'arborescence.

Adresse absolue :

• Il s'agit de l'adresse du site avec l'indication du lieu du document  (texte ou image) ex. http://www.website.com/doc_img/img1.jpg.

Attention l'adresse absolue commence toujours par http://.

Se fait à partir du ficher ouvert.
Prenons des exemples à partir de notre site website.com
 

Lien hypertexte :
 

• L'objectif est de lier un texte à un autre.  La balise est    <a href = "adresse">     </a>

<a href="http://www.website.com/doc_text/text4.html">Cliquez ici pour accéder au texte 4</a>  pour une adresse absolue.
<a href="text4.html">Cliquez ici pour accéder au texte 4</a>  pour une adresse relative.
("A" signifie "ancor" ancre)

• L'objectif est de proposer une adresse mail par un simple click. L'adresse d'un mail est mailto:name@website.com

<a href="mailto:name@website.com> Ma boite aux lettres </a>

Insertion d'une image :

• La balise est <img src = "adresse">

<img src= "http://www.website.com/doc_img/img1.jpg"> pour une adresse absolue.
<img src= ../doc_img/img.jpg>pour une adresse relative.