Web ブラウザで画像がどの位置にどう表示されるかは, HTML では 定義されていません. HTML は, 文書の論理構造と相互参照を 記述するための規格だからです. HTML 文書の見え方を決めるのは, スタイルシートの役目です. スタイルシートの規格には, この講義で 取りあげる CSS (cascading style sheet)以外にもいくつかあります. また, ブラウザはそのスタイルシートに従った表示をする事を要求されている 訳ではありません. 例えば, 前回取りあげた Gnome 端末で動く w3m は, CSS の設定は無視します. CSS は, かなり普及しているスタイルシートで, 多くのブラウザは CSS を解釈するように作られていますが, CSS のすべての規格をブラウザが実装しているわけでもありません. 従って, 今日の内容は他のブラウザでは, かなり違う見え方になることもあります.
まず最初に全体の写真を載せます. 写真や画像の挿入のタグは
<img src="ファイル名" alt="代替文字" width="横の長さ" height="縦の長さ">となります(参考書 5.1, p.49 を参照). 代替文字は, 画像が表示出来ないブラウザ(例えば, 上で出て来た w3m) を使用している人に, 画像の変わりに表示させる文字を書きます. ここでは,「集合写真」と記述します. 横の長さ, 縦の長さは先ほどメモした数字を書きます. これはブラウザに画像を表示するための場所の確保を指示するための物で, こうする事によりブラウザの動作が少し速くなります. (1408
1056 の場合，width="1408" height="1056")
画像サイズをメモし忘れた人は, Gimp でその画像を開けばタイトルバーの右端に
画像サイズが表示されます.
以上に注意し, 最後に水平線を書くとすると, 次のようなタグを記述します. ちなみに, 第4回の講義どおり画像を縮小してあれば, 画像サイズは 1408×1056になっているはずです.
<p class="heading"> <img src="shukusho.jpeg" alt="集合写真" width="1408" height="1056"> </p> <hr>
gedit にもどりファイル「fellows.html」の
見出しの閉じタグ</h1>の下に
上のような内容を入力して下さい.
入力出来たら, 保存して下さい.
次に, Firefox の windowに戻り「再読み込み」
のボタンをクリックして正しく表示出来たか確認して下さい.
正しく表示できなかった人は, 入力文に誤りがないかどうか確認し,
修正してから「保存」「再読み込み」の操作を行って下さい.
タグ<p class="heading"> での class 属性を指定しているのは,
この段落の見栄えを他の段落タグとは違えるためにです.
class 属性に関する意味付けは, スタイルシートで行います.
スタイルシートがまだありませんので, 現時点では表示に反映されません.