簡単HTML入門

熊本国府高等学校 PC教室

 PC同好会の生徒の為に作成していたものを、平成8年にテキスト部分だけをHTML化したもので、不充分な点があることをお断り致します。


 ホームページ(WEBページ)を作るのは、簡単です。ワープロやエディタを使って、「テキスト文書」に、HTMLの命令である「HTMLタグ」という記号を適当に挿入すればいいのです。こうして作成した文書(ハイパーテキスト)を、ファイル拡張子を「html」または「htm」で指定のディレクトリに保存すれば、「HTML文書」は完成します。


 今では、HTMLを知らなくとも、もっと手軽に
HTMLを自動的に作成してくれるワープロや専用のエディタもありますが、
このページに書かれている程度の知識があれば、
ページ造りがさらに簡単になることと思います。

 最初に、簡単なHTML文書の例と、その表示例を示します。参考にして下さい。これをファイル名「rei.htm」などで、フロッピーディスク等に保存し、ブラウザ(閲覧ソフト、今これを表示しているソフトです)の「ファイル」の「開く」等を実行すれば、この例が表示されるはずです。

[0]簡単なHTML文の例

<HTML>                 ・・・・・・・・・HTMLの始まり
<HEAD>                 ・・・・・・・・・ヘッダの始まり
<TITLE>簡単HTML入門</TITLE>・・・・・・・・・タイトルは画面上方に表示
</HEAD>                ・・・・・・・・・ヘッダの終わり
<BODY>                 ・・・・・・・・・本文の始まり
こんにちは!<BR>           ・・・・・・・・・改行
ここが「簡単HTML入門」の本文です。
</BODY>                ・・・・・・・・・本文の終わり
</HTML>                ・・・・・・・・・HTMLの終わり

上の例での本文表示は

こんにちは!
ここが「簡単HTML入門」の本文です。

 となります。

 "タグは半角の「<」と「>」で囲みます。タグは半角文字で、大文字でも、小文字でも区別はありません。タグの記述は、範囲指定をします。普通は範囲の先頭と末尾にペアで記述します。タグの例:<I>イタリック</I>・・・これは範囲をイタリック体で表示します。

目次へもどる


 それでは、いくつかのタグの使用例と、その表示を見ていきたいと思います。

目次

[0]簡単な文例
[1]見出し(Headings)
[2]強制改行(line BReak)
[3]段落(Paragraph)
[4]書いたまま表示(PREformatted text)
[5]丸点が付いた箇条書き(Unordered List)
[6]番号が付いた箇条書き(Ordered List)
[7]文字の装飾
[8]横罫線(Horizontal Rule)
[9]リンク
[10]画像の表示(IMAGE)
[11]表(TABLE)


[1]見出し(Headings)

 見出しのレベルに応じて文字の大きさを変更します。レベルは1〜6までの数字で指定します。実際の文字の大きさは、各ブラウザに依存します。

―饉

<h1>H1熊本国府高等学校H1</h1>
<h2>H2熊本国府高等学校H2</h2>
<h3>H3熊本国府高等学校H3</h3>
<h4>H4熊本国府高等学校H4</h4>
<h5>H5熊本国府高等学校H5</h5>
<h6>H6熊本国府高等学校H6</h6>

表示

H1熊本国府高等学校H1

H2熊本国府高等学校H2

H3熊本国府高等学校H3

H4熊本国府高等学校H4

H5熊本国府高等学校H5
H6熊本国府高等学校H6

目次へもどる


[2]強制改行(line BReak)

 ブラウザに表示され場合、長い文章はウィンドウの右端で自動的に改行されますが、改行のタグを挿入すると、強制的に改行されます。

―饉

第1行目の文字列です。<br>第2行目の文字列です。第2行目の文字列の続きです。<br>第3行目の文字列です。

表示

第1行目の文字列です。
第2行目の文字列です。第2行目の文字列の続きです。
第3行目の文字列です。


(次の <P> との違いは、行間がくっつくことです。)

目次へもどる

[3]段落(Paragraph)

 前の「改行」との違いは、1行分の空白行ができることです。タグは一般的に「始め」と「終わり」にペアで使いますが、<BR>と<P>は単独で利用できます。

―饉

第1段落目の文字列です。<p>第2段落目の文字列です。</p>第3段落目の文字列です。第3段落目の文字列です。第3段落目の文字列です。

表示

第1段落目の文字列です。

第2段落目の文字列です。

第3段落目の文字列です。第3段落目の文字列です。第3段落目の文字列です。


目次へもどる

[4]書いたまま表示(PREformatted text)

 スペースや改行など、書いてあるままの書式で表示するタグです。

