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

本日の課題②

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

学科 HTML基礎②

-本日のアジェンダ-

1限目
学科 HTML基礎②
段落「p」について

2限目
学科 HTML基礎②
見出し「h1~h6」について

3限目
学科 HTML基礎②
文字コード・特殊文字

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

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

本日のテーマ

文章構造の基本は、「見出し」と「段落」

htmlの記述【body】

  • 見出し「h1~h6」
  • 段落「p」
  • 改行「br」

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

見出し「h1~h6」について

<h1>・<h2>・<h3>・<h4>・<h5>・<h6>タグは、見出しを付ける際に使用します。数値が小さいほど高いランクの見出しとなります。 <h1>が最も高位の大見出しで、<h6>が最も低位の小見出しです。 同じ数値のものが複数ある場合には同じランクとなります。

ワンポイントアドバイス

h1タグ以外は、特に使用回数に制限はありません。h2やh3などは大きな見出しとなることが多いためたくさん使われると思います。「h1タグは1ページで一回の使用で抑え、数字の順序をしっかり守ること」これを守っていれば使用になんら問題はありません。ただ、html5の場合は1ページにh1タグが複数あっても問題ありません。

参考サイト

段落「p」ついて

<p>タグは、ひとつの段落(パラグラフ)であることを表す際に使用します。<p>タグは、段落よりもふさわしい要素がある場合には使用するべきではありません。

ワンポイントアドバイス

マークアップに悩んだらとにかく「p」にしましょう。

改行「br」について

<br>タグは、改行する際に使用します。<br>は、例えば詩や住所などのように、改行が実際にコンテンツの一部を成すような場合にのみ使用します。 文の長さを揃えたりレイアウトを整えるなどのスタイリング目的に<br>を使用してはいけません。

ワンポイントアドバイス

スペースを取る為に改行「br」を使うのは文法的にNGです。レイアウトとしてスペースを空けたいときはCSSで行いましょう。

特殊文字

ウェブページに特殊文字や記号を表示させるには専用の文字コードが必要となります。 その内容と特徴を確認しておきましょう。

参考サイト

改行とタブとスペースについて

HTML文章中の改行とタブとスペースにもルールがあります。
下記参考サイトより確認しておきましょう。

改行とタブとスペースの見本

本日の課題①

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

本日の課題②

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