10月4日(水)2コマ目
今日、やったこと
- ホームページはなにでできている?
- HTML
- タグ
- 簡単なHTMLファイル作成
- 画像を表示する
今日のホワイトボード
ホームページはなにでできている?
ホームページはWebブラウザ(Google Chrome、Microsoft Edge、Apple Safari等)を使って表示する。このWebブラウザはHTMLファイルの中身をHTMLのルールに従って表示する。
ということで、
ホームページを作る = HTMLファイルを作る
です。
HTML
Hyper Text Markup Languageの略。
HTMLはデータに意味を持たせるためのタグを決めている。
データにこのタグを使って意味づけをしたファイルがHTMLファイル。
結局、この授業はHTMLのタグを理解して使いこなすことが目的。
なお、HTMLファイルのファイル名は~.html。.htmlをつけることでこのファイルはHTMLファイルだと認識される。
![]() |
| 図 WebブラウザとHTMLファイル |
タグの基本
<h1>がタグ。HTMLではいろいろなタグが定義されている。
タグには役割が決められている。
<h1>タグは見出し。
<p>タグは段落。
多くのタグは開始タグ(<h1>や<p>)と終了タグ(</h1>や</p>)がペアになっている。
<h1>と</h1>で挟まれたデータが見出しになる。見出しなので、Webブラウザは大きな字で表示する。
![]() |
| 図 HTMLのタグ |
HTMLファイルの構造
HTMLファイルは<html>タグで始まり、</html>タグで終了する。
<html>と</html>の中に
ヘッダー部になる<head>タグと</head>タグ
本文部になる<body>タグと</body>タグ
がある。
Webブラウザに表示されるのは<body>~</body>。
![]() |
| 図 HTMLファイルの構造 |
画像を表示する
画像ファイルを表示するには<img>タグを使う。
<img>タグにはsrc属性があり、このsrc属性で表示したい画像ファイル名を指定する。
width属性は画像表示の際の横幅サイズ。横幅を指定すれば縦幅も自動的に変更される。
![]() |
| 図 <img>タグで画像ファイルを表示 |
次回は
HTMLファイルを作ってもらいます。



