About   Code   Homepage   JavaScript   Memo   MT   PHP   Study   Tools   Vista   

1.まず作ってみよう

  1. ホームページを作成するために
  2. ブラウザとメモ帳を使う
  3. フォルダを作成する
  4. メモ帳でHTMLを書く
  5. ブラウザで表示する
  6. 追加・修正する
  7. 改行する
  8. 太字にする
  9. 色を変える

HTMLの基礎知識

  1. ひな型
  2. HTML文書
  3. ヘッダ部
  4. タイトル
  5. 本文
  6. タグ
  7. 属性

HTML文書の体裁

  1. 章と段落と改行
  2. 太字や斜体の文字
  3. 文字の大きさ
  4. 文字の色や背景色
  5. フォントスタイル
  6. 箇条書き
  7. 説明付き字下げ

テーブルを使う

  1. 基本的なテーブル
  2. 行と列とセル
  3. 行または列の追加
  4. セルの結合・分割
  5. セル内の余白
  6. 枠の太さを変える
  7. 色つきのテーブル
  8. 複数のテーブルを並べる

写真や画像を貼る

  1. 画像を用意する
  2. 画像をページに貼り付ける
  3. 画像の大きさを変える
  4. 画像を箇条書きのマークにする
  5. 画像をリンクボタンにする
  6. 写真の一覧を作る

ページをリンクする

  1. 他サイトのページにリンク
  2. 自サイトのページにリンク
  3. 相対リンク
  4. ページ内のリンク
  5. リンク先にフォルダ名を指定する
  6. 別ウィンドウで開く

ホームページを公開する

  1. 自分のURLを取得する
  2. FTPでサーバに転送する
  3. FTPのいろいろ
  4. FFFTPの使い方


1.1 ホームページを作成するために

インターネットが一般家庭に普及しはじめて10年になります。いまや個人が世界に情報を発信し、友人・知人と話したり、写真やビデオをWebに公開して共有したりすることが普通になりました。数年前からは、それまでの「ホームページ」や「日記」から「ブログ」、「SNS」が主流になった。しかし、基本は「わたしのWebサイト」、つまりホームページなのです。そのための手段やツールの選択肢が増えたということです。HTMLやWebサーバの知識の程度によって、ホームページ作成の方法も異なります。

  1. 友人やホームページ作成業者に依頼する
    有料でホームページ作成を代行する業者がたくさんいます。企業のホームページは「会社の顔」ですので、社内で自主制作するのではなく社外のプロに依頼するのが一般的です。結果的に安上がりになり、ブランディングやマーケティングの効果が高くなるでしょう。ただし、制作後の保守や改版についての取り決めをしっかりとしておく必要がある。ホームページは生き物で日々変わっていくものですから、どのように運営・維持・改善していくかが大切になります。

  2. ホームページ作成ソフトを使って作成する
    ホームページ作成を支援するツールがたくさんあります。有償の商品だけでなく、フリーのものやシェアウェアなどもあります。インターネットサービスプロバイダ(ISP)は、必ずといっていいほど、ホームページ作成やブログ作成ツールを提供しています。昔は、FrontPageやNetscape Composerが代表的なものでしたが、いまやたくさんありすぎて定番というものがありません。敢えて私が使ったものでいうと、プロ用ではDreamWeaver、個人用ではIBMホームページビルダーでしょうか。

  3. テキストエディタで作成する
    HTMLは簡単な記述言語、コンピュータに指示するコトバです。自分で自由自在にお気に入りのホームページを作りたいときはHTMLを勉強することをお勧めします。ほかのツールを使うにしても、結果的にHTMLを使うことですから、最初にHTMLの基本を勉強したほうが早道でしょう。メモ帳のようなテキストエディタがあればすぐ作成できます。ワードプロセサ(文書作成ソフト)と同じように、いろんな書式や色、写真、画像、アニメーションなどを含んだ文書が作成できるようになります。

ホームページを作成するのに必要なのは、つぎの二つのツールです。

  1. ブラウザ
    ブラウザとは、このページを見るために使っているツール(ソフトウェア)です。Windowsパソコンであれば、セットアップしたときに使えるようになっているマイクロソフト社の Internet Explorer を利用する人が多い。以下の説明では、Internet Explorer のことを IE と書きます。ほかのブラウザについては、こちらを参考にしてください。

  2. テキストエディタ
    最初は、Windows の場合はメモ帳 ( notepad.exe)、Macintosh の場合は SimpleText があれば十分です。メモ帳は、[スタート]→[すべてのプログラム(P)]→[アクセサリ]→[メモ帳] にあります。

以下の説明では、「Windows XP」で「Internet Explorer 6.0」と「メモ帳」を用いた例を示します。ほかのブラウザ(Netscape、Firefox、Operaなど)の場合、メニューの名前が異なる場合がありますが、適切に読み替えてください。

