ホームページを作ってみる

ここまでの説明で、どの程度のホームページが作れるかトライしてみます。見た目は一人前のものが作れます。

損をしない自動車保険選び損をしないクレジットカード選び銀行の利用・口座維持手数料無料化就職・アルバイト情報
トッブページに戻る文字のサイズを変更する時は Control キーを押しながらマウスのスクロールホイールを回してください

中間チェック ▲ ここ迄の内容で実際に作ってみます

例題を作る

ここ迄の内容でとりあえずホームページを作ることができます。実際にこのホームページの1ページ目の一部を今迄の内容に沿って作ってみます。下の枠で囲まれた部分を作ってみます。

ホームページ作りの全体の流れ ▲

すべての情報が一ページに収まってしまえば考える必要はありません。複数のページになる場合は、見にきた人が『いかに素早く欲しい情報にたどり着けるか』を考えます。
すべての情報を総合的にガイドするページをまず考え、これを中心になるページとします。自分のホームページの玄関口だと考えればいいと思います。
常時接続が増えてきているとはいえ、少ないクリックで必要な情報を提供するのは非常に大事なことですから、この中心になるページを最初に開くページに設定し、そこから1クリックで情報が得られるように各ページの振り分けを考えます。そのときの各ページとの関係は右のようなイメージになるかと思います。

上のような構成は避けるべきだと思います。ページ数が増えると、どこにいるかわからなくなってしまいます。

上に戻る

配置を考え、テーブルを作る

この場合は既に配置が決まっていますので、これに合わせてテーブルを作ります。一番上に『タイトル』を書く枠が一つ、その下に『文章』『イラスト』『文章とイラスト』を書く枠が横に三つ並びます。テーブルの幅は750ピクセルに設定し、見やすいように枠線を表示しています。

<HTML>
<TABLE border="1" width="750">
<TR><TD colspan="3">タイトル</TD></TR>
<TR><TD>文章</TD><TD>イラスト</TD><TD>イラストと文章</TD></TR>
</TABLE>
</HTML>

タイトル
文章	イラスト	イラストと文章

上に戻る

文章のHTML化

次は文章を『HTML化』します。

まずタイトル部です
タイトルは罫線2本の間にサイズと色を変えた文字が入っています
まず罫線を表す<HR>を書きます。
次に『ホームページ作りの全体の流れ　　　▲』と文字を書き、これに効果をつけます。『ホームページ作りの全体の流れ』の部分の文字サイズは「4」、色は「darkgreen」で太字ですから『ホームページ作りの全体の流れ』を太字を表すで挟み、更に色とサイズを変更するためにその外側を で挟みます。『▲』の色は「lime」ですから『▲』をでサンドイッチにします。その下にもう一度罫線を表す<HR>を書きます。
まとめて書くと下のようになります。

<HR>
ホームページ作りの全体の流れ
▲
<HR>

ホームページ作りの全体の流れ ▲

次は左側の文章です
付加する効果は、『全体の文字サイズを 2 にすること』『改行を2箇所入れること』だけですから、文章全体をではさみ、改行する場所に を追加すれば終わりです。
まとめて書くと下のようになります。

すべての情報が一ページに収まってしまえば考える必要はありません。複数のページになる場合は、見にきた人が『いかに素早く欲しい情報にたどり着けるか』を考えます。 
すべての情報を総合的にガイドするページをまず考え、これを中心になるページとします。自分のホームページの玄関口だと考えればいいと思います。 
常時接続が増えてきているとはいえ、少ないクリックで必要な情報を提供するのは非常に大事なことですから、この中心になるページを最初に開くページに設定し、そこから1クリックで情報が得られるように各ページの振り分けを考えます。そのときの各ページとの関係は右のようなイメージになるかと思います。

最後はは右側の文章です
文字サイズを『2』にしているだけですから文章全体をではさめば終わりです。
まとめて書くと下のようになります。

上のような構成は避けるべきだと思います。ページ数が増えると、どこにいるかわからなくなってしまいます。

上のような構成は避けるべきだと思います。ページ数が増えると、どこにいるかわからなくなってしまいます。

上に戻る

テーブルに画像と文章を入れる

