HTML5について
HTML5の書き方
HTMLの仕様にはいくつか種類があり、HTML5は最近確定したものになります。WebブラウザのほとんどがHTML5に対応しているため、これから学ぶのであればHTML5で覚えるのがいいと思います。下にHTML5のコードを記載しています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Hello!</title>
</head>
<body>
<h1>HTML5とは？</h1>
<p>HTML5を使用しています。</p>
</body>
</html>
書き方、構造は同じで、表示の仕方も変わりませんが、一部追加されているものがあります。
ドキュメントの種類を表しています。これでHTMLのものであることを表しています。
<html>タグの中に「lang=”ja”」というものが記述されています。これは属性と呼ばれるもので、ここではこのHTMLの内容が日本語であることを表しています。
これは<meta>タグと呼ばれるもので、これを記述することでこのファイルがUTF-8というテキストエンコーディング方式で書かれていることが分かります。
テキストエンコーディングとはパソコンで文字を表現するために文字ごとにつけられているコードです。これが異なっていると文字化けしたりするのでそれを防ぐために指定します。
属性について
HTML5では<html lang=”ja”>というようにタグの中に属性と呼ばれるものがつけられます。属性はタグに情報や設定を追加するために使用します。
<〇〇 属性名=”値1″ 属性名2=”値2″ ・・・>
タグの中に「属性名=”値”」というように設定したい属性と値をイコールでつないで記述します。このとき値はダブルクォート記号(“)で挟んで書きます。それぞれのタグに使用される属性は決まっているので、タグが変われば中に記述する属性も変わることになります。
画像やリンク、表を表示する
画像を表示する
Webページには文章だけでなくたくさんの画像が使用されています。Webページに画像を表示するときは<img>タグを使用します。下のコードを見てください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Hello!</title>
</head>
<body>
<h1>Hello!</h1>
<p>タヌキの画像を表示します。</p>
<img src="tanuki.png"
width="200px" height="200px">
</body>
</html>
画像を表示するために使用する<img>タグは下記のように使用します。
<img src=”ファイル名(画像のパス)” width=”横幅” height=”高さ”>
<img>タグは画像を読み込んで表示するためのタグですが、いくつか属性も用意されています。はじめに出てきた「src」は表示する画像のファイル名を指定するもので必ず記述する必要があります。そのあとに出てくる「width」、「height」はそれぞれ画像の横幅と高さを指定するための属性です。横幅、高さは「200px」というようにドット数で指定します。「width」、「height」を指定しない場合は画像のそのままの大きさで表示されます。
src属性で指定するものは正確には「画像が保存されている場所」になります。記述しているHTMLファイルと画像ファイルが同じフォルダ内に保存されていれば単にファイル名を指定するだけで表示できますが、別の場所に保存されている場合は画像ファイルの絶対パスやURLなどを記述する必要があります。
<img>タグには他にも画像が表示できない場合に代わりに表示するテキストを指定する「alt属性」、画像の名前を指定する「name属性」、画像のまわりの枠線の太さを指定する「border属性」などがあります。
ハイパーリンクを挿入する
HTMLではテキストをクリックして別のWebページに移動するといったハイパーリンクを設定することができます。ハイパーリンクは<a>タグで設定します。下のコードを見てください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Hello!</title>
</head>
<body>
<h1>Hello!</h1>
<p>Googleのページを表示するには<a href="http://google.co.jp/">こちら</a>をクリックしてください。</p>
</body>
</html>
上のコードで<a>タグに挟まれた「こちら」というテキストはブラウザでは青文字で表示されクリックすることでGoogleのトップページが開きます。これは<a>タグによって「こちら」の部分にGoogleのページに移動するハイパーリンクが設定されているためです。<a>タグは以下のように使用します。
<a href=”リンク先のアドレス”>〇〇 (リンクを設定するテキスト)</a>
<a>タグは<p>タグのように開始タグと終了タグをセットで使用し、開始タグと終了タグの間に記述したテキストにハイパーリンクが設定されます。ハイパーリンクの表示先のURL、アドレスは「href」という属性で指定します。
<a>タグと<img>タグを組み合わせることで画像にハイパーリンクを設定することもできます。
<a href=”リンク先のアドレス”><img src=”画像ファイルのパス”></a>
このように<a>タグの開始タグと終了タグの間に<img>タグで画像を指定するとハイパーリンクの設定がされた画像を表示できます。
表を作成する
Webページに表を使って何か情報を表示したい場合はテーブルを使用します。テーブルは<table>タグで作成できます。下のコードを見てください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Hello!</title>
</head>
<body>
<h1>Hello!</h1>
<p>テーブルを表示</p>
<table border="1">
<tr>
<th>科目</th><th>点数</th>
</tr>
<tr>
<td>国語</td><td>85点</td>
</tr>
<tr>
<td>数学</td><td>77点</td>
</tr>
<tr>
<td>英語</td><td>93点</td>
</tr>
</table>
</body>
</html>
テーブルを作成するためには<table>タグ、<tr>タグ、<th>タグ、<td>タグを使用します。以下にテーブルを作成する場合の基本の書き方を記載します。
<table>
<tr>
<th>〇〇(見出し1)</th><th>△△(見出し2)</th>・・・必要な数用意
</tr>
<tr>
<td>××(項目1)</td><td>□□(項目2)</td>・・・必要な数用意
</tr>
必要な数<tr>を用意
</table>
<tr>は横の1行を作成するためのタグです。上のコードでは<tr>と</tr>に挟まれたものが4セットあるためブラウザで表示したときに4行の表が表示されます。次の<th>タグ、<td>タグは縦の列を作成するためのタグで、<th>は一番上の行や一番左の列の見出しに使用します。それ以外のデータを入れる部分は<td>を使用します。上の例では<th>タグ、<td>タグが<tr>の1行の中に2つ使用されているため列数が2の表が作成されています。
<table>タグには「border」属性が使用されています。これは表の枠線の太さを指定する属性になります。
まとめ
今回はHTML、特にHTML5の書き方について整理しました。基本的にWebページはHTML5に対応しているため特別な理由がない限りはHTML5で記述することをおすすめします。これからの記事もHTML5の書き方で解説していきます。HTML5ではタグに属性と呼ばれるものをつけて記述します。属性を使用することでタグに様々な情報を追加することができます。必ず記述しなければいけないものやよく使用するものは覚えておいて、あとは必要なときに調べながら使っていけば大丈夫です。
これで基本的なHTMLの書き方は終わりです。次からはページレイアウトを担当するスタイルシート(CSS)についてまとめていこうと思います。
コメント