前回は、HTMLの骨組みと、見出しや段落といった基本的なタグを学びました。
今回は画像やリンクの貼り方や、文字の装飾方法などを学んでいきます。
第1回をまだお読みでない方は、こちらからご覧ください。
画像の表示は<img>タグを使う
ページに画像を表示するには、<img>タグを使います。画像のパスやサイズなど、細かな属性があるので順に説明していきます。
<img>タグの基本構文
<img src="(画像ファイルのパス)"
alt="(画像の代替説明文)"
width=(表示幅) height=(表示高さ)> 上記が、imgタグの基本的な書き方です。各属性について見ていきましょう。
src属性：画像ファイルのパス(必須)
画像がある場所(パス)を指定します。指定方法には、
・「http://～」から始まる完全なURL(絶対パス)
・このhtmlファイルから見た相対的な位置(相対パス)
の２つがあります。
Note:相対パスの書き方
相対パスにでは・"AAA.html"…同じフォルダにあるAAA.html
・"aaa/AAA.html…同じ階層内のaaaフォルダにあるAAA.html
・"../aaa/AAA.html"…1つ上階層のaaaフォルダにあるAAA.html
というふうに書きます。"../"は複数回重ねることで2階層上、3階層上を指定することができます。
alt属性：画像の代替テキスト
画像内容を説明するテキストです。画像が表示できない場合の代わりの表示や、目の見えない人向けの読み上げに使われます。
width属性 / height属性：表示サイズ
画像の表示幅・高さを指定します。ポイントは「元画像のサイズ」ではなく「表示サイズ」ということです。元画像より大きいサイズを指定すれば、画像をそのサイズまで拡大して表示します。逆も同様です。
imgタグの使用サンプル
<img src="http:://xxx/xxx.jpg" alt="表示テスト用画像" width=200> ※都合上画像URLは仮のものを入れています。
これをブラウザで表示すると下のようになります。
画像が表示できない場合は、下のように代替テキストが表示されます。
ページ間のリンクは<a>で張る
次はサイト間、または外部のページをつなぐリンクの張り方です。<a>タグの基本構文
<a href="移動先のURL"
target="_blank"
rel="noopener noreferrer"
title="サイトの説明文">リンクテキスト</a>
href属性：移動先のURL(必須)
飛びたいURLを指定します。これも
<img>タグと同様、絶対パスと相対パスの指定ができます。リンクテキスト(必須)
実際にリンクとして表示したい文字列をここに書きます。テキストではなく画像などでもかまいません。
target=_blank：別のタブで開きたい時に指定
リンクを新しいタブで開かせたい時に指定します。target属性はデフォルトが同じタブで開く設定のため、同じタブで開きたい場合は省略してかまいません。
rel="noopener noreferrer"
リンク先にリンク元の情報を渡さないようにするための記述です。自サイト以外へのリンクを張る時には基本的に書いておきましょう。
title属性：補足テキスト(ツールチップ)
リンクの補足説明となる属性です。マスオーバーした時などに表示されます。<a>タグの使用サンプル
<a href="https://www.it-skill-navi.com/" title="リンクの例1">
このサイトのホームへ</a><br>
<br>
<a href="https://www.it-skill-navi.com/" title="リンクの例2" target=_blank>このサイトのホームへ（新しいタブ）</a>
サンプルとして、このサイトのトップへのリンクを張ってみました。
１つ目のリンクはこのタブで、２つ目のリンクは新しいタブで開きます。
マウスオーバーすると、それぞれの
title属性の値が表示されます。 文字や画面を装飾する方法
最後に、太字や斜体といった文字を装飾する方法や、画面の区切り線などのタグをご紹介します。<b>、<strong>：太字にする（文章の強調）
<b>この文字は太字にしたい</b><br>
<strong>この文章を強調したい</strong><br>表示例：
この文字は太字にしたい
この文章を強調したい
この文章を強調したい
タグ間にある文字列を太字（強調）にします。
<small>文字を小さくする（コメントなど）
普通の文章<br>
<small>※コメントとして小さく表示したい文章</small><br>表示例：
普通の文章
※コメントとして小さく表示したい文章
※コメントとして小さく表示したい文章
タグ間にある文字列を小さくします。コメントや脚注などを小さく入れたい時に使用します。
<i>要素：文字を斜体にする（引用など）
普通の文章<br>
<i>斜体の文章</i><br>表示例：
普通の文章
斜体の文章
斜体の文章
タグ間にある文字列を斜体にします。引用文など、前後の文と違う内容であることを示す時使われます
<hr>要素：水平線を引く
水平線線のサンプル
<hr>
この文章の間に水平線線が入ります表示例：
水平線のサンプル
この文章の間に水平線が入ります
この文章の間に水平線が入ります
ページに水平線を引きます。
NOTE:HTMLタグは文章に「意味づけ」をするもの
今回分かりやすくするため「文字の装飾」と書きましたが、HTMLの本来の意図としては「意味づけ」が正確になります。例えば
<strong>タグで「ここは強調したい」と定義し、具体的な表示方法はCSSで定義する、という書き方をします。CSSを学ぶ段階では重要になってくるので、心にとめておいてください。
実習：プロフィールページを拡張する
今回学んだことをもとに、第一回で作った自己紹介ページを更新してみましょう。拡張する内容
第1回のページに、以下のような要素を追加します。・水平線で大見出しと本文を区切る
・趣味の文章やコメントに強調などを入れる
・このページと別に趣味の写真ページをつくり、画像を貼る
・趣味をクリックすると上記ページに飛べるようにリンクを張る
これは一例なので、細部は変えてもかまいません。
サンプルコードと表示例
プロフィールページ(index.htmlとして作成)<html lang="ja">
…
<body>
<h2>プロフィール</h2>
<hr>
<h3>基本情報</h3>
<p>ハンドルネーム：〇〇〇</p>
<p>出身地：××県</p>
<h3>趣味・目標</h3>
<h4>趣味</h4>
<p><strong>写真</strong>を撮ること<br>
<a href="photo.html">写真ページを開く</a>
</p>
<h4>目標</h4>
<p>エンジニア転職を目指しています</p>
<h3>コメント</h3>
<p>（その他なにかあれば）<br>
<small>※注釈文</small>
</p>
<hr>
</body>
</html>写真ページ
(上ファイルと同じフォルダにphoto.htmlとして作成。写真を入れるimageフォルダも同様に作成)
<html lang="ja">
…
<body>
<h2>写真ギャラリー</h2>
<hr>
<h3>写真1 ××××</h3>
<img src="htmlとimage/aaa.jpg" alt="写真の説明" width=100 height=50>
<h3>写真2 ××××</h3>
<img src="htmlとimage/bbb.jpg" alt="写真の説明" width=100 height=50>
…
<hr>
<a href="index.html">戻る</a>
</body>
</html>表示例：プロフィールページ
写真ページ
※表示例はイメージです。リンクの飛び先や画像のAltなど、一部機能しなくなっています
まとめ
HTML講座第2回でした。第1回とあわせて、Webページの基礎の部分はお伝えできたと思います。
次回は、ボタンやテキストボックスなど、プログラミングに必要なパーツの作り方についてです。
以下のリンクからご覧ください。
