html





HTML ( エッチティーエムエル )


HTML ( エッチティーエムエル ) は 「Hyper Text Markup Language」 の略語であって、
インターネットで使用されるWebブラウザ表示用ファイルを作成するために用いられ、
テキストや図の表示等に限定された極めて簡便なプログラム言語である。
HTMLファイルは、開始タグと呼ばれる記号 <html> に始まり、
終了タグ </html> で終わる。
HTML は、このような各種のタグを用いたコマンド(制御命令)により書式制御を行う
プログラム言語である。
HTMLプログラムは、一般にテキストエディタ等を用いて記す。
プログラム中において、コマンド(制御命令)は必ず「直接入力」モードでもって入力する。
文字入力モード ( 全角，半角，直接入力 などの区別 ) には特に注意を払うこと。
コンピュータでは空白も文字の一種とみなされ、全角と半角の空白は全く異なるので
区別して入力する。
作成したHTMLファイル名の拡張子は、.html または .htm として保存する。
例えば　ex1.htm など。
この保存したHTMLファイルを マウスでダブルクリックするなどして開くと
Webファイルが表示される。
HTMLはインターネット上で普及しているWebファイルを作成するために頻繁に使用される。
HTMLに従って作成されたファイルは、Webブラウザを用いて容易に閲覧することが可能である。

(1)　HTML ファイルの基本型
一般に HTML ファイルは、head（ヘッド） と body（ボディ） の領域からなる。
head領域にはタイトルなどを記し、body領域に本文を記す。
なお 以下の // から後の文は説明であって実際のプログラムにおいては記さない。

----------------------------------------------------------------------

<html>　　　　　　　　　　　//　HTMLファイルの開始タグ．

<head>　　　　　　　　　　　//　head（ヘッド）領域の開始タグ．

<title>　　　　　　　　　　　//　title（タイトル）部分の開始タグ．

　ホームページの表題　　　　　//　Webブラウザのタイトル欄に表示される．

</title>　　　　　　　　　　//　title部分の終了タグ．

</head>　　　　　　　　　　//　head領域の終了タグ．

<body>　　　　　　　　　　//　body（ボディ）領域の開始タグ．

　この領域に本文を記述する。　　//　Webブラウザの本文として表示される．

</body>　　　　　　　　　　//　body領域の終了タグ．

</html>　　　　　　　　　//　HTMLファイルの終了タグ．

----------------------------------------------------------------------


(2)　HTML で用いられるタグの例
　　　　　　　　タグ記号　　　　　　　　　　　使用例　
　<br>　　この文章の文末で改行される。<br>　
　<b>　　　</b>　　<b>この文章は太字で表示される。</b>　
　<i>　　　</i>　　<i>この文章はイタリック体で表示される。</i>　
　<u>　　　</u>　　<u>この文章は下線付で表示される。</u>　
　<blink>　　　</blink>　　<blink>この文章はブリンクして表示される。</blink>　
　<center>　　　</center>　　<center>この文章はセンタリングされて表示される。</center>　
　<sub>　　　</sub>　　<sub>下付添え字</sub>　
　<sup>　　　</sup>　　<sup>上付添え字</sup>　
　<font　size= -7から+7　color=色コード>　</font>　　<font　size= +3　color=#0000FF>フォントサイズは+3で、青色の文章表示。</font>　
　<body　bgcolor=色コード　text=色コード>　</body><body　bgcolor=#0000FF　color=#000000>背景色は青で、本文の文字は黒色表示。</body>
　<a　href= "ファイル名やURL"　>　　　</a><a　href= "http://www.kdcnet.ac.jp/" >クリックすると本学ホームページにリンク。</a>

　HTML のタグには上表の他にも数多くの種類がある。


（注）　色コードについては
　　　　　000000　：　黒
　　　　　FF0000　：　赤
　　　　　00FF00　：　緑
　　　　　0000FF　：　青
　　　　　FFFF00　：　黄
　　　　　00FFFF　：　淡青
　　　　　FFFFFF　：　白
　　　　などのように 16進数6桁で表記する。
　　　　先頭から2桁は赤の量、中の2桁は緑の量、後方の2桁は青の量を、それぞれ16進数で示す。

10進数 2進数 16進数
0 0 0
1 1 1
2 10 2
3 11 3
4 100 4
5 101 5
6 110 6
7 111 7
8 1000 8
9 1001 9
10 1010 A
11 1011 B
12 1100 C
13 1101 D
14 1110 E
15 1111 F
16 10000 10



つぎの各例は HTML のフォームを用いて、アンケートや意見をネット経由で送信してもらうためのプログラム例です。
なお 以下の // から後の文は説明であって実際のプログラムにおいては記しません。





[例１]　医療の在り方について意見を送信してもらうためのフォームを作成する。

