HTMLとはWEBページ製作をする為の言語のことです。大見出し、小見出しのような見出しのレベルや、改行、段落分けなどの行動をHTMLのタグを使って記述することができます。
テキストエディタを用いてHTMLを記述したファイルを[HTMLファイル」といいます。拡張子は[html」または「htm」で保存します。
このHTMLを適切に保存することで、googleなどの検索エンジンに検索されく、多くのWEBページの中から見つけられやすいページを作ることが出来ます。HTMLは人間ではなくWEBサイト上に表示されるためのコンピューターに対しての意味を伝える為に使用された言語です。
<html> | HTML文書であることを示す。 書式 <html>・・・</html> |
<head> | ページタイトル、解析コード、やサーバー等が利用する情報を指定する。 書式 <head>・・・</haed> |
<title> | ページタイトルを指定する。 書式 <taitle>・・・</title> |
<body> | ページとして表示される内容(範囲)を指定する。 書式 <body>・・・</body> |
コメント | 書式 <!--コメント本文--> |
<h1>~<h6> | 見出しを指定する。 書式 <h1>・・・</h1>、〜、<h6>・・・</h6> |
<strong> | 文字列を強調表示する(<em>よりも強い強調。一般的には太字で表示される)。 書式 <strong>・・・</strong> |
<b> | 文字列をボールド(太字)表示する。 書式 <b>・・・</b> |
<i> | 文字列をイタリック(斜体)表示する。 書式 <i>・・・</i> |
<sup> | 文字列を上付き文字として表示する。 書式 <sup>・・・</sup> |
<sub> | 文字列を下付き文字として表示する。 書式 <sub>・・・</sub> |
<pre> | 改行や空白など入力されたままの状態で表示する。 書式 <pre>・・・</pre> |
特殊文字 | 改行なしの空白。 書式 |
<p> | 段落を作成する。 書式 <p>・・・</p> |
<br> | 強制的に改行する。 書式 <br> |
<hr> | 水平線(区切り線)を指定する。 書式 <hr> |
<a> | リンクを作成する。 |
href | サイトのURLを指定して、リンクを作成する。 書式 <a href="URL">・・・</a> |
同じHTML文書のマーカー位置へのリンクを作成する。 書式 <a href="#マーカー名">・・・</a> |
|
別のHTML文書のマーカー位置へのリンクを作成する。 書式 <a href="URL#マーカー名">・・・</a> |
|
HTML文書内にメールを送信するホットテキストを設定する。 書式 <a href="mailto:メールアドレス">・・・</a> |
|
name | HTML文書内にマーカー名を指定する。 書式 <a name="マーカー名">・・・</a> |
<img> | 指定したイメージデータをインライン表示する。 | |
href | 表示するイメージファイルのURLを指定する。 書式 <img src="URL"> URL:ファイル名、ディレクトリ名/ファイル名等 |
|
alt | イメージの代替文字列を指定する。 書式 <img src="ファイル名" alt="代替文字列"> |
|
width height |
イメージの幅、高さを指定する。 書式 <img src="ファイル名" width=”幅” height="高さ"> 幅、高さ:ピクセル数またはパーセンテージ |
|
usemap | クライアントサイドクリッカブルマップを設定する。 書式 <img src="URL" usemap="#マップ名”> |
|
<map> | クライアントサイドクリッカブルマップ上の位置とクリックしたときのリンク先を設定する。 | |
shape coords |
クリックするエリアの形状とデータ(座標)を指定する。 書式 <area shape="形状” coords="データ”> |
|
形状 | データ | |
サークル(円) | x,y,r(中心の座標と半径) | |
rect(四角) | x1,y1,x2,y2(左上頂点と右下頂点の座標) | |
poly(多角形) | x1,y1,x2,y2,・・・(各頂点の座標) | |
href | ハイパーリンク先のURLを指定する。 書式 <area shape="形状" coords="データ"> |
|
alt | リンク領域の代替文字列を指定する。 書式 <area shape="形状" coords="データ" href="URL# alt="代替文字列"> |
|
<object> | ActiveXコントロールを表示する。 | |
data type width height |
ActiveXコントロールのデータ、タイプ、幅、高さを指定する。 書式 <object data="URL" type="MIMEタイプ" width="幅" height="高さ">・・・</object> MIMEタイプ:application/x-shockwave-flash |
|
<param> | ActiveXコントロールが実行されるのに必要な各種の値を指定する。 |
|
name value |
書式 <param name="src" value="URL"> 書式 <param name="loop" value="true/false"> |
<ul> | 行頭記号(unordeewd list:番号をふらないリスト)をつけたリストを作成する。 書式 <ul>・・・</ul> |
<ol> | 行頭番号(ordered list:番号をふるリスト)を作成する。 書式 <ol>・・・</ol> |
<li> | 行頭番号をつけたリストを作成する。 書式 <li>・・・</li> |
備考 | アルファベット→<ol type="A"> <ol type="a"> ローマ数字→<ol type="I"> <ol type="i"> |
<table> | テーブルを定義する。 書式 <table>・・・</table> |
|
border | 枠線を追加する。外枠線の幅(枠線の3D効果)を指定する。 書式 <table border="外枠線の幅">・・・</table> 外枠線の幅:ピクセル数 |
|
cellpadding | 枠線とセル内容との間隔を指定する。 書式 <table cellpadding="間隔">・・・</table> 間隔:ピクセル数 |
|
cellspacing | 各セル間の間隔を指定する。 書式 <table cellspacing="間隔">・・・</table> 間隔:ピクセル数 |
|
width | 各セル間の間隔を指定する。 書式 <table width="幅">・・・</table> 幅:ピクセル数、パーセンテージ(%) |
|
<tr> | テーブルの行を定義する。 書式 <tr>・・・</tr> |
|
align | セル内容の水平方向位置を指定する。 書式 <tr align="値">・・・</tr> left(左揃え) center(中央揃え) right(右揃え) |
|
valign | セル内容の垂直方向位置を指定する。 書式 <tr valign="値">・・・</tr> top(上揃え) middle(上下中央揃え) bottom(下揃え) baseline(ベースラインを揃える) |
|
<th> | 見出しセルを定義する。 書式 <th>・・・</th> |
|
align | セル内容の水平方向位置を指定する。 書式 <th align="値">・・・</th> left(左揃え) center(中央揃え) right(右揃え) |
|
valign | セル内容の垂直方向位置を指定する。 書式 <th valign="値">・・・</th> top(上揃え) middle(上下中央揃え) bottom(下揃え) baseline(ベースラインを揃える) |
|
rowspan | セルの結合(複数行に渡るセルを定義する)。 書式 <th rowspan="セル数">・・・</th> |
|
colspan | セルの結合(複数列に渡るセルを定義する)。 書式 <th colspan="セル数">・・・</th> |
|
<td> | データセルを定義する。 書式 <td>・・・</td> |
|
align | セル内容の水平方向位置を指定する。 書式 <td align="値">・・・</td> left(左揃え) center(中央揃え) right(右揃え) |
|
valign | セル内容の垂直方向位置を指定する。 書式 <td valign="値">・・・</td> top(上揃え) middle(上下中央揃え) bottom(下揃え) baseline(ベースラインを揃える) |
|
rowspan | セルの結合(複数行に渡るセルを定義する)。 書式 <td rowspan="セル数">・・・</td> |
|
colspan | セルの結合(複数列に渡るセルを定義する)。 書式 <td colspan="セル数">・・・</td> |
|
<caption> | テーブルにタイトルを付加する。 書式 <caption>・・・</caption> |
<form> | フォームを定義する。 書式 <form>・・・</form> |
|
action method |
実行するCGIをURLまたは、メールアドレスおよびメソッドを指定する。 書式 <form action="アクション" method="アクション">・・・</form> アクション:CGIのURL、メールアドレス(mailto:メールアドレス) メソッド:post、get |
|
enctype | データを個別のファイルとして送信する。 書式 <form actype="データタイプ" action="アクション" method="メソッド">・・・</form> データタイプ:file、image アクション:CGIのURL、メールアドレス(mailto:メールアドレス) メソッド:post、get |
|
<input> | 入力エリアやボタンを表示する。 | |
width | 表示/実行形式の選択およびフィールド名を指定する。 書式 <input type="機能" name="フィールド名"> 機能: text(テキストボックス) password(パスワード入力ボックス) checkbox(チェックボックス) radio(ラジオボタン) image(イメージの座標) hidden(不可視フィールド) submit(送信ボタン) reset(リセットボタン) file(ファイル名入力ボックス) |
|
value | データの初期値、ボタン名を設定する。 書式 <input type="機能" name="フィールド名" value="初期値/ボタン名"> |
|
size | テキストボックスまたはファイル名入力ボックスの幅を指定する。 書式 <input name="フィールド名" size="幅"> |
|
maxiength | テキストボックスまたはファイル名入力ボックスへ入力できる最大文字数を指定する。 書式 <input name="フィールド名" maxiength="最大文字数"> |
|
checked | チェックボックスにあらかじめチェックをつける。 書式 <input type="checkbox" name="フィールド名" checked> |
|
ラジオボタンにあらかじめチェックをつける。 書式 <input type="機能" name="フィールド名" value="初期値/ボタン名"> |
||
src | 表示するイメージファイルのURLを指定する。 書式 <input type="image" src="URL" name="フィールド名"> |
|
<select> | 選択リストを作成する。 | |
name | 選択された項目内容を引き渡すときのリスト名を指定する。 書式 <select name="リスト名><ortion>・・・</option></select> |
|
size | フィールド型リストの作成。 書式 <select name="リスト名" size="行数"><ortion>・・・</option></select> 行数:表示される行数 |
|
multiple | フィールド型リストの作成。 書式 <select name="リスト名" multiple><ortion>・・・</option></select> |
|
<option> | 選択項目を指定する。 | |
selected | 選択済として表示する項目を指定する。 書式 <select name="リスト名" multiple><ortion selected>・・・</option></select> |
|
value | 選択項目に対応する値を指定する。 書式 <select name="リスト名" multiple><ortion value=”数値/アルファベット文字列”>・・・</option></select> |
|
<textarea> | テキストボックスフィールドを作成する。 | |
name | 項目内容を引き渡す時のボックス名を指定する。 書式 <textarea name="ボックス名">・・・</textarea> |
|
rows | テキストボックスフィールドの高さ(行数)を指定する。 書式 <textarea name="ボックス名" rows="行数">・・・</textarea> |
|
cols | テキストボックスフィールドの幅を指定する。 書式 <textarea name="ボックス名" cols="幅">・・・</textarea> |