ドリル式ホームページの作り方

画像を表示させてみよう

ドリル式ホームページの作り方TOP  >>  Lesson2〜CSSを使わない装飾〜  >>  画像を表示させてみよう

画像を表示させてみよう

まずはサイトの骨格を作る

画像も作成し終わったので、早速画像を表示させて見ましょう。

その前に、前回までのスキルを生かしてサイトの骨格を作っておきます。

<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" />であり、""の間には画像の名前が入ります。

あなたが作ったサイトのディレクトリ(フォルダ)構造がパターン1のように、index.htmlファイルと同じ階層に画像が置いてあるなら、""の間には画像の名前を入れるだけでよいです。

パターン1

パターン2

しかし、パターン2のように、ファイルの種類によってフォルダ分けしていて、index.htmlより下の階層に画像が置いてあるなら、""の間には"gif/2.gif"や"jpg/4.jpg"のように"フォルダ名/画像の名前"のようにしなければなりません。

また、画像だけでは検索エンジンが何の画像であるかを認識できないために、<img src="○○○.jpg" alt="ここに画像の説明を記述" />を付け足します。

面倒な場合でも、<img src="○○○.jpg" alt="" />のように""の中を空欄にした状態にしておきます。

作成した画像を表示させてみる

この講座では、後々を考えて利便性の高いディレクトリ構造である、パターン2のような構造を前提に説明しますので、パターン1のヒトは新しくフォルダを作成して、画像を分類してください。

サンプル使う画像はコチラからダウンロードできます。→サンプル画像

先ほどの骨格の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直下に置いてはいけないことになっていることによります。初心者さんには難しいのでそういうものとして通過してください。。。

ここまでの作成経過はコチラ→サンプル(ホームページ作成講座)


Lesson2〜CSSを使わない装飾〜

  1. 素材を用意する
  2. 素材を作成する
  3. 画像を表示させてみよう
  4. リストを使う
  5. リンクを設定する
Copyright(C) ドリル式ホームページの作り方 all right reserved.