roy > naoya > 情報リテラシーII > (4)HTML[1]

(4) 10/23の授業内容:HTML[1]-HTMLの基礎

注意

本日は作業内容が多いため、冒頭のtrrの時間は省略します。

HTMLって何だろう

今回から5回にわたってWebページを作成する。まずは関連する用語について確認しておこう。

Webページ: HTML言語で書かれたテキスト形式のファイル（htmlファイル）。一般にはホームページと呼ばれるが、厳密にはホームページは表紙にあたるページ（トップページ）のみを指す。
HTML: Hyper Text Markup Languageの略。Webページを記述する際に使用する言語。HTML言語で書かれたファイルはhtmlファイルと呼び、拡張子に.html（もしくは.htm）をつける。
ブラウザ: HTML言語で記述された文書を解釈し、指定した形式で表示を行うソフト。Microsoft Internet Explorer、Netscape Navigator、FireFox、Opera、Safari、w3m、lynx等々がある。基本的には無料。
URL: Uniform Resource Locatorの略。各Webページの住所にあたるもの。例えばhttp://www.koeki-u.ac.jp/naoya/index.htmlなどと表記する。これはkoeki-u.ac.jpのWWWという名前のコンピュータのnaoyaというディレクトリの中にあるindex.htmlという名前のファイルという意味。URI（Uniform Resource Identifier）と呼ぶこともある。
WWW: インターネット上で情報検索を行うサービスのひとつ。World Wide Web（世界中に張られた蜘蛛の巣）の略。Webページ同士をハイパーリンクで関連づけ、インターネット上のリソースを相互に参照できるようにしたシステム

準備

Webページを表示させるためのルール

自分の学籍番号がc105678であると仮定する。自分用のホームページは

http://roy.e.koeki-u.ac.jp/~c105678/

というURLになる。今はまだ何も作成していないため、このURLをブラウザに入力しても何も表示されない。

Webページを表示させるためには、まずhtmlファイルを作成する。そして、作成したファイルは、royというコンピュータ（Webサーバーと呼ぶ）のpublic_htmlというディレクトリ（フォルダ）に保存する必要がある。大学でWebページを公開する場合に限らず、自宅で契約しているプロバイダでWebページを公開する場合もWebサーバーのpublic_html内にファイルを置いておく必要がある。

例えばabc.htmlというファイルを作成し、public_html/というディレクトリ内においておけば

http://roy.e.koeki-u.ac.jp/~c105678/abc.html

で内容を表示させることができる。

Webページを表示させるためには

作成したファイルはpublic_html内に保存する（[1]Webサーバーにアクセスしてサーバー内でファイルを作成し、public_html内に直接保存しても良いし、[2]他のコンピュータで作成してから転送しても良い）。
大学でWebページを公開する場合は[1]、自宅で契約しているプロバイダでWebページを公開する場合は[2]の方法を用いる。[2]の場合にはファイル転送用のFTPソフトが必要。
public_htmlの中にさらにディレクトリ（フォルダ）を作成し、その中にファイルを保存しても良い。

public_htmlの中にabc.htmlを置いた場合
http://roy.e.koeki-u.ac.jp/~学籍番号/abc.html　で表示される
public_htmlの中にreportというディレクトリ（フォルダ）を作り、その中にdef.htmlを置いた場合
http://roy.e.koeki-u.ac.jp/~学籍番号/report/abc.html　で表示される

public_htmlの作成（本日1回だけ行う作業）

まずroyに接続し、下記の手順でpublic_htmlというディレクトリを作成しよう。

roy{学籍番号}% mkdir public_html[Enter]

mkdirはmake directoryの略で、mkdir public_htmlでpublic_htmlという名称のディレクトリを作成せよという命令となる。正しくディレクトリが作成されたかを確認するために

roy{学籍番号}%ls[Enter]

と続けて入力してみよう。lsはlistの略で、ディレクトリやファイルの一覧を表示させるコマンドである。一覧の中にpublic_html/があれば、正しく作成できている（UNIXではディレクトリは最後にスラッシュがつく）。

