Chapter-01

Chapter-02

Chapter-03

Chapter-04

1.画像を挿入する

今回は、indexページの見出しの下に画像を挿入して見ましょう。

画像を準備

画像「main_img.jpg」を開く

上のリンクから画像を開き、右クリックから保存を実行してください。

そして、新たに「img」という名前のフォルダを作成し、その中にダウンロードした画像を入れましょう。

    chap1

  • index.html

      • test

    • about.html

      img

    • main_img.jpg

（ファイル名は、main_img.jpgとしてください）

画像を挿入

では「index.html」開き、「<h1>北海道情報大学</h1>」の次の行に以下のように入力してください。

index.html
<h1>北海道情報大学とは？</h1>
<img src="img/main_img.jpg" alt="メイン画像">
<p>ここは北海道情報大学のサイトです。</p>
<a href="about.html">北海道情報大学って？</a>
<img src="" alt="">imgタグ･･･画像を挿入するタグ
「src=" "」内には画像のアドレスを書きます。
「alt=" "」内には代替テキストを入れます。

「src=" "」内の画像アドレスの書き方は、前回のリンクを繋いだときと全く同じです。今回は、imgフォルダのmain_img.jpgを呼び出しています。

ではブラウザで表示を確認してみましょう。

見本ページを新しいタブで開く

2.画像でリンクを繋ごう

次に、画像自体をクリックしてリンク先に飛べるようにしてみましょう。これは今回と前回習った内容だけで実装できます。

以下のように先ほど入力したimgタグをaタグで囲みます。

index.html
<h1>北海道情報大学とは？</h1>
<a href="test/about.html">
   <img src="img/main_img.jpg" alt="メイン画像">
</a>
<p>ここは北海道情報大学のサイトです。</p>
<a href="about.html">北海道情報大学って？</a>

画像をクリックしてリンク先に飛べることを確認しましょう。

見本ページを新しいタブで開く
PAGE TOP