HTML

　HTML（エッチティーエムエル）

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

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

-------------------------------------------------------------------------------
<html>　　　　　　　　　　　//　HTMLファイルの開始タグ．ファイルの最初の行に必ず一つ必要．
<head>　　　　　　　　　　　//　head (ヘッド) 領域の開始タグ．
<title>　　　　　　　　　　　//　title (タイトル) 部分の開始タグ．
　ホームページの表題　　　　　//　Webブラウザのタイトル欄に表示．
</title>　　　　　　　　　　//　title部分の終了タグ．
</head>　　　　　　　　　　//　head領域の終了タグ．
<body>　　　　　　　　　　//　body (ボディ) 領域の開始タグ．
　この領域に本文を記述する。　　//　Webブラウザの本文として表示．
</body>　　　　　　　　　　//　body領域の終了タグ．
</html>　　　　　　　　　//　HTMLファイルの終了タグ．ファイルの最終の行に必ず一つ必要．
-------------------------------------------------------------------------------

（２）　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= #000FF>フォントサイズは+3で、青色の文章表示。</font>
<a href= "ファイル名やURL">　　</a>	<a href=”http://www.qft.jp/”>ここをクリックするとQFTページにリンク。</a>

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

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

10進数	２進数	16進数
0	0	0
1	1	1
2	10	2
3	11	3
4	100	4
5	101	5
6	111	6
7	1000	7
8	1001	8
9	1011	9
10	1111	A
11	10000	B
12	10001	C
13	10011	D
14	10111	E
15	11111	F
16	100000	10

HTMLソースファイルの記述例
以下のプログラム記述の各行において「 // 」以後は説明文であって、記入する必要はない。またコマンド (制御命令) を表す文字を太字で記してあるが、実際の記述では、すべて標準の文字形すなわち「直接入力」モードで記す。

［例 1］　理数系教育の在り方について、意見を送信してもらうためのフォームを作成する。

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

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

［例 2］　職種について、チェックボックスで選択送信できるようにする。

<html>
<body>
あなたの職種を以下のチェックボックス項目中から選択してクリックして下さい。<br>
選択クリック後に項目下の「送信ボタン」をクリックして下さい。<br>
送信者側の電子メールソフトにより受信者 (HP作者)宛に送信されます。<br>
<form ENCtype="text/plain" action="mailto:hattori@qft.jp" method="post" >
<input type="checkbox" name="syokusyu" value="seizou" > 製造 <br>　　// 「製造」のチェックボックスと項目
<input type="checkbox" name="syokusyu" value="nousui" > 農林水産 <br>　　// 「農林水産」
<input type="checkbox" name="syokusyu" value="ryutu" > 流通販売 <br>　　// 「流通販売」
<input type="checkbox"name="syokusyu" value="zimu" > 事務 <br>　　// 「事務」
<input type="checkbox" name="syokusyu" value="unyu" > 運輸 <br>　　// 「運輸」
<input type="checkbox" name="syokusyu" value="zyoho" > 情報通信 <br>　　// 「情報通信」
<input type="checkbox" name="syokusyu" value="kyoiku" > 教育 <br>　　// 「教育」
<input type="checkbox" name="syokusyu" value="iryo" > 医療 <br>　　// 「医療」
<input type="checkbox" name="syokusyu" value="kenkyu" > 研究開発 <br>　　// 「研究開発」
<input type="checkbox" name="syokusyu" value="sosaku" > 創作 <br>　　// 「創作」
<input type="checkbox" name="syokusyu" value="sabisu" > サービス <br>　　// 「サービス」
<input type="checkbox" name="syokusyu" value="koumu" > 公務 <br>　　// 「公務」
<input type="checkbox" name="syokusyu" value="gakusei" > 学生 <br>　　// 「学生」
<input type="checkbox" name="syokusyu" value="etc" > その他 <br>　　// 「その他」
<br>
<input type= "submit" value= "送信ボタン " >　　// 「送信ボタン」の作成
</form>
</body>
</html>

（例 2 の出力結果）
-------------------------------------------------------------
あなたの職種を以下のチェックボックス項目中から選択してクリックして下さい。
選択クリック後に項目下の「送信ボタン」をクリックして下さい。
送信者側の電子メールソフトにより受信者 (HP作者)宛に送信されます。 -------------------------------------------------------------

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

<html>
<body>
よろしければ、あなたの年齢を以下のラジオボタン項目中から選択してクリックして下さい。<br>
選択クリック後に項目下の「送信ボタン」をクリックして下さい。<br>
送信者側の電子メールソフトにより受信者 (HP作者)宛に送信されます。<br>
<form ENCtype="text/plain" action="mailto:hattori@qft.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="old50" > 50才代 <br>　　// 「50才代」
<input type="radio" name="nenrei" value="old60" > 60才以上 <br>　　// 「60才以上」
<input type="radio" name="nenrei" value="oldNO" checked > 年齢を返答したくありません。<br>
// 返答したくない場合を初期状態（checked）とするラジオボタンと項目
<br>
<input type="submit" value="送信ボタン" >　　// 「送信ボタン」の作成
</form>
</body>
</html>

（例 3 の出力結果）
----------------------------------------------------------------------
よろしければ、あなたの年齢を以下のラジオボタン項目中から選択してクリックして下さい。
選択クリック後に項目下の「送信ボタン」をクリックして下さい。
送信者側の電子メールソフトにより受信者 (HP作者)宛に送信されます。 ----------------------------------------------------------------------

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

［注］
送信フォームは、送信者側の電子メールソフトを使用して送信される。送信内容は暗号化されないため、極秘文書などの送信には適さない。なお送信者側でセキュリティレベルが高く設定されていると送信できない場合がある。送信フォーム開始タグ中に記す受信者の電子メールアドレスについては、誤りのないように注意すること。

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

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

　JavaScript (ジャバスクリプト) へ進む

　情報技術へ戻る

　トップページへ戻る