これで『文章のHTML化』はすべて終わりましたのでテーブルに、HTML化した文章と画像を入れていきます。

タイトルを入れる
最初に作ったテーブルを用意します。テーブルの『タイトル』と書いた部分に『HTML化したタイトル』をコピーして貼り付けます。『茶色』の文字が貼り付けた部分です。

ホームページ作りの全体の流れ ▲
文章	イラスト	文章とイラスト

次に左側の文章を入れます
テーブルの『文章』と書いた部分に『HTML化した文章』をコピーして貼り付けます。下のようになります。『茶色』の文字が貼り付けた部分です。

<HTML>
<TABLE border="1" width="750">
<TR><TD colspan="3">
<HR>
ホームページ作りの全体の流れ 
▲
<HR>
</TD></TR>
<TR><TD>すべての情報が一ページに収まってしまえば考える必要はありません。複数のページになる場合は、見にきた人が『いかに素早く欲しい情報にたどり着けるか』を考えます。 
すべての情報を総合的にガイドするページをまず考え、これを中心になるページとします。自分のホームページの玄関口だと考えればいいと思います。 
常時接続が増えてきているとはいえ、少ないクリックで必要な情報を提供するのは非常に大事なことですから、この中心になるページを最初に開くページに設定し、そこから1クリックで情報が得られるように各ページの振り分けを考えます。そのときの各ページとの関係は右のようなイメージになるかと思います。</TD>
<TD>イラスト</TD><TD>文章とイラスト</TD></TR>
</TABLE>
</HTML>

ホームページ作りの全体の流れ ▲
すべての情報が一ページに収まってしまえば考える必要はありません。複数のページになる場合は、見にきた人が『いかに素早く欲しい情報にたどり着けるか』を考えます。すべての情報を総合的にガイドするページをまず考え、これを中心になるページとします。自分のホームページの玄関口だと考えればいいと思います。常時接続が増えてきているとはいえ、少ないクリックで必要な情報を提供するのは非常に大事なことですから、この中心になるページを最初に開くページに設定し、そこから1クリックで情報が得られるように各ページの振り分けを考えます。そのときの各ページとの関係は右のようなイメージになるかと思います。	イラスト	文章とイラスト

次はイラストです
テーブルの『イラスト』と書いた部分に画像を入れます。画像を入れるのは <IMG src="ファイル名">と書くだけですから下のようになります。『茶色』の文字が貼り付けた部分です。

<HTML>
<TABLE border="1" width="750">
<TR><TD colspan="3">
<HR>
ホームページ作りの全体の流れ 
▲
<HR>
</TD></TR>
<TR><TD>すべての情報が一ページに収まってしまえば考える必要はありません。複数のページになる場合は、見にきた人が『いかに素早く欲しい情報にたどり着けるか』を考えます。 
すべての情報を総合的にガイドするページをまず考え、これを中心になるページとします。自分のホームページの玄関口だと考えればいいと思います。 
常時接続が増えてきているとはいえ、少ないクリックで必要な情報を提供するのは非常に大事なことですから、この中心になるページを最初に開くページに設定し、そこから1クリックで情報が得られるように各ページの振り分けを考えます。そのときの各ページとの関係は右のようなイメージになるかと思います。</TD>
<TD><IMG src="kousei.gif"></TD>
<TD>文章とイラスト</TD></TR>
</TABLE>
</HTML>

ホームページ作りの全体の流れ ▲
すべての情報が一ページに収まってしまえば考える必要はありません。複数のページになる場合は、見にきた人が『いかに素早く欲しい情報にたどり着けるか』を考えます。すべての情報を総合的にガイドするページをまず考え、これを中心になるページとします。自分のホームページの玄関口だと考えればいいと思います。常時接続が増えてきているとはいえ、少ないクリックで必要な情報を提供するのは非常に大事なことですから、この中心になるページを最初に開くページに設定し、そこから1クリックで情報が得られるように各ページの振り分けを考えます。そのときの各ページとの関係は右のようなイメージになるかと思います。		文章とイラスト

