第6回 webページ作成（サーバへの登録）

1. webページ作成（サーバへの登録）

作成したhtmlファイルと、それらが参照しているその他のファイル一式を、学科の演習室にあるearthという名前のサーバの特定の場所に置くことでwebページとして公開することができます。そのために、FileZillaやffftpを使います。

ファイルの送り先は、earth内の各自のホームディレクトリ（例えば12fi999の人の場合は/home/mlab/12fi999）内の、public_htmlというサブディレクトリ内です。

2. ファイルのディレクトリ

ディレクトリ構造の例

3. URIとリンク（教科書p33-辺り）

3.1 絶対URI

http://www.mlab.im.dendai.ac.jp/~12fi999/JapanesePage.html

のようにアドレスを記述すると、インターネット中から１つの特定のファイルを参照することができます。リンク方法は以下。

<a href="http://www.mlab.im.dendai.ac.jp/~10fi999/JapanesePage.html">日本語のページ</a>

3.2 相対URI

相対URIは参照先を参照元からの相対的な位置で示します。以下の場合で考えてみましょう。
埋め込まれる文書

3.2.1 同じディレクトリの場合：ファイル名を指定するだけで参照することができます。

JapanesePage.htmlからは    <img src="cat.jpg">日本語のページ</a>

3.2.2 異なるディレクトリの場合：pathを使って記述します（コンピュータプラクティス参照）。

index.htmlからは
<a href="Japanese/JapanesePage.html">日本語のページ</a>
<a href="English/EnglishPage.html">Englisha Page</a>
JapanesePage.htmlからは
<a href="../English/EnglishPage.html">Englisha Page</a>
※../は一つ上の階層のディレクトリへの移動を示します。

3.2.3 画像や素材をまとめる

上の例ではcat.jpgはJapaneseとEnglishの両方で使われているので、以下のようにすることもできます。

JapanesePage.htmlからは    <img src="../cat.jpg" />
index.htmlからは    <img src="cat.jpg" />
埋め込まれる文書

3.2.4 画像や素材をもっとまとめる

他にも使いたい画像がたくさんあるとき、以下のように一つのフォルダに画像をまとめておくと便利です。

JapanisePage.htmlからは    <img src="../images/cat.jpg" />
index.htmlからは    <img src="images/cat.jpg" />
埋め込まれる文書
単純な構造のwebページの内は、public_html内に直接全てのファイルを置いても問題はありませんが、大規模で複雑な構造になってくると、関連するファイルをそれぞれ別のディレクトリにまとめて、整理しないと収拾がつかなくなってきます。

4. ファイル名の制約

windows上で作業している間は問題なく見えたwebページが、サーバに転送すると見えなくなるといった現象が多発します。この原因には以下のような事例があります。

4.1 ファイル名に日本語と空白は使えない

windowsPC上ではOKだが、サーバではNG。以下はよくない例。

"自己紹介.html"
"My Home Page.html"

4.2 ディレクトリの区切りは"/"を使う("\"はNG)

windowsではディレクトリの区切りは'\'と'/'の両方が許されますが、サーバへ送ると'/'しか使えません。

4.3 大文字と小文字は区別される

windowsではファイル名の大文字と小文字を区別しませんが、サーバに送ると厳格に区別されます。

index.html ≠ INDEX.HTML

4.4 index.htmlファイルは特別

index.htmlの場合：

以下のような場合、URL1でもURL2でもindex.htmlが表示されます。
URL2の方が、URLの記述を省略でき、スマートな印象になります。
学生ホームページ一覧ではURL2の方法でリンクしています。

フォルダの場所→ /00fi000/public_html/index.htmlの場合、
URL1→ http://www.mlab.im.dendai.ac.jp/~00fi000/index.html
URL2→ http://www.mlab.im.dendai.ac.jp/~00fi000/

index.html以外の名前を使う時：

以下のような場合、URL1の方法になります(以下はその例)。
フォルダの場所→/00fi000/public_html/HomePage.htmlの場合、
URL1→http://www.mlab.im.dendai.ac.jp/~00fi000/HomePage.html
※自分のページがうまく見えないときの対策例

5. ".htaccess"によるアクセス制限

作成したhtmlファイルと同じディレクトリに、以下の内容のテキストファイルを.htaccessの名前で保存しておくと、学内からのみしか参照できなくなる。

order deny,allow 
deny from all
allow from 133.20 .dendai.ac.jp