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

CERDAN · 31 Juillet 2007

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 ?

.

Voila, demandez moi des details si il en manque, je voudrais avoir un avis adressé à un débutant en la matière car c'est la première fois que confectionne un site, qui est très beau et lisible sur Internet Explorer, bien évidemment, que sur mon mac

. ( j'espère que ce sera disponible bientôt par tout le monde

)

Merci à vous tous, et j'aimerais encore remercier les modos qui font un travail formidable sur ce site très bien conçus .

Bonne soirée

Anonyme · 31 Juillet 2007

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

Bloc de code:

http://localhost/~maison/dossierdusite/

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

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

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

Bloc de code:

<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çons suivante :

Bloc de code:

<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és lors de la copie sur un serveur web car on va chercher les images par rapport à la position de la page html dans l'arborescence.

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

Bloc de code:

<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 à ton problème, je ne sais pas quels programmes tu as utilisé, ni comment est l'arborescence de ton site mais avec la plupart des éditeurs de texte moderne, il y a moyen de faire des chercher-remplacer sur plusieurs fichiers et de corriger ça en une fois.

Et pour finir, pour faire un site dans les règles : css — on reprend tout de zéro.

fredintosh · 31 Juillet 2007

CERDAN a dit:
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éter ce que dit Gloup gloup en langage "débutant", il aurait fallu que ton dossier images et les images qu'il contient se situent d'emblée dans ton dossier "site web", et que les liens pointent vers ces images-là (en chemin relatif, voir post ci-dessus).

Ce dossier images devra aussi être uploadé chez ton hébergeur, en même temps que les pages html.

Tu es donc bon pour réécrire tous les liens...

PA5CAL · 31 Juillet 2007

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éférence à 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ès à un document ou à une image situés sur un site différent, lien à conserver en cas de recopie de la page par le visiteur) il est préfé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 éviter "http://www.monsite.com/mondossier/monfichier.html").

CERDAN · 31 Juillet 2007

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

1 ) à 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é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è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ère B.html ?, ..... c'est juste

?

La encore, ce lien

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

ne signifie rien pour mon ordinateur, et le problème de 1) se repose.

3 ) La, par contre je n'ai rien compris :rose: , il faudra être très clair avec moi :rose: . 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és lors de la copie sur un serveur web car on va chercher les images par rapport à la position de la page html dans l'arborescence.

D'accord

, mais alors comment faire comprendre à 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à 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 à fait

.

6 ) Oui, merci de me le faire comprendre dans un language plsu simple, et encore une fois merci

