第３章　ホームページの作成

今日の研修内容

課題１４　ホームページに貼り付けた画像と文字の関係は？

　画像をホームページに表示させる方法がわかりましたね。では、画像の横に説明など文章を記述したいときにどうしたらよいか？。今日は、画像の右に文字を載せる方法を身につけます。少し書き換えるだけで、いろいろな位置に表示させることができます。

---

＜手順＞

（１）sample2.htmの読み込み

• 前回使用したフロッピィディスクをセットします。
• メモ帳を開き、「ファイル」「開く」（すべてのファイル）で、「sample2.htm」を指定します。

（２）HTMLの書きかえ

• <IMG SRC="img0016.jpeg">の部分を、以下に示す赤のように書き換えます。

： <CENTER><H2>岐阜県図書館ホームページ</H2> <IMG SRC="img0016.jpeg" ALIGN="top">上です<BR> <IMG SRC="img0016.jpeg" ALIGN="middle">真ん中<BR> <IMG SRC="img0016.jpeg" ALIGN="bottom">下です<BR> <FONT SIZE=5 COLOR=#FF0100>Gifu Prefectural Library</FONT> </CENTER> ：

• 「ファイル」「上書き保存」の順に指定し、ファイルを更新します。

（３）Netscapeで、「sample2.htm」を読み込みます。画像に対して、様々な位置に文字が表示されたの　が確認できるはずです。

ワンポイントアドバイス "ALIGN="bottom" は、指定しない場合と同じ結果になります。 さて、赤の部分を 上です<IMG SRC="img0016.jpeg" ALIGN="top"><BR> 真ん中<IMG SRC="img0016.jpeg" ALIGN="middle"><BR> 下です<IMG SRC="img0016.jpeg" ALIGN="bottom"><BR> のようにすると、どうなるでしょう。文字と画像の位置が逆になりましたね。

＜まとめ＞

　<IMG>タグによってイメージを貼り付けることができます。このタグに、「ALIGN」オプションを付加すれば、文字に対する画像の位置を指定することができます。

＜キーワード＞ 　　ALIGN="top"　 文字が画像の上部に表示される 　　ALIGN="middle"　 文字が画像の中心に表示される 　　ALIGN="bottom"　 文字が画像の下部に表示される

　

作成者	柳 瀬 　元
所　属	不破中学校

▲目次へ戻る｜▼次の課題へ進む