====== 【情報リテラシー】第10回 HTML -Webページ作成2- ====== ===== リストの要素 ===== 同じような項目を並べる場合は__**リスト**__を使用するとよい。 HTML では順序なしリスト、順序付きリスト、説明リストという3種類のリスト要素がある。 ^ 要素 ^ タグ ^ 意味 ^ 置ける場所 ^ writerとの対応 ^ | ul | ''%%

...%%'' | 順序なしリストの要素である。 | body 要素内 | 箇条書き | | ol | ''%%

...%%'' | 順序付きリストの要素である。 | body 要素内 | 番号付きリスト | | li | ''%%

...

%%'' | ul 要素や li 要素の中で使う項目を記述するための要素である。 | ul 要素内\\ ol 要素内 | | | dl | ''%%

...%%'' | 説明リストの要素である。 | body 要素内 | | | dt | ''%%

...

%%'' | dl 要素の中で用語や名前を記述するための要素である。 | dl 要素内 | | | dd | ''%%

...

%%'' | dl 要素の中で説明や定義を記述するための要素である。 | dd 要素内 | | ===== 順序なしリスト ===== __**順序なしリスト**__ とは、行頭に「・」などの記号を入れて項目を表して並べたリスト、つまり__**箇条書き**__である。 HTML では順序なしリストの要素を使用すると自動的に箇条書きになる。順序なしリストは ul 要素で指定する。開始タグは「''

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

''」、終了タグは「''

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



 項目A
 項目B
 項目C

Firefox では以下のように表示される。 * 項目A * 項目B * 項目C ===== 順序付きリスト ===== __**順序付きリスト**__とは、行頭に数字などを入れて項目に番号を付けて並べたリスト、つまり__**番号付きリスト**__である。 HTML では順序付きリストの要素を使用すると自動的に連番が付けられて番号付きリストになる。順序付きリスト ol 要素で指定する。開始タグは「''

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

''」、終了タグは「''

''」である。ただし、終了タグ「''''」は省略できる。具体的には以下のように記述する。



 項目A
 項目B
 項目C

Firefox では以下のように表示される。 - 項目A - 項目B - 項目C ===== 説明リスト ===== __**説明リスト**__は、いくつかの単語を並べて、それらの意味を逐一説明するような書き方をするときに使用する。例えば、以下のような説明的な書き方をする場合である。林檎丸くて赤い果物で、酸味と甘みがある。梨丸くて黄色い果物で、和梨・洋梨・中国梨がある。まず、用語や名前があり、その下にインデントされて説明や定義がある。説明リストは dl 要素で指定する。開始タグは「''

''」、終了タグは「''''」である。 dl 要素の中で用語や名前は dt 要素、その説明や定義は dd 要素で指定する。開始タグは「''

''」「''

