・文の基本
| <!DOCTYPE html PUBLIC 〜… |
| 「ドキュタイプ宣言」と呼びます。どんなバージョンのHTMLで、どの仕様に従って作られているかのを、ブラウザに伝えるためのものです。ブラウザ上には表示されません。ｈｔｍｌソースの一行目に書きます。 |
 |
| <html> </html> |
| ここからここまでｈｔｍｌで書いているということをブラウザに伝えるためのものです。どんなHPでもこのタグはあるはずです。ブラウザ上には表示されません。 |
|
| <head> </head> |
| 「ヘッダ」と読みます。ブラウザの 画面上には出ませんが、このタグの間に必要な設定をします。 |
|
| <meta> |
この中にさまざまな設定をします。文字コードを設定、検索サイトのキーワードなど幅広い設定ができます。
<head></head>の間に設定します。 |
|
| <link> |
外部のcssファイルやJAVAscriptファイルを読み込みます。
<head></head>の間に設定します。 |
|
| <script> </script> |
この間にJAVAscriptの構文を書き込みます。
ブラウザがhtmlと認識して誤作動を起さないように中身を<!-- -->コメントタグでくくる事が推奨されています。
<head>・<body>どちらのタグの間にも設定できますが、一般的には<head>タグの間に置くことが多いようです。 |
|
| <title> </title> |
ブラウザの上部のタイトル部分に表示する文を設定します。お気に入りに入れたときに表示されるのもこの文になります。
<head></head>の間に設定します。 |
|
| <body> </body> |
| ブラウザ上に実際に表示するものをこのタグの間に入れます。背景やマージンの設定ができます。 |
|
| <!-- --> |
| 「コメント」と呼びます。これで囲むと<body>タグの中でもブラウザ上に表示されなくなります。目印や、一時的に表示しないようにする等編集のために使用されます。 |
|
|
・テキスト
|
・テーブル
| <table> </table> |
| ここからテーブルが配置されているというタグ。背景や幅、テーブルの枠線やセルの間隔などを設定します。 |
|
| <tr> </tr> |
ここからテーブルの行が配置されているというタグ。背景などを設定します。
このタグがある数がそのテーブルの行の数になります。
<table>タグの間に設定します。 |
|
| <td> </td> |
ここからテーブルのセルが配置されているというタグ。背景や幅・高さ、表示する文字の位置などを設定します。
このタグがある数がそのテーブルの列の数になります。
全ての<tr>タグの中に同じ数の<td>タグを設置する必要があります。
<tr>タグの間に設定します。 |
| 例 |
<table border="1" width="250" >
<tr>
<td height="30" >さくら</td>
<td>すみれ</td>
<td>たんぽぽ</td>
</tr>
<tr>
<td bgcolor="pink" >ピンク</td>
<td bgcolor="violet">むらさき</td>
<td bgcolor="yellow">きいろ</td>
</tr>
</table> |
⇒ |
| さくら |
すみれ |
たんぽぽ |
| ピンク |
むらさき |
きいろ |
|
|
| 補 足 |
属性のborder(枠線),width(幅),height(高さ)の値の単位のデフォルトはピクセル。%に置き換えることもできます。
属性の
bgcolorは背景の色。色名のほかに、１６進数で指定することもできます。詳しくはこちら |
|
|
・リスト
|
・イメージ
| <img> |
このタグで画像を置く事ができます。
画像の置き場所や画像の縦横の幅、ブラウザに表示されなかった時表示させる文字などの設定をします。 |
| 例 |
<img src="img/denkyu.gif" alt="電球" width="92" height="92"> |
⇒ |
 |
|
| 補 足 |
属性のsrcが画像の置き場所、widhtが幅(ピクセル)、heightが高さ（ピクセル）です。
属性の
altはブラウザに表示されなかった時表示させる文字で、マウスのポインタを合わせると出てくるのもこれです。 |
|
|
・リンク
| <a> </a> |
ハイパーリンクのタグです。これでくくったものをクリックすると他のページやサイトに飛びます。
|
| 例 |
<a href="http://www.yahoo.co.jp/" target="_blank" >YAHOO!のサイトへ</a><a href="http://www.yahoo.co.jp/" target="_blank"><img src="img/akamaru.gif" alt="YAHOO！のサイトへ" width="30" height="30"></a> |
⇒ |
YAHOO!のサイトへ |
|
| 補 足 |
属性hrefでクリックした時に飛ぶ場所を設定します。
属性targetでどこに飛ばすかを設定します。例の「_blank」は“新しいウィンドウで開く”という意味があります。
画像で飛ばしたい場合は<img>タグをくくれば設定できますが、自動的に枠ができてしまうので<img>タグの中に「border="0"」と書き込むと消えます。 |
|
|
・フォーム
| <form> </form> |
このタグの間にくくったものはフォームとしてブラウザが認識します。
フォームに記入してもらった内容をどういう形受け取ってどうするかなどを設定します。 |
|
| <input> ・ <select> </select> ・ <option> </option> ・ <textarea> </textarea> |
<form>タグのなかで、いろいろな項目を設定することができます。
input>の属性typeでフォームの形態を指定することができます。
type="text"テキストボックスを表示します。
type="checkbox"チェックボックスを表示します。複数選択可。
type="radio"ラジオボタンを表示します。同名のものは一つ選択可。
type="submit"送信します。
type="reset"初期値に戻します。
<select>タグはプルダウンメニューやリストメニューを作成します。
<option>でくくったものがリストの内容になります。
<textarea>は一行以上の文章を記入してもらう時に設置します。
|
| 例 |
<form>
名前
<input type="text" value="ここに名前をどうぞ！" />
<br />
B
<input type="checkbox" name="B" value="B" />
A
<input type="checkbox" name="A" value="A" />
<br />
男
<input name="seibetu" type="radio" value="meil" checked="checked" />
女
<input name="seibetu" type="radio" value="femeil" />
<br />
<select name="select">
<option value="sakura" selected>さくら</option>
<option value="sumire">すみれ</option>
<option value="tanpopo">たんぽぽ</option>
</select>
<br />
<textarea name="textarea" rows="3">お好きなものを書き込んでください。</textarea>
<br />
<input type="submit" value="送信" />
<input type="reset" value="リセット" />
</form> |
⇒ |
|
|
| 補 足 |
属性nameは名前を付けます。
属性valueはテキストボックスでの初期値になります。
ボタンではボタンの上に表示される文字になります。
それ以外は送信したときに送られるものです。 |
|
|
・フレーム
|
