2014-08-26

2014-08-26

HTMLの基礎:まとめAdd Star

 

 

HTMLの特徴と役割

  • HTMLはWebページを制作するために開発された言語です
  • その後、実際の利用状況に応じて改良が加えられるとともに、役割も変化してきています

HTMLの特徴
  • テキストベース(ほぼ環境に依存しない)
  • 他のHTMLページにリンク可
  • Webの標準技術である(W3Cによって仕様が策定されています)

HTMLの役割の変化
  • 見栄えの帳尻が合えば良いという考え方からテーブルタグが多用された時期もありました
  • しかし検索エンジンの発達により、テキスト内容の正しい文書構造の定義が必要になってきました(セマンティックなマークアップ
  • 見た目重視のHTMLの使い方から「構造を定義する言語」に変わってきました
  • 現在では、「構造を定義する言語」にとどまらず電子書籍などの「デジタル文書の構造を定義する言語」に変わってきています

マークアップの基本

  • THMLは文書の構造を定義するための言語です
  • 文書の構造とは、見出し、本文、箇条書き、表組、引用などを用いて内容をわかりやすく意味付けすることです
  • 開始タグと終了タグで囲んで「ページの中の役割」を示します
  • タグは、すべて半角文字で記述します
  • 見出し要素 h1→h2→h3→h4→h5→h6 は、文字の大きさの順序ではなく意味の優先順位を表します
  • p要素は、一般に段落(paragraph)を表します
  • imgやbrのように終了タグのないものを「空タグ」と呼び、単独で使用します
  • 属性は、要素に続いて記述しますが、大きさや余白など見栄えに関するものは、直接記述しないでCSSで記述することとします
  • 要素は正しい「入れ子」状態にする必要があります
  • 箇条書きリストli要素は、必ず「ul要素」か「ol要素」の中で使用します
  • ソースコードの、スペースや改行は適宜使用します

入力のためのツーツ

ブラウザ
  • 入力したHTMLが適切に表示されるかを確認します

HTMLドキュメントの基本


DTD
  • Document Type Definition
  • 使用するHTMLのバージョンを宣言します
  • 2014年8月現在、HTML5の仕様は完全に固まってはいませんが、慣習としてDTDHTML5用として記述します

lang属性
  • ドキュメントの言語を表します
  • 設定をしておくと、翻訳プログラムや読み上げプログラムなどがドキュメントを適切に扱うために役立ちます

文字コード(テキストエンコード
  • Unicode(UTF-8, UTF-16)を使用します
  • 基本的には、すべてのドキュメントを「UTF-8」で設定します

title属性
  • Webサイトのどのページにわかるように「ページタイトル カテゴリ名 | サイト名」と記述します

《基本構成》

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>ドキュメントタイトル</title>
</head>
<body>

</body>
</html>

コンテンツ構造の定義

  • body要素内は、閲覧者に伝える内容を記述します

見出し:h1~h6要素
  • 意味の重要性の順を表します

p要素
  • 本来、段落は2行以上ある本文を指しますが、必ずしもその用途に限定されるわけではありません

順番不問の箇条書き
  • ul要素の子要素としてli要素を記述します
  • 順序を入れ替えても成立する項目すべてに汎用的に利用します

順番必須の箇条書き
  • ol要素の子要素としてli要素を記述します
  • 順序を入れ替えては成立しない箇条書きに利用します
  • 番号の表示は、start属性、type属性、reversed属性などが使用できます

定義型の箇条書き
  • dl要素の子要素としてdt要素、孫要素としてdd要素を記述します
  • dt要素とdd要素はセットで使用します
  • 「語句と語句説明」「質問と解答」「日付けと出来事」の用に組み合わせて使います

表組
  • table要素、tr要素とth要素とtd要素を組み合わせて定義します
  • tr要素で1行の範囲を定義します
  • tr要素内のセルの数は、各行で一致させる必要があります
  • 行を結合するには「rowspan属性」を利用します
  • 列を結合するには「colspan属性」を利用します

引用
  • blockquote要素を記述します
  • 他の情報源からの引用を表します
  • 情報源をURLで指定できる場合、cite属性にそのURLを指定します

画像とリンク

  • HTMLドキュメントに画像を挿入する場合、画像ファイルのある場所を指定します
  • 他ページへのリンクも同様に、ページのある場所を指定します
  • このファイルの指定方法のことを「パス」を記述すると呼びます

パス
  • 絶対パス」と「相対パス」があります
  • 絶対パスは「http://」から始まるURLのことです
  • 相対パスは、基準となるドキュメントから見た対象ファイルの位置指定のことです
  • 相対ぱすの記述は「/」で階層を記述していきます
  • 階層を一つ上(前)にあがる(戻る)ためには、「../」と記述します

画像のファイル形式
  • Webで利用できる画像のファイル形式は、PNG形式、JPEG形式、GIF形式、SVG形式です
  • JPEG形式は圧縮する際にデータを間引きします
  • GIF形式は256色までしか使えません
  • GIFアニメ形式でシンプルなアニメーションを利用できます
  • PNG形式は間引きをしない圧縮形式です

画像の挿入
  • img要素を使用します
  • img要素には、alt属性が必須です
  • 説明する必要のないイメージ画像などの場合には、alt属性の値を空にします

ページリンク

  • リンクには、a要素を使用します
  • href属性にリンク先のURLやパスなどを記述します
  • 別ウィンドウで開く場合には、target属性を使用し値を「_blank」とします
  • ページ内リンクはid属性を指定した要素にリンクするようにします

メールリンク
  • href属性の値に「mailto:メールアドレス」と指定します
  • このリンクは、メーラーを起動するためのリンクです
  • メールアドレスをソースコード上に記述することから、セキュリティ上好ましくないため現在ではほぼ利用することはありません


マークアップの正解

  • HTMLのマークアップに間違いはあっても唯一の正解はありません
  • 重要なのは、どのような考えや価値観を元にマークアップするかという点です