WWW (World Wide Web)ページの作成

WWW(World Wide Web,単にウェブと呼ばれたりする)は広く使われている,インターネットを代表するアプリケーションの一つである.ここではWWWページを作成する練習を行う.

尚,WWWページを何でもかんでも「ホームページ」と称さないように心がけよう. Webページを無差別に「ホームページ」と称するのは,日本(とわずかな国)だけの方言であることを理解しておくこと. 「ホーム・ページ (homepage)」とは,ウェブブラウザを起動した時に最初に表示されるページのことである.最近では「正面玄関」となるページを「トップページ」と呼ぶ傾向があり,かなり広く社会的に認知されてきている.用語の使い方には十分に意識して欲しい.

Webページはどうやって作成するのか?

Webページを作成するには,HTMLと呼ばれる特別な約束事を守って作成された「テキストファイル」を作成して,それを所定のWebサーバの所定のディレクトリに配置すれば良い.そのWebサーバがSafariなどのWebブラウザソフトウエアでアクセス出来るようにサービスし,その結果「ページ」として画面表示される仕組みになっている.

CSE環境では,各個人のホームディレクトリ配下のpublic_htmlディレクトリ配下にHTMLファイルや画像ファイルを置けば,コンピュータ理工学部のWebサーバ(www.cse.kyoto-su.ac.jp)がサービスしてくれる.

WWWページ作成練習準備

エディタで次の内容のテキストファイルindex-j.txtをホームディレクトリに作成せよ.

(自分の名前)の自己紹介
誕生日:??月??日
血液型:?型

次に,この作成したテキストファイルを、˜/public_html/index-j.htmlというディレクトリ位置へ移動配置せよ.この時,ファイル名をindex-j.htmlに変更することに注意する.

このように作成したHTMLファイルをコンピュータ理工学部のWebサーバ上に配置されているWebページとしてアクセスするためのURIは以下の形になります.

例えば,g1234567というユーザ名の場合であれば,

となる.各自が配置したHTMLファイルをWebページとしてネットワークアクセスするためのURIがどのような形になるか落ち着いて考えなさい.

アクセスするURIを十分考えたら,そのURIをWebブラウザ(Safari)のURL欄へ指示してWebアクセスしてみて,画面表示を確認せよ.

注:Emacsでファイルを作成した場合,標準の設定では文字化けして表示が正しくない.Safariのメニューの「表示」→「テキストエンコーディング」の中の「Unicode(UTF-8)」を選択すれば正しく表示される.この問題については後ほど説明する.

補足 Emacsでのテキストファイル編集

Emacsを用いたテキストファイル編集については,こちらのページを参照のこと.

また, ˜/public_html/index-j.htmlをEmacs.appで編集するには,C-X C-fをタイプして表示されるエコーラインに

というように自分のホームディレクトリをチルダ(˜)記号で表したパス名をタイプして指示すれば良い.同様に˜/public_html/report/example.htmlを読み込んで編集する場合はエコーラインに対して

という具合に指示する.

WWWページ作成練習その1

先程作成した˜/public_html/index-j.htmlに、下記の赤色の文字を書き足して保存し、Webブラウザ(Safari)で再度開いて(再読み込み(リロード)すればよい),ページ表示を確認せよ.

<html>
<body>
<h1>(自分の名前)の自己紹介</h1>
誕生日:??月??日<br/>
血液型:?型
</body>
</html>

補足:ページの再読み込み操作は,SafariのURL欄のをクリックするか,「表示」メニュー -> 「ページを再読み込み」と選択する.

HTML

ウェブページの実体はHTML (HyperText Markup Language)という記述言語によって書かれているテキストファイル(HTML文書)である.ハイパーテキストとは,ある文書から他の文書への参照(リンク)によって複数の文書を相互に関連づける仕組みである.HTMLは普通のテキスト文書にHTMLタグで意味付けすることで,ハイパーテキストや文書構造の定義などを可能にしている.

HTML文書のファイルの拡張子はhtmlである(環境によってはhtmを使うこともある).拡張子が正しく付けられていないとWebサーバやWebブラウザが正しく処理できない.

HTMLタグ

HTMLタグ(HTML要素とも呼ぶ)は<で始まり>で終わる文字列で表現される開始タグと,</で始まり>で終わる終了タグの組で表現される.これらのタグで文字列をはさむ(マークアップする)ことによって文字列を意味づけする.

開始タグ:<タグ名>
終了タグ:</タグ名>

一部のタグは,開始タグと終了タグで囲まれる内容を持たないため<タグ名/>のように開始タグと終了タグが一体化した表現で表される(空要素).
例:<img src="hogehoge.jpg" />

更に,一部のタグは終了タグを省略して記述されることがあるが(例:<br>),このような省略はHTMLの古い規格の名残であり,後継の規格であるXHTMLでは許されていない.同様にHTMLでは,タグ名は大文字と小文字は区別されていなかったが,XHTMLでは小文字と決まっている.現在でも互換性などの理由で古いHTMLの書き方でも通用するが,これから学ぶのであればXHTMLの厳密な書き方に従っておくことをお勧めする.

