講義（山本裕樹）

この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。
====== 【情報リテラシー】第10回 HTML -Webページ作成2- ======

===== リストの要素 =====

同じような項目を並べる場合は__**リスト**__を使用するとよい。
HTML では順序なしリスト、順序付きリスト、説明リストという3種類のリスト要素がある。


^  要素  ^  タグ             ^  意味                                                        ^  置ける場所            ^  writerとの対応  ^
| ul     | ''%%<ul>...</ul>%%''  | 順序なしリストの要素である。                                 | body 要素内            | 箇条書き         |
| ol     | ''%%<ol>...</ol>%%''  | 順序付きリストの要素である。                                 | body 要素内            | 番号付きリスト   |
| li     | ''%%<li>...</li>%%''  | ul 要素や li 要素の中で使う項目を記述するための要素である。  | ul 要素内\\ ol 要素内  |                  |
| dl     | ''%%<dl>...</dl>%%''  | 説明リストの要素である。                                     | body 要素内            |                  |
| dt     | ''%%<dt>...</dt>%%''  | dl 要素の中で用語や名前を記述するための要素である。          | dl 要素内              |                  |
| dd     | ''%%<dd>...</dd>%%''  | dl 要素の中で説明や定義を記述するための要素である。          | dd 要素内              |                  |
===== 順序なしリスト =====

__**順序なしリスト**__ とは、行頭に「・」などの記号を入れて項目を表して並べたリスト、つまり__**箇条書き**__である。
HTML では順序なしリストの要素を使用すると自動的に箇条書きになる。

順序なしリストは ul 要素で指定する。
開始タグは「''<ul>''」、終了タグは「''</ul>''」である。

順序なしリストの各項目は ul 要素の中で li 要素で指定する。
開始タグは「''<li>''」、終了タグは「''</li>''」である。
ただし、終了タグ「''</li>''」は省略できる。

具体的には以下のように記述する。
インデントをすることで開始タグから終了タグの範囲が分かりやすくなる。
インデントはタグの入力時にある程度自動で行われるが、手動で行いたい場合はインデントを行いたい行で <key>Tab</key> を押す。

<code html>
<ul>
 <li>項目A</li>
 <li>項目B</li>
 <li>項目C</li>
</ul>
</code>

Firefox では以下のように表示される。

  * 項目A
  * 項目B
  * 項目C


===== 順序付きリスト =====

__**順序付きリスト**__とは、行頭に数字などを入れて項目に番号を付けて並べたリスト、つまり__**番号付きリスト**__である。
HTML では順序付きリストの要素を使用すると自動的に連番が付けられて番号付きリストになる。

順序付きリスト ol 要素で指定する。
開始タグは「''<ol>''」、終了タグは「''</ol>''」である。

順序付きリストの各項目は ol 要素の中で li 要素で指定する。
開始タグは「''<li>''」、終了タグは「''</li>''」である。
ただし、終了タグ「''</li>''」は省略できる。

具体的には以下のように記述する。
<code html>
<ol>
 <li>項目A</li>
 <li>項目B</li>
 <li>項目C</li>
</ol>
</code>

Firefox では以下のように表示される。

  - 項目A
  - 項目B
  - 項目C

===== 説明リスト =====

__**説明リスト**__は、いくつかの単語を並べて、それらの意味を逐一説明するような書き方をするときに使用する。

例えば、以下のような説明的な書き方をする場合である。

  林檎
  
      丸くて赤い果物で、酸味と甘みがある。
  
  梨
  
      丸くて黄色い果物で、和梨・洋梨・中国梨がある。

まず、用語や名前があり、その下にインデントされて説明や定義がある。

説明リストは dl 要素で指定する。
開始タグは「''<dl>''」、終了タグは「''</dl>''」である。


dl 要素の中で用語や名前は dt 要素、その説明や定義は dd 要素で指定する。
開始タグは「''<dt>''」「''<dd>''」、終了タグは「''</dt>''」「''</dd>''」である。
ただし、終了タグ「''</dt>''」「''</dd>''」は省略できる。

具体的には以下のように記述する。

<code html>
<dl>
 <dt>林檎</dt>
 <dd><p>丸くて赤い果物で、酸味と甘みがある。</p></dd>
 <dt>梨</dt>
 <dd><p>丸くて黄色い果物で、和梨・洋梨・中国梨がある。</p></dd>
</dl>
</code>

===== リストのレベル =====

li 要素の中に ul 要素や ol 要素を入れることで下のレベルのリストにすることができる。

----

==== 例1 ====

<code html [highlight_lines_extra="1,3,6,9"]>
<ul>
 <li>項目A
     <ul>
      <li>項目A-1</li>
      <li>項目A-2</li>
     </ul>
  </li>
 <li>項目B</li>
</ul>
</code>

Firefox では以下のように表示される。

  * 項目A
    * 項目A-1
    * 項目A-2
  * 項目B

----



==== 例2 ====

