Comment mettre en ligne un site ( j'utilise le html )

[CERDAN]

Bonjour à tous,

Je voudrais être renseigné sur la mise en ligne d'un site que j'ai confectionné. Tout est dans un dossier "site web". J'utilise le code html pour mes pages, le jpg pour les images et parfois du javascript dans mes fichiers html ( texte ).

Les liens de mes pages sont dans mes fichiers ,,,.html, j'en ai environ 12. Ces liens vont vers une cible peu commune :mouais: :hein: , celle de mon ordinateur : \dossier image\photos\...

exemple concret de mes images cliquables :

<A HREF="C:\Documents and Settings\...\Bureau\Site Web\Site web 2\....html"><IMG SRC="C:\Documents and Settings\...\Bureau\Site Web\Site web 2\....jpg"Border="0"></A>
<A HREF="C:\Documents and Settings\...\Bureau\Site Web\Site web 2\....html"><IMG SRC="C:\Documents and Settings\...\Bureau\Site Web\Site web 2\....jpg"Border="0"></A>
<A HREF="C:\Documents and Settings\...\Bureau\Site Web\Site web 2\....html"><IMG SRC="C:\Documents and Settings\...\Bureau\Site Web\Site web 2\icone2.jpg"Border="0"></A>

Je sais bien que que je ne serais pas l'herbergeur, ( je ne suis pas sur mais bon...) et quand je voudrais le mettre en ligne, il faudra que je changer mes 3 centaines de liens ? :eek: .

Voila, demandez moi des details si il en manque, je voudrais avoir un avis adress&#233; &#224; un d&#233;butant en la mati&#232;re car c'est la premi&#232;re fois que confectionne un site, qui est tr&#232;s beau et lisible sur Internet Explorer, bien &#233;videmment, que sur mon mac . ( j'esp&#232;re que ce sera disponible bient&#244;t par tout le monde )



Merci &#224; vous tous, et j'aimerais encore remercier les modos qui font un travail formidable sur ce site tr&#232;s bien con&#231;us .

Bonne soir&#233;e

 

[Anonyme]

D'abord le html est le langage pour cr&#233;er des pages web, &#231;a c'est bon. Normalement la m&#233;thode travail veut que l'on cr&#233;e le dossier du site en construction dans le dossier Sites de son compte avec le partage web activ&#233;. L'adresse de ton site en local se fera avec une adresse du type :

http://localhost/~maison/dossierdusite/

Avec comme page de d&#233;part, une page appel&#233;e index.html. Les images seront de pr&#233;f&#233;rences dans un sous-dossier du site, appelons-le images&#8230; L'arborescence de ton dossier utilisateur ressemblera &#224; ceci :

• Maison
  • Sites
    • dossierdusite
      • index.html
      • images
        • image.jpg
      • sousdossier
        • articles.html

L'int&#233;gration des images se fera donc (pour la page index.html) comme ceci :

<img src="images/image.jpg" alt="" />

Par contre pour la page articles.html (qui se trouve dans un sous-dossier) l'appel se fera de la fa&#231;ons suivante :

<img src="../images/image.jpg" alt="" />

Ce qui veut dire : remonter d'un dossier et aller chercher l'image image.jpg dans le dossier images. Ce sont des chemins relatifs, qui ne seront pas bris&#233;s lors de la copie sur un serveur web car on va chercher les images par rapport &#224; la position de la page html dans l'arborescence.

C'est le contraire de chemins absolus qui utilisent un chemin complet jusq'u&#224; l'image et qui donc foirent quand on copie les pages sur un serveur. Exemple :

<img src="http://localhost/~maison/dossierdusite/images/image.jpg" alt="" />

Ou dans l'exemple que tu donnes avec un chemin windows en local.

Pour revenir &#224; ton probl&#232;me, je ne sais pas quels programmes tu as utilis&#233;, ni comment est l'arborescence de ton site mais avec la plupart des &#233;diteurs de texte moderne, il y a moyen de faire des chercher-remplacer sur plusieurs fichiers et de corriger &#231;a en une fois.

Et pour finir, pour faire un site dans les r&#232;gles : css &#8212; on reprend tout de z&#233;ro.

 

[fredintosh]

Les liens de mes pages sont dans mes fichiers ,,,.html, j'en ai environ 12. Ces liens vont vers une cible peu commune :mouais: :hein: , celle de mon ordinateur : \dossier image\photos\...

Pour compl&#233;ter ce que dit Gloup gloup en langage "d&#233;butant", il aurait fallu que ton dossier images et les images qu'il contient se situent d'embl&#233;e dans ton dossier "site web", et que les liens pointent vers ces images-l&#224; (en chemin relatif, voir post ci-dessus).

Ce dossier images devra aussi &#234;tre upload&#233; chez ton h&#233;bergeur, en m&#234;me temps que les pages html.

Tu es donc bon pour r&#233;&#233;crire tous les liens...

 

[PA5CAL]

Bonsoir

Une remarque pour enfoncer le clou:

Les liens sont lus par le navigateur du visiteur depuis sa machine. De ce fait, ils ne doivent jamais contenir aucune r&#233;f&#233;rence &#224; un emplacement du disque dur (ni "C:\...", ni "file://...", ni "http://localhost/...") qui renverrait vers le disque de sa machine et non celui du serveur.

Sauf besoin particulier (acc&#232;s &#224; un document ou &#224; une image situ&#233;s sur un site diff&#233;rent, lien &#224; conserver en cas de recopie de la page par le visiteur) il est pr&#233;f&#233;rable d'utiliser autant que possible des liens relatifs, depuis le dossier courant ("monsousdossier/monfichier.html" ou depuis la racine du site ("/mondossier/monfichier.html"), sans rappeler le nom de domaine (donc &#233;viter "http://www.monsite.com/mondossier/monfichier.html").

 

[CERDAN]

Merci de toutes vos r&#233;ponses, j'y vois beaucoup plus clair, mais j'ai encore quelques h&#233;sitation:rateau: ,

1 ) &#224; quoi resemble un lien relatif, je veux bien y arriver et j'ai compris pourquoi mais comment creer ce genre de lien ?

2 )

