【情報リテラシー】第9回 HTML -Webページ作成1-
URLと通信プロトコル
Firefox などの Web ブラウザで Web ページにアクセスすると、アドレスバーに以下のように表示される。
URL（Uniform Resource Locator） とは、インターネット上で Web ページなどの場所を示す住所である。
URL は以下のように「/」でいくつかの部分に分けられる。
普段よく目にする URL はスキーム名が「http」か「https」のものである。
HTTP
スキーム名「http」は HTTP（Hypertext Transfer Protocol）というプロトコルを使うことを意味している。 Web ブラウザがサーバとメッセージやデータをやりとりする際に使用する通信プロトコル（通信のための手順）の一つである。
HTTP ではメッセージを平文1)のままで送受信するため、通信内容が容易に盗み見されたり改ざんされたりする。 このため、パスワードやクレジットカードの番号など、他人に見られてはいけないメッセージを HTTP で送るのは危険である。
HTTPS
スキーム名「https」は HTTPS（Hypertext Transfer Protocol Secure） というプロトコルを使うことを意味している。 HTTPS では SSL/TLSプロトコルを用いてHTTP の暗号化やサーバの認証を行う。 通信内容が盗み見されても暗号化されているので安全2)である。
HTTPS で通信が暗号化されていても、そのサーバが信頼できるかは別問題である。 HTTPS では、信頼できる認証局によって発行されたサーバ証明書によってサーバの場所と運営者の信頼性を担保する仕組みがある。 これは、Web ブラウザのアドレスバーに表示される鍵マークによって確認できる。 パスワードやクレジットカードの番号などを入力する際は、ちゃんと鍵マークがついているか確認した方がよい。
Web ブラウザによって登録されている認証局は異なる。 例えば、Firefox では以下の認証局が登録されている。
あまり有名でない認証局だと Web ブラウザによっては登録されていない可能性がある。
Webページ作成の準備
自分用の Web ページを作成する。
大学のサーバ roy で公開される自分用の Web ページは
http://roy.e.koeki-u.ac.jp/~ユーザ名/
という URL になる。
「ユーザ名」は自分のユーザ名で置き換える。
「ユーザ名」の前に「~」（チルダ）があるので忘れないこと。
この 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の作成
HTML ファイルの作成は emacs で行う。
emacs で Ctrl+X Ctrl+F と連続してキー操作し、「Find File:」の次に「~/public_html/index.html」と入力して Enter を押す。
U:——— *scratch*
ファイルを開いたら、そこに以下のように入力する（行番号は不要）。 [氏名]には自分の氏名を入れよう。 ただし、2行目の最初には半角のスペースを5個入れること。
- index.html
- [氏名]のホームページ
- ゆっくりしていってね！
emacs では日本語入力は Ctrl+O で切り替えて使う。
2. HTMLの保存
emacs で Ctrl+X Ctrl+S と連続してキー操作し、ファイルを保存する。
3. Firefoxで確認
HTML の確認は Firefox で行う。
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 の内容が表示されるようになっている。
小テスト
Moodle Server（非公式） で第9回の小テストを受験しなさい。
HTML文書の例
先ほど作成した index.html を Firefox で表示させると、入力した通りの文章とは少し異なったものになる。
- 改行されない。
- 空白が5個も表示されない。
Firefox で意図したように表示させるには HTML 文書の書き方に従わなくてはならない。
次に、index.html を以下のように書き換えよう。
入力したら emacs で Ctrl+X Ctrl+S とキー操作してプログラムを保存し、Firefox で確認する。 Firefox で以前の Web ページを表示している場合は、リロードボタンをクリックして再読込すればよい。
HTMLの基礎知識
HTML とは HyperText Markup Language の略である。
拡張子が .html（もしくは .htm）のファイルをHTML ファイルといい、その中に書く文書をHTML 文書という。 HTML 文書はただの文書ではなく、様々なタグを埋め込むことで Web ブラウザに対して視覚表現や文書構造を指示することができる。
HTML は文書の論理構造を指示するための言語である。 このようなことができる言語を一般的にマークアップ言語3)という。
DOCTYPE宣言
HTML 文書の一番最初に書くのが DOCTYPE 宣言である。
<!DOCTYPE html>
これは HTML の仕様を宣言するもので、とりあえず書いておくとよい。
タグと要素
HTML ファイルの中には「<」と「>」で囲まれた部分がたくさんある。
- 「
<」と「>」で囲まれた中の単語をタグ名といい、「<タグ名>」もしくは「</タグ名>」をタグという。 - 「
<タグ名>」を開始タグ、「</タグ名>」を終了タグという。 - 同じタグ名の開始タグから終了タグまでを要素（エレメント）という。タグは要素の開始と終了を区切るために使用される。
- 同じタグ名の開始タグから終了タグではさまれた部分をコンテンツという。
- 開始タグには空白で区切って複数の属性を入れることができる。
- 開始タグだけで終了タグのない要素を空要素という。
タグ名では大文字と小文字は区別されないが、同じ HTML 文書内ではどちらかに統一した方がよい。
開始タグと終了タグの間は改行してもしなくても Web ブラウザの表示で違いはない（pre 要素を除く）。 HTML 文書が見やすいように適宜改行して構わない。
要素の中にはさらに要素を入れ子にすることができる。 上の index.html の例でいうと、html 要素の中には head 要素や body 要素があり、さらに head 要素の中には meta 要素や title 要素がある。
html要素
├── head要素
│ ├── meta要素
│ └── title要素 "My Home Page"
└── body要素
├── h1要素 "[氏名]のホームページ"
└── p要素 "ゆっくりしていってね！"
要素
| 要素 | タグ | 意味 | 置ける場所 | 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 要素の中は、最初に head 要素、その次に body 要素の順番で構成される（ことが期待される）。
日本語の文書の場合には、開始タグに「lang="ja"」という属性をつけておくとよい。
<html lang="ja">
head要素
head 要素は HTML 文書のメタデータを含む要素である。 メタデータとはデータを説明するためのデータという意味である。
meta要素
meta 要素にはメタデータを属性として記述する。
meta 要素は head 要素内に置くことができる。
<meta charset="UTF-8">
これは属性 charset を使って、この HTML 文書の文字エンコーディングを UTF-8 に指定するということを意味する。 日本語の文書の場合は、とりあえずこれを書いておくとよい。
title要素
title 要素には HTML 文書のタイトル（表題）を記述する。 Web ブラウザでは、タイトルは本文中には表示されず、ウインドウの上方のタイトルバーに表示される。
title 要素は head 要素内に1つだけ置くことができる。
論文等の参考文献に載せる Web ページのタイトルにはこの title 要素のコンテンツを記述するので、title 要素がきちんと書いてないと困る。
body要素
body 要素には HTML 文書の本文を記述する。
見出しの要素（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 ページを作成しなさい。
本日の講義で作成した index.html を参考にし、上の画像の赤で書かれた指示に従うこと。
「~/public_html/hometown.html」というファイルは Firefox では以下の URL で見ることができる。
http://roy.e.koeki-u.ac.jp/~ユーザ名/hometown.html
作成した HTML ファイルはMoodle Server（非公式） の第9回の課題に提出すること。
締め切り：2023年6月24日（土）20時