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

本日の課題②

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