空要素でない開始タグと終了タグの間には文字列以外にも他の要素を記述できる.但し,記述できる要素は要素ごとに決まっている.なお,開始タグと終了タグは入れ子にしなければならない(内側の終了タグよりも前に外側の終了タグを書いてはいけない)ことに注意.次の例はWebブラウザは正しく解釈できない.

<h1> 見出し1 <h2> 見出し2 </h1> </h2>

タグによっては開始タグの中に属性と呼ばれる値を記述することができる.上記の例:<img src="hogehoge.jpg" />においては,srcは属性名,"で囲まれているhogehoge.jpgは属性値となる.どのような属性を持つかはタグによって決まっている.

HTML文書の大雑把な構造

HTML文書は大雑把に,次のような構造で記述される.

<html>
<head>
</head>
<body>
</body>
</html>

html要素はHTML文書であることを表している.

head要素で囲まれる部分をヘッダ部と呼ぶ.ここにはtitle要素でタイトルを書くなど,このページに関する情報を記述する.

body要素で囲まれる部分が本文である.この内容がウェブブラウザのウィンドウ内に表示される.

よく使うHTMLタグ

HTMLのタグはそんなには多くないが,それでも全部合わせると数十個はある.とは言え,よく使われるタグは限られている.ここでは代表的なタグを紹介する.詳しい説明,使い方などはHTMLの解説ページ(「HTMLタグ」などのキーワードで検索すると沢山ヒットする)を参照するとよい.

要素名 説明
html HTML文書
head ヘッダ
body ボディ(本文)
title タイトル.ヘッダ内に記述する.ここで指定した文字列はウィンドウのタイトルバーに表示されたりする.
h1, h2, h3, h4, h5, h6 見出し
p 段落
br 改行.空要素として記述する.
hr 水平線.空要素として記述する.
ul 番号なしリスト(箇条書き).リスト項目はliタグで記述する.
table 表.行やセルはtrタグ,thタグ,tdタグで記述する.
a アンカー(ハイパーリンク).リンク先はhref属性で記述する.
img 画像の張り込み.空要素として記述する.画像ファイルはsrc属性で記述する.
<!-- --> コメント.囲まれた部分は無視される.

WWWページの置き場所

コンピュータ理工学部の個人Webページは,各自のNetBoot環境でのホームディレクトリ下のpublic_htmlというディレクトリ以下にHTMLファイルや画像ファイルやディレクトリを配置する.

このディレクトリにindex-j.htmlというファイルを配置すると,これが各自のウェブサイトのトップページとなる.URIは

となる.

public_htmlディレクトリ以下に配置されたファイルをWWWブラウザでアクセスする時,そのURIとファイルのパス名との関係は次のように考えると良い.

  1. 配置したファイルの絶対パスを考える.例えば,fooというユーザ名を持つ利用者のホームディレクトリの絶対パスが
    /home/foo
    とする.このホームディレクトリにあるpublic_htmlディレクトリにsampleディレクトリを作成し,そのsampleディレクトリにhello.htmlファイルを配置したと仮定すると,そのファイルの絶対パスは
    /home/foo/public_html/sample/hello.html
    となる.
  2. public_htmlディレクトリからの相対パスを取り出す.例えば,上記の絶対パス名から,ホームディレクトリの部分と/public_html/の部分を取り除いて,残り部分を取り出すととなる.
    sample/hello.html
  3. 取り出した相対パスを以下の形式のURIの後ろに繋ぐ.
    http://www.cse.kyoto-su.ac.jp/˜ユーザ名/
    fooというユーザ名の場合,上記2で取り出した相対パス名を繋ぐと
    http://www.cse.kyoto-su.ac.jp/˜foo/sample/hello.html
    というURIができ上がる.これが,hello.htmlへのコンピュータ理工学部Webサーバ上でのURIとなる.このURIをWebブラウザのURL欄に指示すると,そのHTMLファイルがブラウザ上に表示される.
  4. 尚,HTMLファイルの名前がindex-j.html又はindex.htmlの場合,ファイル名を省略できる(但し,これはサーバの設定によって違い,一般の商用ISPが提供するWebサーバでは,異なる設定になっている場合もある).すなわち,
    http://www.cse.kyoto-su.ac.jp/˜foo/bar/index-j.html
    というURIは
    http://www.cse.kyoto-su.ac.jp/˜foo/bar/
    としても同じindex-j.htmlを指すURIとして使うことができる.

HTMLファイルの作成

ここでは,簡単なWWWページをテキストエディタ(例えばEmacs)で新たに作る手順を説明する.

  1. Emacsでファイル名を指定して新規作成する.拡張子に.htmlをつけるのを忘れないように.
  2. HTML文書なので,まず<html>タグと</html>タグを書く.開始タグを書くときは終了タグもセットで書くようにすると書き忘れを防ぎやすくなる.
  3. 更に,基本構造である<head>タグと<body>タグ,およびそれぞれの終了タグを書く.上記の「大雑把な構造」のような記述となる.
  4. <head>要素の中に,<title>要素を記述してタイトルを設定する.
  5. <body>要素の中に,書きたいことを書く.

補足〜文字コードについて