''」、終了タグは「''''」「''

''」である。ただし、終了タグ「''''」「''''」は省略できる。具体的には以下のように記述する。



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

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



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

Firefox では以下のように表示される。 * 項目A * 項目A-1 * 項目A-2 * 項目B ---- ==== 例2 ====



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

Firefox では以下のように表示される。 - 項目A * 項目A-1 * 項目A-2 - 項目B ===== リストの例 ===== 順序なしリストと順序付きリストを含む文書を作成してみよう。 ''~/public_html/'' に list.html という名前のファイルを作成する。 ---- ==== 1. HTMLの作成 ==== emacs で C-x C-f と連続してキー操作し、「''Find File:''」の次に「''~/public_html/list.html''」と入力して Enter を押す。 U:---------　*scratch*>　Find file: **~/public_html/list.html** ファイルを開いたら、そこに以下のように入力する（行番号は不要）。 Listing Sample

果物

林檎の品種
1. ふじ
2. 王林
梨の品種
1. 幸水
2. 豊水

---- ==== 2. HTMLの保存 ==== emacs で C-x C-s と連続してキー操作し、ファイルを保存する。 ---- ==== 3. Firefoxで確認 ==== 保存したら Firefox のアドレスバーに次の URL を入力してファイルの内容が表示されるか確認してみよう。 http://roy.e.koeki-u.ac.jp/~ユーザ名/list.html ===== 小テスト ===== [[KMS>|Moodle Server（非公式）]] で第10回の小テストを受験しなさい。 ===== 表の要素 ===== 一つの対象に対して複数の項目や観測値を持つ多次元データは__**表（テーブル）**__で表した方が分かりやすい。 HTML では表を入れるために table 要素を使用する。 ^ 要素 ^ タグ ^ 意味 ^ 置ける場所 ^ writerとの対応 ^ | table | ''%%...

%%'' | 表の要素である。 | body 要素内 | 表 | | caption | ''%%...%%'' | 表にキャプションを付けるための要素である。 | table 要素内 | キャプション | | tr | ''%%...%%'' | table 要素の中で行を記述するための要素である。 | table 要素内 | | | th | ''%%...%%'' | tr 要素の中で表頭か表側のセルを記述するための要素である。 | tr 要素内 | | | td | ''%%...%%'' | tr 要素の中でセルを記述するための要素である。 | tr 要素内 | | ---- ==== table要素の基本構成 ==== 表の開始と終了は table 要素で指定する。開始タグは「''''」、終了タグは「''

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


.........
...

表頭1 表頭2
項目1-1 項目2-1
項目2-2 項目2-2

表頭1	表頭2
項目1-1	項目2-1
項目2-2	項目2-2

表の各行は tr 要素で指定する。開始タグは「''''」、終了タグは「''''」である。ただし、終了タグ「''''」は省略できる。行内のセルは th 要素か td 要素で指定する。 **th 要素は表頭か表側にのみ使用する。** 開始タグは「''''」「''''」、終了タグは「''''」「''''」である。ただし、終了タグ「''''」「''''」は省略できる。 ===== 表の例 ===== 例えば、次のような表を作ってみよう。 | 佐藤錦 | 山形県 | ６月中旬から７月初旬 | | ジュノハート | 青森県 | ７月上旬から中旬 | 横にならんだ1行は「''''」「''''」で囲む。 1行の中は3つのセルがならんでおり、それぞれは「''''」「''''」で囲む。例えば、1行目は次のようになる。



 佐藤錦
 山形県
 ６月中旬から７月初旬

分かりやすいように適宜改行をしている。 2行目も同じように作る。最後に全ての要素を「''''」「''

''」で囲む。



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

以上のことを実際に HTML 文書で作成してみよう。「''~/public_html/table.html''」に以下のように入力して保存する。 Table Sample

さくらんぼ

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

保存したら Firefox のアドレスバーに次の URL を入力してファイルの内容が表示されるか確認してみよう。 http://roy.e.koeki-u.ac.jp/~ユーザ名/table.html ---- ==== 枠線 ==== Firefox で table.html を実際に表示してみると、次のように表示されるはずである。佐藤錦山形県６月中旬から７月初旬ジュノハート青森県７月上旬から中旬 table 要素では、指示しない限り枠線は表示されない。枠線を表示するためには、__**スタイルシート**__を使用する。スタイルシートについては、あとで詳しく説明する。とりあえず、table.html で head 要素の中の title 要素の下に以下のように style 要素を挿入する（黄色の部分）。




Table Sample



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

挿入したら Firefox でリロードボタンをクリックして再読込して枠線が引けているか確認する。 ---- ==== キャプション ==== writer では図表にはキャプションを付けることができた。 HTML 文書で表にキャプションを付けるには caption 要素を使用する。 caption 要素は table 要素の中の一番最初に入れる。開始タグは「''''」、終了タグは「''''」である。キャプションを入れて完成した table.html は以下である。 Table Sample

さくらんぼ

さくらんぼ一覧
品種	産地	収穫期
佐藤錦	山形県	６月中旬から７月初旬
ジュノハート	青森県	７月上旬から中旬

===== 課題 ===== timetable.html というファイル名で**S2Q に自分が履修している授業の時間割**を 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]]