HTMLを書いてHPを製作しよう！ その6
2011.01.12
この記事は最終更新日から1年以上が経過しています。
いやぁ。タイトルも表示されたし、見出しも表示された。
でも、さっきから文字ばっかじゃん！てね。
思うよね。やっぱり。
よし、勢いに乗ってガッシガシ画像を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 />
うわぁ〜これでいっか？だめか。
続く