L'int&#233;gration des images se fera donc (pour la page index.html) comme ceci :
<img src="images/image.jpg" alt="" />

Oui, mais mon dossier index.html ne contient que le lien des 2 frames de mon site, (la bani&#232;re et le contenu principal), je suppose alors que ce code se verra dans un autre fichier html comme pour moi C.html et pour la bani&#232;re B.html ?, ..... c'est juste ?

La encore, ce lien

<img src=images/image.jpg......

ne signifie rien pour mon ordinateur, et le probl&#232;me de 1) se repose.

3 ) La, par contre je n'ai rien compris , il faudra &#234;tre tr&#232;s clair avec moi . Car je n'ai pas compris le sens des .. en plus.......

4 )

Ce qui veut dire : remonter d'un dossier et aller chercher l'image image.jpg dans le dossier images. Ce sont des chemins relatifs, qui ne seront pas bris&#233;s lors de la copie sur un serveur web car on va chercher les images par rapport &#224; la position de la page html dans l'arborescence.

D'accord , mais alors comment faire comprendre &#224; l'ordi qu'il faut remonter d'un dossier ? ( pour lui faire comprendre que c'est un chemin relatif ).

5 )

C'est le contraire de chemins absolus qui utilisent un chemin complet jusq'u&#224; l'image et qui donc foirent quand on copie les pages sur un serveur. Exemple :

Code:
<img src="http://localhost/~maison/dossierdusite/images/image.jpg" alt="" />

Tout &#224; fait .

6 ) Oui, merci de me le faire comprendre dans un language plsu simple, et encore une fois merci Je comprend tout &#224; fait que je dois faire( en fait je l'ai fait depuis le d&#233;but...ouf :zen: ), c'est &#224; dire, mettre tout le site dans un seul dossier ("site web" pour moi avec "site web"--> toute les images, et tous les fichiers .html. en changer en ce que gloup gloup &#224; dit ).

7 )

Bonsoir

Une remarque pour enfoncer le clou:

Les liens sont lus par le navigateur du visiteur depuis sa machine. De ce fait, ils ne doivent jamais contenir aucune r&#233;f&#233;rence &#224; un emplacement du disque dur (ni "C:\...", ni "file://...", ni "http://localhost/...") qui renverrait vers le disque de sa machine et non celui du serveur.

Merci pour la remarque , d'accord mais alors, je mets alors quoi comme r&#233;f&#233;rences ? ou c'est quoi les r&#233;f&#233;rences du serveur ? ( peut &#234;tre, pour que je comprenne mieux, que tu me fournisse des exemples de r&#233;f. et nom de domaine ?


