ＷｅｂＰａｇｅ発射台（初心者の、初心者による、初心者のためのＷｅｂＰａｇｅ作り講座）

絵や写真を貼り付けてみようメモ帳でタグをうつ・・・・・これが一番確実。かも。

用意するモノ
文字を入力してみよう最低用意するモノ

・・・・・に加えて、更に

・「mypage」のフォルダーの中に「pic」というようなフォルダーを作り、そこにいくつか画像を保存しておきましょう。
私はとりあえず「minikabuto.jpg」「zukei.gif」「123ani.gif」の３つの画像を置きました。

７，まず一枚画像をはりつけてみましょう

index-1.htmlのソースを開き、以下の四角の中の通りに半角アルファベットで打ってみましょう。
<!--この下に書き込み練習をしましょう。-->

<img src="pic/minikabuto.jpg">







<!--ソースを書き直したら　ファイル＞上書き保存　をクリックします。-->
<!--メモ帳の右上のバツをクリックして、このメモ帳を閉じて下さい。-->

できたらマウスで<ファイル>→<上書き保存>をクリックし更新してみましょう。

　

これをインターネットエクスプローラー（Ｉ．Ｅ．）で見るとどうなっているでしょうか。

多分このように出てくると思います。

　

より丁寧に書くと以下の様になります。

picフォルダに置いてあるminikabuto.jpgの画像を表示する
<img src="pic/minikabuto.jpg" width="80" height="60">

　

少し解説・・・・・画像を張り付ける命令は次の通りですが、<img src="pic/minikabuto.jpg" width="80" height="60">
minikabuto_s.jpg は画像の名前を示しています。
pic/minikabuto_s.jpg はその画像がindex-1.htmlのファイルが置いてあるすぐとなりにある
（同じフォルダーの中にある）「pic」というフォルダーにある事を示しています。
・・・・・つまり画像の場所と画像の名前です。
<img src="pic/minikabuto_s.jpg" > でその画像を貼るということを示しています。
width="80" height="60" は画像の大きさ。これは省略してもかまいません。
しかし、もしわかれば書き加えた方がいいです。「画像のプロパティで知ることが出来ます。」
理由１：読み込み速度が少し速くなるそうです。
理由２：後に扱う画像を表示する大きさを変える時に使えます。

それでは、続けて２枚、３枚と画像を貼ってみましょう。

８，三枚の画像を横横横に並べてみましょう

index-8.html
<html>

<head>
<title>画像の張り付け方</title>
</head>

<body>

<p>
<img src="pic/minikabuto.jpg" width="80" height="60">
<img src="pic/zukei.gif" width="150" height="60">
<img src="pic/123ani.gif" width="88" height="31">
</p>

</body>
</html>

これをインターネットエクスプローラー（Ｉ．Ｅ．）で見るとどうなっているでしょうか。
あなたのコンピュータのフォルダー<mypage>→<index-8.html>をマウスでクリックしてみましょう。

多分このように出てくると思います。

少し解説
<p>　ここからここまで　　</p> 「ここからここまで」が一つの段落であることを示しています。
あとは文字をならべるように、画像を張り付ける命令をならべるのです。
　 縦 　
９，三枚の画像を 縦 に並べてみましょう
　 縦 　
index-9.html
<html>

<head>
<title>画像の張り付け方</title>
</head>

<body>

<p>
<img src="pic/minikabuto.jpg" width="80" height="60"><br>
<img src="pic/zukei.gif" width="150" height="60"><br>
<img src="pic/123ani.gif" width="88" height="31">
</p>

</body>
</html>

これをインターネットエクスプローラー（Ｉ．Ｅ．）で見るとどうなっているでしょうか。
あなたのコンピュータのフォルダー<mypage>→<index-9.html>をマウスでクリックしてみましょう。

多分このように出てくると思います。

少し解説
<p>　ここからここまで　　</p> 「ここからここまで」が一つの段落であることを示しています。
あとは文字をならべるように、画像を張り付ける命令をならべるのです。
<br> さらに、文字を１行改行するように改行のタグを入れます。

本文にもどる

Last update Jul.3,2006