講義（山本裕樹）

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

===== URLと通信プロトコル =====

Firefox などの Web ブラウザで Web ページにアクセスすると、アドレスバーに以下のように表示される。

{{ firefox_addressbar.png?nolink |アドレスバー}}


__**URL（Uniform Resource Locator）**__ とは、インターネット上で Web ページなどの場所を示す住所である。

URL は以下のように「''/''」でいくつかの部分に分けられる。

{{ html_url.png?nolink |URL}}

普段よく目にする URL はスキーム名が「http」か「https」のものである。

----
==== HTTP ====

スキーム名「http」は __**HTTP（Hypertext Transfer Protocol）**__というプロトコルを使うことを意味している。
Web ブラウザがサーバとメッセージやデータをやりとりする際に使用する通信プロトコル（通信のための手順）の一つである。

HTTP ではメッセージを平文((「ひらぶん」と読む。暗号化されておらず普通に読める文章のことを言う。))のままで送受信するため、通信内容が容易に盗み見されたり改ざんされたりする。
このため、パスワードやクレジットカードの番号など、他人に見られてはいけないメッセージを HTTP で送るのは危険である。

----
==== HTTPS ====

スキーム名「https」は __**HTTPS（Hypertext Transfer Protocol Secure）**__ というプロトコルを使うことを意味している。
HTTPS では SSL/TLSプロトコルを用いて__**HTTP の暗号化**__や__**サーバの認証**__を行う。
通信内容が盗み見されても暗号化されているので安全((盗み見されて復号される可能性はゼロではない。))である。

HTTPS で通信が暗号化されていても、そのサーバが信頼できるかは別問題である。
HTTPS では、信頼できる__**認証局**__によって発行された__**サーバ証明書**__によってサーバの場所と運営者の信頼性を担保する仕組みがある。
これは、Web ブラウザのアドレスバーに表示される__**鍵マーク**__によって確認できる。
パスワードやクレジットカードの番号などを入力する際は、ちゃんと鍵マークがついているか確認した方がよい。

Web ブラウザによって登録されている認証局は異なる。
例えば、Firefox では以下の認証局が登録されている。

  * https://curl.haxx.se/ca/cacert.pem

あまり有名でない認証局だと Web ブラウザによっては登録されていない可能性がある。


{{ http_https.png?nolink |HTTPとHTTPSの違い}}

===== Webページ作成の準備 =====

自分用の Web ページを作成する。

大学のサーバ roy で公開される自分用の Web ページは

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

という URL になる。
「ユーザ名」は自分のユーザ名で置き換える。
**<fc #ff0000>「ユーザ名」の前に「''~''」（チルダ）があるので忘れないこと。</fc>**

この URL は学内の環境からしかアクセスできないようになっている。

自分の書いたファイルをこの URL にアクセスして読んでもらえるようにするには、ホームディレクトリにある public_html というディレクトリの中に見せたいファイルを置かなければならない（ディレクトリはすでに作られているはず）。
ホームディレクトリは「''~/''」、ホームディレクトリにある public_html というディレクトリは「''~/public_html/''」で表す。

「''~/public_html/''」に作ったファイルは

  http://roy.e.koeki-u.ac.jp/~ユーザ名/ファイル名

という URL でアクセスできる。

さらに、「''~/public_html/image/''」というディレクトリを作り、その中にファイルを置いた場合は

  http://roy.e.koeki-u.ac.jp/~ユーザ名/image/ファイル名

という URL でアクセスできる。 

===== 入り口のWebページ作成 =====

まずは入り口となる Web ページを作ろう。

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

拡張子が .html （もしくは .htm）のファイルを __**HTML ファイル**__という。

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

**<fc #ff0000>HTML ファイルの作成は emacs で行う。</fc>**

emacs で <key>C-x</key> <key>C-f</key> と連続してキー操作し、「''Find File:''」の次に「''~/public_html/index.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/index.html**</ff></fs></color></box>

ファイルを開いたら、そこに以下のように入力する（行番号は不要）。
[氏名]には自分の氏名を入れよう。
ただし、2行目の最初には半角のスペースを5個入れること。

