ホームページ作成

☆☆　　ホームページを作ってみよう。　　☆☆

貴方にも簡単に作れるホームページ

ホームページを作成するのって、すごく難しいと思っていませんか？　そんなことはありません。
ホームページを表示させるためにはどのようなプログラムを使えばいいのか？　そして、どのようなファイルをどのように
作れば思ったような画面をホームページとして表示させることができるのか？　等々・・・

その理屈さえわかってしまえば、基本的な画面は簡単に作れてしまいます。
ただ、その理屈を知らないだけで、「ホームページ作成をあきらめてしまった。」「お金を出して人に頼んでしまった。」などの
経験はありませんか？

貴方の可能性をそのような食わず嫌いで終わらせるのは、すごくもったいないと思いませんか？

これからホームページの説明から、作成の仕方まで、初心者にもわかりやすく解説していきたいと思っています。

ホームページって？

ホームページは、通常、ハイパーテキストマークアップ言語 (HTML : Hypertext Markup Language)という言語を使って作成
します。これは、メモ帳で普通に作れるテキスト形式で記述していきます。通常、テキスト形式は、*****.TXTという名前で
保存しますが、ホームページの場合は、 *****.HTM という名前で保存します。

その名前で保存したファイルを Internet Explorer で開くと、貴方がいつもインターネットのホームページの形で見ることが
できます。下の図のメモ帳で開いているファイル(test.htm)が、上記で説明した HTML で書かれた例文です。

なんだか、訳のわからない文が並んでるなと思わないでください。それぞれの<>で囲まれた記述 (HTMLタグ) にそれぞれの
役割があるのです。その意味さえ分かれば、表示したい役割の記述を表示したい順番に並べていけば自分の作りたい
ホームページが完成するというわけです。なんだか簡単に思えてきませんか？

「なんだ、思ったより簡単だな」と思った方は、実際にホームページを作ってみましょう。

ホームページを作ってみよう！

まずは、メモ帳を開きましょう。そして、ホームページの基本となる構成をまずは入力します。
下のように入力してください。これは、ほとんどのホームページに共通の形です。

イメージ３

まず、 <HTML> と </HTML> で全体を囲みます。これがＨＴＭＬ文書であることの宣言となります。
それから、 <HEAD> と </HEAD> の間にホームページのヘッダー情報を記入します。ホームページのタイトル
等がヘッダー情報です。タイトルは、 <TITLE> と </TITLE> の間に記入します。
あとは、 <BODY> と </BODY> の間にホームページの本体部分（ホームページとして表示される部分）を記入
していきます。これで基本的な構造部分の記入は終了です。
ＨＥＡＤ部分、ＢＯＤＹ部分を作成するためにいくつかのＨＴＭＬタグの役割を例をあげて説明していきましょう。

ＨＴＭＬタグの役割

下の図１にＨＴＭＬタグの役割の例をいくつか記入しています。
まず、 <TITLE>～</TITLE> には、ホームページ作成という題名をつけています。

<META>タグ
その下に、 <META というタグがあります。必ず、 <HEAD>～</HEAD> の間に記入します。このタグは今、作成しようとして
いる文章の情報（メタ情報）を記入しています。

図１例文： <META http-equiv=Content-Type content="text/html; charset=Shift_JIS">
　この例文はこの文章の標準の文字コードを記入します。上記は「シフトＪＩＳ」の例です。他の例として、「ＥＵＣ」は、
　「Euc-Jp」、「ＪＩＳ」の場合は「Iso-2022-Jp」と記入します。

図１例文： <META http-equiv=Content-Style-Type content=text/css>
　この例文はこの文章の標準のスタイルシート言語を記入します。スタイルシート言語＝ＣＳＳというわけではありませんが、
　通常、「css」というスタイルシート言語の一種を使用しています。

図１例文： <META http-equiv=Content-Script-Type content=text/javascript>
　この例文はこの文章の標準のスクリプト言語を記入します。こちらも同様に、スプリプト言語＝ Javascript というわけでは
　ありませんが、通常、「javascript」というスクリプト言語の一種を使用しています。

図１例文： <META content=ホームページ,作成 name=keywords>
　この例文はこの文章のキーワードを記入します。検索エンジン等でホームページを探す際のキーワードとなります。
　キーワードを「，」で区切って複数指定することができます。

図１例文： <META content=ホームページ name=description>
　この例文はこの文章の説明文を記入します。簡潔に自分のホームページの説明を記入します。

図１例文： <META content="Microsoft FrontPage 4.0" name=GENERATOR>
　この例文はこの文章の作成をどのエディタで作成したかを指定します。

これで、ＨＥＡＤ部分の説明は理解できたと思います。それでは、図２参照しながら図１の下でＢＯＤＹ部分の説明をして
いきたいと思います。

