roy > naoya > 情報リテラシーII > (1)HTML[1]-HTMLの基礎

(1) 09/30の授業内容:HTML[1]-HTMLの基礎

[1]HTMLって何だろう

今日から4回にわたってWebページを作成する。まずは関連用語を確認しよう。

WWW概念図

WWW
World Wide Web（世界中に張られた蜘蛛の巣）の略。Webサーバに保存された文書や画像、音声等を自分のパソコンに転送、表示するシステム。WebページはHTMLという言語を用いて書かれており、内部に他のページや画像、音楽へのハイパーリンクを埋め込むことで、インターネット上の様々なドキュメントを相互に参照できるようにしている。
Webページ
HTML言語を用いて書かれたテキスト形式のファイル（HTMLファイル）。文章だけでなく、画像や音声の埋め込みも可能。ホームページと呼ばれることもあるが、厳密にはホームページは表紙にあたるページ（トップページ）のみを指す。
HTML
Hyper Text Markup Languageの略。Webページを記述する際に使用する言語。HTML言語で書かれたファイルはHTMLファイルと呼び、拡張子に.html（もしくは.htm）をつける。
ブラウザ
HTML言語で記述された文書を解釈し、指定した形式で表示を行うソフトウェア。Microsoft Internet Explorer、FireFox、Opera等がある。
URL
Uniform Resource Locatorの略。データ転送を要求する際に指定するデータの格納場所。http://www.koeki-u.ac.jp/naoya/index.htmlなどと表記。

本学では、royがWebサーバの役割を担っている。royの公開用ディレクトリに作成したファイルを保存することで、自分のWebページを公開することができる。

[2]HTMLの基礎の基礎

授業で使用しているWebページは、図形が挿入されていたり文字の大きさや色が様々に利用されている。しかし、Webページは.html（もしくは.htm）という拡張子をつけた単なるテキストファイルであり、「ここに図形を挿入せよ」という命令や、「ここからここは見出しだ」という命令が書かれているに過ぎない。

このような命令はHTML言語を用いて記述されるため、WebページのことをHTMLファイルと呼ぶ場合もある。HTML言語は、文章の構造を<要素名>や</要素名>という形のタグと呼ばれる記号を使って記述する言語である。ここで、<要素名>を開始タグ、</要素名>を終了タグ、開始タグから終了タグで囲まれた範囲を要素という。タグの働きを概念的に示すと、次の通りとなる。

<見出し>授業の進め方</見出し>

<段落>今日からWebページを作成します。<重要>欠席しないように</重要>しよう。</段落>

文章を見出しや段落などのタグを用いて囲うことで、文章の構造を示している。

  • <見出し>授業の進め方</見出し>：「授業の進め方」が見出しであることをあらわす
  • <重要>欠席しないように</重要>：「欠席しないように」が重要である（強調している）ことをあらわす
  • <段落>今日からWebページを作成します。<重要>欠席しないように</重要>しよう。</段落>：<段落>〜</段落>が本文の1つの段落であることをあらわす。

開始タグと終了タグで文章を挟み込むことで、その文章の構造を示すことができる。実際には「見出し」や「段落」という名称でなく、次のようなタグを使用する。

  • <h1></h1>：第1階層の見出し
  • <h2></h2>：第2階層の見出し
  • <h3></h3>：第3階層の見出し
  • <p></p>：段落
  • <ul></ul>：番号なし箇条書き
  • <ol></ol>：番号つき箇条書き
  • <li></li>：箇条書きの中の1項目

非推奨要素

かつて（HTMLの旧バージョンであるHTML3.2の頃）は、見栄えを規定する<拡大>〜</拡大>、<中央揃え>〜</中央揃え>、<赤色>〜</赤色>などの要素（タグ）があり多用されていたが、現行バージョン（HTML4.01）では非推奨要素とされ、原則として使用することができなくなっている。HTMLはあくまでも文章の構造を示すものであり、文字のサイズや色などの見栄えの設定はCSS（カスケーディング・スタイル・シート）を使用する。HTMLとCSSを組み合わせて使用することで多彩なデザインのページを作成することができる。CSSについては3回目の授業で取り上げる。

[3]HTMLファイルの基本構造

まずは次のハイパーリンクをクリックして、リンク先のページを見てみよう。

自己紹介のページ

このファイルは実際には以下のようにHTML言語で書かれている。<>で囲まれたタグが多数使用されていることがわかる。ブラウザで閲覧する際にタグが解釈され、上のハイパーリンク先のページのように表示される。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>自己紹介ページ</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>



<body>

