body部で利用されるタグ
ブロック要素 div
<div>なにか</div>
ブロック要素を記述します。ブロック要素の特徴は、前後に改行が行われることと、幅と高さを持つことです。デフォルトで画面の左右いっぱいまで領域を広げます。また内部にある文字の位置をCSSを使って制御することもできます。
+----------------------------------------------------------------+
| |
|なにか |
| |
+----------------------------------------------------------------+
+----------------------------------------------------------------+
| |
| なにか |
| |
+----------------------------------------------------------------+
インライン要素 span
<span>なにか</span>
インライン要素を記述します。インライン要素の特徴は、画面の右端に到達するまでは、改行が行われずに左に流れるようにつめられることです。
+------+ +------+
|なにか| |なにか|
+------+ +------+
見出し1 h1
<h1>見出し1</h1>
見出しです。タグの使い方は自由ですが、一般的には、ページのタイトルを記述するために利用されます。大きく表示されます。h1はブロック要素です。
見出し2 h2
<h2>見出し2</h2>
見出しです。h1よりは小さく表示されます。一般的には、個別の記事があった場合のタイトルなどに利用されます。h2はブロック要素です。
見出し3 h3
<h3>見出し3</h3>
見出しです。h2よりは小さく表示されます。h3はブロック要素です。
見出し4 h4
<h4>見出し4</h4>
見出しです。h3よりは小さく表示されます。h4はブロック要素です。
見出し5 h5
<h5>見出し5</h5>
見出しです。h4よりは小さく表示されます。h5はブロック要素です。
見出し6 h6
<h6>見出し6</h6>
見出しです。h5よりは小さく表示されます。h6はブロック要素です。
段落 p
<p>段落</p>
段落を作成するにはpタグを使用します。pはブロック要素です。
水平線 hr
<hr>
水平線を描画するにはhrタグを使用します。hrはブロック要素です。
<a href="/other.html">ハイパーリンク</a>
ハイパーリンクです。リンク先の文書をhrefに指定します。aはインライン要素です。
クリックした場合は同じ画面でハイパーリンク先のページへ移動します。新しい画面でリンクを開きたい場合はtargetに「_blank」を指定します。
<a href="/other.html" target="_blank">ハイパーリンク</a>
強調 strong
<strong>強調表示</strong>
ページの中で強調したい言葉に利用します。strongはインライン要素です。
画像 img
<img border="0" src="/images/img001.gif" width="128" height="128" alt="説明">
画像を表示するにはimgタグを使用します。デフォルトでボーダーがついてしまうので、borderには0を指定します。scrに画像へのリンクを指定します。widthには画像の幅、heightには画像の高さを指定します。altには画像の説明を記述します。imgはインライン要素です。
整形済みテキスト pre
use strict;
use warnings;print "Hello World!";
整形済みテキストを記述したい場合はpreタグを使用します。改行やスペースなどがそのまま表示されますが、「<」と「>」は特殊文字として解釈されるので「<」と「>」に置き換える必要があることに注意してください。
テーブル table, tr, th, td
<table border="1" cellspacing="0">
<tr>
<th>1列目のヘッダ</th>
<th>2列目のヘッダ</th>
<th>3列目のヘッダ</th>
</tr>
<tr>
<td>1行1列</td>
<td>1行2列</td>
<td>1行3列</td>
</tr>
<tr>
<td>2行1列</td>
<td>2行2列</td>
<td>2行3列</td>
</tr>
</table>
テーブル(表)を作成するには、上記のタグを組み合わせて使用します。tableタグが一番外側にきます。列のヘッダはthタグを使って記述します。列はtrタグを使って記述します。列の中の各行はtdタグを使って記述します。
tableタグのborderはボーダーの太さです。celspacingはtd間の幅の指定です。borderを1にしてcellspacingを0にすると一般的な見栄えのテーブルになります。
太字 b
<b>太字</b>
文字を太字にするにはbタグを使用します。bはインライン要素です。
改行 br
<br>
改行を行うにはbrタグを使用します。一般的には、brを使うよりも、divやpを使って改行を行うのがよいとされています。
順序付きリスト ol, li
<ol>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ol>
順序付きリストを作成するには上記のタグを使用します。olタグの中に、liタグを並べます。以下のように順序がつきます。
1. 項目1
2. 項目2
3. 項目3
順序なしリスト ul, li
<ul>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ul>
順序なしリストを作成するには上記のタグを使用します。ulタグの中に、liタグを並べます。以下のように順序がつきません。
・項目1
・項目2
・項目3
フォームで利用するタグ
フォーム form
<form action="/register" method="post">
<div>年:<input type="text" name="age"></div>
<div><input type="submit" value="送信する"></div>
</form>
フォームを送信するにはformタグの中に、inputタグなどのフォームの要素を記述する必要があります。actionには、データーの送信先のURLを指定します。methodにはHTTPメソッドを指定しますが、フォームからの送信の場合はpostを利用するのが一般的です。
テキストボックス <input type="text">
<input type="text" name="age">
テキストボックスは1行のテキスト入力エリアです。typeに「text」を指定します。送信されたデータの名前になるのでnameは必ず指定します。inputタグはインライン要素です。
次のような属性を指定することができます。
- value - 値
- size - 横のサイズ
- maxlength - 最大文字数
パスワード入力ボックス <input type="password">
<input type="password" name="pass">
パスワード入力ボックスです。nameに名前を指定します。
以下の属性が指定できます。
- value - 値
- size - 横のサイズ
- maxlength - 最大文字数
ボタン <input type="button">
<input type="button" value="押す" name="send">
ボタンです。inputタグのtypeに「button」を指定します。ボタンを識別するときに利用するのでnameを指定しておきましょう。valueはボタンに表示されるテキストになります。
送信ボタン <input type="submit">
<input type="submit" value="送信">
送信ボタンです。フォームの値を送信するのに利用されます。valueは送信ボタンに表示されるテキストになります。
次のような属性を指定することができます。
リセットボタン <input type="reset">
<input type="reset" value="リセット">
リセットボタンです。フォームの値をリセットするのに利用されます。valueはリセットボタンに表示されるテキストになります。
次のような属性を指定することができます。
画像ボタン <input type="image">
<input type="image" src="/image/dog.png" alt="犬">
画像ボタンです。srcは画像のURLになります。altは画像の説明です。
次のような属性を指定することができます。
ラジオボタン <input type="radio">
<input type="radio" name="animal" value="犬" checked="checked">
<input type="radio" name="animal" value="猫">
ラジオボタンは複数の項目の中からひとつを選んでもらうときに使用します。nameに名前を指定します。同じグループに属するものは同じ名前にします。valueには値を指定します。checkedを「checked」にすると、その項目が選択されます。
隠しフィールド <input type="hidden">
<input type="hidden" name="title" value="Perl">
見えないフィールドです。ブラウザ上でユーザーに見せないで送信したい値がある場合に利用します。nameには名前を指定します。valueには値を指定します。
チェックボックス <input type="checkbox">
<input type="checkbox" name="animal" value="犬" checked="checked">
<input type="checkbox" name="animal" value="猫">
チェックボックスは複数の項目を選択してもらう場合に使用します。nameには名前を指定します。同じグループに属するものは同じ名前にします。valueには値を指定します。checkedを「checked」にすると、その項目が選択されます。
ファイルのアップロード <input type="file">
<input type="file" name="datafile">
ファイルをアップロードしたい場合に利用します。nameに名前を指定します。これはファイル名ではなくて、単に識別するための名前です。
以下の属性が指定できます。
ファイルをアップロードする場合は、formタグのenctypeに「multipart/form-data」を指定しなければならないことに注意してください。
<form action="cgi-bin/abc.cgi" method="post" enctype="multipart/form-data">
<input type="file" name="datafile">
<input type="submit" value="送信" >
</form>
プルダウンメニューあるいはリストボックス select
<select name="animal">
<option value="犬">犬</option>
<option value="猫">猫</option>
</select><
selectタグを使うとプルダウンメニューを作成することができます。nameに名前を指定します。optionタグが選択する要素になります。valueには値を指定します。optionタグのテキストの部分には表示される項目を記述します。
sizeを1より大きいものに指定するとリストボックスになります。
<select name="animal" size="4">
<option value="1">猫</option>
<option value="2">犬</option>
<option value="3">亀</option>
<option value="4">ライオン</option>
</select><
select要素については以下の解説も参考にしてください。
ヘッダ部で利用するタグ
ヘッダ部で利用するタグを紹介します。
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
HTMLで利用する文字コードを指定するときはmetaタグを利用します。metaタグを利用するとhttp-equivに「Content-Type」を、contentに「text/html; charset=UTF-8」を指定します。この指定を行わないとブラウザで文字化けすることがある
ので、headタグの先頭で記述してください。http-equiv属性を利用するとHTTPレスポンスのヘッダにContent-Typeがない場合にブラウザはhttp-equivの情報を利用します。
<style type="text/css">
</style>
CSSを記述するにはstyleタグを使用します。typeには「text/css」を指定します。XHTMLという仕様でもちゃんと動くようにCSSのコードはCDATAと呼ばれるセクションに記述する必要があるそうです。反対にCSSからから見るとCDATAセクションはいらない子なので/* */でコメントアウトされています。
<link href="/css/common.css" media="screen" rel="stylesheet" type="text/css" />
外部のCSSを読み込むにはlinkタグを使用します。mediaには「screen」を指定します。これは、コンピュータースクリーン用のCSSであることを指定するためにです。relには「stylesheet」を指定します。これは外部スタイルシート定義ファイルを示します。typeには「text/css」を指定します。
<script src="/js/myapi.js" type="text/javascript"></script>
外部のJavaScriptを読み込むはscriptタグを利用します。srcにJavaScriptのソースのURLを指定し、typeに「text/javascript」を指定します。