<<PREV | 目次 | NEXT>>

簡単な練習

Since: 04th/May/2006

簡単なページを作成してみましょう。

  1. 作業ディレクトリを作成
  2. 表紙を作成
  3. コンテンツ用のサブディレクトリを作成
  4. コンテンツページ作成
  5. コンテンツページの更新
  6. 表紙からのリンクを作成
  7. コンテンツページに画像を挿入
  8. まとめ

作業ディレクトリを作成

まず、作業ディレクトリを作成します。ここでは、Windows 環境で「マイ ドキュメント」のなかに、 "SampleWebsite" という名前でフォルダを作成したものとして、以下の説明を続けます。

  1. 「マイ ドキュメント」を開いて、
  2. その中の何もない場所を右クリック -> [新規作成(W)] -> [フォルダ(F)]
    ディレクトリの作成
    図：ディレクトリ作成
  3. フォルダ名が青く反転して、カーソルが末尾で点滅している状態で、 SampleWebsite と入力して Enter キーを押下

表紙を作成

作成した"SampleWebsite"直下にindex.htmlを作成します。

  1. ファイルの作成： [マイ ドキュメント]を右クリック -> [新規作成(W)] -> [テキスト文書]
    ファイルの作成
    図：ファイル作成
  2. 名前の変更： 作成した"新規ﾃｷｽﾄ文書.txt"を"index.html"に変更
    名前の変更
    図：名前の変更
  3. ソースの修正： 作成した"index.html"をテキストエディタで開き、次のように内容を更新 
    <?xml version="1.0" encoding="Shift_JIS" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS" />
<title>簡単なウェブサイト</title>
</head>
<body>
<h1>簡単なウェブサイト</h1>

<p>これは練習用の簡単なウェブサイトです。</p>

<address>
Copyright &copy; 2007 <a href="mailto:sugai@fides.dti.ne.jp">SUGAI, Manabu.</a>
All Rights Reserved.<br />
2007-05-04 Published, 2007-05-04 Revised.
</address>
</body>
</html>
  4. ブラウザで表示確認： 更新した"index.html"をブラウザで開く
    MS IE での表示例
    図：MS IEでの表示例
    Firefox での表示例
    図：Firefoxでの表示例

コンテンツ用のサブディレクトリを作成

  1. 「マイ ドキュメント」を開いて、
  2. その中の何もない場所を右クリック -> [新規作成(W)] -> [フォルダ(F)]
  3. フォルダ名が青く反転して、カーソルが末尾で点滅している状態で、 essay と入力して Enter キーを押下
    essay作成結果
    図：essay作成結果

コンテンツページ作成

  1. 作成したディレクトリ essay を開く
  2. essay 内を右クリック -> [新規作成(W)] -> [テキスト文書]
  3. 名前の変更： 作成した"新規ﾃｷｽﾄ文書.txt"を"test_page.html"に変更
  4. ソースの修正： 作成した"test_page.html"をテキストエディタで開き、次のように内容を更新 
    <?xml version="1.0" encoding="Shift_JIS" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS" />
<title>簡単なウェブサイト | テストページ</title>
</head>
<body>
<h1>Test Page</h1>

<p>これは練習用の簡単なページです。</p>

<address>
Copyright &copy; 2007 <a href="mailto:sugai@fides.dti.ne.jp">SUGAI, Manabu.</a>
All Rights Reserved.<br />
2007-05-04 Published, 2007-05-04 Revised.
</address>
</body>
</html>
  5. ブラウザで表示確認： 更新した"test_page.html"をブラウザで開く
    6. test_page.html作成結果
    図：test_page.html作成結果
    MS IE での表示例
    図：MS IEでの表示例
    Firefox での表示例
    図：Firefoxでの表示例

コンテンツページの更新

表紙ページへのリンクを作成します。

  1. ディレクトリessayの下のファイルtest_page.htmlをテキストエディタで開く
  2. ソースを次のように更新 
    <?xml version="1.0" encoding="Shift_JIS" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS" />
<title>簡単なウェブサイト | テストページ</title>
</head>
<body>
<p><a href="../index.html">表紙</a> | essay -&gt; test page </p>

<h1>Test Page</h1>

<p>これは練習用の簡単なページです。</p>

<p><a href="../index.html">表紙</a> | essay -&gt; test page </p>

<address>
Copyright &copy; 2007 <a href="mailto:sugai@fides.dti.ne.jp">SUGAI, Manabu.</a>
All Rights Reserved.<br />
2007-05-04 Published, 2007-05-04 Revised.
</address>
</body>
</html>
  3. ブラウザで表示確認： 更新した"test_page.html"をブラウザで開く（リンクの動作を確認してください）
    MS IE での表示例
    図：MS IEでの表示例
    Firefox での表示例
    図：Firefoxでの表示例

表紙からのリンクを作成

作成した"test_page.html"へ、表紙からリンクを作成します。

  1. ディレクトリSimpleWebsiteの下のファイルindex.htmlをテキストエディタで開く
  2. ソースを次のように更新 
    <?xml version="1.0" encoding="Shift_JIS" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS" />
