中央町の３３３３段の石段です熊本国府高等学校 ＰＣ教室
PC同好会の生徒の為に作成していたものを、平成８年にテキスト部分だけをＨＴＭＬ化したもので、不充分な点があることをお断り致します。
ホームページ（ＷＥＢページ）を作るのは、簡単です。ワープロやエディタを使って、「テキスト文書」に、ＨＴＭＬの命令である「ＨＴＭＬタグ」という記号を適当に挿入すればいいのです。こうして作成した文書（ハイパーテキスト）を、ファイル拡張子を「html」または「htm」で指定のディレクトリに保存すれば、「ＨＴＭＬ文書」は完成します。
最初に、簡単なＨＴＭＬ文書の例と、その表示例を示します。参考にして下さい。これをファイル名「rei.htm」などで、フロッピーディスク等に保存し、ブラウザ（閲覧ソフト、今これを表示しているソフトです）の「ファイル」の「開く」等を実行すれば、この例が表示されるはずです。
<HTML> ・・・・・・・・・ＨＴＭＬの始まり
<HEAD> ・・・・・・・・・ヘッダの始まり
<TITLE>簡単ＨＴＭＬ入門</TITLE>・・・・・・・・・タイトルは画面上方に表示
</HEAD> ・・・・・・・・・ヘッダの終わり
<BODY>
・・・・・・・・・本文の始まり
こんにちは！<BR>
・・・・・・・・・改行
ここが「簡単ＨＴＭＬ入門」の本文です。
</BODY> ・・・・・・・・・本文の終わり
</HTML> ・・・・・・・・・ＨＴＭＬの終わり
こんにちは！
ここが「簡単ＨＴＭＬ入門」の本文です。
となります。
"タグは半角の「<」と「>」で囲みます。タグは半角文字で、大文字でも、小文字でも区別はありません。タグの記述は、範囲指定をします。普通は範囲の先頭と末尾にペアで記述します。タグの例：<I>イタリック</I>・・・これは範囲をイタリック体で表示します。
それでは、いくつかのタグの使用例と、その表示を見ていきたいと思います。
［０］簡単な文例
［１］見出し（Headings）
［２］強制改行（line BReak）
［３］段落（Paragraph）
［４］書いたまま表示（PREformatted text）
［５］丸点が付いた箇条書き（Unordered List）
［６］番号が付いた箇条書き（Ordered List）
［７］文字の装飾
［８］横罫線（Horizontal Rule）
［９］リンク
［１０］画像の表示（IMAGE）
［１１］表（TABLE）
見出しのレベルに応じて文字の大きさを変更します。レベルは１〜６までの数字で指定します。実際の文字の大きさは、各ブラウザに依存します。
<h1>Ｈ１熊本国府高等学校Ｈ１</h1>
<h2>Ｈ２熊本国府高等学校Ｈ２</h2>
<h3>Ｈ３熊本国府高等学校Ｈ３</h3>
<h4>Ｈ４熊本国府高等学校Ｈ４</h4>
<h5>Ｈ５熊本国府高等学校Ｈ５</h5>
<h6>Ｈ６熊本国府高等学校Ｈ６</h6>
ブラウザに表示され場合、長い文章はウィンドウの右端で自動的に改行されますが、改行のタグを挿入すると、強制的に改行されます。
第１行目の文字列です。<br>第２行目の文字列です。第２行目の文字列の続きです。<br>第３行目の文字列です。
第１行目の文字列です。
第２行目の文字列です。第２行目の文字列の続きです。
第３行目の文字列です。
（次の <P> との違いは、行間がくっつくことです。）
前の「改行」との違いは、１行分の空白行ができることです。タグは一般的に「始め」と「終わり」にペアで使いますが、<BR>と<P>は単独で利用できます。
第１段落目の文字列です。<p>第２段落目の文字列です。</p>第３段落目の文字列です。第３段落目の文字列です。第３段落目の文字列です。
第１段落目の文字列です。
第２段落目の文字列です。
第３段落目の文字列です。第３段落目の文字列です。第３段落目の文字列です。
スペースや改行など、書いてあるままの書式で表示するタグです。
<pre>
１行目の文字があります。
２行目の文字は、 １行目の文字の少し右から始まり、途中空白がある。
３行目は空け、４行目の文字は、２行目の文字と同じ位置から始まります。
</pre>
１行目の文字があります。
２行目の文字は、 １行目の文字の少し右から始まり、途中空白がある。
３行目は空け、４行目の文字は、２行目の文字と同じ位置から始まります。
箇条書きは、入れ子にすることも可能です。また、次の<ol>などと組み合わせて使うこともできます。
<ul>
<li>項目１番目
<li>項目２番目
</ul>
<ul><li>項目１番目<li>項目２番目</ul>と、書いても同じく、各項目が改行されて表示されます。これは、次の［５］でも同じです。
<ol>
<li>項目１番目
<li>項目２番目
</ol>
他の文字と区別したり、目立たせるために、文字を装飾するタグです。。
<b>太い文字</b><br><i>イタリック</i><br><tt>Kumamoto IROiro</tt><br><U>アンダーライン</U><p>
これ以外に、文字の<font size=+2>大きさ</font>や<font color=#ff0000>色を</font><font color=#0000ff>変えたり</font>、<blink><font color="green">点滅（Netscapeだけ）</font></blink>など、いろいろなタグがあります。
<font color="blue"> <marquee>これは Internet Explorer にしか利用できません。文字がスクロールします。</marquee> </font>
太い文字
イタリック
Kumamoto IROiro
アンダーライン
これ以外に、文字の大きさや色を変えたり、など、いろいろなタグがあります。
<HR>
↑
この線です。
下の線はちょっと変えてみました。（線の長さを画面の８０％、大きさを１０ピクセル、配置を中央）
<HR WIDTH=80% SIZE=10 ALIGN=CENTER> としました。
ＨＴＭＬの大きな特徴の１つが、このリンクです。ページ内のある「文字」をマウスでクリックすると、その「文字」の部分に指定されている「ページや場所」にジャンプするという機能です。
<a href="http://www.kumamotokokufu-h.ed.jp/kumamoto/kumamoto.html">熊本国府高等学校の熊本よかとこのページへ</a>
<a href="#koko">同一ページのkokoと名前を付けたところへ</a>
（これを実行するためには、同一ページに下の行が必要）
<a name="koko">ここがkokoだよ</a>
（これを実行するためには、同一ページに下の行が必要）
画像ファイルは、ＷＷＷで利用可能なファイル形式（ＧＩＦかＪＰＥＧフォーマット）でなければなりません。写真などをイメージスキャナで取り込むか、Windows95付属のペイントなどで描いた画像ファイルを、ファイルフォーマット変換ツールを利用して、ＧＩＦやＪＰＥＧ形式へ直します。
下に「3000dan.gif」という画像が表示されます。<p>
<center> <IMG SRC="3000dan.gif" align="middle">中央町の３３３３段の石段です<br>
</center>
下に「3000dan.gif」という画像が表示されます。
中央町の３３３３段の石段です<center>は</center>との間を「中央揃え」するタグです。
表を記述するためには、たくさんのタグを挿入する必要があり、少々面倒かも知れませんが、便利な機能です。タグの使用を省略したものを紹介します。
・Table Header(TH)（項目用のセル） ・Table Data(TD)（データ用のセル）
・Table Row(TR)（各行の区切り） ・CAPTION（表の見出し）
<TABLE BORDER=4>
<CAPTION>これが表作成の例です</CAPTION><TR>
<TH><TH colspan=2>学年平均<TR>
<TH><TH>身長(cm)<TH>体重(kg)<TR>
<TH>男子<TD>172<TD>75<TR>
<TH>女子<TD>161<TD>51
</TABLE>
| 学年平均 | ||
|---|---|---|
| 身長(cm) | 体重(kg) | |
| 男子 | 172 | 75 |
| 女子 | 161 | 51 |
<TABLE>
<CAPTION>これが表作成の例です</CAPTION><TR>
<TH><TH colspan=2>学年平均<TR>
<TH><TH>身長(cm)<TH>体重(kg)<TR>
<TH>男子<TD>172<TD>75<TR>
<TH>女子<TD>161<TD>51
</TABLE>
| 学年平均 | ||
|---|---|---|
| 身長(cm) | 体重(kg) | |
| 男子 | 172 | 75 |
| 女子 | 161 | 51 |
以上、簡単に幾つかのＨＴＭＬタグを紹介しましたが、このほかにもより便利なタグがたくさんありますが、ここに紹介したものだけでも結構作れます。また、各地のＷＷＷページにも、ＨＴＭＬの書き方や文法の解説や入門ページも色々あります。ＷＷＷページの検索などで捜してみて下さい。
また、簡単にＨＴＭＬが作成できるツールも、フリーソフトを含め、数多く出ております。ワープロソフト（一太郎やワードなど）に付属しているのもありますが、ここに紹介したくらいのタグを知って使えば、より活用しやすくなるものと思います。
なお、ホームページ作成に関する書籍も数多く出ておりますが、一番手軽なの方法は気に入ったページのソースファイルを見て、それをまねることかも知れません。ＷＷＷは情報を受け取るだけではありません。よりきれいで、楽しく、有用な情報発信のページを作ってみましょう。（初版：96/09/28）
学校紹介のページへ コンピ~ュータのページへ