前回までのプログラミング学習コラムに続き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について解説しますので、お楽しみに。