１か月授業内容まとめ - テキスト（2）HTMLで文書を作成する

HTMLで文書を作成する

HTMLの概要
  • テキスト、P.014
  • 基本構造の入力をします（詳細は、テキストで確認します）

HTMLの役割

  • HTML（Hyper Text Markup Language）
  • Webページを表示するためのマークアップ言語のひとつ
  • マークアップとは、コンテンツの始めと終わりにタグと呼ばれるしるしを付けて、その部分になんらかの「意味付け」をすることを指します

HTMLの基本構文

要素（Element）

  • 開始タグと終了タグに囲まれた範囲のことを「要素」と呼びます

f:id:web-css-design:20160810172932p:plain

属性（Attribute）

  • 要素に対する様々なオプション設定のような役割を持つのが「属性」です

f:id:web-css-design:20160811000045p:plain

HTML文書の基本構造
  • テキスト、P.016〜P.017
  • HTML文書の基本的な構造は、html要素の中にhead要素とbody要素が要素が入っているもになります

f:id:web-css-design:20160811002504p:plain

ドキュメントツリー

  • HTML文書は要素の入れ子によって構成されています
  • その状態をツリー状に表したものがドキュメントツリーと呼ばれます
  • その中で、ある要素の上位側にある要素を「親要素」、下位側にある要素を子要素と呼びます

f:id:web-css-design:20160903165754p:plain

語句詳細
  • テキスト、P.016〜P.018

DOCTYPE宣言（文書型宣言）

  • 現在の標準規格HTML5
<!DOCTYPE html>

html要素

  • HTML文書の最上位の要素であり、文書全体を包括する要素となります
  • 一般的に「lang属性（文書の言語コード）」を記述するのが慣例となっています
<html lang="ja">

head要素

  • ブラウザーが表示のために必要な情報や文書の補足情報を記載します
<head>〜</head>

文字コードの指定

  • head要素の中で必ず文字コードの指定を行う必要があります
  • title要素が文字化けをしないように、title要素の前に記述します
<meta charset="UTF-8">

title要素

  • ブラウザーのタブ部分に表示される情報です
  • そのページの内容を適切に表す文言を記述します
<title>文書タイトル</title>

meta要素

  • metaphor
  • ブラウザー画面には表示されないけれど、文書の情報として必要なものを記述します
<meta charset="UTF-8">
<meta name="description" content="文書の概要が入ります">
雛形のコードサンプル
  • descriptionは、公開時に記述します
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ページタイトル</title>
</head>
<body>
</body>
</html>