ホームページの作り方

◆ はじめに

ホームページを作成する為に必要となるのが自分が作成したホームページを 確認するためのブラウザー（Inernet Explorer、Netscape Navigator等）と 実際ホームページを作成するためのテキストエディターです。 テキストエディターはメモ帳等で十分です。秀丸エディター（http://www.maruo.co.jp/） も使用しやすいと思います。 画面上に絵などを貼り付けるたいときにあると便利なのがお絵描きソフトです。 参考：D-Pixed(http://www.win.ne.jp/~doichan/doichan@super.win.ne.jp) 後述しますが作成したホームページを多くの人に見てもらうためにインターネット上に 載せるためにＦＴＰソフトが必要となります。

◆ 基本

・簡単なホームページを作ってみよう

メモ帳、テキストエディター等で以下のように入力してください。 適当な名前で保存してください。その時拡張子は html もしくは htm と してください。（例:sample.html） 注 ファイル名は小文字にしてください。インターネット上では大文字が 判別できない場合があります。 <HTML> <HEAD> <TITLE>SAMPLE PAGE</TITLE> </HEAD> <BODY><!-- tok2_user_contents --> <div id="tok2_user_contents"> サンプルページ <style> <!-- #tok2_footer{line-height:14px;padding-top:9px;position:relative;width:100%;text-align:center;} #jword_form{position:relative;width:33.3%;float:left;} #powered_by{width:33.3%;float:left;} #empty_column{width:33.3%;float:left;} --> </style> <link rel="stylesheet" type="text/css" href="/app/ad/footer_ad.css" media="screen,print" /> <!-- tok2_footer --> <div id="tok2_footer"> <div id="jword_form"> <table border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF"> <form method="GET" action="http://tok2.com/search/s.php3" target="_blank"> <tr> <td width="20"><img src="http://image.tok2.com/jwd_logo18.gif" width="18" height="18" align="absmiddle"></td> <td width="120"><input type="text" name="s" size="20" align="absmiddle" style="height:18px" /></td> <td><input type="image" name="searchbox" src="http://image.tok2.com/btn3/ss.gif" align="absmiddle" height="18" /></td> </tr> <form> </table> </div> <div id="powered_by"> <span style="font-size:11px;">Powered by <a href="http://tok2.com/" target="_blank">TOK2</a></span> </div> <div id="empty_column"> </div> </div> <!-- //tok2_footer --> <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"> </script> <script type="text/javascript"> _uacct = "UA-1040177-1"; urchinTracker(); </script> <script type="text/javascript" language="JavaScript"> <!-- var jwdflt2_setting = new Array(20); jwdflt2_setting[0] = '1'; jwdflt2_setting[1] = 'tok2'; jwdflt2_setting[3] = 'tok2_001'; jwdflt2_setting[8] = '2'; jwdflt2_setting[9] = 'c357d751'; // --> </script> <script type="text/javascript" src="http://download.jword.jp/pub/flt2/jwd_flt2.js" charset="Shift_JIS"></script> </div> <!-- //tok2_user_contents --> <link rel="stylesheet" type="text/css" href="/app/ad/footer_ad.css" media="screen,print" /> <!--[if IE ]> <link rel="stylesheet" type="text/css" href="/app/ad/ie.css" media="screen" /> <![endif]--> <div id="meerkat-wrap"> <div id="meerkat-container" style="background-image: none; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: initial; height: 297px; background-position: initial initial; background-repeat: initial initial; "> <div id="meerkat"> <div id="adframe_header"> <p class="close" id="close-btn"><a href="javascript:void(0);" class="close-meerkat"><img src="/app/ad/close.gif" width="15" height="15"></a></p> </div> <div id="adframe_body"> <script type="text/javascript">var kauli_yad_count = typeof(kauli_yad_count) == 'undefined' ? 1 : kauli_yad_count + 1;(function(d){ d.write('<span id="kauli_yad_' + kauli_yad_count + '" style="width:300px; height:250px; display:inline-block"><!--24268--><' + '/span>'); var s = d.createElement('script'); var h = d.getElementsByTagName('head')[0]; s.defer = 'defer'; s.async = 'async'; s.src = 'http://js.kau.li/yad.js'; h.insertBefore(s, h.firstChild);})(document);</script> </div> </div> </div> </div> <script src="/app/ad/fade.js"></script> <script src="/app/ad/ad.js"></script> </BODY> <HTML> 保存したファイルをダブルクリックしてブラウザで表示してください。
サンプルページ
ブラウザに上記、”サンプルページ”と表示されたと思います。この部分を適当な 文字にすれば簡易的な日記帳のページが出来上がりです。

