生徒HTMLファイルをどうやって作成すればよいか分かりません
先生HTMLファイルの基本的な内容について説明します
自分でWEBページを作成するには、HTMLファイルの役割や内容についての理解が必要です。
この記事では、HTMLについての基本的な内容を説明します。
HTMLファイルとは
HTMLファイルはWEBページの内容を記述したファイルです。
HTMLファイルをWEBサーバー上に置き、ブラウザでWEBサーバーにアクセスしてHTMLファイルを取得してWEBページを表示します。
HTMLファイルの拡張子は.htmlで文字コードはUTF-8
HTMLファイルは以下のように作成します。
- HTMLのファイル拡張子は
.html - HTMLファイルの文字コードは
UTF-8
HTMLのファイル拡張子は.htmlにする
HTMLファイルは拡張子を.htmlとして作成します。
HTMLファイルの文字コードはUTF-8にする
HTMLファイルの文字コードはUTF-8で保存します。
また、UTF-8(BOM付き)、UTF-8(BOM無し)が選択できる場合、UTF-8(BOM無し)を選択します。
HTMLファイルの先頭行には決まった宣言を書く
HTMLファイルの先頭行に記述する内容は決まっていて
<!DOCTYPE html>
と書きます。このファイルがHTMLであることを示す宣言で、HTML5では常にこの通りに書きます。
HTMLの内容はタグで構成
HTMLファイルの内容はタグで構成されています。タグは、
・<タグの名前>値</タグの名前>例：<title>ページのタイトル</title>
・<タグの名前 属性>例：<img src="" alt="">
という書き方をします。タグで囲まれた一つ一つを要素と呼びます。
また、タグの中に属性=値という書き方で属性を持たせることができます。
タグは入れ子構造にできる
タグは入れ子にすることで階層構造にできます。
<div id="親要素">
<div id="子要素">
<p>階層にできることで表現の幅が広がります。</p>
</div>
</div>HTMLファイルの構造
HTMLファイルの最低限の構造は以下のようになります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ページのタイトル</title>
</head>
<body>
ページの内容を記述
</body>
<html>| 行 | 内容 | 説明 |
|---|---|---|
| １ | <!DOCTYPE html> | 以下の内容がHTMLファイルであることを示す宣言です。 決り文句ですのでこの通りに記述します。 |
| ２ 10 | <html lang=”ja”> </html> | HTMLファイル全体をhtmlタグで囲みます。lang="ja"は日本語のファイルであることを示します。 |
| 3 6 | <head> </head> | ページの情報などを定義する部分をheadタグで囲みます。 |
| 4 | <meta charset=”utf-8“> | このHTMLの付随情報をmetaタグで記述します。charset="utf-8"は文字コードがUTF-8だと記述しています。 |
| 5 | <title></title> | このページのタイトルをtitleタグで記述します。ブラウザのタブやファイルに保存した時のファイル名などで使用されます。 |
| 7 9 | <body> </body> | ページの内容をこの間に記述します。 |
HTMLのよく使うタグ
HTMLファイルの<body>タグ内でよく使う基本的なタグを説明します。
レイアウト構成に使用するdivタグ
div要素自体は枠組みで、中に記述した要素をまとめるのに使います。
div要素に対してCSSで大きさや位置を指定することでページのレイアウトを作ることが多いです。
<!-- ページの左側 -->
<div class="left">
<div class="left-top">
</div>
<div class="left-bottom">
</div>
</div>
<!-- ページの右側 -->
<div class="right">
<div class="right-top">
</div>
<div class="right-bottom">
</div>
</div>見出しに使用するh1〜h6タグ
h1〜h6タグ見出し用のタグで、数字が小さい程大きな見出しとなります。
See the Pen H-Tag by mik20621 (@mik20621) on CodePen.
文章に使用するpタグ
pタグは文章を囲みます。改行して段落を作りたい場合は<br>タグではなく<p>タグを分けて改行します。
<p>テキスト</p>See the Pen ptag by mik20621 (@mik20621) on CodePen.
画像の表示に使用するimgタグ
imgタグは画像を表示するためのタグです。
| 属性 | 説明 |
|---|---|
| src | 画像ファイルのパス。 サーバーファイルパス（src=”img/picture.jpg”) URL（src=”https/example.com/img/picture.jpg”) のいずれかで記述します。 |
| alt | ファイルの代替として表示する文字を定義します。 （ファイルが表示できなかったり画像を表示しない環境の場合に用いられます。） アクセシビリティの点から必ず設定するべきとされています。 |
| srcset | 画面の幅や解像度に合わせた画像を表示したい場合にそれらの画像を列挙 |
<img src="{画像ファイルのパス}" alt="{画像表示されない場合に表示する文字}" srcset="{サイズが異なる画像を列挙}" >リストに使用するul, ol, liタグ
ul, ol, li タグはリストを表示する時に使うタグです。
CSSでリストの向きや見た目を変えることができて、メニューや画像の一覧などさまざまな場所に使用します。
ulタグは添え番号無しのリスト
番号の無いリスト(unordered list)を表示します。
リスト内の項目は<li></li>タグで定義して、各項目の先頭には中点が付きます。
See the Pen Untitled by mik20621 (@mik20621) on CodePen.
olタグは添え番号付きのリスト
番号付きのリスト(ordered list)を表示します。
See the Pen Untitled by mik20621 (@mik20621) on CodePen.
liタグはリストの項目に使用
liタグは、ulタグやolタグのリストの項目を表示します。
文字だけでなく、liタグで囲んださまざまな内容をリストとして扱うことができます。
表を作成するtableタグ
tableタグは表を表示するのに使用します。
表は行や列を定義して、また、ヘッダーやフッターを設定できます。
See the Pen table-header-footer by mik20621 (@mik20621) on CodePen.
行を定義するtrタグ
各行の内容をtrタグで囲みます。
見出しを定義するthタグ
見出しのセルはthタグで定義します。
データを定義するtdタグ
見出し行以外のセルはtdタグで定義します。
リンクに使用するaタグ
aタグはリンクを作成するのに使用します。
aタグの使い方などについては、以下の記事で説明しています。
