HTMLの超基本

トップページプログラミング技術等

html要素とhead要素とbody要素

ここでは簡単に、画面を構成する何らかの情報(文章や罫線や写真等)を「要素」と呼ぶ。
全ての要素は入れ子構造を取る。大きな箱の中に小さな箱を入れた構造が入れ子構造である。
最も外側の大きい箱(要素)はhtmlである。その中にheadとbodyという二つの大きな箱(要素)が並んでいる。
<body>のように中に/の無い記述を開始タグという。</body>のように要素名の前に/があるのを終了タグという。
入れ子構造なので、<a><b>と書かれれば、必ず</b>は</a>より先に書かれる。
或る要素の終了タグが置かれる前に、別の要素の開始タグが置かれたら、必ず別の要素の終了タグが先に置かれる。
画面に表示される要素は、全てbodyの中に入れられる。headは直接画面に表示されない情報が入る。
下のサンプルコードで、titleという要素の中に記載された文字がブラウザの一番上の青いバーに表示される(これは画面外の表示と看做される)。
body要素の中に、bgcolorという属性があり、色を青に指定している。これで画面全体が青色になる。

<html>
<head>
<title>とっても簡単なHTML</title>
</head>
<body bgcolor="blue">
</body>
</html>

このサンプルコードの画面

段落を作るp要素と改行を作るbr要素

文章(テキスト)は、<body>(任意の文字列)</body>のようにbody要素の中に書くだけでも画面に表示されるが、p要素の中に書くと段落扱いになる。
二つの文章を含むp要素を並べると自動的に改行され、段落間にスペースが出来る。
段落の中で改行したい場合はbr要素を用いる。ここでは改行されるだけで行間にスペースは出来ない。
br要素はそれ自体で「改行」という一つの要素を表示する(前後の文字列が改行されていること自体が「改行」の表示)。
br要素のように中に何かを挟まない要素は<br></br>と並べずに<br />と記述する。

<html>
<head>
<title>とっても簡単なHTML</title>
</head>
<body bgcolor="lightblue">
<p>あいうえお。かきくけこ</p><p>さしすせそ。</p> <p>たちつてと。<br />なにぬねの</p>
</body>
</html>

このサンプルコードの画面

箇条書きを作るul要素とol要素

ul要素は番号なし箇条書きを作り、その中に各項目を作るli要素を並べる。各項目には自動的に・等が付される。
ol要素は番号つき箇条書きを作り、li要素には自動的に番号が付される。type属性でaと指定すると番号の代わりにアルファベットで順番が表示される。
li要素と並列に別のul要素等を置きその中にli要素を並べると、入れ子の箇条書きが出来、自動的にインデント(字下げ)される。
入れ子構造なので、例えばol要素の中で開いたul要素は、ol要素が閉じる前に閉じなければならない。
またdl要素でも箇条書きのようなものが書ける。これは定義を作る要素で、dt要素に記述した言葉の定義をdd要素に記述する。
これらの要素を使うと、自動的にWebページを巡回する検索エンジンのロボットプログラムが、「これは箇条書きだ」「これは定義だ」と記録する事が出来る。

<html>
<head>
<title>とっても簡単なHTML</title>
</head>
<body bgcolor="yellow">
<ul><li>あいうえお</li><li>かきくけこ</li></ul>
<ol><li>あいうえお</li><li>かきくけこ</li></ol>
<ol type="a"><li>あいうえお</li><li>かきくけこ</li></ol>
<ol><li>あいうえお</li><li>かきくけこ</li><ul><li>カキクケコ</li><li>kakikukeko</li></ul></ol>
<dl><dt>単語</dt><dd>その定義</dd></dl>
</body>
</html>

このサンプルコードの画面

画像を貼るimg要素とsrc属性等

画像を貼るにはimg要素を置き、src属性で画像ファイル名を指定する。
また、width属性で画像の横幅、height属性で縦幅のピクセル値等を指定出来る。これを書かないと原則、元々の画像ファイルサイズで表示される。
元々の画像ファイルと極端に違うサイズを指定すると画像が汚く表示されるので要注意。
alt属性で、代替テキスト(画像にカーソルを載せた時に表示される説明文)を設定出来る。代替テキストは音声読上げソフトでも読まれる。
imgに限らず要素は複数の属性を持ち、様々な指定を行なう事が出来る。
なお、この記述では表示する画像はこのhtmlと同じフォルダに置く必要がある。

<html>
<head>
<title>とっても簡単なHTML</title>
</head>
<body bgcolor="lightgreen">
<img src="panda.jpg" width="111" height="74" alt="パンダ" />
</body>
</html>