これから作成する各種ファイルを格納するためのフォルダを作成します。例では、MyHomeというフォルダを使います。つぎの手順で、[マイ ドキュメント] の下に MyHome という名前のフォルダを作成します。

  1. [スタート]→[すべてのプログラム(P)]→[アクセサリ]→[エクスプローラ] でエクスプローラ(※)を起動します。
  2. 左側のツリーで [マイ ドキュメント] を選択した状態で、メニューから [ファイル(F)]→[新規作成(W)]→[フォルダ(F)] を実行します。
  3. [新しいフォルダ] が作成されます。[ファイル(F)]→[名前の変更(M)] で、フォルダの名前を「新しいフォルダ」から「MyHome」に変更します。

※ エクスプローラとインターネットエクスプローラ(IE)は別のプログラムです。IEはホームページを表示するブラウザ(iexplore.exe)です。エクスプローラ(explore.exe)は、ディスク上のファイルやフォルダを表示します。

※ デスクトップに フォルダを作成するときは、画面上でマウスを右クリックして、[新規作成]→[フォルダ]を実行します。フォルダを右クリックして[名前を変更]することができます。

拡張子を表示する

ホームページの作成では、拡張子(ファイル名末尾の .txt や .html などの文字)は非常に重要です。下記の手順で拡張子を表示するように変更してください。

  1. エクスプローラの [ツール(T)]→[フォルダオプション(O)...] を実行します。
  2. [表示] タブの中の [登録されている拡張子は表示しない] をオフ(チェックをつけない)にして [OK] ボタンを押してください。

メモ帳などのテキストエディタで HTML 文書を作成します。メモ帳以外のテキストエディタでも構いません。Word などのワープロを用いる場合は、保存時にテキストファイルとして保存する必要があります。

  • [スタート]→[すべてのプログラム(P)]→[アクセサリ]→[メモ帳] を起動します。
  • メモ帳につぎのテキストを入力します。
<html>
<head>
<title>ホームページの作成</title>
</head>
<body>
初めてのホームページです。
</body>
</html>

これを、 [MyHome] フォルダの中に test.html という名前で保存します。

  • メモ帳の [ファイル(F)]→[名前を付けて保存(A)] を実行します。
  • ファイルの種類(T):「 テキスト文書(*.txt)」をクリックして、「すべてのファイル(*.*)」を選択します。
  • [マイ ドキュメント] の中から先ほど作成した MyHome フォルダをダブルクリックして開きます。
  • [ファイル名(N)] に test.html と入力して、[保存(S)] ボタンを押します。
※ファイルの種類が「テキスト文書(*.txt)になっていると、test.html.txt という名前で保存されますので注意してください。

ファイル名に関する注意

ホームページで作成する HTML文書や画像ファイルのファイル名を付けるときは、以下の点に注意してください。
  • 基本的に、半角英数字のみを用いる。漢字やかな入力で変換した英数字を使わない。
  • 使用可能な記号はドット(.)、ハイフン(-)、アンダーバー(_)です。
  • スペース文字を含んだファイル名は使用しない。
  • 大文字・小文字を使い分ける。
○ test.html
○ test-page.html
× test&page.html
× Test Page.html
× テスト.html

※Windows で作成しているときは test.html も TEST.html も同じファイルとみなされますが、サーバーにアップロードすると別のファイルとして扱われることがあります。大文字と小文字の使い分け に注意が必要です。間違いを避けるためには、すべて小文字の英数字を使ったほうが良い。

拡張子に関する注意

HTML 文書の拡張子は通常 .html ですが、Windows 3.1 など古いシステムで拡張子に 3文字しか使用できなかったことから、未だに .htm とすることがあります。 .htm でも .html でもどちらでも構いませんが、間違いを避けるために、どちらかに統一して使ったほうがいい。

作成した test.html をブラウザで表示します。

  • ブラウザ(IE とします)を起動します。[スタート]-[すべてのプログラム(P)]-[Internet Explorer] などから起動することができます。
  • ブラウザ(IE)の [ファイル(F)]→[開く(O)...]→[参照(R)...] で、[マイ ドキュメント]→[MyHome] の中の test.html を選択して、 [開く(O)] ボタンを押します。

左がメモ帳で作成したテキストです。これを、test.html の名前で保存したものをブラウザで開いたホームページです。スクリーンショットの例はFireFoxですが、IEでもおなじように表示されます。

「初めてのホームページです。」と表示されています。メモ帳で、との間に書いたテキストです。の間に書いたテキストがブラウザのタイトルに表示されていることを確認してください。

これでとりあえずホームページが完成です。あとは、メモ帳で、との間に、ホームページの内容(コンテンツ)を書いていきます。