[Work/Class/Web基礎/html_basic]

HTMLの基礎の基礎

HTML5のテンプレート

現在のHTMLのバージョンは5であり，最低限必要な内容は非常にシンプルである．

授業では以下に示すテンプレートをそのままCopy&Pasteして，「拡張子」に「.html」を指定して使う．(なお，セーブの時に「文字エンコーディング」をUTF-8に指定すること)

HTMLページのテンプレート 030_HTML5Template.html →テンプレートをブラウザで実行して表示 

<!DOCTYPE html>
<!-- このドキュメントのタイプはHTMLです！という指定． -->
<!-- 030_HTML5Template.html わかりやすくするためにファイル名を書いておく-->

<html lang="ja">
<!-- HTMLの記述を開始する，なおこのドキュメントは「日本語」で書かれている，という指定． -->

 <head>
 <!-- ここからはこのページの情報を記述していく，という指定 -->

  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <!-- 対IE用の指定……IEをターゲットにしていないなら必要なし -->

  <meta charset="utf-8" />
  <!-- 日本語文字のエンコーディング．現在はutf-8のみを指定するのが一般的． -->

  <title>HTML5のテンプレート</title>
  <!-- ページのタイトル(ウィンドウのバーに表示される)を指定 -->

  <link rel="stylesheet" href="" />
  <!-- 見た目を決定する「スタイルシート」を読み込む，という指定．今は空欄．-->

 </head>
 <!-- ページの情報はこれで全部，という指定 -->

 <body>
 <!-- ここからが本文，という指定． -->

  <h1>大見出し</h1>
  
  <h2>中見出し</h2>

  <h3>小見出し</h3>

  <p>
   <!-- 「p」は段落を表す -->
   ここに本文が入る．
  </p>

 </body>
 <!-- ここまで本文，という指定． -->
</html>
<!-- HTMLの記述を終了した，という指定． -->

タグ

「<」と「>」で囲まれたものを「タグ」と呼称する．タグは開始したら「</そのタグ名>」で閉じなければならない(ただしmetaタグ,linkタグは閉じない)．例えば，最初のタグ<html>は最後の行で</html>で閉じられている．

また開始したタグをすぐ「閉じ」なくてもよく，入れ子構造にできる．

後述する単体で使用するタグ(正式には「要素がないタグ」と呼称する)，例えば，br，img，hr等は， 

<br />

のように一つのタグの中で最後に閉じると，単体タグであるとわかりやすい．

タグ内のコンテント属性

<タグ名 ******="xxxxx"> .....

と書かれた，*****="xxxxx"の部分を「コンテント属性」と呼称する．様々な振る舞いをするタイプのタグの働きを決めるために指定する必要がある．また見た目を決めるスタイルシートの指定にも用いられる．

コメントアウト

「<!--」と「-->」で囲まれた部分は「コメント」扱いされ，表示時には無視される． テンプレートでは1行目にコメントとして「ファイル名」を書いている．(わかりやすくしミスをなくすためのテクニックの一つ)

論理タグと物理タグ

セマンティック・ウェブ

ブロック要素タグとインライン要素タグ

代表的なタグ

見出しタグ「h」

「heading」の略である．h1が大見出し，h2が中見出し，h3が小見出し……というように，hに続く数字が大きくなるほど，見出しとしては小さくなる．ブロック要素タグである．

段落タグ「p」

「paragraph」の略である．段落を表すために用いる．htmlのブロック要素タグの中では最小単位であり，この中に他のブロック要素タグを含めることはできない．

強制改行タグ「br」

「break」の略である．強制改行に用いる．あくまで「強制」改行であるので，文章の内容上意味のある改行以外に用いてはならない．スペースを空けるなどの要素に用いる即ち物理タグとして用いるのは禁止される．インライン要素の単体タグである．

画像の挿入タグ「img」

<img src="画像のURLもしくはファイル名" alt="画像が表示されない時に代替で表示されるテキスト" />

のように，画像を挿入する．

altコンテント属性は，画像が表示できないブラウザ(例えば視覚障害者向けの音声読み上げブラウザ)などで用いられるため，セマンティック・ウェブの観点から必ず記述することが求められている．

区切り線タグ「hr」

「horizontal line」の略である．コンテンツ内容の区切り線として用いる横線である．単体タグである．一応「物理タグ」ではあるが「論理タグ」としても使われる．またインライン要素タグでもある．

リンクタグ「a」

<a href="リンク先のURLもしくはファイル名" 
   title="リンク先のページ等のタイトルや「リンク先は◯◯ですよ」という意の文を表示">
   　リンクに表示させる文字列や画像
   </a>

という形で用いる．リンクに表示させる文字列として「ここにある」などの文を使うことがあるが，「ここ」などの内容を明示していない単語に対してリンクを貼ることは，セマンティック・ウェブの観点から推奨されていない．文字を装飾することからわかるようにインライン要素タグである．

強調表示タグ「strong」

それにつけても<strong>おやつは</strong>カール

のように用いる．上記では「おやつは」の部分のみが強調表示される．どう強調表示するかはスタイルシートに委ねられる．

太文字を意味する「b」タグなどがあるが，これらの見かけを装飾するタグは前述の通り物理タグであるので，現在では使用できない．

文字を装飾することからわかるようにインライン要素タグである．