<code html [highlight_lines_extra="1,3,6,9"]>
<ol>
 <li>項目A
     <ul>
      <li>項目A-1</li>
      <li>項目A-2</li>
     </ul>
 </li>
 <li>項目B</li>
</ol>
</code>

Firefox では以下のように表示される。

  - 項目A
    * 項目A-1
    * 項目A-2
  - 項目B
===== リストの例 =====

順序なしリストと順序付きリストを含む文書を作成してみよう。 

''~/public_html/'' に list.html という名前のファイルを作成する。

----
==== 1. HTMLの作成 ====

emacs で <key>C-x</key> <key>C-f</key> と連続してキー操作し、「''Find File:''」の次に「''~/public_html/list.html''」と入力して <key>Enter</key> を押す。

<box 80% #000 #fff|<fs medium><ff monospace>U:---------　*scratch*</ff></fs>><color #ffff><fs medium><ff monospace>　Find file: **~/public_html/list.html**</ff></fs></color></box>

ファイルを開いたら、そこに以下のように入力する（行番号は不要）。 

<file html list.html[enable_line_numbers="true"]>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Listing Sample</title>
</head>
<body>
<h1>果物</h1>
<ul>
 <li>林檎の品種
     <ol>
      <li>ふじ</li>
      <li>王林</li>
     </ol>
 </li>
 <li>梨の品種
     <ol>
      <li>幸水</li>
      <li>豊水</li>
     </ol>
 </li>
</ul>
</body>
</html>
</file>

----
==== 2. HTMLの保存 ====

emacs で <key>C-x</key> <key>C-s</key> と連続してキー操作し、ファイルを保存する。 

----

==== 3. Firefoxで確認 ====

保存したら Firefox のアドレスバーに次の URL を入力してファイルの内容が表示されるか確認してみよう。

  http://roy.e.koeki-u.ac.jp/~ユーザ名/list.html


===== 小テスト =====

[[KMS>|Moodle Server（非公式）]] で第10回の小テストを受験しなさい。

===== 表の要素 =====
一つの対象に対して複数の項目や観測値を持つ多次元データは__**表（テーブル）**__で表した方が分かりやすい。
HTML では表を入れるために table 要素を使用する。


^  要素    ^  タグ                       ^  意味                                                      ^  置ける場所   ^  writerとの対応  ^
| table    | ''%%<table>...</table>%%''      | 表の要素である。                                           | body 要素内   | 表               |
| caption  | ''%%<caption>...</caption>%%''  | 表にキャプションを付けるための要素である。                 | table 要素内  | キャプション     |
| tr       | ''%%<tr>...</tr>%%''            | table 要素の中で行を記述するための要素である。             | table 要素内  |                  |
| th       | ''%%<th>...</th>%%''            | tr 要素の中で表頭か表側のセルを記述するための要素である。  | tr 要素内     |                  |
| td       | ''%%<td>...</td>%%''            | tr 要素の中でセルを記述するための要素である。              | tr 要素内     |                  |

----
==== table要素の基本構成 ====

表の開始と終了は table 要素で指定する。
開始タグは「''<table>''」、終了タグは「''</table>''」である。

table 要素の中は以下のような基本構成になる。

<code html>
<table>
<tr><th>表頭1</th><th>表頭2</th>...</tr>
<tr><td>項目1-1</td><td>項目2-1</td>...</tr>
<tr><td>項目2-2</td><td>項目2-2</td>...</tr>
...
</table>
</code>

表の各行は tr 要素で指定する。
開始タグは「''<tr>''」、終了タグは「''</tr>''」である。
ただし、終了タグ「''</tr>''」は省略できる。

行内のセルは th 要素か td 要素で指定する。
**<fc #ff0000>th 要素は表頭か表側にのみ使用する。</fc>**
開始タグは「''<th>''」「''<td>''」、終了タグは「''</th>''」「''</td>''」である。
ただし、終了タグ「''</th>''」「''</td>''」は省略できる。

===== 表の例 =====

例えば、次のような表を作ってみよう。

| 佐藤錦        | 山形県  | ６月中旬から７月初旬  |
| ジュノハート  | 青森県  | ７月上旬から中旬      |

横にならんだ1行は「''<tr>''」「''</tr>''」で囲む。
1行の中は3つのセルがならんでおり、それぞれは「''<td>''」「''</td>''」で囲む。

例えば、1行目は次のようになる。
<code html>
<tr>
 <td>佐藤錦</td>
 <td>山形県</td>
 <td>６月中旬から７月初旬</td>
</tr>
</code>

分かりやすいように適宜改行をしている。
2行目も同じように作る。

最後に全ての要素を「''<table>''」「''</table>''」で囲む。

<code html>
<table>
 <tr>
  <td>佐藤錦</td>
  <td>山形県</td>
  <td>６月中旬から７月初旬</td>
 </tr>
 <tr>
  <td>ジュノハート</td>
  <td>青森県</td>
  <td>７月上旬から中旬</td>
 </tr>