このサンプルコードの画面

表を作るtable要素等

table要素の中に表は作られる。border属性で罫線の太さを2px、bordercolor属性で罫線の色を黒に指定している。
table要素の中にcaption要素、thead要素、tbody要素が並列に並んでいる。
caption要素は表の見出しを作り、align属性で表の上(top)に見出しを置く事を指定している(下に置く事も出来る)。
thead要素は表のヘッダ部分(項目名)を作り、tbody要素は表の本体部分を作る。
thead要素とtbody要素は共にまずtr要素によって区分される。tr要素は表の横一列を作る。
各tr要素(横一列)は其々th要素(theadの中)又はtd要素(tbodyの中)で区切られる。これは縦線を引くのに相当する。
この例では横に並ぶマスは3つなので、th又はtdも3つずつ書くが、上下が同じデータの場合はrowspan属性で統合する事が出来る。
rowspan="2"は、縦二段を一緒にする指定となる。この場合、統合される方の下の段はその位置のtdは置かない。

<html><head>
<title>とっても簡単なHTML</title>
</head>
<body bgcolor="lightpink">
<table border="2" bordercolor="black">
<caption align="top">県名と県庁所在地</caption>
<thead>
<tr><th>県名</th><th>県庁所在地</th><th>地方</th></tr>
</thead>
<tbody>
<tr><td>愛知</td><td>名古屋市</td><td rowspan="2" >東海</td></tr>
<tr><td>静岡</td><td>静岡市</td></tr>
<tr><td>神奈川</td><td>横浜市</td><td>関東</td></tr>
</tbody>
</table></body></html>

このサンプルコードの画面

リンクを作るa要素とhref属性

リンクはa属性で囲まれた文字列にアンダーラインが引かれ、そこをクリックするとhref属性で指定したページ等へ遷移する画面が出来る。
href属性で別のhtmlファイル、別サイトのURL、メールアドレス等を指定出来る。
href="page2.html"と書いた場合はpage2.htmlは同じフォルダに置かなければならない(別のフォルダならばパス指定)。
メールは、mailto:の後にアドレスを指定する(クリックすると閲覧者のPCにあるメーラーが立ち上がる)。
リンク先に#(IDネーム)を付けると、id属性でそのIDネームを指定する箇所を表示する。即ち、ページの一部をリンク先にする。
ここではid="chapter1"は大量の改行の後に置かれているため、サンプルコードの画面では最初は画面外にある。「第1章」をクリックすると画面の中に入るのが確認出来る。
link要素はhead要素の中に書き(従って画面には表示されない)、href属性で指定したリンク先の関係を、rel属性で指定する。
この場合は、page2.htmlがこのページの「次」のページである事を示し、検索ロボット等にサイト構造を教えている。relの属性値には、他に「前」(prev)、「付録」(appendix)等がある。

<html><head>
<title>とっても簡単なHTML</title>
<link rel="next" href="page2.html" />
</head><body>
<a href="#chapter1">第1章</a><br />
<a href="page2.html">ページ2</a><br />
<a href="http://www.sist.ac.jp/">静岡理工科大学</a><br />
<a href="mailto:xxxx@yy.zz.ac.jp">ZZ大学YY学部XXXへのメール</a><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<a id="chapter1">第1章</a>
</body></html>

(page2.html)
<html><body bgcolor="purple">
</body></html>

このサンプルコード(page2.htmlではない方)の画面

画像をリンクにする場合とmap要素、area要素

画像にもborder属性でピクセル数を指定し枠を付ける事が出来る(画面上の画像)。
画像をリンクにするにはa要素の中にimg要素を入れる。画像の何処をクリックしてもリンク先に移る(画面右の小さい画像)。
画像の一部をリンクにするには、img要素とmap要素を連携させる。img要素のusemap属性で#の後に適当な名前を指定する。
map要素ではusemap属性で指定された名前をname属性に入れ、map要素の中にarea要素を入れる
area要素はhref属性でリンク先のページを指定し、リンク領域の形をshape属性で指定し(circleは円)、coords属性はここでは円の中心のx座標、y座標、半径を指定している(画面下の画像の顔周辺がリンク領域)。
なお、画像ではなくFlash等の新たなファイル形式を貼る場合はimg要素でなくobject要素を用いる。

<html><head>
<title>とっても簡単なHTML</title>
<link rel="next" href="page2.html" />
</head><body>
<img src="panda.jpg" width="222" height="147" alt="パンダ" border="2">
<a href="page2.html"><img src="panda.jpg" width="111" height="74" alt="パンダ"></a>
<img src="panda.jpg" usemap="#panda" width="222" height="147" />
<map name="panda"><area href="page2.html" shape="circle" coords="30,70,25" /></map>
</body></html>

