らくがきはうす♪やってみよう～画像のページ♪

○ タグ
○ 基本のページ
*****************
*　画像のページ　*
*****************
○ リンクのページ
○ 色見本
○ 文字のページ
○ レイアウトのページ
○ 内緒(^^)のページ

＋＋＋画像の表示＋＋＋

画像を表示させたい時は、このタグを使います

<img src="画像ファイル名">

＊終タグ</..>がありません

<img>は画像を意味しています（imageの略だと思えばわかりやすいよ）
<src>は場所を意味しています
この場合は「画像のある場所は○○○です」という意味です

＋＋＋ＨＴＭＬ＋＋＋

<html>

<head>
<title>おべんきょうのページ</title>
</head>

<body>

画像を表示させるよ(^o^)丿
<img src="画像ファイル名">

</body>

</html>

ＨＰ練習用のフォルダの中に画像用のフォルダを用意します
フォルダ名は「image」にしてください

次に「いちご」と「まるるちゃん」の画像を「imageフォルダ」の中に保存します
ファイル名を「itigo.jpg」、「maruru.gif」にします
では保存をしてみましょう

拡張子の違い、わかりますか？
「.jpg」は１６７７万色まで扱うことができるので写真などに適しています
「.gif」はに２５６色しか扱うことができませんのでイラストなどに適しています

画像の保存はできましたか？　それでは・・・・

＋＋＋レッスン１＋＋＋

(1)上の枠内のソースをコピーして「メモ帳」に貼り付けます
(2)<img src="画像ファイル名">に画像ファイル名をいれます
　「image」フォルダの中に「itigo.jpg」のファイルがあるので
　「"」と「"」の間に「image/itigo.jpg」と入力します
(3)名前を付けて保存します
(4)ＩＥでファイルを開いてみましょう
　　画像は表示されていますか？？

＋＋＋レッスン２＋＋＋

では、同じように「まるるちゃん」の画像を表示してみましょう

＋＋＋レッスン３＋＋＋

今度は自分で用意した画像を使って表示してみましょう
画像はなんでもいいですよ

＋＋＋うまくいったかな？＋＋＋

☆☆☆ポイント☆☆☆
ＨＴＭＬファイルと画像ファイルは同じフォルダ内になければ表示することができません
必ず、同じフォルダ内においておきましょう