なお、public_htmlの中に置くファイルのうち、index.htmlもしくはindex.htmという名前のファイルだけは特別な意味を持つ。通常は、

http://roy.e.koeki-u.ac.jp/~c105678/abc.html

というように、ファイルの名称を指定しなければ、該当するファイルを表示させることはできない。ただし、index.htmlもしくはindex.htmという名前のファイルをpublic_htmlの中に作成しておくと

http://roy.e.koeki-u.ac.jp/~c105678/

のみ、すなわちディレクトリの名前を書くだけで表示される。これらのファイルは一般的に表紙にあたるページとして利用されるためである。index.htmlとindex.htmの2つのファイルが存在する場合は、index.htmlが優先的に表示される。

public_htmlの作成

royに接続後、mkdirコマンドで作成する。
mkdir　作成するディレクトリ名[Enter]で指定したディレクトリが新規作成される。
ls[Enter]でそのディレクトリやファイルの一覧が表示される。

HTMLの基礎の基礎

Webページは、.html（もしくは.htm）という拡張子のつくファイルで作成されており、HTML言語を利用して記述される。HTML言語は、文章の持つ意味を<要素名>や</要素名>という形のタグと呼ばれる記号を使用して示したものとなる。ここで、<要素名>を開始タグ、</要素名>を終了タグ、開始タグから終了タグで囲まれた範囲を要素という。タグの働きを概念的に示すと、下記の通りとなる。

<見出し>授業の進め方</見出し>
<段落>今日からWebページを作成します。<重要>欠席しないように</重要>しよう。</段落>

ここで、「<見出し>授業の進め方</見出し>」が見出し要素、「<重要>欠席しないように</重要>」が重要要素となる。段落要素は「<段落>今日からWebページを作成します。<重要>欠席しないように</重要>しよう。</段落>」である。段落要素内には重要要素が含まれている。

タグがあらわすのは、開始タグと終了タグにはさまれた文章が持つ意味であることに注意する必要がある。例外的に見栄えを規定する<下線>～</下線>、<中央揃え>～</中央揃え>、<赤色>～</赤色>などの要素もあるが、これらは非推奨要素とされている。タグはあくまでも意味を示すものと覚えよう。見栄えの設定はCSS（カスケーディング・スタイル・シート）を使用する。HTMLのタグとCSSを組み合わせて使用することで多彩なデザインのページを作成することができる。CSSについては3週間後の授業で取り上げる。

HTMLファイルの構造

まずは以下のファイルを見てみよう（sample.html）。

自己紹介

このファイルは実際には以下のようにHTML言語で書かれている。<>で囲まれたタグが多数使用されていることがわかる。これからHTMLファイルを複数作成していくが、作成にあたり基本原則を押さえておこう。

HTMLファイル作成時の原則

1行目には必ずDOCTYPE宣言を記述する（CSSの回で説明）。
日本語のページの場合2行目は必ず<html lang="ja">と記述する。"ja"の部分は使用する言語に応じて変更する。
その後<head></head>内にページタイトルや作成者、文字コードなどのページ情報を記載する。この部分はブラウザでは表示されない。
その後<body></body>内に本文を記載する。この部分のみブラウザで表示される。
最後は必ず</html>で終了する。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<html lang="ja">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP">

<meta http-equiv="Content-Style-Type" content="text/css">

<meta http-equiv="Content-Script-Type" content="text/javascript">

<meta name="author" content="作成者の氏名">

<meta name="description" content="このページの説明。">

<meta name="keywords" content="このページのキーワード">

<title>ページタイトル</title>

<link rev="made" href="mailto:連絡用メールアドレス">

<style type="text/css">

<!--

body {

	background-color: #ffccff;

	}

h1 {

	color: #cc0066;

	}

address {

	text-align: right;

	}

.normal {

	font-style: normal;

	font-weight:bold;

	}

-->

</style>

</head>
<body>



<h1>公益太郎のページ</h1>



<p><img src="http://roy.e.koeki-u.ac.jp/~naoya/img/fig3.jpg"
 width="480" height="360" alt="koeki"></p>