Je comprend tout à fait que je dois faire( en fait je l'ai fait depuis le début...ouf :zen:

), c'est à 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 à 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éférence à 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éférences ? ou c'est quoi les références du serveur ? ( peut être, pour que je comprenne mieux, que tu me fournisse des exemples de ré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 · 31 Juillet 2007

CERDAN, tout dépend de l'endroit où se trouve ton fichier html, par rapport à l'endroit où se trouve l'image à intégrer.
Dis-nous où se trouvent tes pages B.html et C.html (profites-en pour leur trouver des noms plus évocateurs) qui appellent tes images, et on te dira plus facilement comment é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ême niveau que index.html ?

Idéalement, une petite copie d'é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ôt obsolète, tu vas en faire sauter au plafond quelques uns...

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

CERDAN · 31 Juillet 2007

CERDAN, tout dépend de l'endroit où se trouve ton fichier html, par rapport à l'endroit où se trouve l'image à intégrer.
Dis-nous où se trouvent tes pages B.html et C.html (profites-en pour leur trouver des noms plus évocateurs) qui appellent tes images, et on te dira plus facilement comment é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ême niveau que index.html ?

Alors, je reprend

,

Bloc de code:

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

, déja dit.

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

Bloc de code:

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

Le design n'est pas obsolète

.

Anonyme · 31 Juillet 2007

Argh des frames quelle horreur!!!

Sinon oui tu dois modifier ça dans les pages à 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 à faire de spécial et PA5CAL t'a déjà expliquer comment un lien sera considéré comme absolu ou relatif.

Pour résumer les liens relatifs :

Bloc de code:

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

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

Bloc de code:

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

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

Bloc de code:

<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.

Bloc de code:

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

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

Je te conseille vraiment le tutoriel pour débutants donné dans mon précédent message.

Anonyme · 31 Juillet 2007

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

CERDAN · 31 Juillet 2007

Bloc de code:

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 · 31 Juillet 2007

Je ne peux pas ne pas intervenir quand il y a écrit "le design n'est pas obsolète" et qu'il est à base de frames, mais ça devient lassant de toujours réécrire les mê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émantique, de l'accessibilité, de ...
2/ Lire, beaucoup lire, et lire les liens (ceux donner par gloup gloup particulièrement)
3/ Refaire son site de manière propre et avantageause pour tout le monde.

EDIT: et merde le temps que je revienne et que j'écrive ça et gloup gloup est déjà passé :rateau:

p4bl0 · 31 Juillet 2007

CERDAN a dit:
Bloc de code:

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ôt Notepad++ qui est très bien et surtout bien plus pratique que le bloc-note de windows

Anonyme · 31 Juillet 2007

Tu es bien sous windows quoi…

Même sous windows, il y a des programmes plus adaptés (et gratuits) que le bloc-notes pour faire des pages html, paraît que notepad++ est pas mal du tout.

edit: tédcheu

p4bl0 · 31 Juillet 2007

gloup gloup a dit:
edit: tédcheu

Ah ben pour une fois

:style:

PA5CAL · 31 Juillet 2007

Pour faire très concret:

Ton site va être mis à 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érieurs.

Ton ordinateur doit être accessible depuis l'extérieur par une adresse IP, du type http://83.145.105.190 (généralement l'adresse WAN de ton modem-routeur, lequel redirige les requêtes HTTP qu'il reçoit vers ton ordinateur), et si tu as payé un nom de domaine, il peut même ê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é le contenu de ton site dans le dossier:

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

et que tu as réglé le logiciel serveur de manière à 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 à 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 é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 à l'aide d'une balise:

Bloc de code:

<img src="logo.jpg">

(parce que l'image est située dans le même dossier que index.html)
ou encore par:

Bloc de code:

<img src="/logo.jpg">

(parce qu'elle est située dans la racine du site)

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

Bloc de code:

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

Bloc de code:

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

Bloc de code:

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

Bloc de code:

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

(même principe qu'en [1], mais avec un sous-dossier)

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

Bloc de code:

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

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

Bloc de code:

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

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

Bloc de code:

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

(chemin depuis la racine du site)
ou bien:

Bloc de code:

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

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

Bloc de code:

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

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

Bloc de code:

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

(chemin depuis la racine).

J'espère que tous ces exemples sont assez parlants pour toi, et qu'ils ôteront les doutes qui pouvaient persister.

EDIT: c'était ma réponse au post #5, mais j'ai un peu tardé à l'écrire...

Galphanet · 1 Août 2007

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 · 1 Août 2007

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

CERDAN · 1 Août 2007

Bonjour à vous tous,

Je me suis penché sur la question, lu ces 15 pages ( lien de gloup gloup ) très instructives, les dernières étaient un peu compliqué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ême dossier et il n'y a plus de frames !

.

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

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

merci encore à vous et vos conseils. J'arrive presque au bout

.

p4bl0 · 1 Août 2007

CERDAN a dit:
Bonjour à vous tous,

Je me suis penché sur la question, lu ces 15 pages ( lien de gloup gloup ) très instructives, les dernières étaient un peu compliqué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ême dossier et il n'y a plus de frames ! .

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

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

merci encore à vous et vos conseils. J'arrive presque au bout .

non tu n'aura pas besoin de ton adresse ip si tu n'héberge aps le site chez toi

Comme hébergement gratuit il y a Free qui est bien et OVH qui propose un plan gratuit (demo1g)

En payant, OVH est très bien

CERDAN · 1 Août 2007

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

.

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

Membre expert

Anonyme

Invité

Membre expert

Membre expert

Membre expert

Membre expert

Membre expert

Anonyme

Invité

Anonyme

Invité

Membre expert

Membre expert

Membre expert

Anonyme

Invité

Membre expert

Membre expert

Membre actif

Anonyme

Invité

Membre expert

Membre expert

Membre expert

Sujets similaires