<file html index.html[enable_line_numbers="true"]>
[氏名]のホームページ
     ゆっくりしていってね！
</file>

emacs では日本語入力は <key>C-o</key> で切り替えて使う。

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

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

----

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

**<fc #ff0000>HTML の確認は Firefox で行う。</fc>**

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

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

また、index.html という名前のファイルは特別な意味を持つ。
以下の URL でも index.html にアクセスできる。

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

URL にファイル名を書かない場合は、自動的に index.html の内容が表示されるようになっている。

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

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



===== HTML文書の例 =====
先ほど作成した index.html を Firefox で表示させると、入力した通りの文章とは少し異なったものになる。
  * 改行されない。
  * 空白が5個も表示されない。

Firefox で意図したように表示させるには HTML 文書の書き方に従わなくてはならない。

次に、index.html を以下のように書き換えよう。

<file html index.html[enable_line_numbers="true"]>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>My Home Page</title>
</head>
<body>
<h1>[氏名]のホームページ</h1>
<p>ゆっくりしていってね！</p>
</body>
</html>
</file>

入力したら emacs で <key>C-x</key> <key>C-s</key> とキー操作してプログラムを保存し、Firefox で確認する。
Firefox で以前の Web ページを表示している場合は、リロードボタンをクリックして再読込すればよい。

===== HTMLの基礎知識 =====

HTML とは HyperText Markup Language の略である。

拡張子が .html（もしくは .htm）のファイルを__**HTML ファイル**__といい、その中に書く文書を__**HTML 文書**__という。
HTML 文書はただの文書ではなく、様々なタグを埋め込むことで Web ブラウザに対して視覚表現や文書構造を指示することができる。

HTML は文書の論理構造を指示するための言語である。
このようなことができる言語を一般的に__**マークアップ言語**__((最近は、マークアップ言語を簡単に使いやすくした__**マークダウン言語**__というのもある。))という。

----
==== DOCTYPE宣言 ====

HTML 文書の一番最初に書くのが DOCTYPE 宣言である。

<code html>
<!DOCTYPE html>
</code>

これは HTML の仕様を宣言するもので、とりあえず書いておくとよい。

----
==== タグと要素 ====

HTML ファイルの中には「''<''」と「''>''」で囲まれた部分がたくさんある。

  * 「''<''」と「''>''」で囲まれた中の単語を__**タグ名**__といい、「''<タグ名>''」もしくは「''</タグ名>''」を__**タグ**__という。
  * 「''<タグ名>''」を__**開始タグ**__、「''</タグ名>''」を__**終了タグ**__という。
  * 同じタグ名の開始タグから終了タグまでを__**要素（エレメント）**__という。タグは要素の開始と終了を区切るために使用される。
  * 同じタグ名の開始タグから終了タグではさまれた部分を__**コンテンツ**__という。
  * 開始タグには空白で区切って複数の__**属性**__を入れることができる。
  * 開始タグだけで終了タグのない要素を__**空要素**__という。

{{ html_element.png?nolink |要素}}

タグ名では大文字と小文字は区別されないが、同じ HTML 文書内ではどちらかに統一した方がよい。

開始タグと終了タグの間は改行してもしなくても Web ブラウザの表示で違いはない（pre 要素を除く）。
HTML 文書が見やすいように適宜改行して構わない。

要素の中にはさらに要素を入れ子にすることができる。
上の index.html の例でいうと、html 要素の中には head 要素や body 要素があり、さらに head 要素の中には meta 要素や title 要素がある。

<code>
html要素
├── head要素
│   ├── meta要素
│   └── title要素 "My Home Page"
└── body要素
    ├── h1要素 "[氏名]のホームページ"
    └── p要素  "ゆっくりしていってね！"
</code>
===== 要素 =====

