ホームページ作成ちょー入門#1

ホームページ作成ちょー入門

page 1 / 2 / 3 / 4

1.はじめに

ここでは，ホームページ作成の基礎の基礎を教えます．ホームページを作成するには，いまやホームページ作成言語の標準となっている「HTML（Hyper Text Markup Language）」を学ばなければなりません．この言語は，「タグ」と呼ばれる「<」と「>」で囲まれた単語群で構成され，一つの命令は，「<…>」と「</…>」のセットで表されます．例えば，「ねこマニア」という文字を太字で表示しようと思えば，それは，太字の命令「B」を使って，「ねこマニア」で表示することができます．こうなります．

ねこマニア

なんだかよくわからないと思いますが，とりあえず，この点だけなんとなく覚えておいて，次の練習に移りましょう．

2.ホームページ作成の基礎

2.1.骨組みを作ろう

まず，手持ちのエディタを開いてください．Windows95以上であれば，「スタート」→「プログラム」→「アクセサリ」→「メモ帳」をクリックして，メモ帳を開いてください．

そして何も考えず，次のように，入力してください．

<HTML>
<HEAD>
<TITLE>ねこマニアのホームページ</TITLE>
</HEAD>
<BODY>
ねこマニアのホームページへようこそ．
</BODY>
</HTML>

「<」と「>」で囲まれるタグは半角で入力してください．またタグの中の文字は小文字でも構いません．

このファイルを「neko.html」というファイル名で保存してください．

保存したファイルをダブルクリックし，ブラウザで表示させてください．次のように表示されましたか？表示されれば成功です．

ねこマニアのホームページへようこそ．

また，ウインドウのタイトルバーに「ねこマニアのホームページ」と表示されていることも確認してください．

では，もうちょっと詳しく見てみましょう．上のファイルの中身をもういちどよくみてください．全てのタグが「<…>」と「</…>」のセットで構成されていることが分かるでしょう．これがさっきいったHTML言語のルールです．HTMLのほとんどの命令は，このように「<…>」と「</…>」ではさんで指定されます．

ここででてきたタグの意味は次のようになります．

HTML	ファイルの中身がHTMLであることを定義するタグです．
HEAD	タイトルや作成者の情報を表すタグです．
TITLE	タイトルに名前をつけるタグです．
BODY	このタグにはさまれた部分がブラウザに表示されます．
P	このタグにはさまれた部分は一つの段落とみなされ，その後は自動的に一行あけられます．

これがホームページの骨組みです．次からは，この骨組みにいろいろ付け加えていきましょう．

2.2.背景や文字の色を設定しよう

先につくったファイルのBODYタグを次のように変えてみましょう．赤で表示されている部分が，主な変更・追加箇所です．どうなるでしょうか．

<HTML>
<HEAD>
<TITLE>ねこマニアのホームページ</TITLE>
</HEAD>
<BODY bgcolor="#ffeedd" text="#996600" link="#ff9900" vlink="#cc9966" alink="#ffcc00">
ねこマニアのホームページへようこそ．
</BODY>
</HTML>

次のようになれば（とりあえず）成功です．文字と背景の色が変わりましたか？

ねこマニアのホームページへようこそ．

このように，タグの中に書き加えられた命令を「オプション」といいます．ここで付け加えられたBODYの中のオプションには，次のような意味があります．

BODY オプション
bgcolor=""	ページの背景の色を指定します．
text=""	文字の色を指定します．
link=""	リンクがかかっている文字の色を指定します．
vlink=""	すでにリンク先のページをみたことがある場合のリンク文字の色を指定します．
alink=""	リンク文字をクリックしたときの文字の色を指定します．

この「""」の中には，色を表す記号を入れます．通常はRGB値で指定しますが，予め決められたカラーネームを使うこともできます．

RGB値って何？RGB値を探そう
2桁の16進数で表された，Red，Green，Blueのそれぞれの組み合わせにより，構成される6桁の数字のことです．よくわからなくても大丈夫（苦笑）．要は，自分の出したい色の記号さえわかればよいのです．

カラーネームって何？カラーネーム一覧
ややこしいRGB値ではなく，色の名前（カラーネーム）でも色を指定することができます．注意しなければならないのは，RGB値で色を指定する場合には，あたまに「#」をつけなければなりませんが，カラーネームで指定する場合は，「#」をつけてはいけません．

なお，ここではリンク文字を扱っていませんから，それらの色はまだ表示されません．さきに「（とりあえず）成功」と書いたのはそのためです．

2.3.文章の配置を変えよう

ファイルを次のように変えてみてください．赤で表示されている部分が，主な変更・追加箇所です．

<HTML>
<HEAD>
<TITLE>ねこマニアのホームページ</TITLE>
</HEAD>
<BODY bgcolor="#ffeedd" text="#996600" link="#ff9900" vlink="#cc9966" alink="#ffcc00">
ねこマニアのホームページへようこそ．
ねこマニアのホームページへようこそ．
ねこマニアのホームページへようこそ．
</BODY>
</HTML>

次のように表示されれば成功です．

ねこマニアのホームページへようこそ．

「align=""」は，「P」のオプションです．例を見れば分かるように，「center」とすれば中央に，「left」とすれば左に，「right」とすれば，右に文章が揃えられます．オプションが記述されていない状況では，先に示したように，左揃えになります．

2.4.文字を装飾しよう

ファイルを次のように変えてみましょう．赤で表示されている部分が，主な変更・追加箇所です．

<HTML>
<HEAD>
<TITLE>ねこマニアのホームページ</TITLE>
</HEAD>
<BODY bgcolor="#ffeedd" text="#996600" link="#ff9900" vlink="#cc9966" alink="#ffcc00">
ねこマニアのホームページへようこそ． 
ねこマニアの<S>ホームページ</S>へようこそ． 
ねこマニアのホームページへようこそ．
</BODY>
</HTML>

次のように表示されれば成功です．

ねこマニアのホームページへようこそ．
^ねこ_マニアの~~ホームページ~~へようこそ．
ねこマニアのホームページへようこそ．

いろんなタグが出てきました．それぞれのタグの意味は次のようになります．

B	文字を太字にします．
I	文字を斜体にします．
U	文字に下線を引きます．
FONT	フォントに関するタグ．次のようなオプションがあります． size="" フォントのサイズを指定します．「""」の中には，1~7の数字が入ります．数字が大きいほど文字が大きくなります． color="" フォントの色を指定します．「""」の中には，RGB値，あるいはカラーネームが入ります． face="" フォントを指定します．但し，正しく表示させるためには，閲覧者側のシステムに指定したフォントがインストールされている必要があります．
BR	改行の命令です．このタグは，「</…>」とセットではなく，それだけで改行の機能を果たします．Internet Explore4.0，Netscape4.0以上のブラウザでは，<BR><BR>…と続ければ，それだけ改行されます．
SUP	文字を上付き文字にします．
SUB	文字を下付き文字にします．
S	文字に取り消し線を引きます．

次ページへ

page 1 / 2 / 3 / 4