２章 ホームページ作成の基礎 | |||||||||||||||||||||
| ２章では、ホームページ作成に関する基礎的な知識について学習し、簡単なホームページを作成します。 | |||||||||||||||||||||
  ホームページの概要 | |||||||||||||||||||||
 | ホームページは、HTMLという言語で書かれていることは１章でお話しましたが、HTMLファイル（ホームページ構成ファイル）は、テキスト（文字）情報で作成されています。 すなわちテキストエディタ（メモ帳やSimpleText、一太郎やWord等）で、ホームページを作る事ができるわけです。 タグはタグ名により、文字の装飾、画像の表示、レイアウト、リンク等、何をするタグであるかを識別します。 タグは原則的に開始タグ（”<タグ名>”）と終了タグ（”</タグ名>”）で構成され、開始タグと終了タグに挟まれた範囲がそのタグの影響範囲となります。  赤線の部分がHTMLタグの影響範囲となります。 これからホームページを作成していく上での注意事項として、
（例）  入れ子形式の記述は、タグの中にタグを書く”中へ中へ”と設定していく表現方法です。以上５項目について注意しながら、実際にホームページを作ってみましょう。 | ||||||||||||||||||||
 「こんにちは」と表示するホームページを作ってみよう | |||||||||||||||||||||
| これから実際にホームページを作っていくわけですが、その前に制作環境を確認してみましょう。
上記のブラウザとテキストエディタがあれば準備よし！ それではテキストエディタを起動してください。
１） HTMLファイルを定義しよう。
２） ボディ部を定義しよう。
３） 「こんにちは」と表示するホームページにしてみよう。
４）作成したファイルを”rensyu01.htm”という名前で保存しよう。
５）ブラウザで「こんにちは」と表示されるか確認してみよう。 | ||||||||||||||||||||
 いろいろな大きさで文字を表示してみよう | |||||||||||||||||||||
| それでは文字の大きさを変えてみましょう。 文字の大きさを変えるには、２通りの方法（タグ）があります。 １つは見出しタグと呼ばれるタグで、<Hn>〜</Hn>（nには同じ数字が入ります）と表現します。 見出しタグは、タグで挟まれた範囲の文字が拡大強調または縮小強調表示され、しかも前後に改行と1行分の空行が自動的に入ります。
もう１つはフォントタグと呼ばれるタグで、<FONT SIZE="n">〜</FONT>（nには数字が入ります）と表現します。 FONTタグのオプション属性であるSIZEを使用し、文字のサイズを指定します。 フォントタグは、タグで挟まれた範囲の文字が拡大または縮小表示されるだけです。
どちらのタグも、文字の大きさを数字（nの代わりに入る数字）で表現します。 見出しタグの場合、１が最大で６が最小サイズとなります。 フォントタグの場合は、見出しタグとは逆で、小さな数字ほど文字は小さく１が最小で７が最大サイズとなります。 またフォントタグは、絶対値での大きさ指定だけでなく、デフォルト（標準）サイズからの相対的なサイズ指定も行えます。
文字のサイズを１まわり大きく、１まわり小さく表示させるだけでしたら、文字拡大縮小表示タグのBIGタグやSMALLタグもあります。
| ||||||||||||||||||||
 文字や背景をカラフルにしてみよう | |||||||||||||||||||||
| それでは文字や背景をカラフルにしてみましょう。 文字をカラフルにするには、FONTタグを使用し、背景をカラフルにするには、BODYタグを使用します。 文字をカラフルにする場合は、FONTタグのオプション属性であるCOLORを使用し、文字の色を指定します。 色を指定するには<FONT COLOR="#rrggbb">〜</FONT>（rrggbbには16進数の数字が入ります）のように記述します。
背景をカラフルにする場合は、BODYタグのオプション属性であるBGCOLORを使用し、背景の色を指定します。 色の指定方法は、FONTタグと同じです。
| ||||||||||||||||||||
 文章を読みやすくしてみよう | |||||||||||||||||||||
| それでは文章を改行（改段落）して読み易くしてみましょう。 HTMLでは、ファイル内の改行やタブは無視された状態で、ブラウザに表示されます。 そこでブラウザに改行された状態で表示させるタグとして、BRタグとPタグがあります。 BRタグは改行タグと呼ばれ、文字や画像等の各コンテンツを1行分改行します。 BRタグは特殊なタグで、開始タグしかありません。 改行したいポイントに、BRタグを記入するだけです。 改行タグは連続して入力した分、改行します。
Pタグは改段落タグと呼ばれ、1行分の空行と改行が入ります。 Pタグも開始タグのみで使用しますが、開始タグと終了タグのペアで使用することもできます。 Pタグは連続して入力しても、1つ分しか機能しません。
| ||||||||||||||||||||
 横線を引いてみよう | |||||||||||||||||||||
| 横線を引くにも、専用のHRタグがあります。 HRタグも特殊なタグで、開始タグしかありません。 改行したいポイントに、HRタグを記入するだけです。 HRタグは、自動的に前後に改行が行われ、上下にスペースも入ります。
| ||||||||||||||||||||
| |||||||||||||||||||||
 |     | ||||||||||||||||||||
左の図は、メモ帳で"rensyu01.htm"を作成した例です。
ブラウザ（マイクロソフト社のインターネット エクスプローラ、またはネットスケープ社のナビゲータ）を起動します。