<html>　　// HTMLファイルの開始タグ.（HTMLファイル全体の最初の行で必ず一つ必要.）
<body>　　// HTMLファイル本文の開始タグ.（HTMLファイル本文記述領域の最初の行で必ず一つ必要.）
現在の日本の医療の問題点や将来の医療の在り方について、あなたの意見や考えを<br>　　// <br> は改行タグ.
以下のテキストエリア中に記して下さい。<br>
文章入力後に枠下の 「送信ボタン（１）」 をクリックして下さい。<br>
送信者側の電子メールソフトにより受信者(hattorit@kdcnet.ac.jp)宛に送信されます。<br>
<form ENCtype="text/plain" action="mailto:hattorit@kdcnet.ac.jp" method="post">　　// 送信フォームの開始タグ.
<textarea name="iken" rows=10 cols=50>　　// テキストエリアの開始タグ.　(縦10行で横幅50文字のテキスト入力範囲を作成.)
</textarea>　　// テキストエリアの終了タグ.
<br> 
<br> 
<input type="submit" value="送信ボタン （１）">　　// 「送信ボタン（１）」の作成.
</form>　　// 送信フォームの終了タグ.
</body>　　// HTMLファイル本文の終了タグ.（HTMLファイル本文領域の最後の行で必ず一つ必要.）
</html>　　// HTMLファイルの終了タグ.（HTMLファイル全体の最後の行で必ず一つ必要.）

（例１の出力結果）
------------------------------------------------------------------------
現在の日本の医療の問題点や将来の医療の在り方について、あなたの意見や考えを
以下のテキストエリア中に記して下さい。
文章入力後に枠下の 「送信ボタン（１）」 をクリックして下さい。
送信者側の電子メールソフトにより受信者(hattorit@kdcnet.ac.jp)宛に送信されます。


------------------------------------------------------------------------





[例２]　所属する学部について、チェックボックスで選択送信できるようにする。　

<html>
<body>
あなたの所属する大学の学部を以下のチェックボックス項目中から選択してクリックして下さい。<br>
選択クリック後に項目下の 「送信ボタン（２）」 をクリックして下さい。<br>
送信者側の電子メールソフトにより受信者(hattorit@kdcnet.ac.jp)宛に送信されます。<br>
<form ENCtype="text/plain" action="mailto:hattorit@kdcnet.ac.jp" method="post">
<input type="checkbox" name="gakubu" value="igaku" >  医学部 <br> 　　// 「医学部」のチェックボックスと項目を作成
<input type="checkbox" name="gakubu" value="shigaku" >  歯学部 <br> 　　// 「歯学部」のチェックボックスと項目を作成
<input type="checkbox" name="gakubu" value="yakugaku" >  薬学部 <br> 　　// 「薬学部」のチェックボックスと項目を作成
<input type="checkbox" name="gakubu" value="nogaku" >  農学部 <br> 　　// 「農学部」のチェックボックスと項目を作成
<input type="checkbox" name="gakubu" value="kogaku" >  工学部 <br> 　　// 「工学部」のチェックボックスと項目を作成
<input type="checkbox" name="gakubu" value="rigaku" >  理学部 <br> 　　// 「理学部」のチェックボックスと項目を作成
<input type="checkbox" name="gakubu" value="bungaku" >  文学部 <br> 　　// 「文学部」のチェックボックスと項目を作成
<input type="checkbox" name="gakubu" value="etc" >  その他 <br> 　　// 「その他」のチェックボックスと項目作成
<br> 
<input type="submit" value="送信ボタン （２）">　　// 「送信ボタン（２）」の作成
</form>
</body>
</html>

（例２の出力結果）
-------------------------------------------------------------------------------
あなたの所属する大学の学部を以下のチェックボックス項目中から選択してクリックして下さい。
選択クリック後に項目下の 「送信ボタン（２）」 をクリックして下さい。
送信者側の電子メールソフトにより受信者(hattorit@kdcnet.ac.jp)宛に送信されます。
医学部
歯学部
薬学部
農学部
工学部
理学部
文学部
その他

-------------------------------------------------------------------------------





[例３]　年齢について、ラジオボタンで選択送信できるようにする。　

<html>
<body>
よろしければ、あなたの年齢を以下のラジオボタン項目中から選択してクリックして下さい。<br> 
選択クリック後に項目下の 「送信ボタン（３）」 をクリックして下さい。<br> 
送信者側の電子メールソフトにより受信者(hattorit@kdcnet.ac.jp)宛に送信されます。<br> 
<form ENCtype="text/plain" action="mailto:hattorit@kdcnet.ac.jp" method="post">
<input type="radio" name="nenrei" value="old10" > 10才代 <br> 　　// 「10才代」のラジオボタンと項目を作成
<input type="radio" name="nenrei" value="old20" > 20才代 <br> 　　// 「20才代」のラジオボタンと項目を作成
<input type="radio" name="nenrei" value="old30" > 30才代 <br> 　　// 「30才代」のラジオボタンと項目を作成
<input type="radio" name="nenrei" value="old40" > 40才以上 <br> 　　// 「40才以上」のラジオボタンと項目を作成
<input type="radio" name="nenrei" value="oldNO" checked > 年齢を返答したくありません。<br> 　　// 返答したくない場合を初期状態（checked）とするラジオボタンと項目を作成
<br>
<input type="submit" value="送信ボタン （３）" > 　　// 「送信ボタン（３）」の作成
</form > 
</body>
</html>

