文書構造と表組み

文書構造:まとめ

文書構造とは

「文書構造」つまり、ページ内容のツリー構造を指します。
この文書構造を理解するには「パラグラフの概念」を理解する必要があります。

記述(入力)する

この段階では、複雑な意味やルールは存在しません。

  1. テキストエディターを起動する
  2. 新規ファイル作成
  3. 所定の場所に保存する
  4. 記述を始める
<html>

</html>
HTMLの記述の仕方

1行目の「<html>」の入力の仕方を順序で説明すると以下のようになります。


まず、開始タグを入力。

  1. 「<」左アングル・ブラケット:小なり(lesser than)
  2. html
  3. 「>」右アングル・ブラケット:大なり(greater than)


続いて、

  1. 「enter(return)」キーを2回押し、1行空ける


続いて、終了タグを入力。

  1. 「<」左アングル・ブラケット:小なり(lesser than)
  2. html
  3. 「/」スラッシュ
  4. 「>」右アングル・ブラケット:大なり(greater than)


その結果、以下のような「開始タグと終了タグ」のセットができます。

<html>

</html>


使用するキーは、


文書構造に必要な要素

  1. タイトル
  2. 見出しと本文
  3. 箇条書き(番号つき、番号なし)
  4. 補足説明の画像
<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>
<p><img src="画像の住所" width="画像の幅" height="画像の高さ" alt="代替え文字"></p>
  • ul:unordered list
  • ol:ordered list
定義型リスト


定義型リスト definition list

  • dl要素で定義し、用語(definition term )を示すdt要素と、その説明(definition description)であるdd要素を含める


dl:definition list
dt:definition term
dd:definition description


本文内容を解説する箇条書きではなく、語句の説明の場合に使用します。

<dl>
<dt>リンゴ</dt>
<dd>赤くて丸いバラ科の果物</dd>
<dt>ミカン</dt>
<dd>黄色くて皮の薄いミカン科の果物</dd>
<dt>メロン</dt>
<dd>黄緑色で表面に溝があるウリ科の果物</dd>
</dl>


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

<dl>
<dt>11月21日</dt>
<dd>表組みの練習</dd>
<dt>11月20日</dt>
<dd>定義型リストの練習</dd>
<dt>11月19日</dt>
<dd>HTMLの基本構造の入力練習</dd>
<dt>11月16日</dt>
<dd>フェリカテクニカルアカデミーWebサイト制作科開講</dd>
</dl>

表組み

  • 表組みは、あくまでも表で表示する内容に利用します
  • レイアウトには使いません
  • 畑に種を巻いた時にできる一筋(table row)
表組み

table:table
tr:table row
th:table head
td:table description

<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"」を指定します。
最終的には「CSS」設定後、削除します。

アドレス
  • 住所や電話番号」など、ページ内容の管理者の住所を明示するために使用します
  • 一般的には「著作マーク (c)」を明示する場合にも利用されています
  • HTML5では、「著作マーク (c)」には「small要素」を使用します
<address>フェリカテクニカルアカデミー<br>
〒171-0022 東京都豊島区南池袋2-4-3 ホウライビル2F 連絡先: 03-3981-7201</address>
水平線

hr:horizontal rule


キューピー」のページを「表示→スタイルシートスタイルシートを使用しない」にすると「水平線」が使われているのがわかります。



このように現在では、「hr」は「区切り線」として見せるのではなく、「意味を区切る」ことに利用されることが多いようです。
※いわゆる水平垂直の目盛りは「ruler:ルーラー」です。

リンク

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

  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>
<p><img src="画像の住所" width="画像の幅" height="画像の高さ" alt="代替え文字"></p>
<dl>
<dt>9月25日</dt>
<dd>フェリカテクニカルアカデミーWeb実践講座開講</dd>
<dt>9月26日</dt>
<dd>HTMLの基本構造の入力練習</dd>
<dt>9月27日</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 ホウライビル2F 連絡先: 03-3981-7201</address>
</body>
</html>

パラグラフの概念

基本的に論文やレポートにおけるパラグラフは、「ひとつのテーマを示す」単位です。
パラグラフは単に「読みやすい長さで切る」のではありません。
この考え方は、Webライティングをする上でとても重要です。


パソコンやモバイル機器の中で見る「文字」は、それほど読みやすいものではありません。
ですから、必然性がなければ読みたくないものなのです。
では、読むか・読まないかの判断をどこでするのでしょうか。


そこには「知覚心理」が影響します。
ここでは深く言及しませんが、デザインにおける2大要素「色彩」と「文字」は、この「知覚心理」が原点です。

トピックセンテンス
  • トピックセンテンスは、そのパラグラフの中に書かれているテーマを一言(一文節)で表したもの
  • トピックセンテンスは通常パラグラフの最初に置かれる
  • トピックセンテンスを見出しとして扱う
トピック以外の文
  • 見出し以外の本文(段落)
  • 並列した文(同じ重要度の文)→番号なし箇条書き
  • 時系列で並んだ文(時間軸に沿って並べないと意味が通じない文)→番号付き箇条書き
  • 論理を追う構造の文(因果関係などの論理を追った文)→定義型箇条書き

「見出し+本文(段落)+箇条書き」による文書構造を最小単位と考えることが「パラグラフ」です


1ページの中には、いくつかのパラグラフがあり組み合わせて構造を作ります。
流れとしては、紙媒体は「序論」→「本論」→「結論」という風に組み立てます。
Web媒体の場合は、「結論」→「本論」→「結論」となり、最初に眼に触れるものが「結論」とするように構成します。
「序論」は、Web媒体ではまわりくどい表現として敬遠され、読んでもう事の少ない部分になってしまいます。

HTMLは言語、目的は文書構造を作る

このパラグラフの概念を使って書かれた内容を「ブラウザ」が理解して正しく表示できるようにする「言語」が、HTMLです。

HTMLを理解する入り口
  • 文章を形にしてからマークアップする(文章を書くことを優先)
  • マークアップで構造化をしてから内容を入れる(タグを記述することを優先)


授業では、その都度どちらの方法なのかを考えながら入力します。