Voila. Le reste, c'est du tout compris ( mais en fait, il ne reste pas grand chose )

Encore bon soir.

 

[fredintosh]

CERDAN, tout d&#233;pend de l'endroit o&#249; se trouve ton fichier html, par rapport &#224; l'endroit o&#249; se trouve l'image &#224; int&#233;grer.
Dis-nous o&#249; se trouvent tes pages B.html et C.html (profites-en pour leur trouver des noms plus &#233;vocateurs) qui appellent tes images, et on te dira plus facilement comment &#233;crire le bon code. Les exemples concrets te permettront de mieux comprendre la logique du bintz.
Ces pages sont-elles dans un dossier ? ou bien au m&#234;me niveau que index.html ?

Id&#233;alement, une petite copie d'&#233;cran du finder en mode colonne pour voir l'arborescence de tes fichiers, ce serait super.

Au fait, les frames sont d'un usage plut&#244;t obsol&#232;te, tu vas en faire sauter au plafond quelques uns...

Ensuite, quand tu codes, sois tr&#232;s rigoureux, n'oublie pas tel ou tel guillemet ou tel ou tel signe d'ouverture ou de fermeture de balise.

 

[CERDAN]

CERDAN, tout d&#233;pend de l'endroit o&#249; se trouve ton fichier html, par rapport &#224; l'endroit o&#249; se trouve l'image &#224; int&#233;grer.
Dis-nous o&#249; se trouvent tes pages B.html et C.html (profites-en pour leur trouver des noms plus &#233;vocateurs) qui appellent tes images, et on te dira plus facilement comment &#233;crire le bon code. Les exemples concrets te permettront de mieux comprendre la logique du bintz.
Ces pages sont-elles dans un dossier ? ou bien au m&#234;me niveau que index.html ?

Alors, je reprend ,