（例３の出力結果）
--------------------------------------------------------------------------
よろしければ、あなたの年齢を以下のラジオボタン項目中から選択してクリックして下さい。
選択クリック後に項目下の 「送信ボタン（３）」 をクリックして下さい。
送信者側の電子メールソフトにより受信者(hattorit@kdcnet.ac.jp)宛に送信されます。
10才代
20才代
30才代
40才以上
年齢を返答したくありません。

--------------------------------------------------------------------------




（注）　送信フォームは、送信者側の電子メールソフトを使用して送信される。
　　　　送信内容は暗号化されないため、極秘文書などの送信には適さない。
　　　　なお送信者側でセキュリティレベルが高く設定されていると送信できない場合がある。

（注）　送信フォーム開始タグ中に記す受信者の電子メールアドレスについては、
　　　　誤りのないように注意すること。

（注）　チェックボックス（checkbox）の場合は、複数個の選択が可能であるが、
　　　　ラジオ（radio）ボタンについては、いずれか一項目のみしか選択できない。

（注）　テキストエリアはテキストボックスとも呼ばれる。





　( HTMLファイルをインターネット上に公開する際のモラル )

HTMLファイルは、サーバ等にアップロードすることにより、容易にインターネット上に
公開することが出来ます。
この公開されたHTMLファイル（Webファイル）は、インターネットを介して世界中の
コンピュータ端末から不特定多数の人々が自由に閲覧することになり、
さらにダウンロード保存されることもあります。
したがってHTMLファイルを公開するときには、ファイルに記載する内容について
細心の注意が必要です。
とりわけ著作権については、充分に気を配ることが重要です。
理由の如何を問わず、他人の著作物の内容を無断で自らのHTMLファイル上に
公開することは、著作権に関する法律（刑法）に抵触します。
ここで言う 「著作物」 には、論文や小説等のように文章で記述されるものの他にも、
絵や彫刻，写真，ムービー，コンピュータプログラム，音楽，舞踊 など様々の対象を
含んでいます。
公開ファイルは、自らのオリジナルな考えや創作物を掲載することを目的とすべき
であると考えます。
また極端に過激な思想や信条並びに表現等を公開することは慎むべきであり、
まして反社会的行為を誘発するような事柄を掲載するなどは論外です。
（日本国憲法で保障されている 「言論や表現の自由」 は公共の福祉に反しない範囲内
において認められる。）
なお 公開するファイルに自身の私的な事柄を記載することは、様々なリスクを伴うので、
特別の場合を除き、避けた方が無難かと思われます。


　( 他者のホームページにリンクを張る際の注意 )

インターネットにおけるリンク処方は、ネットワーク特有の全く新しい技術であり、
大変に便利で高速な情報引用の手段を提供しています。
リンク先が自らの作成したWebファイルである場合には特に問題はありませんが、
他者のホームページにリンクを張る際には、リンク先の相手方に対しての社会的礼節を
心掛けることが必要です。
リンクを張ること自体は引用の一手段に過ぎず、著作権上の問題は生じないと考えますが、
簡単なクリック操作で瞬時に他者のホームページに飛べるため、閲覧者の側から見ると
そのページの帰属先や著作者の判別が不明確となり、場合によっては他者ページで
あるにもかかわらず自らの作成したページであるかのように閲覧者が誤解する
ことさえも起こり得ます。
したがって他者のページにリンクを張る際には、自らのページのリンク個所において
他者のページにリンクする旨の文言を明記しておく方がよいと考えます。
もし文脈等の関係で煩雑となり、他者のリンク先が明記出来ないような場合には、
リンク先の相手方ホームページのトップページにリンクを張るという方法もあります。
たとえ悪意は無いにしても、リンク先の他者ホームページまでも自らが
すべて作成したかのような錯覚をページ閲覧者に与えてしまうような
リンクの張り方は、リンク先の相手に対して失礼です。
リンクという引用手段は、ページ作成者と閲覧者の双方にとって極めて
利便性の高いものであり、多いに活用すべきですが、リンク先の相手に対して
非礼にならないよう配慮すべきです。
なお閲覧者の側にあっては、閲覧中のホームページ帰属先がブラウザ画面上部の
URL表示欄で常に確認出来ますので、リンク操作で他のページに飛んだ際には、
このURLを確かめる習慣をつけるとよいと思います。
これは閲覧者自身のネットサーフィン中のリスク回避にも繋がると考えます。