前の項で、WWW の大きな特徴の一つがハイパーリンクだと言った。別の特徴 として、音声や画像、動画などのいろんなメディアファイルを統合して扱えると いう事も挙げられる。この特徴がなければ、ホームページはとても寂しいものと なり、ここまで発展はしていないだろう。
「はじめてのHTML」の最後に、自分で作った絵を貼り付けてみよう。前の方でもちらっと説明したように、HTML ファイルの中に直接絵を描くことはできない。絵は別のファイルとして保存しておき、HTMLファイルの中でその場所を指定するのだ。
絵のファイルは各自用意して欲しいのだが、このとき注意しなくてはならな いことが一つある。それは、画像の保存形式(フォーマット) だ。
ホームページに使う時は jpeg (jpg) 形式もしくは gif形式
で保存する。gimp で保存する時に、ファイル名の最後に
.jpg とすれば jpeg 形式になるし、.gif とすれば
gif 形式になる。例えば sample.jpg のように。簡単だね。もち
ろんこの時にも、ファイルの名前に漢字や空白をつかってはいけない。また、
public_html フォルダの中に保存しないと貼ることができないから、この点にも
注意が必要だ。
それでは、各自ここで一枚絵を作って、sample.jpg という名
前で、public_html の中に保存して欲しい。やり方がわからない場合はICE の
手引に gimp の簡単な使い方が書いてあるのでそっちを参照のこと。
絵が保存できたら、sample2.html を次のように変更する。14 行めに一行追 加するだけだ。
| sample2.html (改改) |
1: <html> 2: <head> 3: <title> 4: ここにタイトルを書く 5: </title> 6: </head> 7: <body> 8: <h1>練習パート2</h1> 9: <p>初めて作るホームページです。</p> 10: <ul> 11: <li><a href="http://www.hiroshima-u.ac.jp/index-j.html">広島大学</a></li> 12: <li><a href="sample1.html">サンプル1</a></li> 13: </ul> 14: <img src="sample.jpg"> 15: </body> 16: </html> |
変更したら、保存し、Netscape で「再読込」をする。
上の表示例には、こっちで用意した絵が出ている。みんなの画面はそれぞれ 異なっているはずだが、自分で描いた絵がでているだろうか。下のように破れた 絵のアイコンが表示された場合、画像の指定がうまくいっていない。
こういう場合は、sample.jpgが、きちんとこの名前で
public_html の中に保存されており、さらに、HTML ファイル
(sample2.html) の中できちんとその名前を指定しているかどうかをチェックす
ること。
絵を指定するためのタグは、
<img src="XXXX">
という形になっている。XXXX のところには絵のファイル名を
指定する。ファイル名の指定の仕方は、前項のハイパーリンクの時と同様だ。ま
た、ここには URL を指定することもできるので、どこか他の場所においてある
絵を貼ることもこともできる。例えば
<img src="http://www.hiroshima-u.ac.jp/image/title.gif">
と書くと、広島大学トップページ(英語版)のタイトル画像が貼りつけられる。
ここらで気づいて欲しいのだが、このタグには終了タグがない。
これまでに出てきたタグは、全部 <要素名>...</要素名
> という形になっていた。これは、文章の領域を指定して、その
領域に意味を持たせるためにこの形になっていたわけだ。
ところが img タグの場合、imgタグそのものが絵に置
き換わる。指定するべき領域が存在しない。だから、終了タグがない
のだ。