インターネット上で蜘蛛の巣のように張り巡らされた情報網のことを World Wide Web (WWW) と呼びます。その情報網では，インターネット閲覧ソフト（ウェブブラウザ）で表示されたページ（ウェブページ）の一部分をクリックすることで，次々とジャンプしアクセスすることができます。 そのようなウェブページは，HTML (HyperText Markup Language) という言語で記述されています。 ここでは，HTML言語の書き方を学習しましょう。
まず最初に，この授業用のディレクトリを作りましょう。
cd mkdir html cd html
そして，次のように入力すると，エディタ emacs が起動し，mypage.html と名前を付けたファイルの作成画面が表示されます。
emacs mypage.html &
ここで，emacs がご丁寧に
Insert /usr/local/lib/html/template.html?(y or n)
（HTMLファイルのテンプレート（ひな形ファイル）を出しましょうか？）
と聞いてくるので，n （いいえ） を選択します。間違えてテンプレートが出てしまった場合には，それを全部消して下さい。（ 最初の行の先頭で，CTRL-K を押し続けると，消えます）
それから，次のような内容のものを作り，保存しましょう。 ただし， <html> のように < と > とで挟まれた部分は， < > も含めて半角文字で書いていることに注意しましょう。
そして，ウェブブラウザでそのファイルを開いてみましょう。
ウェブブラウザの「ファイル」メニューの「ファイルのオープン」というサブメニューを用いて，先ほど選択したファイルを開きます。
すると，次のように表示されます。
ブラウザのウインドウには"ようこそ！これは私のウェブページです。" が表示されています。また，そのウインドウのタイトルが"Welcome"となっています。 しかし，その他の<html>とか<head>のように， <と>とで挟まれたものはブラウザ画面のどこにも表示されていません。 なぜなら，それはHTMLファイルの内容の構造を表す タグと呼ばれるものだからです。 HTMLファイルの書き方を覚えるということは， このタグの書き方を覚えるということに他なりません。
さきほどのファイルにあるタグを抜き出してみましょう。
/ が付かないものと付くものとが
セットになっているものがたくさんあります。
このように，通常，タグはセットになって現れます。
/が付かないものを開始タグ，
/が付いたものを終了タグと呼びます。
また，開始タグから終了タグまでの部分を，要素と呼びます。
しかし，<br>
のように，終了タグがなく単独で現れるものもあります。
タグは，その要素が全体の文書中で
どのような意味を持つものであるかを表すものです。
また，タグは<TITLE>のように，大文字で書いてもよく，
多くの解説書では大文字を採用していますが，
ここでは書きやすさのために小文字で書くことにします。
（大文字だと，シフトキーを押し続けるか，caps lockキーをいちいち押す必要がありますから。また，次世代の HTML とも言える新しい言語である XHTML では，タグを小文字で書くことになっていますので。）
では，さきほどのファイルのタグを，ひとつひとつ解説していきます。
まず，ファイルの先頭に
<!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
という一行ありますが，これは，文書型の宣言をしているものです。
ここでは詳しいことは解説しないので，おまじないだと思っておいて下さい。
（doctype の前に ! があることを忘れないように）
次に，それ以降の内容全体が
<html>と</html>とで挟まれて，html要素となっています。
これは，このファイルがHTML言語で書かれていることを意味しています。
html要素の中は，
<head>と</head>とで挟まれたhead要素と，
<body>と</body>とで挟まれたbody要素とに分かれています。
head要素には，このHTML文書のタイトルなどの情報が含まれています。 タイトルは<title>と</title>で挟まれたtitle要素に記述されています。 このタイトルは，ウェブブラウザで読み込んだ場合， ウインドウのタイトルバーに表示されます。
body要素が，このHTML文書の本文です。 <p>と</p>は，その間が一つの段落であることを表します。 この文書の本文は，一つの段落だけでできていますが， もちろん普通はいくつかの段落でできています。 この例の場合，段落は２行からなっていますが，１行目の終わりにある <br>は改行を表すタグです。 <br>がないと，ウェブブラウザで見た場合に， 改行されずに（２行にならずに１行で）表示されます。
doctype要素 html要素，head要素，title要素，body要素，この5個の要素は HTML文書として最低限必要なものです。 ここで，title要素はhead要素の中にあることに注意します。 どの要素の中に，どの要素が入るべきかを分かりやすく表すと次のようになります。
HTML文書の本文は，body要素内に書かれます。 body要素内には段落要素を書くことができることは先ほど解説しましたが， ここではさらに詳しく解説しましょう。
大見出しや小見出しをつけて，文書の階層的な構成を明示することができます。 見出しには，その段階に応じて１レベルから６レベルまでがあり， それぞれ見出しタグ <h1> と </h1>， <h2> と </h2>， <h3> と </h3>， <h4> と </h4>， <h5> と </h5>， <h6> と </h6>， を用います。 レベル番号が小さいほど，広い範囲を総括する見出しとなります。すなわち，h1 が最大の見出しであり， h6 が最小の見出しです。（h は heading の頭文字）
次は，京都産業大学の説明（かなり省略している）をするウェブページを記述したものです。これには， h1, h2, h3, h4 の見出しが用いられています。
これをウェブブラウザで見ると，次のように見えます。
普通のウェブブラウザでは， h1 見出しは大きな文字で表示され， h2, h3, ... となるに従い，小さな文字となります。 しかし，見出し要素 h1, ..., h6 は文書の階層的な構造を表すものであり，文字の大小の変化をつけるためのものではありません。したがって，文字の大きさを変えるために見出し要素を使ってはいけません。
意味の上でひとまとまりの文章を，パラグラフ（段落）といいます。 HTML ファイルの中の，どこからどこまでがパラグラフであるかを明示しておけば， それをブラウザが表示するときに，読者が見やすいように表示するかもしれません。 パラグラフはタグ <p> と </p>とを用いて定義されます（ p は paragraph の略）。 その使用例とその結果とを見てみましょう。
標準的なブラウザで見ると，パラグラフとパラグラフとの間には，１行ほどの空白が入ります。 これによって，パラグラフであることを明示しているのです。 しかし，パラグラフ要素は， あくまでも意味の上でひとまとまりであることを示すためのものであり， 行間を空けるためのものではありません。
HTMLファイルの方では，適当な部分で改行を入れていますが， それをブラウザで表示しても改行にはなっていないことに注意しましょう。
改行は，<br>タグを用いて行います(br は breakの略）。 改行タグを用いず，htmlソースファイルにおいて，ただリターンキーで改行するだけでは， ブラウザで表示したときには，まったく改行されません。
文書の区切りに水平線（横線）を入れるときには， <hr>タグを用います（ hr は horizontal rule の略）。
上の使用例を見ても分かるように，<hr>タグはパラグラフの外側でしか （厳密には）使えません。
箇条書きには，番号のついていないもの，番号のついたものの二通りがあります。 それぞれ，ul (unorderd list)タグ，ol (orderd list)タグで リスト全体をくくることにより，表されます。 また，箇条書きの各要素は li (List Item)タグを用いて表します。
また，リストを多重にすることもできます。
定義リストとは，「用語とその説明」のような組を書き並べるときに用います。
定義リスト全体は dl (definition list)タグで括られていて，その中に， dt (definition term) タグで括られた「用語」と dd (definition description)タグで括られた「説明」とが組になったものが， いくつか入っています。
Web のドキュメントの醍醐味は，その一部をクリックするだけで， インターネット上にあるさまざまなデータにリンクできることにあります。 リンクは，<a>と</a>とで作られたアンカー要素（ a 要素，a は anchor(錨)の略）によって行われます。<a>と</a>とで挟まれた部分が，ウェブブラウザ上ではクリックする部分として表示されます。
他の場所にあるhtmlファイルへのリンクするには，a 開始タグに
href="目的のHTMLファイルのURL" を入れます。（href は Hypertext REFerenceの略）
<a href="目的のHTMLファイルのURL"> クリックするテキストや画像 </a>
また，URLにファイル名だけを書くと，当該のHTMLファイルと同じディレクトリ内にあるファイルを指定したことになります。サブディレクトリ内のファイルを指定するには，サブディレクトリ名の後に / で区切って，ファイル名を書きます。
ここで，URLというものについて，少しだけ解説しましょう。 URLとは Uniform Resource Locator の略で，インターネット上にある情報の場所を指し示す住所のようなものです。
京都産業大学建学の精神が載っているウェブページのURL
http://www3.kyoto-su.ac.jp/feature/kengaku/kengaku.html
を例にとって，その部分部分の役割を解説しましょう。
http の部分はプロトコル部あるいはスキーム名と言って，その情報がどのような形式（プロトコル）で通信されるか，どのような種類のリソースであるかを表しています。
http は HyperText Transfer Protocol の略で，wwwサーバーがネットワーク上にドキュメントを送り出すときに使うプロトコルで，HTMLファイルなどはこのプロトコルが用いられます。
プロトコル部で指定できるものは，http の他によく使われるものとして ftp，mailto などがあります。
www3.kyoto-su.ac.jp の部分はホスト部あるいはサーバ名と言って，情報が蓄えられているコンピュータあるいはシステムの名前と場所を表しています。この部分は，メールアドレスにあるドメイン部分とよく似ています。
feature/kengaku/kengaku.html の部分はディレクトリ部あるいはパス名と言って，ホスト部で指定されたコンピュータ上のどのディレクトリの中の何という名前のファイルか，ということを表しています。
同じファイル内の指定された目的地へのリンクを作るには， 目的地の設定と，その目的地へのリンクを作る，という二つのことをする必要があります。
目的地を設定するには，目的地にa要素を作り，その a要素の開始タグに name="アンカー名"を入れます。
<a name="アンカー名"> 目的地のテキストや画像 </a>
同一文書内に設定した目的地へのリンクを作るには，A要素の開始タグに href="#アンカー名" を入れます。
<a href="#アンカー名"> クリックするテキストや画像 </a>
このあたりで，簡単な Web ページを作ってみましょう。 練習問題１
文章中のある語句を強調したいときには，em タグ（em は emphasizeの略）を用います。 さらに強調したいときには，strong タグを用います。
emタグやstrongタグで強調された部分をブラウザで見た場合， イタリック体（斜体）やボールド体（太字）で表示されます。 しかし，EMタグやstrongタグを，字体を変えるために用いてはなりません。 あくまでも，語句を強調したいときのみ，用いるべきです。
インターネット上で公開されるウェブページを記述するときには，
著作権に配慮する必要があり，
他の文献などから引用した部分は，そのことを明示しなければなりません。
<cite>と</cite> とで引用先を記述し，
引用文を自分の文章の一部分とするときには<q>と</q>とを用いて，
段落全体が引用文であるときには<blockquote>と</blockquote>
とを用いて，引用文であることを明示します。
通常のブラウザで引用ブロックを表示すると， 数文字分だけ左右に空白がとられて， ウインドウの中心よりに表示されます。 また，上の使用例を見て分かるように，引用ブロックの中にパラグラフがあります。 パラグラフの中に引用ブロックがあってはなりません。
imgタグ（img は image の略）を用いると，テキストの間に画像を表示させることができます。 その一般的な書き方は次のようになります。
<img src="画像ファイルのURL" alt="画像が表示できない場合の代替テキスト">
画像ファイルのURLを単にファイル名にした場合，HTMLファイルが存在している ディレクトリ内にあるファイルを指定したことになります。
画像を用いた練習問題をしてみましょう。 練習問題２
テーブル（表）は table タグと tr, td タグとで作る（tr は table row の略， td は table data の略）。 table 要素は表全体を表し，tr 要素は表の中の１行を表し，td 要素は表の中の一つのデータを表します。したがって， table 要素の中にいくつかの tr 要素が入り，tr 要素の中にいくつかの td 要素が入ります。
テーブルを細い枠で囲むには，<table> タグの代わりに <table border="1"> とします。この "1" は枠の太さを表しているので，この数値を大きくすると太い枠となります。
tableを用いた練習問題をしてみましょう。 練習問題３
HTMLファイルを作っても，それをWWWに公開するためには，外部から誰でもアクセスできる場所にそのファイルをおく必要があります。 京都産業大学のcc環境では，各自のホームディレクトリにある public_html というディレクトリがそのための場所になっています。 この単元の総仕上げとして，自己紹介のウェブページを作って，公開することにしましょう。
この授業の最初で作った サンプルファイル を自分で書き直して，そのままのファイル名で保存します。
それをウェブブラウザで開いて，目標通りに表示できていることを確認しましょう。 次に，そのファイルを，次のコマンドを実行して，さきほどの public_html ディレクトリに移動させます。
% mv mypage.html ~/public_html/
今後 HTML ファイルを作るときには，公開することを前提にして，最初からこのディレクトリに作ってもいいでしょう。
しかし，これだけではファイルのアクセス権の理由で，他の人はまだ見ることができない場合があります。 次のコマンドで，アクセス権を調べてみます。
% ls -l index-j.html
次のように表示された場合，そのままで結構です。
-rw-r--r-- ..................... index-j.html
しかし，次のように表示された場合，そのファイルは所有者以外は読めないことになっているので，当然WWWからも見ることができません。
-rw------- ..................... index-j.html
この場合は，次を実行して，所有者以外にも「読み」のアクセス権を与えます。
% chmod a+r index-j.html
ls -l index-j.html の結果が次のように変わっていることを確認しましょう。
-rw-r--r-- ..................... index-j.html
これで，誰でも貴方のウェブページにアクセスすることができるようになりました。
誰でもアクセスできるとはいえ，それは貴方が今作ったHTMLファイルの場所，すなわち URL を知っている人だけです。その URL は
http://www.kyoto-su.ac.jp/~*******/index-j.html
です（*******は貴方のユーザID）。このURLを教えてもらった人が，貴方のウェブページを見ることができます。
この授業の受講者全員のウェブページへのリンクが張られたページを，作ってあります。 他の人のウェブページが見たい人は， 受講者のウェブページからたどって見て下さい。
しかしこれでは，もっと多くの人に自分のウェブページを見てもらうことができません。 不特定多数の人に見てもらうためには，WWWの情報網からたどることのできる（リンクされている）ページにしておく必要があります。その一つの方法として，大学のウェブページから貴方のウェブページにリンクを張ってもらうことができます。そのための手続きが ユーザサービス にあります。
mypage.html を指定されたディレクトリに置いた人は，授業担当者へ，その URL を書いたメールを送って下さい。
ウェブページを公開すると，それは，貴方が世間に向かって発している言葉や情報となります。
そこに書かれてあることや情報にはすべて，貴方の責任がついてまわります。
著作権やプライバシーなどに注意してウェブページを作って下さい。
また，自分の電話番号や住所や写真などの個人情報を載せるのも止めておきましょう。
他人の個人情報も，もちろんダメです。
大事に使っているメールアドレスも載せない方が無難です。
メールアドレスをウェブページで公開した直後から，スパムメール（迷惑メール）がたくさん送りつけられることがよくあります。
また，他人を誹謗中傷する内容はもちろん避けて下さい。
インターネットに公開するということは，街角にビラを貼るのと同じく，不特定多数の人の目に入ることになります。
他人を傷つける内容を公開した場合，裁判に訴えられることになりかねません。
著作権や個人情報に関して，注意するべきことを簡単に箇条書きにしておきます。もっと詳しくは，この授業で行う，著作権の節で学習してください。
WWWの情報網からアクセスできるウェブページを作るためには，WWWの窓口の役目をするWWWサーバーとなっているコンピュータに，自分で作ったHTMLファイルを置く必要があります。
大学（10号館）にいてHTMLファイルを作った場合には，普通にファイルを public_html ディレクトリに保存すると，大学のWWWサーバーとなっているコンピュータに保存されるので，それだけでWWWの情報網からアクセスできるようになります。
しかし，大学外，たとえば自宅でHTMLファイルを作った場合には，それを大学のコンピュータまで移す必要があります。そのようなとき，自宅のパソコンがインターネットに接続されているならば， FTP (File Transfer Protocol) あるいは，SFTP (Secure File Transfer Protocol) を使うことにより，ホストコンピュータへファイルを転送することができます。
FTP と比較すると，SFTP は暗号化された通信を行うことでパスワードなどの漏洩の危険性を少なくしています。SFTP が使える環境にあれば，できるだけそれを使って下さい。
また，FTP, SFTP を用いて，大学のコンピュータからファイルを受け取ることもできます。大学で書きかけたHTMLファイルを家で書き直す場合には，そのファイルを自宅のパソコンに FTP, SFTP を用いて転送し，パソコンのエディタで書き直して，それを再び大学のコンピュータに転送するとよいでしょう。
FTP, SFTP を行うためのアプリケーションは多数あり，貴方の家のパソコンの種類にも依存するので，ここではその使い方は説明できません。 ただ，どの場合でも，次のような手続きになります。
なお，自分のパソコンからWWWサーバーとなっているコンピュータにファイルを転送することをアップロード， その逆にWWWサーバーから自分のパソコンにファイルを転送することをダウンロードと言うこともあります。
WindowsXPのＦＴＰを使用したWebページの更新方法 に，その一つの使い方が載っていますから，参考にして下さい。
インターネット上でのきらびやかなウェブページを見て， あのようなものを早速作りたくなる気持ちも分かりますが， 重要なものは，見た目ではなく中身であることを忘れないで欲しいものです。 「この部分を大きな文字にしたい」とか「この部分は赤色にしたい」とか を考える前に， 「この部分は重要」とか「ここからは別の内容」とか 「この部分は他のウェブページからの引用」とかを考えながら作るべきです。
ウェブページを作るために使われているHTML言語は， 文書の見栄えを記述するためのものではなく， 文書の構造を記述するためのものであることを忘れないようにしましょう。 また，HTML言語で文書の構造をきちんと記述することができれば， スタイルシートというものを用いることにより， 見栄えを統一的に変更することが可能となります。 スタイルシートについては，ここで解説する余裕がないので，各自，独習してください。
インターネットにおけるアクセシビリティ（accessibility）ということがよく言われます。 アクセシビリティの直訳は「情報への近づきやすさ」という意味ですが， 年齢，国籍，障害その他の要因に対するバリアフリー・アクセスという意味で用いられています。 アクセシビリティが高いウェブページとは， 子供，高齢者，外国人，そして視覚障害，色覚障害，聴覚障害の人， さらにはマウスを使用できずにキーボードだけで白黒画面のコンピュータを操作している人， そのような人に対しても配慮したウェブページのことです。
インターネットを使っている人は，健常者だけではありません。 ハンディキャップを持った人が，貴方の書いたウェブページを見るかも知れません。
たとえば，視覚に障害のある人がウェブページを閲覧する場合には， そこに書かれている文字を音声で読み上げる機能を持ったウェブブラウザを利用します。 そのようなウェブブラウザは， <h1> や <strong> などのタグを解析して， 文書の構造や語句の重要度を調べ，それをもとに内容を読み上げます。 そのようなとき，ただ文字を大きくするためだけに <h1> タグが使われていたりすると， 情報が正確に伝わらなくなります。
また，背景色と文字色のコントラストに差がないと，モノクロ画面を使っている人には大変見づらいものとなります。これは，色覚が弱い人（日本人の20人に一人はそうです）にとっても同じような状況となります。
＝＝モノクロ画面では＝＞
しかし，背景色と文字色のコントラストに差があるようにすると，モノクロ画面でも見えやすくなります。 色弱の人にとっては，状況はそれほど単純ではないようですが（ 色覚に障害を持っていたとしたら、あなたのサイトは見えるでしょうか ?）， 先ほどのものよりかは良く見えることでしょう。
＝＝モノクロ画面では＝＞
また，画像を表示する img タグには，画像が表示できないときに代わりに表示する文字列を指定するための alt 属性 がありますが，視覚障害の人が使う音声読み上げブラウザは，この文字列を読み上げることで，画像表示の代用とします。そのようなことに使用される文字列であることを認識して，どのような文字列にするかを考えて下さい。
このようなアクセシビリティに対する配慮は，何を考慮したら良いのか，どのようにすれば良いのか，知っていなければできないことが多いので，それを学習する必要があります。 アクセスビリティの高いウェブページを作成するための勧告がW3Cから出されていて，それの日本語訳もウェブ上に載っています（ ウェブコンテンツ・アクセシビリティ・ガイドライン 1.0）。 また，JIS（日本工業規格）からも，アクセシビリティに対する指針が出されています（ 日本工業標準調査会（JISC）「データベース検索」の「JIS検索」をクリックし、「JIS規格番号検索」に「X8341-1」か「X8341-2」または「X8341-3」と入力し，詳細表示を押して下さい）。 以上のようなものを良く読んでおくように。
W3C (World Wide Web Consortium) から，HTML 4.0 に関する勧告が出されており， 日本語訳も手に入りますHTML4.0 Specification(jp)。 そこには，HTML 4.0 の仕様にのっとったきちんとしたHTMLファイルを書くために， 知っておかなければならないことが書いてあります。ぜひ一読しておいてください。
ここで，これまでに解説しなかった 文書型宣言（doctype）について簡単に説明します。
HTMLの仕様には，バージョン2.0から4.01までいろいろなバージョンがあります。
HTMLファイルではそのファイルがどのバージョンの仕様に沿って書かれているかを明示することになっています。ファイルの先頭（html要素の外側）に，次のようなもののいずれか一つを入れることで，なされます。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
（古いバージョンなので，通常は使用しません）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
（バージョン4.01に厳密に従っていることを示します）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
（バージョン4.01ですが，非推奨のタグを含むことを示します）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
（バージョン4.01のフレーム設定用バージョン）
HTMLの解説書を見ると，バージョン4.01では非推奨であるタグでも平気で解説されています。
そのような本を見ながらHTMLファイルを書いた場合は，
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
としておくのが無難です。
W3C が設けているウェブページ The W3C Markup Validation Service では， HTML ファイルが仕様にそってきちんと書けているかどうかをチェックしてくれます． これを利用するのも良いでしょう．
HTML は本来，文章の論理構造を記述するための言語でしたが，Webブラウザメーカーが（勝手に） 機能拡張を繰り返して，単なる見栄えを記述するための機能で溢れかえるようになっていまいました。そこで，最新のバージョンである HTML 4.0 では本来の目的に立ち返るために，HTML ファイルは文書の論理構造のみを記述し，見栄えの記述はスタイルシートと呼ばれる CSS ファイルで行うように改められました。
さらに，文書の見栄えを指定するタグを廃止し文書構造の記述に特化した言語として， XHTML (eXtensible HyperText Markup Language) が W3C によって策定されました。 今後は，ウェブページを記述する言語の主流は，HTML から XHTML へ移行していくものと考えられます。
ただ，古いバージョンのウェブブラウザなどの場合， XHTML に完全に対応しきれていない状況もあります。しかし，HTML 4.0 に厳密に従って書かれた HTML ファイルを XHTML ファイルに書き直すのは，それほど困難ではありません。したがって，今現在ウェブページを書こうとする場合には， HTML 4.0 の仕様に従って， きちんとした HTML ファイル（と CSS ファイル）を書いておく，というのが最善の方法のようです。