<title>簡単なウェブサイト</title>
</head>
<body>
<h1>簡単なウェブサイト</h1>

<p>これは練習用の簡単なウェブサイトです。</p>

<h2>雑文</h2>

<h3><a href="./essay/test_page.html">Test Page</a></h3>
<p>(2007/05/04)テスト用のページです。</p>

<address>
Copyright © 2007 <a href="mailto:sugai@fides.dti.ne.jp">SUGAI, Manabu.</a>
All Rights Reserved.<br />
2007-05-04 Published, 2007-05-04 Revised.
</address>
</body>
</html>
  3. ブラウザで表示確認： 更新した"index.html"をブラウザで開く（リンクの動作を確認してください）
    MS IE での表示例
    図：MS IEでの表示例
    Firefox での表示例
    図：Firefoxでの表示例

コンテンツページに画像を挿入

ロゴ画像を作成してコンテンツページに挿入してみます。

  1. ロゴ画像を作成。ここでは次の画像を利用
    Test page
  2. 作成した画像をフォルダessayへコピー。名前は"test_page_title.png"とする
    essay/test_page_title.pngのコピー結果
    図："essay/test_page_title.png"のコピー結果
  3. ディレクトリessayの下のファイルtest_page.htmlをテキストエディタで開く
  4. ソースを次のように更新 
    <?xml version="1.0" encoding="Shift_JIS" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS" />
<title>簡単なウェブサイト | テストページ</title>
</head>
<body>
<p><a href="../index.html">表紙</a> | essay -&gt; test page </p>

<h1><img src="./test_page_title.png" alt="Test Page" /></h1>

<p>これは練習用の簡単なページです。</p>

<p><a href="../index.html">表紙</a> | essay -&gt; test page </p>

<address>
Copyright &copy; 2007 <a href="mailto:sugai@fides.dti.ne.jp">SUGAI, Manabu.</a>
All Rights Reserved.<br />
2007-05-04 Published, 2007-05-04 Revised.
</address>
</body>
</html>
  5. ブラウザで表示確認： 更新した"test_page.html"をブラウザで開く（リンクの動作を確認してください）
    MS IE での表示例
    図：MS IEでの表示例
    Firefox での表示例
    図：Firefoxでの表示例

サーバにファイルを転送する場合は、FileZillaを用いた転送方法を説明しています。

まとめ

一度では把握しにくいかもしれませんが、何度かやっているうちに慣れます。重要なポイントをおさらいしておきます。

全角と半角は区別しよう

全角文字と半角文字は別の文字です。

全角と半角は見た目では区別しにくいので、半角文字でなければならない場所の入力では、IMEをオフ（スペースキーを押下して「変換」できない状態）にして入力しましょう。キーボードの左上の方にある、[半角/全角]と刻印のあるキーを押下することで、IMEのオン/オフを切り替えられます。

ファイル名、ディレクトリ名は、全角文字をURLエンコードすることで使えますが、サーバ上の文字コードの確認やURLエンコードなどが手間になるので、使わないで済むのであれば、最初から使わない方が無難です。

ファイル名、ディレクトリ名にスペースは不可

ファイル名、ディレクトリ名には、スペース（空白）を含まないようにしましょう。

URLで"%20"（URLエンコード）に置き換えればいいのですが、使わないで済むのであれば、最初からスペースを含ませない方が無難です。

大文字と小文字を区別しよう

大文字と小文字は別の文字です。

ファイル名とディレクトリ名の場合、Windowsパソコン上では区別されませんが、サーバへ転送したら（他の人から閲覧されるときは）、"index.html"と"Index.html"は別のファイルです。

ファイルとディレクトリを把握しよう

ファイルは、内容が分かりやすい名前をつけて、ディレクトリごとに整理しておきましょう。

今回は、"SampleWebSite"の下に"essay"を作成し、ファイル"test_page.html"と"test_page_title.png"を作成しました。

SampleWebsite/
 |
 +--index.html          サイトの表紙
 +--essay/
     |
     +--test_page.html         テストページ
     +--test_page_title.png    テストページのロゴ画像

ディレクトリ階層は最初に決めよう

ディレクトリ階層が変わると、相対リンクが切れてしまう（リンクを張りなおさなければならない）ので、ディレクトリ階層は、早いうちに決定して、後で変更しないようにしましょう。

コンテンツ内のファイル数が増える予定の場合は、コンテンツごとにディレクトリを作成し、各々に見出し用の"index.html"を作成するようにした方が良いでしょう。例えば、次のようになります。

SampleWebsite/
 |
 +--index.html          サイトの表紙
 |
 +--essay/
 :   |
     +--index.html      essayの表紙
     |
     +--test/
     |   |
     |   +--index.html  testのコンテンツ
     |   +--title.png
     |   +--another_img.png
     |   :
     |
     +--another/
     :   |
         +--index.html  anotherのコンテンツ
         +--title.png

<<PREV | 目次 | NEXT>>

Copyright © 2007 SUGAI, Manabu. All Rights Reserved.