-本日のアジェンダ-
1限目
学科 HTML基礎③
テキスト分類タグについて
2限目
学科 HTML基礎③
コンテンツ埋め込みタグについて
3限目
学科 HTML基礎③
画像の取り扱いについて
4限目
学科 HTML基礎③
HTMLのまとめ
5限目
学科 HTML基礎③
HTMLのまとめ
本日のテーマ
テキストや画像の意味付けを行いましょう
テキスト分類タグについて
a 要素（ハイパーリンク）
<a href=”リンク先情報”>ハイパーリンク定義情報</a>
ハイパーリンクする範囲を指定します。
外部サイトなどにリンクする時は「target=”_blank”」を付けることで新しいタブで開くことができます。
【注意事項】
「target=”_blank”」使用時に悪意ある外部サイトを指定しまうと外部サイトから自サイトを操作されるという脆弱性があります。これを回避する時に外部サイトを指定する時は「rel=”noopener noreferrer”」を同時に指定するようにしてください。
em 要素（強調）
<em>強調定義情報</em>
強調する（アクセントを付ける）範囲をを指定します。
strong 要素（強い重要性）
<strong>強い重要性定義情報</strong>
強い重要性を示す範囲を指定します。
small 要素（免責・警告・著作権など）
<small>免責・警告・著作権など定義情報</small>
免責・警告・著作権などの注釈や細目する範囲を指定します。
i 要素（声や心の中で思ったこと）
<i>声や心の中で思ったこと定義情報</i>
声や心の中で思ったことなど、他と区別したい範囲を指定します。
b 要素（キーワードや商品名など）
<b>キーワードや商品名など定義情報</b>
キーワードや商品名など、他と区別したい範囲を指定します。
span 要素（ひとつの範囲）
<span>ひとつの範囲定義情報</span>
ひとつの範囲として定義する範囲を指定します。
br 要素（改行）
<br>
改行する箇所を指定します。本要素には、終了タグがありません。
コンテンツ埋め込みタグについて
img 要素（画像）
<img src=”画像パス名” alt=”代替テキスト”>
画像の埋め込み表示を指定します。本要素には、終了タグがありません。
「代替テキスト」は、画像が表示できない時に画像の代わりに表示するテキストを指定します。必須項目なので必ず指定してください。
iframe 要素（インラインフレーム）
<iframe src=”フレーム内に表示する URL”
width=”フレームの幅”
height=”フレームの高さ” title=”補足情報”>
フレームが表示できない時のメッセージ</iframe>
インラインフレーム内に「フレーム内に表示する URL」で指定した URL の内容を表示します。「補足情報」には表示する内容の補足的な情報を指定します。
「フレームの幅」と「フレームの高さ」には、作成するフレームの大きさを指定します。幅の初期値は 300、高さの初期値は 150 です。
画像の取り扱いについて
<img>タグは、画像を表示する際に使用し、必須属性のsrc属性で画像ファイルのURLを指定します。一般的なブラウザで表示できる画像フォーマットとしては、PNG・GIF・JPEGがよく利用されています。 他にも、ウェブ用のベクター画像フォーマットであるSVGや、単一ページのPDF・アニメPNG・アニメGIFなどをsrc属性の値として指定できます。
alt属性には、画像が利用できない環境向けのテキストを指定します。 HTML5ではalt属性は必須ではありませんが、指定しておけばアクセシビリティーが高まるでしょう。
参考サイト
ワンポイントアドバイス
Webサイトを重くする（表示スピードの低下）の大きな原因の一つは画像サイズです。WebサイトにUPする画像はPhotoshopやIllustratorでしっかりと画像の最適化をしてUPしましょう。
本日の課題
WordPressサイトに、本日学んだ内容を「投稿ページ」にまとめてください。
投稿日は、本日の日時で設定してください。
※ページタイトルは、投稿内容がわかるような記述にしましょう。