これだけはおさえておきたい、HTMLの基本
HTMLって何？
HTMLは、Hypertext Markup Languageの略です。
ホームページをブラウザで表示するための言語ですね。とにかくたくさんHTMLタグの種類があります。
ハイパーテキストというのは、それぞれのファイルがリンクでつながっているということをあらわします。
WordとかExcelなどは、画像を挿入たら、その画像がファイルに埋め込まれるようになっていますよね？
しかし、HTMLの場合は、そうじゃないんです。
をあらわす画像「logo.gif」を呼び出すようにして、
テキストで表現できるものはテキストで・・・という感じになります。
画像データは画像ファイルとして別に存在し、そのファイルを呼び出す（マークアップ）ことで、
Webページ内に画像が埋め込まれる仕組みになっています。
しかし、表自体は画像じゃないので、HTMLで表現が可能ですけど(笑)
つまり、この例では、HTMLファイルと、画像ファイルの両方が必要になります。
HTML文書自体は、文字だけのテキストデータです。
テキストファイルなので、メモ帳でも作れるということになるわけです。
テキストで表現できないものは、そのファイルを呼び出す、というのが、HTMLの正体ということです。
HTMLの構造について
HTMLの構造は基本的に以下のようになっています。
<html> <head> <title>タイトル</title> </head> <body> 本文 </body> </html>
<head> →ここからヘッダーの部分がはじまります
<title>タイトル</title>→ここでタイトル名を設定
</head> →ヘッダーの部分はここで終了します
<body> →ブラウザに表示する本文が開始
本文
</body> →これで本文は終了します
</html> →これでHTML言語は終わりますよ～
HTML文書は、はじめに<html>ではじまり、最後に</html>で終わります。
もし、メモ帳で・・・
<html>てすと</html>
と入力して、ファイル名を「test.html」 にすると、ブラウザでファイルが開きます。
この場合、「てすと」という部分がブラウザの本文に反映されますが、Webページのタイトルはファイル名になってしまいます。
これではちょっと味気ないので、HTML文書のヘッダー情報と本文を分けるために、<head>タグ領域があり、<body>領域があるわけです。
Webページのタイトルはヘッダー情報、つまり、
<head>と</head>の間に、<title>タグを使って記述します。
そこで、ヘッダー情報と本文を分けて記述してみましょう。
<html> <head><title>タイトルだぴょーん</title></head> <body>てすと</body> </html>
すると・・・？
このように、タイトルバーでは、ファイル名から「タイトルだぴょーん」に置き換わりました。
主なHTMLタグを覚えておこう
他に知っておきたい、HTMLタグについてリストアップしてみます。
よく使われるタグばかりですので、ぜひ、頭に入れておいてください。
| img | 画像の呼び出し（image の略） <img src="画像ファイルの場所とファイル名" alt="代替文字" width="幅" height="高さ"> 例： <img src="picture.jpg" alt="旅行のときの写真" width="300" height="200"> |
||||||
|---|---|---|---|---|---|---|---|
| p |
段落（paragraph の略） 例：
むかしむかし、あるところに、おじいさんとおばあさんがすんでいました。 |
||||||
| br | 段落の途中で改行（breakの略） 例： <p>むかしむかし、あるところに、<br>おじいさんとおばあさんがすんでいました。</p>
むかしむかし、あるところに、 |
||||||
| a |
ハイパーリンク （anchor の略） 例：
|
||||||
| h1～h6 | 見出し（headingの略） 数字が小さいほど大見出し<h1>見出し1</h1>、数字が大きくなるほど小見出しになる <h6>見出し6</h6> |
||||||
| blockquote |
ブロック引用 <blockquote>この中に、引用文を入れます。</blockquote>
この中に、引用文を入れます。 |
||||||
| ul | 記号付きリスト。li タグで項目を生成<ul> <li>項目１</li> <li>項目２</li> <li>項目３</li> </ul>
|
||||||
| ol | 番号付きリスト。liタグで項目を生成
<ol> <li>項目１</li> <li>項目２</li> <li>項目３</li> </ol> </ol>
|
||||||
| address | アドレス。このタグを使うと、斜め文字になります。 <address>Copyright © wanichan. All Rights Reserved.</address>
|
||||||
| table | 表（テーブル）。行は trであらわし、それぞれのセルは tdを使用。 ちなみに、見出しセルにするには th タグが使われます。 見出しセル（th)にすると、その中の文字が太字になり、センタリングされます。 また、tableタグにはそれぞれの属性を付加することで、枠線が設定できたり、セルとセルとの間隔やセル内の余白の設定ができます。 cellspacing属性は、セルとセルとの間隔、cellpadding属性は、セル内の文字との余白です。以下の例では、セルの余白が2ピクセル、セルとセルとの間隔が1ピクセルです。 枠線をつけるにはborder属性を使用します。ただし1ピクセルの枠線を付ける場合は、cellspacing属性も1にしなければいけません。cellspacing属性の指定がなければ、既定のセルとセルとの間隔（2ピクセル）が優先されるため、2ピクセルの枠線の太さになります。 <table border="1" cellpadding="2" cellspacing="1"> <tr><td>ここからセルのはじまり</td><td>1行2列目</td><td>1行3列目</td></tr> <tr><th>2行1列目</th><td>2行2列目</td><td>2行3列目</td></tr> </table>
|
- ホームページを作る前に・・・
- ホームページ作る前の予備知識
- これだけはおさえておきたい、HTMLの基本
- Web標準～HTMLとXHTMLの違い～
- 正しいHTML文書を作るための方法と考え方
- ホームページ作る前の予備知識
