学科 HTML基礎④

-本日のアジェンダ-

1限目
学科 HTML基礎④
画像について

2限目
学科 HTML基礎④
Webサイト用の画像について

3限目
学科 HTML基礎④
パスについて

4限目
学科 HTML基礎④
HTMLのまとめ

5限目
学科 HTML基礎④
グラフィックツールの復習

本日のテーマ

外部ファイルとの関係性を理解しましょう。

画像について

<img>タグは、画像を表示する際に使用します。 必須属性のsrc属性で画像ファイルのURLを指定します。一般的なブラウザで表示できる画像フォーマットとしては、PNG・GIF・JPEGがよく利用されています。 他にも、ウェブ用のベクター画像フォーマットであるSVGや、単一ページのPDF・アニメPNG・アニメGIFなどをsrc属性の値として指定できます。
alt属性には、画像が利用できない環境向けのテキストを指定します。 HTML5ではalt属性は必須ではありませんが、指定しておけばアクセシビリティーが高まるでしょう。

参考サイト

ワンポイントアドバイス

Webサイトを重くする(表示スピードの低下)の大きな原因の一つは画像サイズです。WebサイトにUPする画像はPhotoshopやIllustratorでしっかりと画像の最適化をしてUPしましょう。

パス(URL)について

「パス」とは、使用するファイルなどが有る場所を示す文字列です(パソコンでは、フォルダ名の経路を示す文字列です)。
「URL」とは、パス(フォルダ)名にファイル名を加えた文字列です。

サンプルページ(パス)

ワンポイントアドバイス

リンクには「絶対パス」と「相対パス」というのがあります。
単純に説明すると…
絶対パスは「http(https)」から始まるURL(パス)の事
相対パスは「現在のファイル位置」から見たURL(パス)の事
になります。サイトの構造や運用方法によって使い分けが必要になる事がありますので、この2種類を覚えておきましょう。

参考サイト

本日の課題①

wordpressのサイトに、本日学んだ内容を「投稿ページ」にまとめてください。
投稿日は、本日の日時で設定してください。
※ページタイトルに「議題」は必ず入れましょう。

本日の課題②

グラフィックデザイン基礎の内容をページにまとめてください。
投稿日は、該当する「学科 グラフィックデザイン基礎」の日時にしてください。
※ページタイトルに「議題」は必ず入れましょう。