画像を表示する
上部
次は、HTMLで画像を表示する方法について説明していくよ。
画像の表示をHTMLで書くと次のようになるよ。
<img src="表示したい画像ファイルを指定" alt="画像の代替文">
「表示したい画像ファイルを指定」の部分にはファイルの場所を記述して
「画像の代替文」の部分にはその画像が何であるかを記述しよう。
画像が表示されない場合は「画像の代替文」が文字として表示されるので「画像の代替文」は必ず入れよう。
例えば、「manabu.gif」という学君の似顔絵の画像ファイルを表示したい場合、
「manabu.gif」がHMTLファイルと同じフォルダにある場合は
<img src="manabu.gif" alt="学の似顔絵">
となるんだよ。
HTMLファイルと画像ファイルが別のフォルダに有る場合は後で説明するよ。
学
なるほどー。では、僕の自己紹介にさっそく似顔絵を追加してみます。
似顔絵イラストメーカーという似顔絵が作れる便利なホームページが有ったので、そこで僕の似顔絵を作って、自己紹介のHTMLファイルと同じ場所に保存しました。
僕の自己紹介に似顔絵の画像が表示されるようにHTMLを書き替えてみます。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>学の自己紹介</title>
</head>
<body>
<h1>学の自己紹介</h1>
<img src="manabu.gif" alt="学の似顔絵">
<h2>名前</h2>
<p>名前は学（まなぶ）ですが<em>勉強は苦手</em>です。</p>
<h2>性格</h2>
<p>元気がとりえです。<br>
ちょっとおっちょこちょいで小さな失敗をすることがあります。</p>
<h2>趣味</h2>
<p>趣味は<strong>サッカー</strong>と<strong>映画</strong>です。</p>
<h3>サッカー</h3>
<p>週末には草サッカーをやっています。</p>
<h3>映画</h3>
<p>好きな映画のジャンル</p>
<ul>
<li>アクション映画
<li>ホラー映画
</ul>
<h2>おすすめホームページ</h2>
<p>僕のおすすめのホームページは<a href="http://www.nikkansports.com/">日刊スポーツ</a>です。</p>
<table border="1" cellspacing="0" cellpadding="5">
<caption>「学の年表」</caption>
<tr><th>年齢</th><th>内容</th></tr>
<tr><td>０歳</td><td>誕生</td></tr>
<tr><td>６歳</td><td>小学校入学。給食大好き。</td></tr>
<tr><td>１２歳</td><td>中学校入学。お弁当大好き。</td></tr>
</table>
</body>
</html>
上部
では、ここまでを表示してみようか。
学の自己紹介を新しいウィンドウで開く
学
おおー！僕が作った似顔絵がちゃんと表示されましたよ！
画像が表示されると何かうれしいですね！
