dreamgate事業一覧
IT用語辞典

事業案内 HP制作・SEO 郡上ホームページ教室

URLとフォルダ構造
初心者を対象にホームページの基本を紹介します。テーマは「URLとフォルダ構造」です。作成したホームページは、Webサーバにアップロードして公開しますが、URLとフォルダの関係がよくわかっていないとページが正しく表示されない恐れもあります。ホームページ公開の基本ともいえる内容なので、必ずマスターしてください。

→ index.html は必須
i訪問者がURLをブラウザに入力(またはリンクから訪問)すると、貴方のホームページが画面に表示されます。このとき参照されるHTMLファイルが「index.html」です。ここで、もしWebサーバに「index.html」がアップロードされていなかったとすると…、当然、ページは正しく表示されません。つまり、ホームページを作成するときは、必ず「index.html」を作成し、アップロードしなければいけないのです。なお、「index.html」の代わりに「index.htm」をトップページのHTMLファイルとして使用することも可能です。

→ Webサーバ上のフォルダとURL
webサーバでは、フォルダを作成し、ファイルを階層的に管理することも可能です。また、Webサーバ上に作成したフォルダは、そのままURLにも反映されます。たとえば、「image」というフォルダをWebサーバ上に作成し、その中に「photo1.jpg」というファイルを保存(アップロード)した場合、そのURLは「http://(サイト名)/image(フォルダ名)/photo1.jpg」となります。つまり、「http://(サイト名)/」が貴方のサイトを表し、次の「image/」が「image」フォルダを表しているわけです。このように、Webサーバ上に作成したフォルダは、URLでは「/」(スラッシュ)で区切られて表記されます。

なお、フォルダまでをURLに記述した場合(ファイル名を省略した場合)は、自動的に「index.html」が補完され、「http://(サイト名)/(フォルダ)/index.html」となります。トップページが「http://(サイト名)/」だけで表示されるのも、この補完機能のおかげです。

→ HTMLファイルの位置とリンク
「IMG」タグで画像を表示する場合などは、タグ内で参照先ファイルのURLを指定する必要があります。この指定方法には相対パスを利用することも可能ですが、この場合“HTMLファイルが保存されているフォルダを基準”に、フォルダを含めた形式でファイルを指定する必要があります。

相対パスによるファイル指定方法は、大きく分類すると以下の例のようになります。各例の指定方法を参考に、正しい相対パスを記述するようにしてください。
例1)HTMLと指定ファイルが同じフォルダにある場合
 HTMLファイル:「http://(サイト名)/page.html
 画像ファイル:「http://(サイト名)/image01.jpg
 [指定方法]:image01.jpg
※ファイルの指定は、ファイル名だけでOK


例2)HTMLがあるフォルダのサブフォルダに指定ファイルがある場合
 HTMLファイル:「http://(サイト名)/page.html
 画像ファイル:「http://(サイト名)/photo/image01.jpg
 [指定方法]:photo/image01.jpg
※ファイルの指定は、フォルダ名+ファイル名となる


例3)HTMLがあるフォルダと指定ファイルがあるフォルダが全く異なる場合
 HTMLファイル:「http://(サイト名)/syoukai/page.html
 画像ファイル:「http://(サイト名)/photo/image01.jpg
 [指定方法]:../photo/image01.jpg
※ファイルの指定は、そのフォルダへの経路を含めた形となる。一つ上のフォルダに移動するには「../」と記述する。この例では、「syoukai」→(ルートフォルダ)→「photo」とフォルダを移動し、「image01.jpg」を指定しています。

(※1) 詳しくは、「郡上ホームページ教室」にて・・・


スポンサーサイト
現代津軽三味線・徳山流 徳山弦泉 公式ホームページ
演奏活動・三味線教室・オリジナル曲の紹介。CD試聴できます。
http://www.t-gensen.com/
郡上プラザどっと混む|郡上の情報サイト
郡上の情報サイト「郡上プラザどっと混む」は郡上で活躍する方たちを応援するサイト。
http://gujoplaza.com/

Gujo sunset
あの町 この町 日が暮れて
郡上おどり日程表
自動で被リンクが増殖する新しいリンクシステム。登録無料!アクセスアップ・SEO対策にご利用下さい。
郡上のイベント

C2006−2011 dreamgate
Google