記述のルールと基本構造

画竜点睛を欠く

  • 意味は調べて見ましょう

記述（マークアップ）のルール

  1. 表示する内容（コンテンツ）は、必ず「開始タグ」と「終了タグ」で囲む
  2. すべて小文字で記述する


以下は、記憶する部分ではなく、入力の経験のみが優先されます。
まず、入力してみましょう。

HTML基本構造

  • 基本構造は「head部」と「body部」
head部
  • UA（user agent）が表示するための必要な条件とページの目的、そして外部との関連づけを記述する
  • あくまでもブラウザが理解するための部分
  • 不可視（非表示）
body部
  • 閲覧者が内容を確認する部分
  • 閲覧者のためだけではなく、検索エンジンに情報が蓄積されるような意味付けも必要
  • 可視（表示）

現在のインターネットの利用の仕方は、ほぼ「検索」から始まります。
つまり、検索対象になるWebページを作成しない限り、見られることはないということです。


では「検索」は、何を検索するのか？
検索エンジンのサーバーに記録してあるデーターから検索します。
インターネットの世界にある「ありとあらゆるデータ」から検索されるわけではありません。


この「検索エンジンのサーバーに記録されること」を、インデックスと呼びます。


では、どうやったら「インデックス」されるのか。
その話に入る前に、しばらく準備の時間が必要です。


その他のmeta
  • 「keywords」は、検索対象ではなくトリガーとしての役割しかありません。Googleは無視されますが「検索エンジンBing」対策として、記述する場合もあります
<meta name="description" content="">
<meta name="keywords" content="">
link要素
<link rel="stylesheet" href="css/style.css" media="all">
title要素
  • 「title要素」には日本語サイトの場合は、日本語で記述しますが、何を記述すればよいかを答えなさい。
body要素

本来、body内は必要充分なテキストが入力してあるところから進めることが理想です。
その内容は「本文（ほんもん）」として、記述します。
その中から、内容を一目で把握できるように「見出し」を立ち上げます。
つまり、見出しで表すことのできる、文節の塊が「段落」となります。


この「見出し+段落」で表す内容が「パラグラフ」と呼ばれます。
「p要素」そのものも「paragraph」と呼ばれますが、段落要素には見出し要素が不可欠であると考えましょう。


文章だけが長く続くと、可読性が落ちます。
そこで、箇条書きが利用されます。
１行で完結に表現できるものは、箇条書きにします。


特に、Webの表現では「読み物」というよりも「レポート」として読んでもらうことがほとんどです。
まず「結論」を読んでもらい、「検証」で納得してもらうという手法です。
ですから、それには「箇条書き」が有効です。


つまりbody内には、常に

  1. 見出し
  2. 段落
  3. 箇条書き


が記述されることになります。



《課題》
次の内容をマークアップしなさい。

今日の献立
今日は、子供も大人も好きなカレーを作ろうと思います。
カレーの材料
カレー・ルー
豚肉
じゃがいも
たまねぎ
にんじん

文書構造に必要な要素

  1. タイトル
  2. 見出しと本文
  3. 箇条書き（番号つき、番号なし）
  4. 補足説明の画像
見出し <h1> <h2> <h3>
  • ページ内容を表す１行
  • 優先順位のレベルでマークアップする
  • 見出しの拾い読みでも、ページのツリー講座がわかるように
<h1>アフォーダンス</h1>
<h2>デザインにおけるアフォーダンス</h2>
<h3>本来のアフォーダンス</h3>


見出しは、段落（本文）と組み合わせて記述します。

段落 <p>
  • 基本的には、２行以上の文章に指定する（１行でも可）
  • 迷ったら、「p要素」にする
  • 段落ブロックの下は、必ず１行分の空きができる
箇条書き <ul> <ol> <dl>
  • 必然性のある箇条書きを利用する


ul（unordered list）
順序が置き換わっても意味が伝わる並列な内容に使う。

  • 行頭マークは「黒丸」
<ul>
  <li>私が好きな真っ赤なりんご</li>
  <li>あなたが好きなのはバナナ</li>
</ul>


ol（ordered list）
順序が置き換わっては意味が伝わらない、順序が意味をもつ内容に使う。

  • 行頭は数字
<ol>
  <li>まず良く洗ってから皮をむき</li>
  <li>それからおもむろに囓りつく</li>
</ol>


dl（definition list）
「名称（用語）」と「その説明文（定義）」をセットにしてリスト化するときに使う。

  • リスト全体に対する dl要素：definition list
  • 名称(用語)に対する dt要素：definition term
  • 説明文(定義)に対する dd要素：definition description
<dl>
  <dt>りんご</dt>
    <dd>赤い色をした丸い果物。</dd>
  <dt>バナナ</dt>
    <dd>黄色い色をした細長い果物。</dd>
</dl>


以下のような場合にも、利用されます。
いわゆる日付で明示する更新情報の場合です。

