初心者のためのホームページ作り 第9号

Web作成支援 初心者でもタグやスタイルシートを学んで、思い通りのホームページが作成できる講座を、現在メールマガジンにて配信しています。当サイトを利用するに当たって、是非メールマガジンを購読することをお勧めします。なお、未だ購読されていない方はこちらから登録できます。念のため無料です。

今週のおさらいバックナンバーはこちらから
第1号  第2号  第3号  第4号  第5号  第6号  第7号  第8号  目次  

プレーンテキスト版

今週<第9号>マガジンのおさらい
まず、記事から抜書きでおさらいします。

                   毎週金曜日配信 What's New 2002/7/12
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
 今週の課題 ■ パス

◆フォルダ
私たちはHTML文書を作って、ローカル(自分のパソコン)のフォルダに入れて保
存しています。同じフォルダ内にあるHTML文書をリンクさせるには、あまりパス
というものを考えなくていいのですが、いずれたくさんのHTML文書や画像、スタ
イルシートなどでいっぱいになります。
 そこで少し整理が必要になって、各種のファイルを区別して種類別のフォルダ
に移動しておいたほうが、あとあと便利になります。HTML文書もコンテンツの内
容別に分けて整理し、それぞれフォルダを作って格納しておきます。
 そうしたときに初めて「パス」を意識します。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆ディレクトリ・・ www.scollabo.com/banban/  の場合
当講座のサイトの、サーバーのディレクトリのごく一部です。サーバーはUNIX系
のOSなので、フォルダとは呼ばず、ディレクトリと呼んでいます。
 ディレクトリとは、みなさんのフォルダと考えてください。/ はディレクトリ
を表しています。 

ディレクトリ:banban ディレクトリ: banban
HTML文書 HTML文書 index.html
ディレクトリ:lectur ディレクトリ:lectur
ht.html ht2.html ht3.html …
ディレクトリ:term ディレクトリ:term
w3c.html xt.html …
ディレクトリ:ref ディレクトリ:ref
tag.html ref.html …
ディレクトリ:images ディレクトリ:images
title.gif hana.png sample.jpg …
ディレクトリ:css ディレクトリ:css
style.css …

簡単に述べますと、banbanという名のフォルダには、index.htmlという文書と、term、ref、css、imagesという名のそれぞれのフォルダがあります。

termというフォルダには、w3c.html、xt.htmlなどのHTML文書があるということが分かります。 cssというフォルダにはスタイルシートがあり、imagesというフォルダには各種画像ファイルが置いてあります。

index.html から見た termフォルダの中のw3c.html文書をindex.html からリンクするには、index.html文書中で
<a href="term/w3c.html">W3C</a> と記述します。

つまり、1つ上の階層(ディレクトリ)にいくのには
<a href="フォルダ名/ファイル名">上の階層</a>

逆に w3c.html からindex.html へリンクするには、w3c.html文書に
<a href="../index.html">Home</a> と記述します。
ここでは、tipsフォルダの外のindex.htmlへのURLパスという意味になります。

これは1つ下位の階層にいくことを示し、
<a href="../ファイル名">下の階層</a> となります。

では、termフォルダのw3c.htmlから見た refフォルダのref.html文書では どのようなパスの記述となるでしょうか?
<a href="../ref/ref.html">レファレンス</a> と記述します。
これは、tipsフォルダの外のフォルダであるrefフォルダを指し、ついで目的のHTML文書ref.htmlへリンクするURLパスとなります。

つまり、別の階層のディレクトリへの記述のポイントは
<a href="../フォルダ名/ファイル名">別の階層</a> となります。

これらをすべて「相対パス」と呼びます。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆絶対パス
 URLには今まで勉強してきた「相対パス」のほかに、基準となる「絶対パス」が
あります。
 通常、これはサーバーにHTML文書があるときに有効になります。ローカルでは
オンライン状態でない場合、あまり意味がありません。
 下記のURLを参照してください。

  http://www.scollabo.com/banban/index.html
これが絶対パスです。上記の URLはこの講座のサイトのトップページに当たりま
す。私のサイト内でこのページに戻る時には、ほとんど「相対パス」で記述して
いますが、こう書くこともできます。

<a href="http://www.scollabo.com/banban/index.html">Home</a>
絶対パスで指定したリンクの記述方法です。おもに他のサイトにリンクする時な
どに使用します。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
このサイト内にある「お役立ちリンク」では、絶対パスで記述したリンクになっています。同じサイト内で、絶対パスを使うことはほとんどありませんが、他のサイトのページにリンクするときに、フルパス、つまり絶対パスで記述します。その場合、別のウィンドウで表示するように、target属性を使っています。

ただし、この属性は、HTML4.01ではあまり推奨されておりません。その場合、DTD(文書型宣言)は、Transitional を使います。Strictでは対応していません。

記述方法は、
<a href="http://www.yahoo.co.jp/" target="_blank">ヤフー</a>

target属性については、いずれフレームの講座のときに、改めて詳しく解説します。



Copyright(C) 2002-2003 banban@scollabo.com