写真を載せるためのタグを書く

注意: Web ブラウザで画像がどの位置にどう表示されるかは, きちんとした規格が無いようです(作ろうにも作れない?). 今日の内容は他のブラウザでは, 違う見え方になる可能性もあります.

まず最初に全体の写真を載せます. 写真や画像の挿入のタグは

<img src="ファイル名" alt="代替文字" width="横の長さ" height="縦の長さ">

となります(参考書 5.1, p.49 を参照). 代替文字は, 画像が表示出来ないブラウザを使用している人に, 画像の変わりに表示させる文字を書きます. ここでは,「集合写真」と記述します. 横の長さ, 縦の長さは先ほどメモした数字を書きます. これはブラウザに画像を表示するための場所の確保を指示するための物で, こうする事によりブラウザの動作が少し速くなります. (800×600の場合，width="800" height="600") 画像サイズをメモし忘れた人は, Gimp でその画像を開けばタイトルバーの右端に 画像サイズが表示されます.

以上に注意し, 最後に水平線を書くとすると, 次のようなタグを記述します. ちなみに, 第4回の講義どおり画像を縮小してあれば, 画像サイズは 800×600になっているはずです.

<p class="heading">
<img src="shukusho.jpeg" alt="集合写真" width="800" height="600">
</p>
<hr>

gedit にもどりファイル「fellows.html」の 見出しの閉じタグ</h1>の下に 上のような内容を入力して下さい. 入力出来たら, 保存して下さい. 次に, Firefox の windowに戻り「再読み込み」 のボタンをクリックして正しく表示出来たか確認して下さい. 正しく表示できなかった人は, 入力文に誤りがないかどうか確認し, 修正してから「保存」「再読み込み」の操作を行って下さい.

タグ<p class="heading"> での class と言う属性を指定しているのは, この段落の見栄えを他の段落タグとは違えるためにです. スタイルシートがまだありませんので, 現時点では表示に反映されません.