^  要素  ^  タグ                       ^  意味                                                               ^  置ける場所  ^  writerとの対応  ^
| html   | ''%%<html>...</html>%%''    | HTML 文書そのものの要素である。                                     |              |                  |
| head   | ''%%<head>...</head>%%''    | HTML 文書のヘッダ情報の要素である。                                 | html 要素内  |                  |
| meta   | ''%%<meta>%%''              | メタデータを属性に記述する要素である。終了タグのない空要素である。  | head 要素内  |                  |
| title  | ''%%<title>...</title>%%''  | HTML 文書のタイトル（表題）を示す要素である。                       | head 要素内  | タイトル、表題   |
| body   | ''%%<body>...</body>%%''    | HTML 文書の本文となる要素である。                                   | html 要素内  | 本文             |
| h1     | ''%%<h1>...</h1>%%''        | もっとも大きな「見出し」を定義する。                                | body 要素内  | 見出し1          |
| p      | ''%%<p>...</p>%%''          | 段落を示す要素である。                                              | body 要素内  | 段落             |

----
==== html要素 ====

HTML 文書の先頭部分にある開始タグ「''<html>''」は「ここから HTML 文書が始まる」ことを意味し、末尾にある終了タグ「''</html>''」は「HTML 文書はここまで」ということを意味する。

どのような HTML 文書も一つの html 要素で作られる。

html 要素の中は、**<fc #ff0000>最初に head 要素、その次に body 要素の順番</fc>**で構成される（ことが期待される）。

日本語の文書の場合には、開始タグに「''%%lang="ja"%%''」という属性をつけておくとよい。
<code html>
<html lang="ja">
</code>

----

==== head要素 ====

head 要素は HTML 文書のメタデータを含む要素である。
__**メタデータ**__とはデータを説明するためのデータという意味である。

----

==== meta要素 ====

meta 要素にはメタデータを属性として記述する。


meta 要素は head 要素内に置くことができる。

<code html>
<meta charset="UTF-8">
</code>
これは属性 charset を使って、この HTML 文書の文字エンコーディングを UTF-8 に指定するということを意味する。
日本語の文書の場合は、とりあえずこれを書いておくとよい。

----

==== title要素 =====

title 要素には HTML 文書のタイトル（表題）を記述する。
Web ブラウザでは、タイトルは本文中には表示されず、ウインドウの上方のタイトルバーに表示される。

title 要素は head 要素内に**<fc #ff0000>1つだけ</fc>**置くことができる。

論文等の参考文献に載せる Web ページのタイトルにはこの title 要素のコンテンツを記述するので、title 要素がきちんと書いてないと困る。

----

==== body要素 ====

body 要素には HTML 文書の**<fc #ff0000>本文</fc>**を記述する。


----

==== 見出しの要素（h1要素からh6要素） ====

見出しの要素は h1 要素から h6 要素まで6段階のレベルがある。

見出し要素は body 要素内に置くことができる。

どのような HTML 文書でも必ず1つの h1 要素を持つべきである。 
さらに、分かりやすい文書にするためには、見出しでトピックを区切って書くとよい。
h1 の下のレベルの見出しに h2、h2 の下のレベルの見出しに h3 を使うようにする。
h1 要素が「章」、h2 要素が「節」、h3 要素が「小節」のように対応していると思えばよい。

Writer のように章節番号を自動でつけることはできないが、フォントの種類や飾りなどはある程度変えることができる。

----
==== p要素 ====
p 要素は段落を示す要素（パラグラフ要素）である。

p 要素は body 要素内に置くことができる。

「''<p>''」「''</p>''」ではさむことで、どこからどこまでが段落かがすぐに分かるようになる。
「''</p>''」では自動的に改行される。

HTML 文書で改行していても、Web ブラウザの表示では改行とみなされないのが一般的である。
改行とみなしてもらうための br 要素「''<br>''」というのもあるが、p 要素を使った方が明示的に段落として扱えるので、通常の文章では p 要素を使うのがよい。

===== 課題 =====
hometown.html というファイル名で以下のように自分の出身地を紹介する Web ページを作成しなさい。

{{ html_report1.png?nolink |課題のイメージ}}

本日の講義で作成した index.html を参考にし、上の画像の赤で書かれた指示に従うこと。

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

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

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

[[moodle:upload]]

締め切り：2023年6月24日（土）20時