HTML とは、HyperText Markup Language（ハイパーテキスト・マークアップ言語）の略です。 この言語を利用しますと、ウェブ・ページが作成できます。 なお、 ハイパーテキスト とは、リンク構造を持つテキストのことです。 また、 マークアップ とは、「ここは段落」、「ここは見出し」といった指示をすることです。
ウェブ・ページを作成するには、まず、HTMLファイルを作成します。 必要に応じて、画像ファイルなども用意します。 そして、ファイル一式をウェブ・サーバへ転送（アップ・ロード）します。 すると、URLが決定し、ウェブ・ページが公開されます。
HTMLファイルは、テキスト・ファイルです。 したがって、特にソフトを買う必要はなく、Jeditなどのテキスト・エディタで作成できます。 なお、HTMLファイルの拡張子は、.htmlか.htmです。
世の中には、ホームページ作成ソフトというものがあります。 これは、ワープロのような操作で、ウェブ・ページを作成するものです。 このソフトのやっていることは、操作画面に基づいて、HTMLファイルを生成することです。
HTMLの構成要素は、主に次の3つです。
最近は、画像ばかりのウェブ・ページも多いですが、ウェブ・ページの基本は文章です。 HTMLファイルに文章を書けば、ウェブ・ページにその文章が表示されます。 例えば、HTMLファイルに"こんにちは"と書けば、ウェブ・ページに"こんにちは"と表示されます。
タグ とは、「ここは段落」、「ここは見出し」といったことを指示する印です。 HTMLファイルにタグを書けば、その指示に従ってウェブ・ページが表示されます。 例えば、タグ<P>は段落開始を表し、タグ</P>は段落終了を表します。 したがって、HTMLファイルに"<P>こんにちは</P>"と書けば、ウェブ・ページに段落らしく"こんにちは"と表示されます。
画像のあるウェブ・ページも、タグを使って画像ファイルを指示します。 また、リンクのあるウェブ・ページも、タグを使ってリンク先を指示します。
文字実体参照 とは、特殊な文字を表す記号列です。 HTMLファイルに文字実体参照を書けば、ウェブ・ページに対応する文字が表示されます。 例えば、文字実体参照&は文字&を表します。 したがって、HTMLファイルに"&"と書けば、ウェブ・ページに"&"と表示されます。
通常、ウェブ・ページを公開するには、作成したHTMLファイルをウェブ・サーバへ転送（アップ・ロード）します。 しかし、東京女子大学のシステムでは、HTMLファイルを特定のフォルダに保存するだけで、ウェブ・ページが公開されます。 フォルダWWWに保存しますと、世界中に公開されます。 フォルダWWW-localに保存しますと、学内だけに公開されます。
この授業では、作成したウェブ・ページを学内だけに公開します。 すでに、他の授業でウェブ・ページを作成した人もいると思いますので、授業用のフォルダWWW-local/comp2dを作成し、その中にHTMLファイルを保存することにします。
まず、Finderのウィンドウを開き、サイドバーのホームをクリックしてください。 もし、ホーム・フォルダの中にフォルダWWW-localがなければ、新規フォルダを作成して、名前をWWW-localにします。 そして、フォルダWWW-localを開き、その中に授業用のフォルダcomp2dを作成します。
東京女子大学のシステムでは、HTMLファイル
は、URL
で学内公開されます。 HTMLファイル
は、URL
で学内公開されます。
HTMLファイルindex.htmlは特別な存在です。 このファイルについては、URLでファイル名を省略できます。 この規則は、東京女子大学に限らず、ほとんどのシステムで共通です。
それでは、テスト用のHTMLファイルを作成します。 次のようなテキスト・ファイルを作成してください。 ファイル名はtest01.htmlとし、保存フォルダはWWW-local/comp2dです。 文字コードはUTF-8, 改行コードはCR（Mac）にします。
東京子のホームページ これはテストページです。
HTMLファイルを作成しましたら、ウェブ・ブラウザSafariのウィンドウを開きます。 そして、アドレスバーにURL
と入力します。 次のように表示されれば成功です。
もし、おかしな文字が表示されたら、文字コードを指定します。 メニューバーの「表示」をクリックし、「テキストエンコーディング」→「Unicode（UTF-8）」と選択してください。
ウェブ・ページを更新するには、まず、HTMLファイルを変更して、保存します。 そして、Safariの再読み込みボタンをクリックします。
HTMLファイルに文章を書けば、ウェブ・ページにその文章が表示されます。 ただし、HTMLファイルで改行しても、ウェブ・ページでは改行されません。 改行は、ウィンドウの幅に合わせて行われます。 また、HTMLファイルでスペースや改行を続けて書いても、ウェブ・ページでは1つのスペースになります。
メールなどのプレーン・テキストでは、改行を利用して、見出しや段落を表しました。 HTMLでは、タグを利用して、見出しや段落を表すのです。
例
おはようございます。 こんにちは。 こんばんは。
ウェブ・ページに特殊な文字を表示するには、HTMLファイルに文字実体参照を書きます。 基本的な文字実体参照は、以下の通りです。
| 文字 | 文字実体参照 | 覚え方 |
|---|---|---|
| < | < | Less Than |
| > | > | Greater Than |
| & | & | AMPersand |
| " | " | QUOTe |
例
<--->
HTMLでは、タグを使って色々な指示をします。 多くの指示は、「ここからここまでを、こうしなさい。」というものです。
タグには、開始タグと終了タグがあります。 開始タグ は指示の始まりを表し、 終了タグ は指示の終わりを表します。 開始タグの形式は<〜>で、終了タグの形式は</〜>です。
なお、タグによっては、終了タグのないものもあります。 この場合は、「ここを、こうしなさい。」という指示です。
Pタグ （Paragraph）は段落を表します。
HTMLファイルで<P>〜</P>で囲みますと、ウェブ・ページでは上下に空白が設けられます。
例
<P> 太陽に最も近い惑星は、 水星です。 </P> <P>その次は金星です。</P>
H1タグ （Heading）は見出しを表します。 数字の1は、最も重要な見出しという意味です。 次に重要な見出しには、H2タグを使います。 重要度の順に、H3タグ、H4タグ、H5タグ、H6タグまで用意されています。
HTMLファイルで<H1>〜</H1>で囲みますと、ウェブ・ページでは上下に空白が設けられ、大きな文字で表示されます。 <H2>〜</H2>で囲みますと、H1タグよりは小さく表示されます。 H3タグ、H4タグ、…となるにしたがって、文字は小さくなります。
例
<H1>太陽系について</H1>
BLOCKQUOTEタグ は引用を表します。 他人の書いた文章は、自分のものとは区別する必要があります。 そのときに使うのが、引用です。
HTMLファイルで<BLOCKQUOTE>〜</BLOCKQUOTE>で囲みますと、ウェブ・ページでは上下左右に空白が設けられます。
例
<P>ガガーリンは言った。</P> <BLOCKQUOTE> <P>地球は青かった。</P> </BLOCKQUOTE>
BRタグ （line BReak）は強制改行を表します。 このタグに、終了タグはありません。 改行については、HTMLファイルで段落などの指定だけを行い、ウェブ・ページで自動的に改行させるべきです。 どうしても改行したいときだけ、このタグを使います。
HTMLファイルで<BR>と書きますと、ウェブ・ページでは改行されます。
PREタグ （PREformatted text）は整形済みテキストを表します。 これは、改行やスペースに意味のあるテキストのことです。
HTMLファイルで<PRE>〜</PRE>で囲みますと、ウェブ・ページでは、改行は改行のまま、スペースはスペースのまま表示されます。
例
<PRE> --o----o----o----o----o----o----o----o-- 水星 金星 地球 火星 木星 土星 天王星 海王星 </PRE>
--o----o----o----o----o----o----o----o-- 水星 金星 地球 火星 木星 土星 天王星 海王星
ADDRESSタグ は連絡先を表します。 世界中に情報を公開するのでしたら、ページの最後に、自分の名前とメール・アドレスは書いておくべきです。
HTMLファイルで<ADDRESS>〜</ADDRESS>で囲みますと、ウェブ・ページでは前後に改行が入り、文字は斜体で表示されます。
HRタグ （Horizontal Rule）は水平線を表します。 このタグに、終了タグはありません。 これは、ページの区切りとして使うのが普通です。
HTMLファイルで<HR>と書きますと、ウェブ・ページでは水平線が表示されます。
例
<HR> <ADDRESS> 2006年11月22日<BR> 東京子 b04a001@twcu.ac.jp </ADDRESS>
歴史上の人物や有名人の中から、自分の好きな人を一人選んでください。 そして、その人についてのウェブ・ページを作成してください。
具体的には、その人の名前を見出しにし、その人の簡単な紹介文を段落にします。 もし、その人が何か言葉（小説の文章や歌詞でもよい）を残していれば、それを引用します。
ファイル名は、report09.htmlとしてください。
例
今日の演習9の答案（URL）をメールでkonishi@twcu.ac.jp宛に提出してください。 メールを送るときは、大学のパソコンを使うか、大学のメール・サーバに接続するかして、差出人が大学のメール・アドレスになるようにしてください。 メールの本文には、学生番号、氏名、科目名、授業日（11月22日）を明記してください。