このサンプルコードの画面

データ送信用画面を作るform要素

form要素の中にテキストボックスや選択メニューを置き、入力されたり選択された情報を.phpファイル等に送信出来る。
form要素のaction属性でデータを送るphpを指定する(ここではfilename.phpという名前のphpファイル。この書き方だと同じフォルダに置く必要がある)。
method属性はデータの送信形式を指定し、通常はpostと書いておけばよい(これを書かないと、phpファイルの方で$_POST['××']を扱えない)。
form要素の中にあるinput要素は、type属性にtextを指定するとテキストボックス(一行のテキストエリア)を作る。name属性はこのテキストボックスの名前、size属性はテキストボックスの幅を指定する。
form要素の中にあるtextarea要素はテキストエリアを作り、rows属性で縦の行数、cols属性で幅を指定する。
textarea要素は中に「ここにコメントを記入してください。」等の文字列を書いておくと、そのまま表示される。
input要素のtype属性でsubmitを指定すると、送信ボタンが出来る。value属性は送信ボタンに表示される文字列を書く。
form要素の中には必ず送信ボタンを一つ置き、これが押されると、そのform要素で囲ったデータは一斉に送信される。
受け取る.phpファイルの方では、$_POST['(送られて来るデータの名前)']で、その送信データを扱う事が出来る。
この例では、$_POST['user_name']でテキストボックスに入力されたデータ、$_POST['user_comment']でテキストエリアに入力されたデータを画面に表示する。

<html><head>
<title>とっても簡単なHTML</title>
</head><body bgcolor="lightgreen">
<form action="filename.php" method="post">
お名前<br /><input type="text" name="user_name" size="10" />
<br />コメント<br /><textarea name="user_comment" rows="6" cols="50">
ここにコメントを記入してください。</textarea><br />
<input type="submit" value="送信" /></form> </body></html>

(filename.php)
<?php
print ($_POST['user_name']."<br />");
print ($_POST['user_comment']."<br />");
?>

このサンプルコード(filename.phpではない方)の画面

選択メニューを作るselect要素等

選択メニューはselect要素で描かれる。name属性で選択メニューの名前、select要素の中のoption要素は各選択肢を表示する。
送信データを受け取るfilename2.phpでは、ここで付けられた選択メニューの名前を使って、$_POST['user_ffood']で選択メニューで選ばれた値(ここでは選択肢として表示された文字列)を扱う事が出来る。
option要素のselected属性にselectedを指定すると、その選択肢が最初に選ばれた状態で表示される(指定がないと、一番先に書かれたoption属性が選ばれた状態で表示される)。
input要素のtype属性にradioを指定すると、ラジオボタン(どれか一つしか選択出来ないボタン)が出来る。
ラジオボタンはname属性に同じ名前を書き、value属性で選ばれるデータの内容を書く。php側では、ここで指定した名前を使って、$_POST['user_gender']で送信データを扱う事が出来る。
input要素のtype属性にcheckboxを指定すると、チェックボックス(複数選択可能なボタン)が出来る。
チェックボックスはname属性に其々異なる名前を指定する。php側では、例えばuser_fredがチェックされていれば、$_POST['user_fred']の値はon、チェックされていなければヌル(空データ。printしても画面に表示されない)になる。
checked属性にcheckedを指定しておくと、あらかじめチェックされた状態で表示される。

<html><head>
<title>とっても簡単なHTML</title>
</head><body bgcolor="orange">
<form action="filename2.php" method="post">
好きな食べ物<br /><select name="user_ffood"><option>和食</option><option selected="selected">洋食</option><option>中華</option></select><br />
あなたの性別<br /> <input type="radio" name="user_gender" value="男性" />男性
<input type="radio" name="user_gender" value="女性" />女性<br />
好きな色彩<br /> <input type="checkbox" name="user_fred" checked="checked" />赤
<input type="checkbox" name="user_fgreen" />緑
<input type="checkbox" name="user_fblue" />青
<br /><input type="submit" value="送信" /></form>
</body></html>

(filename2.php)
<?php
print ($_POST['user_ffood']."<br />");
print ($_POST['user_gender']."<br />");
print ($_POST['user_fred']."<br />");
print ($_POST['user_fgreen']."<br />");
print ($_POST['user_fblue']."<br />");
?>

このサンプルコード(filename2.phpではない方)の画面