図１

下の図２のような画面を表示させるために、いろいろなタグを使って、実際に表示してみましょう。
作成するコードの記入の例は上の図１に記入されていますので参考にしてください。

<IMG>タグ
　このタグは画像を画面に表示させるためのタグです。

　図１のように
　<IMG align="top" src="index.files/hanabi2.jpg" width="112" height="100" alt="">花火の絵を表示と入力してみましょう。

　align="top" は、画像の横に表示させる文字（花火の絵を表示）の位置を指定します。 align="middle" と記入すると
　画像の横の中央に文字が表示されます。ちなみに何も書かないと下に表示されます。

　src="index.files/hanabi2.jpg" は、画像の格納されている場所と名前を記入します。場所と名前の間は / で区切ります。
　これは通常のエクスプローラの \ と同じと思っていいでしょう。

　width="112" height="100" は、画像の大きさを幅と高さで記入します。記入しなくても表示されますが、大きさを指定すること
　によって他の表示項目（テキストなど）の表示位置が決まり表示速度が速くなる利点があります。

　alt="" は、画像が何らかの理由により表示されなかった場合、画像の代わりに表示する文字を記入します。

　入力後、ファイルを格納して Internet Explorer で開いてみましょう。どうですか？下の花火のような表示が出来ましたか？
　タグや記入の内容の意味さえ分かれば、簡単に表示が行えるということがわかりますね。
　それでは、さらに追加で記入していきましょう。

<TABLE>タグ
　このタグはテーブル（表）を作成するためのタグです。テキストあるいは画像や表を表示するための範囲を指定します。
　最後に </TABLE> で締めくくります。 <TABLE> と </TABLE> の間にテーブル内に表示したい内容を記入します。

　図１のように
　<TABLE border="0" width="680" cellSpacing="0" cellPadding="0"> と入力してみましょう。

　width="680" は、先ほどの説明と同様でテーブルの幅を指定します。

　border="0" は、テーブルの枠の太さを指定します。
　例は枠を表示しないようにしています。

　cellSpacing="0" は、枠線とセルの内容の間の隙間を指定します。
　例はテキストのみを表示させるため、"0"で指定しています。

　cellPadding="0" は、内枠の太さを指定します。
　例はテキストのみを表示させるため、"0"で指定しています。

　それでは、 <TABLE> と </TABLE> の間に
　<DIV align="center">枠なしで文字だけ中央に表示するよ。</DIV>>
　<DIV align="right">文字だけを右づめで表示するよ。</DIV>> と入力してみましょう。

<DIV>タグ
　このタグは <DIV>～</DIV> で囲まれた部分をの書式を設定することができます。
　たとえば、１行ごとに右寄せしたり、スタイルシートを適用したりすることができます。

　align="center" は、横方向の中央に表示を行うことが出来ます。右づめなら align="right" と指定します。

<TR>タグ
　このタグは <TR>～</TR> で囲まれた部分の行の設定をすることができます。
　ここでも <TABLE>タグと同様に、 bordercolor 、 background 、 bgcolor 、 align などを指定することができます。

　bordercolor="#000000" は、枠線の色を指定することが出来ます。下の色の一覧から選んでください。

　background="xxxxx/*****.jpg" は、背景に画像を表示することが出来ます。 xxxxx は画像のある場所を、
　***** は画像の名前を、指定します。

　bgcolor="#0000ff" は、背景の色を指定することが出来ます。下の色の一覧から選んでください。

<TH>タグ
　このタグは <TH>～</TH> で囲まれた部分のヘッダ部の内容を記述します。
　例のように <TR>～</TR> の間に <TH>～</TH> を３つ重ねて書くと横にヘッダ部が並んで表示されます。
　多くのブラウザでは例のように文字は中央に表示されます。

　このタグでも枠線として bordercolor(枠線の色) 、背景として background(背景画像) 、 bgcolor(背景色) 、配置として
　width(横幅) 、 height(高さ) などの設定が出来ます。

<TD>タグ
　このタグは <TD>～</TD> で囲まれた部分のデータ部の内容を記述します。
　例のように <TR>～</TR> の間に <TD>～</TD> を３つ重ねて書くと横にデータ部が並んで表示されます。

　このタグでも枠線として bordercolor(枠線の色) 、背景として background(背景画像) 、 bgcolor(背景色) 、配置として
　align(配置位置) 、 width(横幅) 、 height(高さ) などの設定が出来ます。

　最後に、ぜひこれも知っておきたいリンクについて、説明します。

<A>タグ
　このタグは <A href="***">～</A> の形式と <A name="***">～</A> の形式があります。

　<A href="***">～</A> の形式は相互リンクや他のページにリンクする際に使用します。
　*** に他のホームページのアドレス(URL)や自分のページのアドレス(URL)を指定します。
　あるいは、下の <A name="***">～</A> で指定した位置の印の名前を、頭に#を付けて、 #*** と指定します。

