画像を表示させてみよう
まずはサイトの骨格を作る
画像も作成し終わったので、早速画像を表示させて見ましょう。
その前に、前回までのスキルを生かしてサイトの骨格を作っておきます。
<html> <head> <title>ホームページ作成講座</title> <meta http-equiv="Content-Type" content="text/html;charset=shift_jis"> </head> <body> <h1>Lesson1：ホームページ作成講座</h1> <h2>Lesson1：メモ帳を起動してみよう！</h2> <h2>LLesson2：タグを書いてみよう！</h2> <hr /> <address>Copyright 2007@nkdesk. all right reserved.</address> </body> </html>
この骨格の<h1>タグの間に「ホームページ作成講座」という文字が入っていますが、この文字を画像に変えて見ましょう。
imgタグとディレクトリ構造
画像を表示させるタグは、<img src="○○○.jpg" />であり、""の間には画像の名前が入ります。
あなたが作ったサイトのディレクトリ（フォルダ）構造がパターン１のように、index.htmlファイルと同じ階層に画像が置いてあるなら、""の間には画像の名前を入れるだけでよいです。
しかし、パターン２のように、ファイルの種類によってフォルダ分けしていて、index.htmlより下の階層に画像が置いてあるなら、""の間には"gif/2.gif"や"jpg/4.jpg"のように"フォルダ名/画像の名前"のようにしなければなりません。
また、画像だけでは検索エンジンが何の画像であるかを認識できないために、<img src="○○○.jpg" alt="ここに画像の説明を記述" />を付け足します。
面倒な場合でも、<img src="○○○.jpg" alt="" />のように""の中を空欄にした状態にしておきます。
作成した画像を表示させてみる
この講座では、後々を考えて利便性の高いディレクトリ構造である、パターン２のような構造を前提に説明しますので、パターン１のヒトは新しくフォルダを作成して、画像を分類してください。
サンプル使う画像はコチラからダウンロードできます。→サンプル画像
先ほどの骨格のh1の間の、「ホームページ作成講座」という文字は削除して、下のような記述を追加します。
<html> <head> <title>ホームページ作成講座</title> <meta http-equiv="Content-Type" content="text/html;charset=shift_jis"> </head> <body> <h1><img src="gif/1.gif" alt="ホームページ作成講座" /></h1> <p><img src="gif/2.gif" alt="境界線" /></p> <h2>Lesson1：メモ帳を起動してみよう！</h2> <h2>LLesson2：タグを書いてみよう！</h2> <hr /> <address>Copyright 2007@nkdesk. all right reserved.</address> </body> </html>
imgタグを単体で記述するのでなく、pで囲んでいるのは、（後で出てくるんですが）html strictのbody要素において、ブロックレベル要素しかbody直下に置いてはいけないことになっていることによります。初心者さんには難しいのでそういうものとして通過してください。。。
ここまでの作成経過はコチラ→サンプル（ホームページ作成講座）
Lesson1～HTMLの基礎～
コメントor補足情報orご指摘あればをお願いします。
- << 前のページ
- 次のページ >>