</table>
</code>

以上のことを実際に HTML 文書で作成してみよう。

「''~/public_html/table.html''」に以下のように入力して保存する。

<file html table.html[enable_line_numbers="true"]>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Table Sample</title>
</head>
<body>
<h1>さくらんぼ</h1>
<table>
 <tr>
  <td>佐藤錦</td>
  <td>山形県</td>
  <td>６月中旬から７月初旬</td>
 </tr>
 <tr>
  <td>ジュノハート</td>
  <td>青森県</td>
  <td>７月上旬から中旬</td>
 </tr>
</table>
</body>
</html>
</file>

保存したら Firefox のアドレスバーに次の URL を入力してファイルの内容が表示されるか確認してみよう。

  http://roy.e.koeki-u.ac.jp/~ユーザ名/table.html


----
==== 枠線 ====

Firefox で table.html を実際に表示してみると、次のように表示されるはずである。

  佐藤錦	    山形県 ６月中旬から７月初旬
  ジュノハート 青森県 ７月上旬から中旬

table 要素では、指示しない限り枠線は表示されない。

枠線を表示するためには、__**スタイルシート**__を使用する。
スタイルシートについては、あとで詳しく説明する。

とりあえず、table.html で head 要素の中の title 要素の下に以下のように style 要素を挿入する（黄色の部分）。

<code html [highlight_lines_extra="4"]>
<head>
<meta charset="UTF-8">
<title>Table Sample</title>
<style>table, th, td {border: solid; border-collapse: collapse;}</style>
</head>
</code>

挿入したら Firefox のリロードボタンで再読込して枠線が引けているか確認する。

----
==== 表頭 ====

枠線を引いた表は次のようになる。

| 佐藤錦        | 山形県  | ６月中旬から７月初旬  |
| ジュノハート  | 青森県  | ７月上旬から中旬      |

しかし、このような表では、各列が何を意味するのか分からない。

通常、表の一番上の行には各項目の説明（見出し）を入れる。
これを__**表頭**__という。

^  品種         ^  産地   ^  収穫期               ^
| 佐藤錦        | 山形県  | ６月中旬から７月初旬  |
| ジュノハート  | 青森県  | ７月上旬から中旬      |

同様に表の一番左に入れる見出しは、__**表側**__という。

表頭や表側を入れるには th 要素を使用する。
th 要素のセルは表頭や表側とみなされる。

表頭を入れるには td 要素と同じように th 要素を使って table 要素の一番上の行に以下のように挿入する。
<code html [highlight_lines_extra="2,3,4,5,6"]>
<table>
 <tr>
  <th>品種</th>
  <th>産地</th>
  <th>収穫期</th>
 </tr>
 <tr>
  <td>佐藤錦</td>
  <td>山形県</td>
  <td>６月中旬から７月初旬</td>
 </tr>
 <tr>
  <td>ジュノハート</td>
  <td>青森県</td>
  <td>７月上旬から中旬</td>
 </tr>
</table>
</code>

挿入したら Firefox でリロードボタンをクリックして再読込して枠線が引けているか確認する。

----
==== キャプション ====

writer では図表にはキャプションを付けることができた。
HTML 文書で表にキャプションを付けるには caption 要素を使用する。

caption 要素は table 要素の中の一番最初に入れる。
開始タグは「''<caption>''」、終了タグは「''</caption>''」である。

キャプションを入れて完成した table.html は以下である。

<file html table.html[enable_line_numbers="true", highlight_lines_extra="11"]>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Table Sample</title>
<style>table, th, td {border: solid; border-collapse: collapse;}</style>
</head>
<body>
<h1>さくらんぼ</h1>
<table>
 <caption>さくらんぼ一覧</caption>
 <tr>
  <th>品種</th>
  <th>産地</th>
  <th>収穫期</th>
 </tr>
 <tr>
  <td>佐藤錦</td>
  <td>山形県</td>
  <td>６月中旬から７月初旬</td>
 </tr>
 <tr>
  <td>ジュノハート</td>
  <td>青森県</td>
  <td>７月上旬から中旬</td>
 </tr>
</table>
</body>
</html>
</file>
===== 課題 =====

timetable.html というファイル名で**<fc #ff0000>S2Q に自分が履修している授業の時間割</fc>**を table 要素を利用した HTML ファイルで作成しなさい。

作成例
{{ html_report2.png?nolink |時間割の作成例}}

table.html を参考にし、赤で書かれた指示に従うこと。

「''~/public_html/timetable.html''」というファイルは Firefox では以下の URL で見ることができる。

  http://roy.e.koeki-u.ac.jp/~ユーザ名/timetable.html

作成した HTML ファイルは[[KMS>|Moodle Server（非公式）]] の第10回の課題に提出すること。

  * 締め切り：2023年7月1日（土）20時
  * [[moodle:upload]]