前回までのプログラミング学習コラムに続き2回目の勉強内容です。

前回はHTMLで文書を記述し、それを反映させるところまで学習しました。今回は画像やリンクを貼ってみたいと思います。

写真を貼る際には、

<img src=”画像のパス”>

と入力します。

例えば、笑論法ファイルの中にある、logo.jpg という画像を貼るときには、

<img src="笑論法/logo.jpg">

と打ち込みます。

この作業の結果、

となりました。

インターネット上では画像が表示されない場合があります。このとき閲覧者には画像が何についてのものかわかりません。そこで、画像についての情報を表示できるようにする必要があります。

<img src="笑論法/logo.jpg" alt="文字">

としてください。alt=”文字”によって、この画像が文字についての画像であると示すことができます。また、Google検索などで画像がヒットするようになります。

さらに、この画像の幅・高さを調整してみましょう。width=”○○px” height=”○○px”として、それぞれ幅・高さを調整することができます。これを指定しないと、レイアウトが崩れてしまいます。

<img src="笑論法/logo.jpg" alt="ロゴ" width="600px" height="548px">

として、画像の記載が完了しました。

次に、この画像をリンクボタンにしてみましょう。一般にリンクを作成するには、

<a href=”絶対パスor 相対パス>

と記述します。絶対パスというのは、http://engineer-intern.jpのようにURLで指定するやり方です。一方、相対パスというのは”笑論法/logo.jpg”のようにHTMLファイルを基準にした道のりのことです。

画像をリンクボタンにするには、画像を<a>タグで囲みます。つまり

<a href=”○○○”>画像</a>

とすればよいのです。

例えば、

<a href="http://engineer-intern.jp"><img src="笑論法/logo.jpg" alt="ロゴ" width="600px" height="548px"></a>

と記述してください。

これは、笑論法の文字の画像が、エンジニアインターンのホームページにリンクしていることを示しています。

この画像をクリックすると、

このページへ、きちんとリンク先に飛ぶことができたら完成です。

今回でHTMLについてのコラムは終了です。次回はCSSについて解説しますので、お楽しみに。