□HTMLで作るホームページ入門です。
□メモ帳やテキストエディタでシンプルな手作りホームぺージを作ってみよう。
| 準 備 |
| ■テーマを決めよう |
| ■全体の構成を考えよう |
| ■サンプルファイルをブラウザで見てみよう |
| 制 作 |
| ■トップページをつくろう |
| ■ほかのページも用意しよう |
| ■各ページをリンクさせよう |
| ■ブラウザでチェックしよう |
| 活 用 |
| ■アップロードしよう |
| ■ホームページを宣伝しよう |
はじめてのホームページ
準備
■テーマを決めよう。
１．どんな内容のホームページを作るのか、企画をしてみます・ 自分の作品（写真、イラスト、エッセイなど）などを掲載する
・ 自分の趣味（読書、音楽鑑賞、映画など）の記録を紹介する
・ 地域やサークル、学校、企業の紹介をする
・ 自分が知っていること、学んでいることをまとめてテキストを作成してみる…..など
２． ホームページのタイトルを決めます。
ホームページの紹介や検索エンジンに登録するために「タイトル」が必要です。
例 『はじめてのホームページ』
３．具体的な項目（コンテンツ）を設定します。
●Diary （仕事日記、観察記録、旅行記、育児日記など）
●Book （お気に入りの本の紹介ページ）
●Profile （自己紹介 ：本名は公開しなくてもよい）
■全体の構成を考えよう
基本的なページの構成を考えます。
・最初のページをインデックスとします。（index.html）
(書籍でいう表紙や目次のようになっていることが多いです)
・別ページをコンテンツごとに作成します
(ex. diary.html profile.html )
ホームページの構成例
| トップページ L 日記のページ L 読書のページ L 自己紹介のページ |
HTMLファイルの構成
| index.html L diary.html L book.html L profile.html |
・ファイル名は半角英数字
・(ページ名).html で保存します
■サンプルファイルをブラウザで見てみよう
拡張子を.html で保存したHTMLファイルは、ブラウザ(IEやChromeなど)のアイコンで表示されます。ダブルクリックすると、ブラウザで開きます。
作成したHTMLファイルを、ブラウザで見てみよう。
制作
■トップページをつくろう。
インデックスを作ります。
ホームページは『HTML言語』で表すものですが、ホームページ作成ソフトを使うとHTMLファイルを簡単に作ることができます。
※文字色とページの色を決めておきます。
△文字色：白色
▲背景色：みどり
1. 文字の入力タイトルと各コンテンツの見出しを入力します。
| はじめてのホームぺージ Diary Book Profile |
2. 簡単なレイアウトをしてみよう。
全体を中央揃えにします。
| はじめてのホームぺージ Diary Book Profile |
3. 文字色・背景色を設定します。
△文字色 ：白 色 （White #ffffff)
▲背景色 ：みどり色（Green #008000)
| はじめてのホームぺージ Diary Book Profile |
4. 名前をつけて保存ホームページ作成ソフトは、ファイル名を入力するだけでHTMLファイルができます。
トップページのファイル名は index 拡張子は.html にします。
（InternetExprolerのアイコンで保存されます）
ホームページ用のフォルダ（MyHomepageなど)を作って、HTMLファイルの保存先はそのフォルダを指定しましょう。
■ほかのページも用意しよう。
diary.html
book.html
profile.html
| Diary (日記のページ) タイトル コメント 内容 ・○月×日 ・○月×日 ・○月×日 |
indexと同様に、Diaryという名前をつけて保存。
| Book(読書の記録） ○月×日 本の名前 作者名 出版社名 コメント・感想等 ○月×日 本の名前 作者名 出版社名 コメント・感想等 ○月×日 |
| Profile（プロフィール） 名前（ニックネーム など） 出身地 趣味 |
■各ページにリンク設定しよう。
□インデックス(index.html) の見出しから各ページへジャンプするように ハイパーリンクを挿入しましょう。
《メモ帳エディタ等でタグで記述する場合》
１．index.html ファイルをメモ帳エディタで開きます。
２．見出しの Diary、Book、Profile の文字列の前後に、下記タグを半角英字で記述します。
<a href=”diary.html”>Diary</a>
<a href=”book.html”>Book</a>
<a href=”profile.html”>Profile</a>
３．メモ帳エディタを上書き保存。
４．index.html ファイルをダブルクリックして開くと、各見出しが青文字に変わっています。青文字をクリックして、各ページが開くことを確認しよう。
《ホームページビルダー等作成ソフトの場合》
１．ファイルを開きます。
２．コンテンツ名 Diary を範囲選択します。
３．挿入 →リンク →ファイル名を入力（diary.html)
(または参照から『myHomepage』フォルダを選択 →diary.htmlを選択してOK）
４．上書き保存をします。これで、インデックスから各コンテンツのページにジャンプすることができます。
ブラウザの「もどる」ボタンで、トップページを再表示できますが、
ページ内に index にもどる 表示があると便利でわかりやすいです。
□各ページに、インデックスにもどるためのリンクを挿入します。
１. diary を開きます。
２. 1番下の行に Back と入力します。
３. Back を範囲選択してリンクの挿入を設定します。
リンク先は index を選択 → OK
メモ帳エディタでリンク・タグを記述する場合は、各ファイルをメモ帳エディタ開いて、Backの文字の前後にindexページにリンクするタグを記述します。（下記を範囲選択、メモ帳エディタにコピー＆ペーストして、タグでリンク設定してみましょう）
<a href=”index.html”>Back</a>
４. 上書き保存ほかの2つのファイル（Book, Profile ) も同様に作業します。
■ブラウザでチェックしてみよう。
myHomepageフォルダをダブルクリックで開いて、index というファイルをダブルクリックすると ブラウザで トップページが見られます。
コンテンツの Diary Book Profile の文字が 青字に変わっています。
それぞれの文字をクリックすると、ブラウザでリンク先のページを読み込みます。
ページが変わったのを確認したら、ページ最下段の「Back」をクリック
トップページが表示されるかどうか、確認してみましょう。
活用
■サーバーにアップロードしよう。
myHomepageフォルダの中に作成したHTMLは、インターネットで見るホームページのようにブラウザで表示できますが、これは自分のコンピューターの中に保存されているもので、インターネットで閲覧することはできません。インターネットに接続されたほかのコンピューターで見ることが出来るようにするためには ここで作った４つのHTMLファイルを、自分のホームページのスペース（加入したプロバイダに置かれます）に送らなければなりません。電話回線を利用してインターネットに接続し、自分のコンピューターからWebサーバにファイルを転送します。（アップロード）プロバイダーの加入手続きのときの書類にある「FTPサーバ」を使います。
アップロードには、自分のユーザーID、パスワードが必要です。ブラウザのアドレスバーに「はじめてのホームページ」のURLを入力して、アップロードしたホームページにアクセスしてみましょう。
■ホームページを宣伝しよう。
Webサーバーにアップロードした ホームページのファイルは URLを知っている人であれば、勤務先や学校、家族、知人など インターネット環境にあるコンピューターなら、いつでもどこからでも アクセスできます。もっと、多くの人にホームページを見てもらいたい、という場合は Web上で宣伝をします。
○プロバイダーにあるホームページ宣伝用の掲示板に書き込みをしてみます。
○大勢のユーザーが利用している検索サイトに登録してみましょう。YahooJapan MSN などの検索エンジンにサイトの推薦をします。URLとホームページのタイトル、PR文なども書き込みます。また、Goo Exciteなどのサイトの場合は URLを登録するだけでブラウザから検索が可能になります。
※登録の手続きをしてから、検索エンジンに掲載されるまで１～2週間かかります。
○Web上に、ホームページ宣伝用の掲示板は数多くあります。（アクセスアップ、ホームページ登録、相互リンク、などのタイトルで検索してみます。）書き込みをして、積極的に宣伝しましょう。
○同じカテゴリのホームページにアクセスして相互リンクを依頼する、という方法もあります。 ます。自分のお気に入りページの管理人に直接メールで、自分のホームページにリンクをはってもらえるように依頼します。個別に問い合わせをすることでWeb上に仲間ができる上に、リンクをはったのホームページ経由でアクセスが期待できます。
たくさんの人に見てもらうためには、宣伝ばかりでなく、興味を持ってくれた人に何度も見てもらう、などの工夫が必要です。ページのレイアウトの楽しさ、美しさ、内容が充実していることはもちろん、 常に新しい情報に更新されていること、お問い合わせがあれば迅速に対応する、などちょっとした心得が秘訣です。 楽しみながら、末永くホームページ制作が続けられますように。
Good Luck！