このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

いやぁ。タイトルも表示されたし、見出しも表示された。

でも、さっきから文字ばっかじゃん！てね。

思うよね。やっぱり。

よし、勢いに乗ってガッシガシ画像をUPしましょう！

その前に、フォルダを作成しましょう。

名前は何でもいいのですが、取り敢えず、”homepage”でいっちゃいます。

この中に先ほどのHTMLファイルを格納。名前も変更します。”index.html”に変更しましょう。

そして、このファイルのあるところに”img”と命名したフォルダを更に作成します。

この “img”フォルダに表示させたい画像をガッシガシ入れていきます。

取り敢えず、

「ichigo.jpg」「kiwi.jpg」「pineapple.jpg」の3種類

フルーツの画像を入れてみました。

それでは、イチゴの画像、ichigo.jpgを読み込んでいきます。

使うタグ（要素）はimgタグです。

HTML これ覚えりゃサイトは出来るのじゃないの？的タグ （こちらを参照）

imgタグは画像タグです。

先ほどのindex.htmlに記述します。

<br />
<body><br />
<h1>フルーツ天国.com</h1><br />
<img src="img/ichigo.jpg" alt="いちご" width="320" height="240" /><br />
</body><br />

src=”” がパスって言われるもので、パスには「相対パス」と「絶対パス」があります。

今回は相対パスにあたります。後に説明します。

index.htmlに記述した場合、index.html基準で同じ階層の　imgフォルダの中の “ichigo.jpg” をとってこいやぁ〜！と指示している状態になります。

alt=”” は色々と意味があるのですが、取り敢えず、画像の説明。と覚えていれば大丈夫（？）でしょう。

ちなみに、altタグは必須となってます。

width=””　height=”” はそのまま、幅、高さとなってます。

この一行を加える事で、

どぉ〜でしょうぅ〜。あっと言う間にホームページっぽいぽい！

勢いで残り2つも読み込んじゃえぇ〜〜！

<br />
<body><br />
<h1>フルーツ天国.com</h1><br />
<img src="img/ichigo.jpg" alt="いちご" width="320" height="240" /><br />
<img src="img/kiwi.jpg" alt="キウイ" width="240" height="320" /><br />
<img src="img/pineapple.jpg" alt="パイナップル" width="320" height="240"/><br />
</body><br />

うわぁ〜これでいっか？だめか。

続く