初めてのHTML　-基本的なタグ<img>- ＠TWクラブ【BloodyRosary】製作


次はこれ。

<img>


image(イメージ)の略。つまり画像を置くよ的なやつ。



たとえば↓のような感じ。

タイトル「ねこ」

↓　中身はこんな感じ


img の中に、『src』ってのもあると思う。
これでどのファイル名の画像を表示するかを指定している。

この場合、「html_ref05_01.jpg」が画像のファイル名なのだが、
その前にimg ってのがある。なんだこりゃ？

これは「imgってフォルダの中にあるhtml_ref05_01.jpgだ」の意味。


次に『alt』。画像に一定時間マウスカーソル置いてると表示する文字。
あと、画像がなかった場合に、altに書いた文字が表示される。
書かないとHTMLチェックでエラーになります。


名前考えるのがめんどくさいなら「img」とか、ファイル名とか書いとけばいい。



次に『width』　と　『height』
それぞれ幅と高さの意味。ないとHTMLチェックでエラー出ます。

筆者はよく、画像をシングルクリックして出てくる、
ウィンドウズの左の詳細を見ている。
（右クリックのプロパティから見てもおｋ。サイト上に乗ってる画像はそれで見たりする）


これの『大きさ：』ってのにあわせればおｋ。
逆に言えば、縮小表示したかったらこの指定を小さくする手もある。

↓こんな感じに。



パーセントによる設定もできるが、むずい。
ウィンドウサイズに合わせたパーセント表示なんて、めんどい。



まとめると、

src　　:ファイルの名前指定
alt　　:ファイルの表示名指定
width　:画像の幅設定
height :画像の高さ設定






さて、おなじみtest.htmlを改良してみよう。

今test.htmlが置いてある場所に、『img』というフォルダを作り、
大きさが100×100のファイル名『neko.jpg』という画像を作って置いてみよう。

そして、表示だ！


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja-JP">
<head>

<link rel="stylesheet" href="default.css" type="text/css">
<link rel="prev" href="index.html">
<link rev="made" href="mailto:mai_tukamoto@infoseek.jp">

<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">

<title>ようこそ、このサイトへ</title>
</head>
<body>

<h1>今日の一言</h1><br>

<p>
ぶっちゃけ眠い。２１時には眠いわ。<br>
本当は２０時には寝たいけどな（爆ステ<br>
</p>

<img src="img/neko.jpg" alt="img"  width="100" height="100">

</body>
</html>

今回変わったところは、『img』ってところだけっす。
↓　こんな感じで表示さｒ（ｒｙ


これで、撮った写真を置いたり、描いた絵を置いたりできるようになった☆





次へ(基本的なタグ<a>)


前へ(基本的なタグ<p>)


目次へ



別館TOPに戻る

ブログに戻る

初めてのHTML -基本的なタグ<img>- ＠TWクラブ【BloodyRosary】製作

初めてのHTML　-基本的なタグ<img>- ＠TWクラブ【BloodyRosary】製作