上記のようにしてEmacsで日本語の含まれるページを作成した場合,ブラウザで閲覧すると正しく表示されないことがある.これは,Webサーバが設定している標準の文字コード(CSE環境の場合iso-2022-jp)と,ページを作成した際の文字コード(Emacsの場合utf8)が一致していないことに原因がある(文字コードについては後日説明する).解決するためには,一致した文字コードでページを記述するか,ページ内で文字コードを明示的に指定する必要がある.ここでは後者の方法として,次のように書くことにする(とりあえずはおまじないのようなものとしておく.新たに作成する際には下記をコピー&ペーストするとよい.CSE環境でのEmacsでhtmlファイルを作成する際には自動的に下記のテンプレートを利用できるように設定してある).

<?xml version="1.0" encoding="utf-8"?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
</body>
</html>

補足〜Cocoa EmacsのHTML文書作成支援機能

NetBoot環境のCocoa Emacsは,html-helper-modeと呼ばれるHTML文書作成のための支援機能が追加されている.HTML文書を新規作成しようとすると,次のようにCSE環境向けに標準で用意されているHTMLテンプレート(雛形)を予め挿し込んだ状態で編集が開始される.

「ここから削除」と書かれた行から「ここまで削除」と書かれた行までは不要なので,これを削除してから各自のHTMLファイル編集作業を行えばよい.

補足〜HTML文書内でのスペースや改行

文字と文字の間を空けようとしてスペースを連続で書いたり改行をしても,ブラウザで開くと思った通りになっていない.これは,ブラウザは表示する際に,連続するスペース,タブ,改行は一つのスペースとして扱うように処理するからである (日本語にお いてはこの処 理は却って迷 惑なことがあ る.この部分 の説明文がま さにその被害 に遭っている!!).改行を入れるには<br />要素を入れたり,<p>要素で段落を明示する.スペースは&nbsp;と書けばよい(が,レイアウトの目的のためにこのようなスペースを使うべきではない).タブに相当する空白文字は用意されていない.

なお,「いわゆる全角のスペース」は変換されずにそのまま「全角のスペース」として表示される(例えば   こんな感じで)が,これも多用するべきではない.

補足〜特殊文字

ところで,上の補足では&nbsp;と書くとスペースになると言っているのに,そのまま&nbsp;と表示されているのにお気づきだろうか?同様に,ここまででタグの書き方を説明しているが,いずれもタグとして扱われずに<html>のように表示されている!!

&や<などのHTML文書内ではそのまま記述できない特殊文字については,特別の書き方を使う必要がある.一例を下に示す.

文字 書き方
  &nbsp;
" &quot;
& &amp;
< &lt;
> &gt;

WWWページ作成練習その2

を作成して各自の自己紹介のページを作れ.この時,以下の条件を満たすこと.

ここでの練習遂行のコツ:

著作権やプライバシー保護について

WWWページに載せる内容(文章や写真など)は,その著作権に関して十分に理解し,他者の権利を侵害しないように努め(詳細はコンピュータガイド6.1節の6.3項と7項を熟読すること),他者の作成した著作物を模倣剽窃(盗作すること)することが絶対に無いようにすること.要点としては次のようにまとめられる.

  1. 本学が運営しているWebページに掲載可能な内容は,自分自身で考えて書き上げた文章・小説・詞や自分自身で撮影した写真など,著作権が確実に自分自身にあるものだけに限られる.
  2. 写真などの場合,たとえ自分自身で撮影したものであっても,被写体が芸能人などである場合は「肖像権」を侵害することになるので利用できない(一般の人であっても肖像権,さらには個人情報の保護の観点からも無承諾で公開することは避けるべきである).また,各種の商用音楽の歌詞なども許されない.
  3. 他者が合法的に作成しているWebサイトのデータをリンクして,あたかも自分のページの一部であるかの如く取り込んで利用するのは,一般に非合法である.
  4. 本学のWebページは,「教育・研究」のための範囲で利用することが許されている.従って,金銭の獲得を目的とした商用利用は認められない.

その他の詳細はコンピュータガイドを十分に読んで理解しておかなければならないし,また,Webページを作成するにあたっては,各種法律はもとより,本学の規定する規定も了解しているものとして扱われる.従って,それらに抵触する行為があった場合は,退学を含む懲罰処置の対象になるから,くれぐれも注意されたい.著作権関連事項で何か疑問があれば,本学教員や情報センターに必ず問い合わせて合法性を確認すること.

また,各自のプライバシーに関わる内容(電話番号や住所など)は,第三者に悪用される危険性があるため,Webページに記載すべきではない.連絡先として電子メールアドレスを書く場合,迷惑メール配信業者に収集される可能性がある.これに対しては,メールアドレスの文字列を「画像データ」に変換することで,自動収集できなくする対策手段を情報センターにて提供している.学内Webサイトの「情報サービス」→「ネットワークサービス」→「メールアドレスの画像化ツール」のページにて,各自のメールアドレスを表示できる画像データを作成できる.

メールアドレスを掲載する場合には,このツールを用いて画像データ化したものを掲載するようにしよう.

基礎プログラミング演習Iの表紙ページへ戻る