un seul dossier ("site web" pour moi avec "site web"--> toute les images, et tous les fichiers .html.

, d&#233;ja dit.

Dossier "site web" --> [ index.html, B.html (Bani&#232;re), C.html (Centre), les autres "sous" fichiers .html et toutes les images en .jpg]. donc ces pages sont au m&#234;me niveau que index.html.

Au fait, les frames sont d'un usage plutôt obsolète, tu vas en faire sauter au plafond quelques uns...

Le design n'est pas obsol&#232;te .

 

[Anonyme]

Argh des frames quelle horreur!!! Sinon oui tu dois modifier &#231;a dans les pages &#224; inclure.

Tu ne nous a toujours pas dit quel programme tu utilises pour faire ton site.

Quant au liens relatifs, il n'y a rien &#224; faire de sp&#233;cial et PA5CAL t'a d&#233;j&#224; expliquer comment un lien sera consid&#233;r&#233; comme absolu ou relatif.

Pour r&#233;sumer les liens relatifs :

<img src="dossierimages/photos.jpg" alt="" />

Va chercher l'image dans le dossier dossierimages se situant au m&#234;me niveau que la page html.

<img src="../dossierimages/photos.jpg" alt="" />

Va chercher l'image dans le dossier dossierimages se situant dans le dossier parent de la page html.

<img src="../../dossierimages/photos.jpg" alt="" />

Va chercher l'image dans le dossier dossierimages se situant deux niveaux plus haut que la page html. Etc, etc.

<img src="/dossierimages/photos.jpg" alt="" />

Va chercher l'image dans le dossier dossierimages se situant &#224; la racine du site. Attention, sur nos ordinateurs, les fichiers se trouvent rarement &#224; la racine.


Je te conseille vraiment le tutoriel pour d&#233;butants donn&#233; dans mon pr&#233;c&#233;dent message.

 

[Anonyme]

Quant au frames, tu peux avoir le même effet sans les inconvénients. Si ton hébergeur le permet.

 

[CERDAN]

Tu ne nous a toujours pas dit quel programme tu utilises pour faire ton site. ;)

J'avais oublié, j'utilise bloc-note .

J'étudie ce site, et je vous recontactes .

un grand merci, et bonsoir.

 

[p4bl0]

Je ne peux pas ne pas intervenir quand il y a &#233;crit "le design n'est pas obsol&#232;te" et qu'il est &#224; base de frames, mais &#231;a devient lassant de toujours r&#233;&#233;crire les m&#234;mes choses.

1/ Faire une recherche sur ce forum pour trouver les sujet qui parle du design web, des frames, des tableaux, de la s&#233;mantique, de l'accessibilit&#233;, de ...
2/ Lire, beaucoup lire, et lire les liens (ceux donner par gloup gloup particuli&#232;rement)
3/ Refaire son site de mani&#232;re propre et avantageause pour tout le monde.


EDIT: et merde le temps que je revienne et que j'&#233;crive &#231;a et gloup gloup est d&#233;j&#224; pass&#233; :rateau:

 

[p4bl0]

Tu ne nous a toujours pas dit quel programme tu utilises pour faire ton site. ;)

J'avais oublié, j'utilise bloc-note .

J'étudie ce site, et je vous recontactes .

un grand merci, et bonsoir.

Alors tu es sous windows ?

Utilise plut&#244;t Notepad++ qui est tr&#232;s bien et surtout bien plus pratique que le bloc-note de windows

 

[Anonyme]

Tu es bien sous windows quoi&#8230; M&#234;me sous windows, il y a des programmes plus adapt&#233;s (et gratuits) que le bloc-notes pour faire des pages html, para&#238;t que notepad++ est pas mal du tout.

edit: t&#233;dcheu :mad:

 

[p4bl0]

edit: tédcheu :mad:

Ah ben pour une fois :style:

 

[PA5CAL]

Pour faire tr&#232;s concret:

Ton site va &#234;tre mis &#224; disposition sur Internet par le biais d'un logiciel serveur HTTP (Apache, ou autre). Ce logiciel serveur va traduire les chemins vers les sous-dossiers, fichiers HTML et images de ton site sur ton disque dur en des adresses Internet (URL) pour les visiteurs ext&#233;rieurs.

Ton ordinateur doit &#234;tre accessible depuis l'ext&#233;rieur par une adresse IP, du type http://83.145.105.190 (g&#233;n&#233;ralement l'adresse WAN de ton modem-routeur, lequel redirige les requ&#234;tes HTTP qu'il re&#231;oit vers ton ordinateur), et si tu as pay&#233; un nom de domaine, il peut m&#234;me &#234;tre accessible pas un nom, du type http://www.cerdan.com .

Pour la suite, admettons que ton adresse IP soit 83.145.105.190 et ton nom de domaine soit www.cerdan.com .

Si tu as stock&#233; le contenu de ton site dans le dossier:

C:\Documents and Settings\...\Bureau\Site Web\Site web 2\​

et que tu as r&#233;gl&#233; le logiciel serveur de mani&#232;re &#224; ce que ce dossier soit la racine de ton site web, alors le fichier:

C:\Documents and Settings\...\Bureau\Site Web\Site web 2\index.html​

sera accessible depuis Internet &#224; l'adresse:

http://83.145.105.190/index.html​

ou

http://www.cerdan.com/index.html​

Admettons que ton site contienne les autres fichiers suivants:

C:\Documents and Settings\...\Bureau\Site Web\Site web 2\logo.jpg
C:\Documents and Settings\...\Bureau\Site Web\Site web 2\images\image_exemple1.jpg
C:\Documents and Settings\...\Bureau\Site Web\Site web 2\exemples\exemple1.html
C:\Documents and Settings\...\Bureau\Site Web\Site web 2\exemples\photo_exemple1.jpg​

Vu depuis Internet, l'adresse de ces fichiers sera respectivement:

http://83.145.105.190/logo.jpg
http://83.145.105.190/images/image_exemple1.jpg
http://83.145.105.190/exemples/exemple1.html
http://83.145.105.190/exemples/photo_exemple1.jpg​

(ou leur &#233;quivalent, avec www.cerdan.com en lieu et place de l'adresse IP).


[1] Dans le fichier index.html, l'affichage de l'image logo.jpg se fera &#224; l'aide d'une balise:

<img src="logo.jpg">

(parce que l'image est situ&#233;e dans le m&#234;me dossier que index.html)
ou encore par:

<img src="/logo.jpg">

(parce qu'elle est situ&#233;e dans la racine du site)


[2] Dans le fichier index.html, l'acc&#232;s au fichier exemple1.html repr&#233;sent&#233; par l'image image_exemple1.jpg pourra se faire des diff&#233;rentes mani&#232;res suivantes:

<a href="/exemples/exemple1.html"><img src="/images/image_exemple1.jpg"></a>

<a href="exemples/exemple1.html"><img src="images/image_exemple1.jpg"></a>

<a href="/exemples/exemple1.html"><img src="images/image_exemple1.jpg"></a>

<a href="exemples/exemple1.html"><img src="/images/image_exemple1.jpg"></a>

(m&#234;me principe qu'en [1], mais avec un sous-dossier)


[3] Dans le fichier exemple1.html, l'acc&#232;s au fichier index.html pourra se faire comme ceci:

<a href="/index.html">Accueil</a>

(chemin depuis la racine du site)
ou comme cela:

<a href="../index.html">Accueil</a>

(chemin relatif depuis le dossier courant)
et l'image image_exemple1.jpg sera affich&#233;e par:

<img src="/images/image_exemple1.jpg">

(chemin depuis la racine du site)
ou bien:

<img src="../images/image_exemple1.jpg">

(chemin relatif depuis le dossier courant)
et l'image photo_exemple1.jpg sera affich&#233;e par:

<img src="photo_exemple1.jpg.jpg">

(car l'image est dans le dossier courant)
ou bien:

<img src="/exemples/image_exemple1.jpg">

(chemin depuis la racine).


J'esp&#232;re que tous ces exemples sont assez parlants pour toi, et qu'ils &#244;teront les doutes qui pouvaient persister.


EDIT: c'&#233;tait ma r&#233;ponse au post #5, mais j'ai un peu tard&#233; &#224; l'&#233;crire...

 

[Galphanet]

Plusieurs conseils:

• Pas d'espace ou d'accents dans les noms des fichiers
• Tester la validité xhtml 1.0 stricte sur valdidator.w3.org
• Tester sur Firefox, Opera, etc.. ya pas que IE dans la vie
• Supprimer les frames illico
• Aller se renseigner, lire, lire, comprendre, tester. L'excellent alsacreations.com te permettra de comprendre l'accessibilité.

Bon courrage, mais effectivement ya certains trucs qui me font dresser les cheveux sur la tête...

Comme hébergeurs gratuits, il y en a des tonnes, entre autre lycos qui est plein de pub ^^

 

[Anonyme]

Comme hébergeur gratuit proposant php+base de données il y a free et OVH.

 

[CERDAN]

Bonjour &#224; vous tous,

Je me suis pench&#233; sur la question, lu ces 15 pages ( lien de gloup gloup ) tr&#232;s instructives, les derni&#232;res &#233;taient un peu compliqu&#233;es mais ca va dans l'ensemble.

J'ai tout reconverti en lien relatif, parfait, cela m'a pris tout au plus 15, 20 minutes, c'est moins que ce que je croyais.

Tout est maintenant dans un seul et m&#234;me dossier et il n'y a plus de frames ! .

Maintenant reste le probl&#232;me de l'hebergement. Je n'utilise que du html. Pas besoin donc, de php ou ....
Comment conna&#238;tre mon adresse IP. Est-ce important ?

ps: j'utilise et je continue &#224; utiliser bloc-note. Je le trouve minimaliste, je n'ai pas besoin de plus.

merci encore &#224; vous et vos conseils. J'arrive presque au bout .

 

[p4bl0]

Bonjour &#224; vous tous,

Je me suis pench&#233; sur la question, lu ces 15 pages ( lien de gloup gloup ) tr&#232;s instructives, les derni&#232;res &#233;taient un peu compliqu&#233;es mais ca va dans l'ensemble.

J'ai tout reconverti en lien relatif, parfait, cela m'a pris tout au plus 15, 20 minutes, c'est moins que ce que je croyais.

Tout est maintenant dans un seul et m&#234;me dossier et il n'y a plus de frames ! .

Maintenant reste le probl&#232;me de l'hebergement. Je n'utilise que du html. Pas besoin donc, de php ou ....
Comment conna&#238;tre mon adresse IP. Est-ce important ?

ps: j'utilise et je continue &#224; utiliser bloc-note. Je le trouve minimaliste, je n'ai pas besoin de plus.

merci encore &#224; vous et vos conseils. J'arrive presque au bout .

non tu n'aura pas besoin de ton adresse ip si tu n'h&#233;berge aps le site chez toi

Comme h&#233;bergement gratuit il y a Free qui est bien et OVH qui propose un plan gratuit (demo1g)
En payant, OVH est tr&#232;s bien

 

[CERDAN]

Je suis en train de m'occuper de l'inscription, il me demande mon num&#233;ro fixe avec 00 33...je vous tiens au courant .