<h2>生年月日</h2>

<p>1985年2月29日です。</p>



<h2>出身地</h2>

<p>山形県酒田市。</p>



<h2>自己紹介</h2>

<p>ビリーズブートキャンプに関心があります。</p>



<h2>好きな食べ物ベスト3</h2>

<ol>

<li>オリーブオイル</li>

<li>しょうゆ</li>

<li>片栗粉</li>

</ol>



<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 class="normal">c107000@g.koeki-u.ac.jp</address>


</body>
</html>

HTMLファイルを作成する

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

授業の中ではemacsを用いてhtmlファイルを作成し、public_htmlディレクトリの中に直接保存する。自宅でWebページを作成する際には、直接サーバー内のpublic_htmlに保存することができないので、自分のパソコンで作成後、FTPソフトというソフトを使ってサーバーのpublic_htmlにファイルを転送する。

htmlファイル作成手順

TeraTermでroyに接続する
emacs -nw[Enter]でemacsを起動する
Ctrl-x Ctrl-fと押す（新規作成時・既存のファイルを開く場合いずれも）。
ミニバッファにFind File:~/と表示されるので、Find File:~/public_html/ファイル名[Enter]。ファイル名の部分は新規作成したいファイル名もしくは、開きたいファイル名を記載する。拡張子に.htmlを付け忘れないようにする。
emacsの保存のコマンドはCtrl-x Ctrl-s。こまめに保存しよう。
完成したら、ブラウザにURLを入力する。もしも作成しているファイル名がaaa.htmlの場合、URLはhttp://roy.e.koeki-u.ac.jp/~c10xxxx/aaa.htmlとなる（c10xxxxは自分の学籍番号）。

アルファベットや数字、記号はいずれも半角英数字（直接入力）で入力する。

出席課題

先ほど確認したsample.htmlをベースにして自己紹介のページを作ってみよう。ファイル名はindex.htmlとする。

全て入力するのは難しいので、コピー&ペーストでemacsに貼り付けて必要な部分だけ書き換えよう。emacsに貼り付ける場合は、コピーした後で貼り付けたい場所にカーソルを持ってきてからマウスの右クリックを押す。

これで貼りつけが完了するので、<body></body>内の必要箇所のみ書き換える。具体的には自己紹介や名前好きな食べ物など。<要素>～</要素>の間の文章のみ変更する。<要素>や</要素>を書き換えたり消したりすると表示されなくなるので注意すること。

今日の課題：作成したWebページのURLをメールで送る。その他感想があればあわせて記載する。作成したWebページは学内の誰でも閲覧することができる。見られても恥ずかしくない内容にしよう。

提出先：naoya@e.koeki-u.ac.jp
メールの件名（Subject）：literacy(4)
提出期限：授業終了時
電子メールの使い方に自信がない場合：Mewの主要コマンドについてを確認しよう

課題2：HTML課題

本日よりHTMLの授業を5週にわたって行うが、その中でHTML課題を実施する。HTMLの第5回目の授業の終了時に提出する。

課題2

自己紹介を行うindex.htmlを作成する[HTML[1]以降]
index.htmlの画像を変更する[HTML[2]以降]
class.htmlを作成し、自分の時間割を記載[HTML[2]以降]
index.htmlからclass.htmlにハイパーリンクを設置する[HTML[2]以降]
index.html、class.htmlの<head>～</head>内を適切に書き直す。[HTML[3]以降]
index.htmlとclass.htmlを正しい文法で書く[HTML[3]以降]
index.htmlとclass.htmlの見栄えをよくする[HTML[4]以降]

全部で6項目あるが、これらを順番に実施していき、HTML[5]の授業終了時までに完成させる。関心がある人は先取りして勉強し、課題を実施していても良い。各項目の後ろにあるHTML[x]以降というのは、その回の授業内容を理解すればその作業が実施できるという意味である。全てをその回に実施しなければならないということではない。HTML[1]からHTML[4]までは講義と課題実施を半分ずつ、HTML[5]は講義は行わず課題実施の時間にあてる。