　<A name="***">～</A> の形式は自分のホームページ内で位置の印を付けたいときに使用します

図２

色の一覧

16進表記とカラーネームで指定できるカラー一覧（140色）

1	aliceblue #f0f8ff	2	antiquewhite #farbd7	3	aqua #00ffff
4	aquamarine #7fffd4	5	azure #faebd7	6	beige #f5f5dc
7	bisque #ffe4c4	8	black #000000	9	blanchedalmond #ffebcd
10	blue #0000ff	11	blueviolet #8a2be2	12	brown #a52a2a
13	burlywood #deb887	14	cadetblue #5f9ea0	15	chartreuse #7fff00
16	chocolate #d2691e	17	coral #ff7f50	18	cornflowerblue #6495ed
19	cornsilk #fff8dc	20	crimson #dc143c	21	cyan #00ffff
22	darkblue #00008b	23	darkcyan #008b8b	24	darkgoldenrod #b8860b
25	darkgray #a9a9a9	26	darkgreen #006400	27	darkkhaki #bdb76b
28	darkmagenta #8b008b	29	darkolivegreen #556b2f	30	darkorange #ff8c00
31	darkorchid #9932cc	32	darkred #8b0000	33	darksalmon #e9967a
34	darkseagreen #8fbc8f	35	darkslateblue #483d8b	36	darkslategray #2f4f4f
37	darkturquoise #00ced1	38	darkviolet #9400d3	39	deeppink #ff1493
40	deepskyblue #00bfff	41	dimgray #696969	42	dodgerblue #1e90ff
43	firebrick #b22222	44	floralwhite #fffaf0	45	forestgreen #228b22
46	fuchsia #ff00ff	47	gainsboro #dcdcdc	48	ghostwhite #f8f8ff
49	gold #ffd700	50	goldenrod #daa520	51	gray #808080
52	green #008000	53	greenyellow #adff2f	54	honeydew #f0fff0
55	hotpink #ff69b4	56	indianred #cd5c5c	57	indigo #4b0082
58	ivory #fffff0	59	khaki #f0e68c	60	lavender #e6e6fa
61	lavenderblush #fff0f5	62	lawngreen #7cfc00	63	lemonchiffon #fffacd
64	lightblue #add8e6	65	lightcoral #f08080	66	lightcyan #e0ffff
67	lightgoldenrodyellow #fafad2	68	lightgreen #90ee90	69	lightgrey #d3d3d3
70	lightpink #ffb6c1	71	lightsalmon #ffa07a	72	lightseagreen #20b2aa
73	lightskyblue #87cefa	74	lightslategray #778899	75	lightsteelblue #b0c4de
76	lightyellow #ffffe0	77	lime #00ff00	78	limegreen #32cd32
79	linen #faf0e6	80	magenta #ff00ff	81	maroon #800000
82	mediumaquamarine #66cdaa	83	mediumblue #0000cd	84	mediumorchid #ba55d3
85	mediumpurple #9370db	86	mediumseagreen #3cb371	87	mediumslateblue #7b68ee
88	mediumspringgreen #00fa9a	89	mediumturquoise #48d1cc	90	mediumvioletred #c71585
91	midnightblue #191970	92	mintcream #f5fffa	93	mistyrose #ffe4e1
94	moccasin #ffe4b5	95	navajowhite #ffdead	96	navy #000080
97	oldlace #fdf5e6	98	olive #808000	99	olivedrab #6b8e23
100	orange #ffa500	101	orangered #ff4500	102	orchid #da70d6
103	palegoldenrod #eee8aa	104	palegreen #98fb98	105	paleturquoise #afeeee
106	palevioletred #db7093	107	papayawhip #ffefd5	108	peachpuff #ffdab9
109	peru #cd853f	110	pink #ffc0cb	111	plum #dda0dd
112	powderblue #b0e0e6	113	purple #800080	114	red #ff0000
115	rosybrown #bc8f8f	116	royalblue #4169e1	117	saddlebrown #8b4513
118	salmon #fa8072	119	sandybrown #f4a460	120	seagreen #2e8b57
121	seashell #fff5ee	122	sienna #a0522d	123	silver #c0c0c0
124	skyblue #87ceeb	125	slateblue #6a5acd	126	slategray #708090
127	snow #fffafa	128	springgreen #00ff7f	129	steelblue #4682b4
130	tan #d2b48c	131	teal #008080	132	thistle #d8bfd8
133	tomato #ff6347	134	turquoise #40e0d0	135	violet #ee82ee
136	wheat #f5deb3	137	white #ffffff	138	whitesmoke #f5f5f5
139	yellow #ffff00	140	yellowgreen #9acd32