<dl>
<dt>06月07日</dt>
<dd>フェリカテクニカルアカデミーWebサイト制作科開講</dd>
<dt>06月11日</dt>
<dd>HTMLの基本構造の入力練習</dd>
<dt>06月12日</dt>
<dd>定義型リストと表組みの練習</dd>
</dl>
表組み
  • table 要素
  • caption 要素
  • tr要素：table row
  • td 要素：table data
  • th要素：table header


<body>
<h1>Web年表</h1>
<table border="1">
<caption>1999年以前</caption>
<tr>
<th>西暦</th><th>出来事</th>
</tr>
<tr>
<td>1989年</td><td>WWWの誕生</td>
</tr>
<tr>
<td>1993年</td><td>Mosaic 登場</td>
</tr>
<tr>
<td>1995年</td><td>Windows 95</td>
</tr>
<tr>
<td>1998年</td><td>Google 登場</td>
</tr>
</table>
</body>

<table border="1" summary="カリキュラム内容のイメージ">
<tr>
<th>科目</th>
<td>内容</td>
</tr>
<tr>
<th>国語</th>
<td>正しい文書構造を理解する（パラグラフの概念）</td>
</tr>
<tr>
<th>算数</th>
<td>JavaScript、ActionScript、PHPなどでプログラミングの考え方を理解する</td>
</tr>
<tr>
<th>理科</th>
<td>力学からコンピュータの描画を理解する</td>
</tr>
<tr>
<th>社会</th>
<td>デザインの歴史、Webの歴史を通じていま必要なことを理解する</td>
</tr>
<tr>
<th>英語</th>
<td>Webのバックグラウンドから理解するために必要な言葉の理解する</td>
</tr>
<tr>
<th>図工</th>
<td>デザインのルールを理解する</td>
</tr>
</table>



文字と枠の修飾は「CSS」でおこないます。
ただし、枠線が見えないと表組みが確認できないため、便宜上「border="1"」を指定します。

アドレス

「住所や電話番号」など、ページ内容の管理者の住所を明示するために使用します。
一般的には「著作マーク (c)」を明示する場合にも利用されています。

<address>フェリカテクニカルアカデミー<br>
〒171-0022 東京都豊島区南池袋2-4-3 ホウライビル２F　連絡先： 03-3981-7201</address>
水平線

hr：horizontal rule


「キューピー」のページを「表示→スタイルシート→スタイルシートを使用しない」にすると「水平線」が使われているのがわかります。
このように現在では、「hr」は「区切り線」として見せるのではなく、「意味を区切る」ことに利用されることが多いようです。
※いわゆる水平垂直の目盛りは「ruler：ルーラー」です。

リンク

Webは「リンク」こそ命。
リンクには３つの使い方があります。

  1. テキストリンク
  2. 画像リンク
  3. メールリンク
<a href="移動先のアドレス">◎◎◎のページへ移動</a>
<a href="移動先のアドレス"><img src="画像の住所" width="幅" height="高さ" alt="代替え文字"></a>
<a href="mailto:xxx@xxx.net">お問い合わせ（メールソフトが起動します）</a>


a：anchor
href：hyper reference

新規ウィンドウで開く
  • target="_blank"


この属性は、HTMLの解釈の変遷により、使わないほうが良いといわれたりしましたが、HTML5では使用可能になっています。

<html>
<head>
<title>はじめてのHTML入力練習</title>
</head>
<body>
<h1>結論：大見出し</h1>
<p>要約</p>
<h2>結論：検証</h2>
<p>解説</p>
<ul>
<li>検証の項目</li>
<li>検証の項目</li>
<li>検証の項目</li>
</ul>
<p>解説</p>
<ol>
<li>順序のある検証の項目</li>
<li>順序のある検証の項目</li>
<li>順序のある検証の項目</li>
</ol>
<dl>
<dt>06月07日</dt>
<dd>フェリカテクニカルアカデミーWebサイト制作科開講</dd>
<dt>06月11日</dt>
<dd>HTMLの基本構造の入力練習</dd>
<dt>06月12日</dt>
<dd>定義型リストと表組みの練習</dd>
</dl>
<table border="1" summary="カリキュラム内容のイメージ">
<tr>
<th>科目</th>
<td>内容</td>
</tr>
<tr>
<th>国語</th>
<td>正しい文書構造を理解する（パラグラフの概念）</td>
</tr>
<tr>
<th>算数</th>
<td>JavaScript、ActionScript、PHPなどでプログラミングの考え方を理解する</td>
</tr>
<tr>
<th>理科</th>
<td>力学からコンピュータの描画を理解する</td>
</tr>
<tr>
<th>社会</th>
<td>デザインの歴史、Webの歴史を通じていま必要なことを理解する</td>
</tr>
<tr>
<th>英語</th>
<td>Webのバックグラウンドから理解するために必要な言葉の理解する</td>
</tr>
<tr>
<th>図工</th>
<td>デザインのルールを理解する</td>
</tr>
</table>
<address>フェリカテクニカルアカデミー<br>
〒171-0022 東京都豊島区南池袋2-4-3 ホウライビル２F　連絡先： 03-3981-7201</address>
</body>
</html>