学科 HTML基礎③

-本日のアジェンダ-

1限目
学科 HTML基礎③
リスト「ul ol li」について

2限目
学科 HTML基礎③
リンクについて

3限目
学科 HTML基礎③
要素と属性とその値について

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

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

本日のテーマ

要素と属性と値が基本の基本構造を理解しましょう。

リスト「ul ol li」について

<ul>タグはunordered listの略で、順序のないリストを表示する際に使用します。 リスト項目は、<li>タグで指定します。
<ul>タグで作成されるのは順序のないリストなので、リスト項目の順序を変えても文書の意味は変わりません。 順序のあるリストを作成する際には<ol>タグを使用してください。

<ol>タグはordered listの略で、順序のあるリストを表示する際に使用します。 リスト項目は、<li>タグで指定します。
<ol>タグで作成されるのは順序のあるリストなので、リスト項目の順序を変えると文書の意味が変わってしまうはずです。 順序のないリストを作成する際には<ul>タグを使用してください。

サンプルページ(htmlの記述【body】)

ワンポイントアドバイス

<p>より、リストとしての意味を持つ箇所はリストタグにしましょう。
主に、ナビゲーションや手順の説明、新着情報などの一覧表記にリストタグを使うとより効果的に検索エンジンに意味を伝えられるでしょう。

参考サイト

リンクについて

<a>タグは、ハイパーリンクを指定する際に使用します。 ウェブページ内のテキストや画像などを<a>~</a>で囲んで必要な属性値を指定してやることで、 ハイパーリンクの始点(出発点)や終点(到達点)とすることができます。

<a>は、anchor(アンカー)の略です。 anchorを日本語にすると“船の錨・つなぎ止めて固定する”といった意味になります。 <a>は、指定した場所同士をつなぐことで関連する情報同士を結び付け、ユーザーに情報間の移動手段を提供する重要なタグです。

ワンポイントアドバイス

SEO(検索エンジン最適化)の最も重要なタグの一つです。検索エンジンは、リンクを辿ってWebサイトを評価していきます。
まずは、リンク<a>~</a>で囲う文言は、リンク先のページの意味と同一になるように意識してみましょう。

参考サイト

ターゲット指定とは?

a要素に target="" を追加すると、リンク先の文書をどのフレーム(ウィンドウ)に表示するかを指定できます。

ワンポイントアドバイス

外部リンクを設定する時は自身のサイトからの離脱回避という意味と、他所のサイトの引用をしているという意味を込めて「 target=” _blank ” 」 新規のウィンドウに表示 に表示にしましょう。

要素と属性とその値について

HTML の要素は属性を持ちます。ユーザーが望む基準を満たすために、さまざまな方法で要素を構成したり、動作を調整したりする追加の値です。

<要素名 属性="属性値">
開始タグの要素名の後ろに半角スペースを開ける
属性の後ろに=(イコール)を付ける
属性値は"(ダブルクオート)で囲む

参考サイト

本日の課題①

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

本日の課題②

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