最後にイラストと文章です
テーブルの『イラストと文章』と書いた部分に画像と文章を入れます。先ほどと同じ要領で画像を入れて改行、その下に『HTML化した文章』をコピーして貼り付けます。下のようになります。『茶色』の文字が貼り付けた部分です。

<HTML>
<TABLE border="1" width="750"><TR><TD colspan="3">
<HR>
ホームページ作りの全体の流れ 
▲
<HR>
</TD></TR>
<TR><TD>すべての情報が一ページに収まってしまえば考える必要はありません。複数のページになる場合は、見にきた人が『いかに素早く欲しい情報にたどり着けるか』を考えます。 
すべての情報を総合的にガイドするページをまず考え、これを中心になるページとします。自分のホームページの玄関口だと考えればいいと思います。 
常時接続が増えてきているとはいえ、少ないクリックで必要な情報を提供するのは非常に大事なことですから、この中心になるページを最初に開くページに設定し、そこから1クリックで情報が得られるように各ページの振り分けを考えます。そのときの各ページとの関係は右のようなイメージになるかと思います。</TD>
<TD><IMG src="kousei.gif"></TD>
<TD><IMG src="kousei6.gif"> 上のような構成は避けるべきだと思います。ページ数が増えると、どこにいるかわからなくなってしまいます。</TD>
</TR>
</TABLE>
</HTML>

ホームページ作りの全体の流れ ▲
すべての情報が一ページに収まってしまえば考える必要はありません。複数のページになる場合は、見にきた人が『いかに素早く欲しい情報にたどり着けるか』を考えます。すべての情報を総合的にガイドするページをまず考え、これを中心になるページとします。自分のホームページの玄関口だと考えればいいと思います。常時接続が増えてきているとはいえ、少ないクリックで必要な情報を提供するのは非常に大事なことですから、この中心になるページを最初に開くページに設定し、そこから1クリックで情報が得られるように各ページの振り分けを考えます。そのときの各ページとの関係は右のようなイメージになるかと思います。		上のような構成は避けるべきだと思います。ページ数が増えると、どこにいるかわからなくなってしまいます。

上に戻る

完成

テーブルを見やすくするため枠線を表示していましたのでこれを消せばとりあえず完成です。
<TABLE border="1" width="750">を<TABLE border="0" width="750"> とするだけです

<HTML>
<TABLE border="0" width="750"><TR><TD colspan="3">
<HR>
ホームページ作りの全体の流れ 
▲
<HR>
</TD></TR>
<TR><TD>すべての情報が一ページに収まってしまえば考える必要はありません。複数のページになる場合は、見にきた人が『いかに素早く欲しい情報にたどり着けるか』を考えます。 
すべての情報を総合的にガイドするページをまず考え、これを中心になるページとします。自分のホームページの玄関口だと考えればいいと思います。 
常時接続が増えてきているとはいえ、少ないクリックで必要な情報を提供するのは非常に大事なことですから、この中心になるページを最初に開くページに設定し、そこから1クリックで情報が得られるように各ページの振り分けを考えます。そのときの各ページとの関係は右のようなイメージになるかと思います。</TD>
<TD><IMG src="kousei.gif"></TD>
<TD><IMG src="kousei6.gif"> 上のような構成は避けるべきだと思います。ページ数が増えると、どこにいるかわからなくなってしまいます。</TD>
</TR>
</TABLE>
</HTML>

ホームページ作りの全体の流れ ▲
すべての情報が一ページに収まってしまえば考える必要はありません。複数のページになる場合は、見にきた人が『いかに素早く欲しい情報にたどり着けるか』を考えます。すべての情報を総合的にガイドするページをまず考え、これを中心になるページとします。自分のホームページの玄関口だと考えればいいと思います。常時接続が増えてきているとはいえ、少ないクリックで必要な情報を提供するのは非常に大事なことですから、この中心になるページを最初に開くページに設定し、そこから1クリックで情報が得られるように各ページの振り分けを考えます。そのときの各ページとの関係は右のようなイメージになるかと思います。		上のような構成は避けるべきだと思います。ページ数が増えると、どこにいるかわからなくなってしまいます。

行間を広げて読み易くする等の細かな修正はまだ残っていますが、今迄の内容だけでもここまではできます。

上に戻る