―饉

<pre>
1行目の文字があります。
   2行目の文字は、  1行目の文字の少し右から始まり、途中空白がある。
 
   3行目は空け、4行目の文字は、2行目の文字と同じ位置から始まります。
</pre>

表示

1行目の文字があります。
      2行目の文字は、  1行目の文字の少し右から始まり、途中空白がある。
    
      3行目は空け、4行目の文字は、2行目の文字と同じ位置から始まります。

目次へもどる


5]丸点が付いた箇条書き(Unordered List)

 箇条書きは、入れ子にすることも可能です。また、次の<ol>などと組み合わせて使うこともできます。

―饉

<ul>
<li>項目1番目
<li>項目2番目
</ul>

表示


 <ul><li>項目1番目<li>項目2番目</ul>と、書いても同じく、各項目が改行されて表示されます。これは、次の[5]でも同じです。

目次へもどる


[6]番号が付いた箇条書き(Ordered List)

―饉

<ol>
<li>項目1番目
<li>項目2番目
</ol>

表示

  1. 項目1番目
  2. 項目2番目

目次へもどる


[7]文字の装飾

 他の文字と区別したり、目立たせるために、文字を装飾するタグです。。

―饉

<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
アンダーライン

 これ以外に、文字の大きさ色を変えたり点滅(Netscapeだけ)など、いろいろなタグがあります。

これは Internet Explorer にしか利用できません。文字がスクロールします。

目次へもどる


[8]横罫線(Horizontal Rule)

―饉

<HR>

表示


   ↑
   この線です。
   下の線はちょっと変えてみました。(線の長さを画面の80%、大きさを10ピクセル、配置を中央)
   <HR WIDTH=80% SIZE=10 ALIGN=CENTER>  としました。


目次へもどる

[9]リンク

 HTMLの大きな特徴の1つが、このリンクです。ページ内のある「文字」をマウスでクリックすると、その「文字」の部分に指定されている「ページや場所」にジャンプするという機能です。

―饉

<a href="http://www.kumamotokokufu-h.ed.jp/kumamoto/kumamoto.html">熊本国府高等学校の熊本よかとこのページへ</a>
 

<a href="#koko">同一ページのkokoと名前を付けたところへ</a>

(これを実行するためには、同一ページに下の行が必要)

<a name="koko">ここがkokoだよ</a>

表示

熊本国府高等学校の熊本よかとこのページへ

同一ページのkokoと名前を付けたところへ  

 

(これを実行するためには、同一ページに下の行が必要)

 

 

ここがkokoだよ

ここをクリックすると「[9]リンク」にもどる

このページの最初にもどる

目次へもどる


[10]画像の表示(IMAGE)

 画像ファイルは、WWWで利用可能なファイル形式(GIFかJPEGフォーマット)でなければなりません。写真などをイメージスキャナで取り込むか、Windows95付属のペイントなどで描いた画像ファイルを、ファイルフォーマット変換ツールを利用して、GIFやJPEG形式へ直します。

―饉

下に「3000dan.gif」という画像が表示されます。<p>
<center> <IMG SRC="3000dan.gif" align="middle">中央町の3333段の石段です<br>
</center>

表示

下に「3000dan.gif」という画像が表示されます。

中央町の3333段の石段です

<center>は</center>との間を「中央揃え」するタグです。

目次へもどる


[11]表(TABLE)

 表を記述するためには、たくさんのタグを挿入する必要があり、少々面倒かも知れませんが、便利な機能です。タグの使用を省略したものを紹介します。
  ・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>

表示2(線を入れない)

これが表作成の例です
学年平均
身長(cm) 体重(kg)
男子 172 75
女子 161 51

目次へもどる


 以上、簡単に幾つかのHTMLタグを紹介しましたが、このほかにもより便利なタグがたくさんありますが、ここに紹介したものだけでも結構作れます。また、各地のWWWページにも、HTMLの書き方や文法の解説や入門ページも色々あります。WWWページの検索などで捜してみて下さい。
 また、簡単にHTMLが作成できるツールも、フリーソフトを含め、数多く出ております。ワープロソフト(一太郎やワードなど)に付属しているのもありますが、ここに紹介したくらいのタグを知って使えば、より活用しやすくなるものと思います。
 なお、ホームページ作成に関する書籍も数多く出ておりますが、一番手軽なの方法は気に入ったページのソースファイルを見て、それをまねることかも知れません。WWWは情報を受け取るだけではありません。よりきれいで、楽しく、有用な情報発信のページを作ってみましょう。(初版:96/09/28)

文責:成田(問い合わせはE-mailで)

学校紹介のページへ  コンピ~ュータのページへ