◆ タグの説明

ホームページを作成するには基本的にＨＴＭＬ(Hyper Text Makeup Language) 文で記述します。ＨＴＭＬ文は <**> で囲まれたタグと呼ばれる記号で記述 されています。タグは<***>で始まり</***>で終了します。終了タグには / が入ります。 ＨＴＭＬ文は半角文字で記述してください。大文字、小文字はどちらでもかまいません。 例 <HTML> −−−→ ＨＴＭＬ文を示す開始タグ <HEAD> −−−→ ヘッダ開始タグ <TITLE>SAMPLE PAGE</TITLE> −−−→ タイトルを示すタグ </HEAD> −−−→ ヘッダ終了タグ <BODY> −−−→ 本文の開始タグ −−−−−−−−−− </BODY> −−−→ 本文の終了タグ <HTML> −−−→ ＨＴＭＬ文を示す終了タグ ホームページは基本的に上記のようなスタイルになっており <BODY> 〜 </BODY> 内に 表示したい内容を記述します。 ・<HTML>〜</HTML> ＨＴＭＬファイルであることを示します。 ・<HEAD>〜</HEAD> 見出し部分であるこを示します。この中にはタイトル（<TITLE>〜<TITLE>）などを 表記しておきます。 ・<TITLE>〜<TITLE> ファイルのタイトル名を示します。ここで指定した名前はブラウザのタイトルバー に表示されます。また、ホームページを検索エンジンなどに登録した場合のタイトル となる場合がありますので必ず指定しておいてください。

◆ 文字に変化を付ける

ホームページをからには文字のフォントサイズを変更したり色を付けたりと変化の あるページを作成したいものです。

・文字の大きさを変更（その１）

<Hn> 〜 </Hn> nは1〜6までの数値 章の見出し文字を定義します。前後は空白が取られｎは１(最大）から６(最小）の 範囲で大きさを指定します。 応用 <H1 ALIGN="CENTER">〜</H1> のよう ALIGN="CENTER" を指定してあげると 文字を画面中央に表示することができます。 CENTER:中央に表示 RIGHT:右に表示 LEFT:左に表示） 例 <H1 ALIGN="CENTER">文字に変化</H1> <H2>＜Ｈｎ＞の使い方</H2>

文字に変化

＜Ｈｎ＞の使い方


・文字の大きさを変更（その２）

<FONT SIZE="n"> 〜 </FONT> nは1〜7までの数値 章の見出し以外の文字を定義します。ｎは１(最小）から７(最大）の範囲で大きさ を指定します。また ｎを−ｎや＋ｎと指定すると現在のサイズに対する相対的な値 を指定することもできます。 応用 <FONT SIZE="2" COLOR="BLUE">〜</FONT> のよう FONT="BLUE" を指定して あげると文字に色を指定することができます。COLORについては後述します。 例 <FONT SIZE="7" COLOR="BLUE">文字に変化</FONT> <FONT SIZE="6">＜ＦＯＮＴ＞の使い方</FONT>
文字に変化
＜ＦＯＮＴ＞の使い方


・文字に色をつける

文字の色は<FONT COLOR="・・・">〜</FONT>と "COLOR" で指定します。 COLORは "#000000" 〜 "FFFFFF" の間でＲＧＢ値を指定します。（BLACK 、 RED、WHITE 等、色の名前を指定も可能です。） ＲＧＢ値は １６進数６桁の数値で表します。前から２桁ずつ赤（Ｒ）、 緑（Ｇ）、青（Ｂ）の量を表します。一般的に値が大きいと明るい色、 小さいと暗い色となります。 例
COLOR="#000000" ： 黒 COLOR="#0000FF" ： 青
COLOR="#00FF00" ： 緑 COLOR="#00FFFF" ： 水色
COLOR="#FF0000" ： 赤 COLOR="#FF00FF" ： 紫
COLOR="#FFFF00" ： 黄 COLOR="#FFFFFF" ： 白


・その他文字に変化を付ける

上記に説明した他に文字を強調させたり斜体にしたりする方法を説明します。 ◇ <B>〜</B>は文字を太字（ボールド）にする場合に使用します。 例
太字（ボールド）
◇ <BIG>〜</BIG>、<SMALL>〜</SMALL>は文字を大きくしたり小さくしたりします。 <FONT SIZE="n"> 〜 </FONT>のように細かな設定は出来ません。 例
大きい文字 -BIG- 小さい文字 -SMALL
◇ <BLINK>〜</BLINK>は点滅（ブリンク）文字にする場合に使用します。 例
点滅（ブリンク）文字
◇ <CITE>〜</CITE>は引用文にする場合に使用します。 例
引用文
◇ <CODE>〜</CODE>はコンピュータコード文字にする場合に使用します。 例
コンピュータコード文字
◇ <EM>〜</EM>は強調文字にする場合に使用します。 例
強調文字
◇ <I>〜</I>は文字を斜体（イタリック）にする場合に使用します。 例
斜体（イタリック）
◇ <KBD>〜</KBD>はキーボードからの入力文字を表します。 例
キーボードからの入力文字
◇ <S>〜</S>は打ち消し線付き文字にする場合に使用します。 例
打ち消し線付き文字
◇ <SAMP>〜</SAMP>は例（サンプル）文字にする場合に使用します。 例
例（サンプル）
◇ <SUB>〜</SUB>は下付き文字（サブスクリプト）にする場合に使用します。 例
基本文字下付き文字（サブスクリプト）
◇ <SUP>〜</SUP>は上付き文字（スーパースクリプト）にする場合に使用します。 例
基本文字上付き文字（スーパースクリプト）
◇ <STRONG>〜</STRONG>は強い強調文字にする場合に使用します。 例
強い強調文字
◇ <TT>〜</TT>は等幅文字（タイプライタテキスト）にする場合に使用します。 例
等幅文字（タイプライタテキスト）
◇ <U>〜</U>は文字を下線付きにする場合に使用します。 例
下線付き文字
◇ <VAR>〜</VAR>は変数文字にする場合に使用します。 例
変数文字


・画面のバランスを考える

ホームページを作っても単なる文字の羅列だと見ずらいものになってしまうかも しれません。ここではページを見やすくする為のタグを説明します。 ◇ <BR>は改行する場合に使用します。 例 ソース： ”＜ＢＲ＞<BR>は改行します” と記述すると以下のようになります。
＜ＢＲ＞
は改行します
◇ <NOBR>〜</NOBR>は改行を禁止する場合に使用します。 ブラウザはウィンドウサイズに合わせて文字を自動的に改行してしまいます。 しかし改行したくない場合（画面イメージが変わってしまう）等で改行したく ない場合があると思います。そんな場合に使用します。 ◇ <WBR>は改行禁止中に改行する場合に使用します。 <NOBR>〜</NOBR>により改行禁止されている場合に改行指定したいときに使用します。 ◇ <P>〜</P>はひとつの段落(Paragraph)を作成します。</P>は省略することができます。 例 ソース： <P>段落１</P><P ALIGN="RIGHT">段落２</P><P ALIGN="LEFT">段落３</P>

段落１

段落２

段落３
◇ <HR>は水平線を引きます。上下に空白が入ります。 <HR NOSHADE WIDTH="･･･" SIZE="･･･" ALIGN="･･･"> と属性を付与することが出来ます。 NOSHADE：影のない単純な水平線 WIDTH="･･･"：水平線の長さを指定します。 SIZE="･･･"：水平線の太さを指定します。 ALIGN="･･･"：水平線の表示位置を指定します。（RIGHT,CENTER,LEFT） 例 ソース： <HR><HR WIDTH="100" SIZE="5">
◇ <XMP>は記述した文字を見た目通りに表示します。 ◇ <BLOCKQUOTE>〜</BLOCKQUOTE>は文字をブロック化して表示します。 囲まれた範囲の文字の左右に空白を空けます。 例
普通文字
ブロック化
普通文字
◇ <CENTER>〜</CENTER>は記述した文字の中央揃え（センタリング）を行います。 例
中央揃え（センタリング）
◇ <DIV>〜</DIV>は ALIGN 属性を用いて文字の配置位置を指定します。 ALIGN="RIGHT", ALIGN="CENTER", ALIGN="LEFT" 例 ソース： <DIV ALIGN="RIGHT">配置指定</DIV>
配置指定
◇ <ADDRESS>〜</ADDRESS>は そのページの作者などの連絡先を記述します。 文字は斜体で表示されます。 例 ソース： <ADDRESS>y-kich@chan.ne.jp</ADDRESS>
y-kich@chan.ne.jp
◇ <!-- 〜 -->はコメント文となり画面には表示されません。ソースを分かりやすく （デバッグ）するために用います。

◆ テーブルの説明

この章ではTABLEタグを使って表示する内容を１つにまとめる（表を作る）方法について 説明します。TABLEタグを使用すると画面をきれいに配置する事が出来るので重宝します。 ◇ <TABLE>〜</TABLE>は<TR>〜</TR>や<TD>〜</TD>タブを用いてテーブル（表）を作成 します。 <TABLE>タブには以下の属性があります。 ALIGN="･･･" : テーブルの位置を指定します。LEFTは画面左、CENTERが画面中央、 RIGHTは画面右側にそれぞれ配置します。 BORDER="n" : テーブルの外枠の太さを指定します。0を指定すると表示されません。 WIDTH="n" : テーブルの横幅を指定します。値はピクセル値または画面に対する パーセントで指定します。 HEIGHT="n" : テーブルの高さを指定します。 CELLSPACING="n" : 内枠の線の太さを指定します。0を指定すると立体感のない線となります。 CELLPADDING="n" : テーブル内の文字と枠線の間隔を指定します。 HSPACE="n" : テーブルの左右にスペースを空ける場合に使用します。 VSPACE="n" : テーブルの上下にスペースを空ける場合に使用します。 BGCOLOR="･･･" : テーブルの内側の色を指定します。 BACKGROUND="･･･" : テーブルの内側に表示する画像を指定します。 BORDERCOLOR="･･･" : 枠線の色を指定します。 BORDERCOLORDARK="･･･" : 枠線の暗い部分の色を指定します。 BORDERCOLORLIGHT="･･･" : 枠線の明るい部分の色を指定します。 ◇ <TD>〜</TD>はテーブルにセルを作成します。 <TD>タブには以下の属性があります。 ALIGN="･･･" : セル内の文字の位置を指定します。LEFTは画面左、CENTERが画面中央、 RIGHTは画面右側にそれぞれ配置します。 VALIGN="･･･" : セル内の文字の位置を指定します。TOPは画面上、MIDDLEが画面中央、 BOTTOMは画面下側にそれぞれ配置します ROWSPAN="n" : セルの高さをn個分連結します。 COLSPAN="n" : セルの幅をn個分連結します。 WIDTH="n" : セルの横幅を指定します。値はピクセル値または画面に対する パーセントで指定します。 HEIGHT="n" : セルの高さを指定します。 BGCOLOR="･･･" : セルの内側の色を指定します。 BACKGROUND="･･･" : セルの内側に表示する画像を指定します。 BORDERCOLOR="･･･" : 枠線の色を指定します。 BORDERCOLORDARK="･･･" : 枠線の暗い部分の色を指定します。 BORDERCOLORLIGHT="･･･" : 枠線の明るい部分の色を指定します。 ◇ <TR>〜</TR>はテーブル内の行を指定します <TR>タブは<TD>〜</TD>の属性と同じです。 ◇ <CAPTION>〜</CAPTION>はテーブルに表題を付けます。 <CAPTION>タブには以下の属性があります。 ALIGN="･･･" : テーブルの表題の位置を指定します。LEFTは画面左、CENTERが画面中央、 RIGHTは画面右側にそれぞれ配置します。 VALIGN="･･･" : テーブルの表題の位置を指定します。TOPは画面上、MIDDLEが画面中央、 BOTTOMは画面下側にそれぞれ配置します 例 ソース： <TABLE BORDER=4 WIDTH=350 HEIGHT=100> <CAPTION>テーブルの例</CAPTION> <TR> <TH><BR></TH> <TH>列１</TH> <TH>列２</TH> <TH>列３</TH> </TR> <TR> </TR> <TR ALIGN="CENTER"> <TD>行１</TD> <TD ROWSPAN=3>セル</TD> <TD>セル</TD> <TD>セル</TD> </TR> <TR ALIGN="CENTER"> <TD>行２</TD> <TD>セル</TD> <TD>セル</TD> </TR> <TR ALIGN="CENTER"> <TD>行３</TD> <TD COLSPAN=2 BGCOLOR="YELLOW">セル</TD> </TR> </TABLE> 実際画面表示すると以下のようになります。

テーブルの例

列１ 列２ 列３
行１ セル セル セル
行２ セル セル
行３ セル

◆ リンクを張る

リンクを張るというのは指定された別のページに移動することです。 ◇ 同じファイル（ページ）の別の位置に移動する。 １ページの情報量が多く１画面で表示できずスクロールしなければならない場合に 利用すると便利な機能です。 <A HREF="#･･･">***</A> ･･･：は移動先項目名 ***：適当な名前を指定 例 サンプル： <A HREF="#◆ はじめに">最上部へ移動</A> ：移動元 ↓ <A NAME="◆ はじめに"></A> ：移動先
最上部へ移動
◇ 同じディレクトリのファイルに移動する。 表示しているページ（ファイル）から別のファイルを表示する場合に使用します。 <A HREF="･･･">***</A> ･･･：は移動先ファイル名 ***：適当な名前を指定 例 サンプル： <A HREF="mp_index.html">目次ページへ移動</A>
目次ページへ移動
◇ 別のディレクトリのファイルに移動する。 表示しているページ（ファイル）から別のディレクトリのファイルを表示する場合に使用します。 <A HREF="･･･">***</A> ･･･：は移動先ファイル名 ***：適当な名前を指定 例 ﾃﾞｨﾚｸﾄﾘA ├―― ﾌｧｲﾙA.html └ﾃﾞｨﾚｸﾄﾘB └―― ﾌｧｲﾙB.html 現在表示されているファイルがﾌｧｲﾙAでありそこからﾌｧｲﾙBにリンクしたい場合 <A HREF="ﾃﾞｨﾚｸﾄﾘB/ﾌｧｲﾙB.html">ファイルＢへ移動</A> ◇ 他のサーバにあるファイルに移動する。 表示しているページ（ファイル）から他のサーバのファイルを表示する場合に使用します。 <A HREF="･･･">***</A> ･･･：は移動先ファイル名（絶対パス） ***：適当な名前を指定 例 サンプル： <A HREF="http://tok2.com">とくとくページへ移動</A>
とくとくページへ移動

◆ 図を貼り付ける

ホームページ上に画像ファイルや写真を貼り付ける方法を説明します。画像を貼り付けるには <IMG>タグを使用します。 ◇ 図を貼り付ける <IMG>タブには以下の属性があります。 SRC="･･･" : 表示する画像ファイルを指定します。（ファイルは GIFもしくはJPEG形式） ALIGN="･･･" : 画像を貼り付ける位置を指定します。LEFTは画面左、CENTERが画面中央、 RIGHTは画面右側にそれぞれ配置します。 WIDTH="n" : 画像の横幅を指定します。値はピクセル値または画面に対する パーセントで指定します。 HEIGHT="n" : 画像の高さを指定します。 ALT="･･･" : 画像が表示されるまで表示しておくコメントを記述します。 BORDER="n" : 画像の境界線の太さを指定します。0を指定すると境界線を表示しません。 HSPACE="n" : 画像の左右にn分のスペースをあけます。 VSPACE="n" : 画像の上下にn分のスペースをあけます。 ◇ 図でリンクを張る 画像をクリックすると新しいページへ移動する方法を示します。 例 サンプル： <A HREF="index.html"><IMG SRC="gif/a_title01.gif" BORDER=0>わいわいホームページ</A>
わいわいホームページ

◆ フォームの説明

アンケートなどの入力画面（テキストボックス、チェックボックス、ラジオボタン）をフォームと 言います。 ◇ <FORM>〜</FORM>タブは<INPUT>や<SELECT>タブで構成します。 <FORM>タブには以下の属性があります。 ACTION="･･･" : 実行（SUBMIT）ボタンをクリックしたときの処理を記述します。 ACTION="mailto:〜"とするとフォームの内容を〜のアドレスに送信します。 METHOD="･･･" : 入力したデータを渡す方法を記述します。METHOD=POSTとすると標準入力 に渡します。 TARGET="･･･" : 実行結果を別ページに表示する場合のウィンドウを記述します。 NAME="･･･" : フォームに名前を付ける場合に記述します。 ◇ <INPUT TYPE="〜">タブはTYPEオプション構成します。詳細は以下に示します。 TYPE="TEXT" ・・・ テキストボックス TYPE="RADIO" ・・・ ラジオボタン TYPE="CHECKBOX" ・・・ チェックボックス TYPE="SUBMIT" ・・・ サブミットボタン TYPE="RESET" ・・・ リセットボックス ◇ <SELECT>タブは選択ボックスを作成します。 例 サンプル： <FORM ACTION="MAILTO:y-kichi@chan.ne.jp" METHOD="POST"> あなたのメールアドレス：<INPUT TYPE="text" NAME="MAIL"><P> 使用しているブラウザ<BR> <INPUT TYPE="checkbox" NAME="IE">Internet Explorer<BR> <INPUT TYPE="checkbox" NAME="NS">Netscape<BR> メッセージ<BR> <TEXTAREA NAME="MESSAGE" ROWS=3 COLS=30></TEXTAREA><P> <INPUT TYPE="submit" VALUE="送信"><INPUT TYPE="reset" VALUE="リセット"> </FORM>
あなたのメールアドレス：
使用しているブラウザ
Internet Explorer
Netscape
メッセージ

◆ フレームの説明

フレームはウィンドウを分割していくつかのファイルを表示する機能です。 ◇ <FRAMESET>タブは属性を以下に示します。 SRC="･･･" : 表示するページのファイルを指定します。 NAME="･･･" : フレームの名前を指定します。 SCROLLING="･･･" : フレームにスクロールバーを表示するかどうかを指定します。 "YES"：必ず付ける "NO"：必ず付けない "AUTO"：画面に内容がおさまらない場合は表示する。 MARGINWIDTH="n" : フレーム内での左右の空白を指定します。 MARGINHEIGHT="n" : フレーム内での上下の空白を指定します。 FRAMEBORDER="･･･" : フレームの境界線の太さを指定します。0を指定すると境界線なしです。 BORDERCOLOR="･･･" : 境界線の色を指定します。 ◇ <NOFRAME>〜</NOFRAME>タブはフレームに対応していないブラウザの為に表示する内容を 記述します。

次回はもう少し詳しく説明していきます。