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

Web ブラウザで画像がどの位置にどう表示されるかは, HTML では 定義されていません. 基本的には,「文章の途中に画像がある (inline image)」と解釈されます. HTML は, 文書の論理構造と相互参照を 記述するための規格だからです. HTML 文書の見え方を決めるのは, スタイルシートの役目です. スタイルシートの規格には, この講義で 取りあげる CSS (cascading style sheet)以外にもいくつかあります. また, ブラウザはそのスタイルシートに従った表示をする事を要求されている 訳ではありません. 例えば, 前回取りあげた Gnome 端末で動く w3m は, CSS の設定を無視することもあります. CSS は, かなり普及しているスタイルシートで, 多くのブラウザは CSS を解釈するように作られていますが, CSS のすべての規格をブラウザが実装しているわけでもありません ². 従って, 今日の内容は他のブラウザでは, かなり違う見え方になることもあります. この講義では, ブラウザでの見え方については, あまり拘らないようにします.

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

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

となります. 代替文字は, 画像が表示出来ないブラウザ(例えば, w3m) を使用している人に, 画像の変わりに表示させる文字を書きます. さらに, 目の見えない人が Webにアクセスした時に, 例えば文書読み上げソフトは 代替文字を読むことで, その Web ページの内容がわかるようにするためでもあります. ここでは,「集合写真」と記述します. 横の長さ, 縦の長さはブラウザの表示サイズを指定するものです. これはブラウザに画像を表示するための場所の確保を指示するための物で, 元ファイルの画像サイズを書けば, ブラウザの動作が少し速くなります. ただし, 元ファイルの画像サイズと違う値を書くと, ブラウザは, 画像の拡大, 縮小を 実行しますので, 却って表示は遅くなります. 拡大比率がおかしければ, 画像が歪んだりもします. 今回利用する, shukusho.jpeg画像サイズもそれほどではなく, 拡大, 縮小も不要なので, ここは指定しないでおきます.

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

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

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