WWW（World Wide Web，単にウェブと呼ばれたりする）は広く使われている，インターネットを代表するアプリケーションの一つである．ここではWWWページを作成する練習を行う．
尚，WWWページを何でもかんでも「ホームページ」と称さないように心がけよう． Webページを無差別に「ホームページ」と称するのは，日本（とわずかな国）だけの方言であることを理解しておくこと． 「ホーム・ページ (homepage)」とは，ウェブブラウザを起動した時に最初に表示されるページのことである．最近では「正面玄関」となるページを「トップページ」と呼ぶ傾向があり，かなり広く社会的に認知されてきている．用語の使い方には十分に意識して欲しい．
Webページを作成するには，HTMLと呼ばれる特別な約束事を守って作成された「テキストファイル」を作成して，それを所定のWebサーバの所定のディレクトリに配置すれば良い．そのWebサーバがSafariなどのWebブラウザソフトウエアでアクセス出来るようにサービスし，その結果「ページ」として画面表示される仕組みになっている．
CSE環境では，各個人のホームディレクトリ配下のpublic_htmlディレクトリ配下にHTMLファイルや画像ファイルを置けば，コンピュータ理工学部のWebサーバ(www.cse.kyoto-su.ac.jp)がサービスしてくれる．
エディタで次の内容のテキストファイル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を用いたテキストファイル編集については，こちらのページを参照のこと．
また， ˜/public_html/index-j.htmlをEmacs.appで編集するには，C-X C-fをタイプして表示されるエコーラインに
というように自分のホームディレクトリをチルダ(˜)記号で表したパス名をタイプして指示すれば良い．同様に˜/public_html/report/example.htmlを読み込んで編集する場合はエコーラインに対して
という具合に指示する．
先程作成した˜/public_html/index-j.htmlに、下記の赤色の文字を書き足して保存し、Webブラウザ(Safari)で再度開いて（再読み込み（リロード）すればよい），ページ表示を確認せよ．
補足：ページの再読み込み操作は，SafariのURL欄の
をクリックするか，「表示」メニュー -> 「ページを再読み込み」と選択する．
ウェブページの実体はHTML (HyperText Markup Language)という記述言語によって書かれているテキストファイル（HTML文書）である．ハイパーテキストとは，ある文書から他の文書への参照（リンク）によって複数の文書を相互に関連づける仕組みである．HTMLは普通のテキスト文書にHTMLタグで意味付けすることで，ハイパーテキストや文書構造の定義などを可能にしている．
HTML文書のファイルの拡張子はhtmlである（環境によってはhtmを使うこともある）．拡張子が正しく付けられていないとWebサーバやWebブラウザが正しく処理できない．
HTMLタグ（HTML要素とも呼ぶ）は<で始まり>で終わる文字列で表現される開始タグと，</で始まり>で終わる終了タグの組で表現される．これらのタグで文字列をはさむ（マークアップする）ことによって文字列を意味づけする.
開始タグ：<タグ名>
終了タグ：</タグ名>
一部のタグは，開始タグと終了タグで囲まれる内容を持たないため<タグ名/>のように開始タグと終了タグが一体化した表現で表される（空要素）．
例：<img src="hogehoge.jpg" />
更に，一部のタグは終了タグを省略して記述されることがあるが（例：<br>），このような省略はHTMLの古い規格の名残であり，後継の規格であるXHTMLでは許されていない．同様にHTMLでは，タグ名は大文字と小文字は区別されていなかったが，XHTMLでは小文字と決まっている．現在でも互換性などの理由で古いHTMLの書き方でも通用するが，これから学ぶのであればXHTMLの厳密な書き方に従っておくことをお勧めする．
空要素でない開始タグと終了タグの間には文字列以外にも他の要素を記述できる．但し，記述できる要素は要素ごとに決まっている．なお，開始タグと終了タグは入れ子にしなければならない（内側の終了タグよりも前に外側の終了タグを書いてはいけない）ことに注意．次の例はWebブラウザは正しく解釈できない．
タグによっては開始タグの中に属性と呼ばれる値を記述することができる．上記の例：<img src="hogehoge.jpg" />においては，srcは属性名，"で囲まれているhogehoge.jpgは属性値となる．どのような属性を持つかはタグによって決まっている．
HTML文書は大雑把に，次のような構造で記述される．
html要素はHTML文書であることを表している．
head要素で囲まれる部分をヘッダ部と呼ぶ．ここにはtitle要素でタイトルを書くなど，このページに関する情報を記述する．
body要素で囲まれる部分が本文である．この内容がウェブブラウザのウィンドウ内に表示される．
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属性で記述する． |
| <!-- --> | コメント．囲まれた部分は無視される． |
コンピュータ理工学部の個人Webページは，各自のNetBoot環境でのホームディレクトリ下のpublic_htmlというディレクトリ以下にHTMLファイルや画像ファイルやディレクトリを配置する．
このディレクトリにindex-j.htmlというファイルを配置すると，これが各自のウェブサイトのトップページとなる．URIは
となる．
public_htmlディレクトリ以下に配置されたファイルをWWWブラウザでアクセスする時，そのURIとファイルのパス名との関係は次のように考えると良い．
fooというユーザ名を持つ利用者のホームディレクトリの絶対パスが/home/foopublic_htmlディレクトリにsampleディレクトリを作成し，そのsampleディレクトリにhello.htmlファイルを配置したと仮定すると，そのファイルの絶対パスは/home/foo/public_html/sample/hello.html
public_htmlディレクトリからの相対パスを取り出す．例えば，上記の絶対パス名から，ホームディレクトリの部分と/public_html/の部分を取り除いて，残り部分を取り出すととなる．sample/hello.htmlhttp://www.cse.kyoto-su.ac.jp/˜ユーザ名/http://www.cse.kyoto-su.ac.jp/˜foo/sample/hello.htmlhello.htmlへのコンピュータ理工学部Webサーバ上でのURIとなる．このURIをWebブラウザのURL欄に指示すると，そのHTMLファイルがブラウザ上に表示される．index-j.html又はindex.htmlの場合，ファイル名を省略できる（但し，これはサーバの設定によって違い，一般の商用ISPが提供するWebサーバでは，異なる設定になっている場合もある）．すなわち，http://www.cse.kyoto-su.ac.jp/˜foo/bar/index-j.htmlhttp://www.cse.kyoto-su.ac.jp/˜foo/bar/index-j.htmlを指すURIとして使うことができる．ここでは，簡単なWWWページをテキストエディタ（例えばEmacs）で新たに作る手順を説明する．
上記のようにしてEmacsで日本語の含まれるページを作成した場合，ブラウザで閲覧すると正しく表示されないことがある．これは，Webサーバが設定している標準の文字コード（CSE環境の場合iso-2022-jp）と，ページを作成した際の文字コード（Emacsの場合utf8）が一致していないことに原因がある（文字コードについては後日説明する）．解決するためには，一致した文字コードでページを記述するか，ページ内で文字コードを明示的に指定する必要がある．ここでは後者の方法として，次のように書くことにする（とりあえずはおまじないのようなものとしておく．新たに作成する際には下記をコピー＆ペーストするとよい．CSE環境でのEmacsでhtmlファイルを作成する際には自動的に下記のテンプレートを利用できるように設定してある）．
NetBoot環境のCocoa Emacsは，html-helper-modeと呼ばれるHTML文書作成のための支援機能が追加されている．HTML文書を新規作成しようとすると，次のようにCSE環境向けに標準で用意されているHTMLテンプレート（雛形）を予め挿し込んだ状態で編集が開始される．
「ここから削除」と書かれた行から「ここまで削除」と書かれた行までは不要なので，これを削除してから各自のHTMLファイル編集作業を行えばよい．
文字と文字の間を空けようとしてスペースを連続で書いたり改行をしても，ブラウザで開くと思った通りになっていない．これは，ブラウザは表示する際に，連続するスペース，タブ，改行は一つのスペースとして扱うように処理するからである （日本語にお いてはこの処 理は却って迷 惑なことがあ る．この部分 の説明文がま さにその被害 に遭っている!!）．改行を入れるには<br />要素を入れたり，<p>要素で段落を明示する．スペースは と書けばよい（が，レイアウトの目的のためにこのようなスペースを使うべきではない）．タブに相当する空白文字は用意されていない．
なお，「いわゆる全角のスペース」は変換されずにそのまま「全角のスペース」として表示される（例えば こんな感じで）が，これも多用するべきではない．
ところで，上の補足では と書くとスペースになると言っているのに，そのまま と表示されているのにお気づきだろうか?同様に，ここまででタグの書き方を説明しているが，いずれもタグとして扱われずに<html>のように表示されている!!
&や<などのHTML文書内ではそのまま記述できない特殊文字については，特別の書き方を使う必要がある．一例を下に示す．
| 文字 | 書き方 |
|---|---|
| | |
| " | " |
| & | & |
| < | < |
| > | > |
ここでの練習遂行のコツ：
WWWページに載せる内容（文章や写真など）は，その著作権に関して十分に理解し，他者の権利を侵害しないように努め（詳細はコンピュータガイド6.1節の6.3項と7項を熟読すること），他者の作成した著作物を模倣剽窃（盗作すること）することが絶対に無いようにすること．要点としては次のようにまとめられる．
その他の詳細はコンピュータガイドを十分に読んで理解しておかなければならないし，また，Webページを作成するにあたっては，各種法律はもとより，本学の規定する規定も了解しているものとして扱われる．従って，それらに抵触する行為があった場合は，退学を含む懲罰処置の対象になるから，くれぐれも注意されたい．著作権関連事項で何か疑問があれば，本学教員や情報センターに必ず問い合わせて合法性を確認すること．
また，各自のプライバシーに関わる内容（電話番号や住所など）は，第三者に悪用される危険性があるため，Webページに記載すべきではない．連絡先として電子メールアドレスを書く場合，迷惑メール配信業者に収集される可能性がある．これに対しては，メールアドレスの文字列を「画像データ」に変換することで，自動収集できなくする対策手段を情報センターにて提供している．学内Webサイトの「情報サービス」→「ネットワークサービス」→「メールアドレスの画像化ツール」のページにて，各自のメールアドレスを表示できる画像データを作成できる.
メールアドレスを掲載する場合には，このツールを用いて画像データ化したものを掲載するようにしよう．