10月1日(水)1コマ目
今日、やったこと
- タグって
- 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ファイル |
タグの基本
HTMLにはいろいろなタグが定義されている。
タグにはそれぞれ役割が決められており、利用目的に合ったタグを利用する。
データにタグを付加することで、データに意味を持たせることができる。
下図の「きょうの料理」は単なる文字列だが、<h1>タグを付加することで、「きょうの料理」は見出しとして扱われる。
|
| 図 タグ |
|
|
図 開始タグ、終了タグ |
HTMLファイルの構造
HTMLファイルは以下の構造になっている。
- <html>で始まり、</html>でおわる
- <html></html>内には<head></head>と<body></body>が含まれる
- <head></head>内はヘッダー部で設定はこちらに
- <body></body>内はボディー部で表示データはこちらに
 |
| 図 HTMLファイルの構造 |
画像を表示する
画像ファイルを表示するには<img>タグを使う。
<img>タグにはsrc属性があり、このsrc属性で表示したい画像ファイル名を指定する。
width属性は画像表示の際の横幅サイズ。横幅を指定すれば縦幅も自動的に変更される。
|
|
図 <img>タグで画像ファイルを表示 |
練習問題
写真と簡単な文章のホームページを作ってもらいました。
作成したHTMLファイルをあげておきます。
次回は
フォントの色やサイズ等を変更。