<h1>公益太郎のページへようこそ</h1>

<p><img src="yomogi.jpg" width="480" height="640" 
alt="好きな猫のぬいぐるみ"></p>

<h2>メニュー</h2>

<p><a href="introduction.html">自己紹介</a></p>
<p><a href="timetable.html">時間割</a></p>

<h2>リンク</h2>
<ul>
<li><a href="http://www.koeki-u.ac.jp">東北公益文科大学</a></li>
<li><a href="http://www.yahoo.co.jp">Yahoo! JAPAN</a></li>
</ul>

<address>naoya＠g.koeki-u.ac.jp（迷惑メール対策のため＠は
全角になっています））</address>

</body>
</html>

以下に、HTMLファイルを作成する際の最低限のルールを記す。

HTMLファイル作成時のルール

  1. 1行目には必ずDOCTYPE宣言を書く（使用するHTMLのバージョンを宣言する）
  2. DOCTYPE宣言の次には必ず<html>を書き、最後は</html>で終わる
  3. <html>の下には、<head></head>が続く。この間には、ページのタイトルや文字コードなどのページ情報を記載する。この部分はブラウザでは表示されない。なお<title></title>の間に書いたものが、そのページのタイトルとなる
  4. その後<body></body>が来る。この間に本文を記載する。この部分のみブラウザで表示される

[4]Webサーバへのファイルの格納方法

作成したHTMLファイルはWebサーバ内のpublic_htmlという外部公開用のディレクトリ（フォルダ）に格納しておくと、ブラウザ経由で閲覧をすることができるようになる。本学ではroyがWebサーバを担っているので、royのpublic_htmlディレクトリにデータを保存すればよい。

Webサーバへのファイルの格納方法は一般的に次の2種類がある。

  1. 自分のパソコンでファイルを作成・保存し、Webサーバにファイルを転送する
  2. Webサーバにログインし、Webサーバ内で直接ファイルを作成・保存する

授業では2番の方法を用いる。授業中に使用しているTeraTermは遠隔地にあるコンピュータに接続するソフトである。これを用いてWebサーバであるroyに接続して、直接ファイルを作成・保存する。

[5]HTMLファイルを作成する

HTMLファイルの実体は単なるテキスト形式のファイルである。通常テキスト形式のファイルは拡張子が.txtとなるが、これを.htmlに変更しただけである。このためHTMLファイルを作成するために特別なソフトは不要である。テキストファイルを作成するメモ帳やemacsなどのテキストエディタを使用して作成することができる。

授業の中ではTeraTermを用いてWebサーバのroyに接続後、emacsを使ってHTMLファイルを作成し、public_htmlディレクトリの中に直接保存する。自宅で作成する場合は、Webサーバーの中に直接保存することは出来ないので、メモ帳等で作成し、ファイル転送ソフト（FTPソフトという）を使ってWebサーバーのpublic_htmlに転送する。

[6]本日の作業

本日は、先ほど確認した架空の自己紹介のページを参考にしながら、自分の自己紹介のページを作成してみる。順番に作業を進めるので、方法をマスターしよう。

  1. public_html内にindex.htmlという名称のファイルを新規作成する
  2. sample.htmlの記載内容を作成したindex.htmlに貼りつける
  3. ブラウザで結果を確認する
  4. 記載事項を変更、保存し、再度ブラウザで確認する
  5. introduction.htmlの記載内容を変更する

public_html内へのindex.htmlの新規作成

  • TeraTermでroyに接続
  • emacs -nw[Enter]でemacsを起動
  • Ctrl+x Ctrl+fと入力（ファイルの新規作成・既存ファイルを開くの両方を行うコマンド）
  • ミニバッファにFind File:~/と表示されるので、Find File:~/public_html/ファイル名[Enter]と入力。ファイル名の部分は新規作成したいファイル名もしくは開きたいファイル名。拡張子の.htmlを忘れずに
  • 保存のコマンドはCtrl+x Ctrl+s。こまめに保存しよう

sample.htmlの記載内容の貼りつけ（emacsへの貼りつけ）

先ほど確認した架空の自己紹介のページはsample.htmlというファイル名である。このファイルの記載内容を丸ごと複写し、記載事項を修正していくことにする。ここではまずsample.htmlの内容をすべてコピーし、index.htmlに貼りつける。

  • sample.htmlを表示した状態で、[表示]→[ページのソース]を選択する。するとブラウザが解読する前のHTML言語で書かれたドキュメントが表示される
  • ドキュメント全体選択してコピーする。コピー方法は右クリックでコピーを選んでも良いし、キーボードからCtrl+cとしても良い
  • emacsで貼り付け先へ移動したら、マウスの右クリックで貼り付け完了

ブラウザでの結果確認

一般的な方法

保存をすればすでにブラウザで閲覧できる状態になっているので、Firefoxを起動して次のURLを入力し、結果を確認する。

http://roy.e.koeki-u.ac.jp/~学籍番号（CDなし）/ファイル名

  • /~学籍番号（CDなし）/には自分の学籍番号を書く。c110001aの場合は/~c110001/となる。cは小文字、最後の1ケタ（チェックディジット）は除去する
  • ファイル名の部分は作成したファイルの名称を拡張子を含めて記載する（例：index.html）
  • public.html内にディレクトリ（フォルダ）を作成し、その中にファイルを保存した場合は、URLが異なる
    • public_html内にhogeディレクトリを作成し、その中にpiyo.htmlを作成した場合：http://roy.e.koeki-u.ac.jp/~学籍番号/hoge/piyo.html
    • public_html内にhogeディレクトリを作成し、その中にpiyoディレクトリを作成し、その中にfoo.htmlを作成した場合：http://roy.e.koeki-u.ac.jp/~学籍番号/hoge/piyo/foo.html

URL指定の特例

これから複数のHTMLファイルを作成するが、そのうち表紙のページ（ホームページ）にあたるファイルはindex.html（またはindex.htm）と命名するのが慣例となっている。

このため、http://roy.e.koeki-u.ac.jp/~学籍番号（CDなし）/というようにファイル名を指定しなかった場合は、ホームページを指定したものとして、自動的にindex.htmlが表示されるようになっている。なお、index.htmlとindex.htmの2つのファイルが存在する場合は、index.htmlが優先的に表示される。

記載事項の変更・保存、ブラウザでの確認

emacsで記載事項を変更後、Ctrl+x Ctrl+sで保存をする。その後、Firefoxで再読み込みボタンを押すと、内容が更新されていることが確認できる。

記載事項を修正し、自分自身の紹介に変更してみよう。

なお、今回は<body></body>内の<要素>〜</要素>の間の文章のみ変更する。タグの働きは次回説明するので、タグ自体は消さないように注意すること。消してしまうと正しく表示されなくなる。。

introduction.htmlの記載内容の変更

introduction.htmlとは、先ほど作成したindex.htmlからハイパーリンクが貼られている自己紹介のページのことである。現在は作成していないため、ハイパーリンクをクリックしても「File Not Found」と表示されてしまう。ファイルを作成することで、正しく表示させることができる。

このファイルについても、emacsでpublic_html内にintroduction.htmlを作成し、ページのソースを貼りつけ、保存することで正しく表示されるようになる。Webページの記載例を貼りつけた上で、適宜内容を修正してみよう。

[7]出席課題

進捗状況をメールで報告する。作成したページは授業用ページにハイパーリンクを設置し、誰でも自由に見ることができるようにする。見られても恥ずかしくない内容にしておこう。

  1. 提出先：課題提出用メールアドレス
  2. メールの件名（Subject）：literacy1
  3. 提出期限：授業終了時
  4. 電子メールの使い方に自信がない場合：Mewの主要コマンドについてを確認しよう

来週はindex.htmlおよびintroduction.htmlの2ページに写真を追加する。掲載したい写真（2枚以上）を来週の授業開始前までに大学の自分のメールアドレスに送っておくこと。

[8]課題1：HTML課題

本日よりHTMLの授業を4週にわたって行うが、その中でHTML課題を実施する。今週を含めて3回で基本的な作成方法を学び、4回目は作業時間とする。11/4の授業開始時点までに作成しているWebページを評価対象とする。

最低限作成して欲しいものは以下の通り。[]内の回数は、実施する授業の回数の目安である。

課題1

  • ホームページにあたるindex.htmlを作成する[1回目]
  • introduction.htmlを作成し自己紹介を行う[1回目]
  • index.htmlやintroduction.htmlに自分の好きな画像を貼りつける[2回目]
  • timetable.htmlに自分の時間割を記載する[2回目]
  • カスケーディングスタイルシート（CSS）を用いて、index.html、introduction.html、timetable.htmlの3つのページにデザインを付加する[3回目]

全部で5項目あるが、これらを順番に実施していき、提出日までに完成させる。HTMLの授業の最終回は講義は行わず、未実施の作業の実施の時間に充てる。なお、上記は最低限行ってほしい作業であり、余力がある場合や興味がある場合は、さらに別のページを作成しても良い。