\documentstyle[epsf,ascmac,alltt,fancybox]{jarticle}
\title{HTML}
\date{}
\author{}
\newcommand{\dg}{\gt}
\newcommand{\dm}{\min}
\setlength{\topmargin}{-12mm}
\setlength{\textheight}{24.5truecm}
\setlength{\textwidth}{17truecm}
\setlength{\oddsidemargin}{-8.5mm}
\setlength{\evensidemargin}{-8.5mm}
\newcommand{\丸数字}[1]
{{\ooalign{\hfill\(\scriptstyle#1\)\hfill\crcr\(\bigcirc\)}}}
\newcommand{\CR}{\ovalbox{\ooalign{\hfill\(\scriptstyle\hookleftarrow\)
\hfill\crcr}}}
\begin{document}
\maketitle
HTML (Hyper Text Markup Language) は WWW(World Wide Web) サーバに
搭載する情報を記述するための言語である．
HTML を使うことにより非常に簡単な文法で多彩な表現が可能である．
当初，HTML はテキストによるハイパーリンクのみであったが，
イリノイ大学 (University of Illinois at Urbana-Champaign) にある
NCSA (The National Center for Supercomputing Applications) が開発した
WWW ブラウザ Mosaic\footnote{NCSA Mosaic の開発チームの一人であった大学生
Marc Andreessen が，Silicon Graphics の創始者 Jim Clark と Netscape
Communications を作ったのは 1994 年のことである．} により，
テキスト，サウンド，グラフィックスなどの情報を統一的に扱うことが可能になった．
このようにマルチメディアを HTML で簡易に扱えるようになったことから，
WWW を中心としたインターネット利用者は急増した．

HTML の文法は SGML (Standard Generalized Markup Language) のサブセット
であり，リソースへのリンク情報と文書そのものの表示を行う機能をもっている． 
HTML は 1991 年，CERN の Tim Berners-Lee(WWWの開発者) により最初のドラ
フトが示された．その後，数々の機能拡張を経て，1996 年，W3C (World Wide
Web Consorcium) によって HTML 3.2 が勧告案が出された．その後 HTML 4.1 が提
案されている\footnote{{\tt http://www.w3.org/MarkUp/}}．
現在主流の WWW ブラウザ (Netscape, Internet Explorer など) は
HTML 3.2 に基づいたものが多いが，
各ブラウザ独自の機能拡張を盛り込んだものも多く，使うブラウザによっ
てレイアウトが一致しないこともある．

近年は,より紙に近い表現力を目指すだけではなく，動きのある表現
\footnote{Java, shockwave, ビデオストリーミングなど.}
を取り込むための拡張がなされている．

\section{HTML の基本}
HTML はプレインテキストに {\dg\bf タグ} (tag) \index{たぐ@タグ}
\index{tag} をつけることでレイアウトや 
{\dg\bf ハイパーリンク} (hyper link) \index{はいぱーりんく@ハイパーリ
  ンク} \index{hyper link} を表現する．
タグとはテキストのフォントやスタイル，スペースなどブラウザ内での表示を
定義するマークのことで，一つのタグは {\tt <} と {\tt >} でくくられてい
る．通常，テキストを {\tt <element>} と 
{\tt </element>} ではさむ．{\tt element} には大文字，小文字の区別はない．
HTML 文書の構造は，
\begin{itemize}
\item ヘッダ部 {\tt <head>...</head>}
\item ボディ部 {\tt <body>...</body>}
\end{itemize}
に分けられる．ヘッダ部には，文書に関する情報が記述されるが，
ブラウザで表示されるものは {\tt <title>...</title>} だけである場合が多い．
ブラウザによっては {\tt <title>} が日本語に対応していないもある．
ボディ部にはページの本文を記述する．
以下に HTML の基本型を示す．

\begin{itembox}[l]{一番簡単な HTML の例}
\begin{alltt}
<html>
<head>
<title>簡単な HTML の例</title>
</head>

<body>
<h1>見出しは大きく表示される</h1>
<p>ここからは，一つの段落だ．数理情報学とはなんぞや?</p>
<p>これが，二つ目の段落．</p>
</body>
</html>
\end{alltt}
\end{itembox}

\section{ヘディング(見出し)}
\begin{center}{\tt <h{\it x}>...</h{\it x}>}\end{center}
HTML は {\tt <h1>} から {\tt <h6>} まで 6 段階のヘディングがある．
ヘディングされたテキストは通常のテキストより大きく表
示されるかボールド体で強調されて表示される．

\begin{itembox}[l]{ヘディングの例}
\begin{alltt}
<h1>this is h1  日本語</h1>
<h2>this is h2  日本語</h2>
<h3>this is h3  日本語</h3>
<h4>this is h4  日本語</h4>
<h5>this is h5  日本語</h5>
<h6>this is h6  日本語</h6>
\end{alltt}
\end{itembox}
また属性 {\tt align} で見出しの位置を決めることができる．
{\tt align} に使えるのは {\tt center}, {\tt right}, {\tt left} の 3 つ
である．

\begin{itembox}[l]{ヘディングの例(属性 {\tt align} を使用)}
\begin{alltt}
<h1 align="right">this is h1 日本語</h1>
\end{alltt}\end{itembox}

\section{パラグラフ(段落)・ 改行}
\begin{center}{\tt <p>...</p>}\end{center}
\begin{center}{\tt <br>}\end{center}
通常のワードプロセッサとは異なり HTML は{\dg\bf 改行}(carrige return)
は意味をもたない．
そのため，改行することをはっきりさせるには，
段落全体を {\tt <p>...</p>} で囲む．
なお {\tt </p>} は省略可能である．{\tt <p>} で改行をさせると，
次の段落との間に余白が空いてしまう．これがいやな場合は {\tt <br>} を用いる．
また {\tt <p>...</p>} は {\tt <p>} に属性をもたせ \newline
{\tt <p align=center>...</p>} 等として使うこともできる．

\section{整形済みテキスト (preformatted list)}
\begin{center}{\tt <pre>...</pre>}\end{center}
固定幅のフォントを用いスペース，改行などもそのまま表示される．
イメージとしては \TeX の {\tt verbatim} 環境に似ている．

\section{文の区切り}
\begin{center}{\tt <div>...</div>}\end{center}
段落ではなく，ある程度まとまった量をセンタリングしたり，
左右寄せにするときに用いる．
属性 {\tt align = "left"}, {\tt align="right"}, {\tt align="center"} 
が使用できる．このうち {\tt <center>} は {\tt <div>} が無くても単独で
使用できる．
\begin{itembox}[l]{センタリング}
\begin{alltt}
<center>...</center>
\end{alltt}\end{itembox}

\section{引用文}
\begin{center}{\tt <blockquote>...</blockquote>}\end{center}
文を引用するときに使う．タグで囲まれた部分はインデントされる．

\section{ライン(Horizontal Rules)}
\begin{center}{\tt <hr>}\end{center}
横線を表示する．属性 {\tt align}，{\tt noshade}，{\tt size}，
{\tt width} がある．{\tt noshade} は影なしの線になり，
{\tt size} は線の太さ，{\tt width} はウィンドウの横幅に対しての割合
をパーセンテージで指定したり，ピクセル数で指定する．
\begin{itembox}[l]{{\tt hr}}
\begin{alltt}
<hr noshade size=5 width=70>
<hr noshade size=3 width=80>
\end{alltt}
\end{itembox}

\section{コメント(Comment)}
\begin{center}{\tt <!-- コメントはこの中に書く -->}\end{center}

\section{番号なし(Unnumbered List)}
\begin{center}{\tt <ul>...</ul>}\end{center}

{\tt <ul>...</ul>} で囲まれた間に，{\dg\bf 項目} (list item) 
\index{こうもく@項目} \index{list item} を {\tt <li>} の後に続けて記述する．

\begin{itembox}[l]{番号なしリスト}
\begin{alltt}
<ul>
  <li> <a href="http://www.nanzan-u.ac.jp/">南山大学</a>
  <li> <a href="ftp://sunsite.sut.ac.jp/">Sun サイト</a>
  <li> <a href="http://www-p.seto.nanzan-u.ac.jp/">南山大学(瀬戸キャンパス)</a>
</ul>
\end{alltt}
\end{itembox}

\section{番号付き(Ordered List)}
\begin{center}{\tt <ol>...</ol>}\end{center}
{\tt <ol>...<ol>} 間に，項目を {\tt <li>} の後に記述する．

\begin{itembox}[l]{番号つきリスト}
\begin{alltt}
数理情報学部の三本柱
<ol>
  <li>Computer Science
  <li>Operations Research
  <li>Mathematics
</ol>
\end{alltt}
\end{itembox}

\section{定義リスト(Definition List)}
\begin{center}{\tt <dl>...</dl>}\end{center}
{\tt <dl>...</dl>} 間に，定義する言葉 (definition term) を
{\tt <dt>} の後に記述する．定義の内容
(definition) は {\tt <dd>} のあとに書く．
{\tt <dd>} によって記述された部分は，他の行よりインデントされて表示される．

\begin{itembox}[l]{定義リスト}
\begin{alltt}
<dl>
  <dt>HTML
  <dd>HTML (Hyper Text Markup Language) は WWW(World Wide Web) サーバに搭載
する情報を記述するための言語である．HTML を使うことにより非常に簡単な文
法で多彩な表現が行える．当初 HTML はテキストによるハイパーリンクのみで
あったが，イリノイ大学にある
NCSA (National Center of Super computing) が開発した WWW ブラウザ
Mosaic により，テキスト，サウンド，グラフィックスなどの情報を統一的
に扱うことが可能になった．
</dl>
\end{alltt}\end{itembox}

\section{リンク (Anchor)}
\begin{center}{\tt <a>...</a>}\end{center}
従来型のメディアになく WWW の一番の特徴がこのハイパーリンクである．
ハイパーリンクしたい言葉をこのタグで囲むことにより，相互参照が実現する．

\subsection{ローカルファイルへのリンク}
\begin{center}{\tt <a href="ファイル名">リンク</a>}\end{center}
HTML 文書があるコンピュータのファイル (ローカルファイル)
にリンクするときに用いる．
ファイル名は絶対パス，相対パスともに使えるが，相対パスにしておいた人が
管理が楽になる．

\begin{itemize}
\item 絶対パス
  \begin{itemize}
    \item {\tt <a href="/wwwdata/home/student/2000/it/{\it yourname}/index.html">My Home Page </A>}
  \end{itemize}

\item 相対パス
   \begin{itemize}
     \item {\tt <a href="index.html">私のホームページ</a>}
\begin{itemize}
\item ただし，相対パスの場合は基準となるディレクトリが WWW サーバの設
  定によって異なる．通常，各ユーザのホームディレクトリの下の {\tt
    /private\_html/} の下である．
  そこから相対パスで指定する．ただし，現在は他のディレクトリの中身が外
  部に見えないように，各ユーザの {\tt /private\_html/} より深いところし
  かアクセスできない．
       \end{itemize}
     \end{itemize}
\end{itemize}

\subsection{WWW 上にある他のドキュメントへのリンク}
\begin{center}{\tt <a href="URL">...</A>}\end{center}
インターネット上 (あるいは LAN 上) にある他のサーバへリンクをはる場合は
{\dg\bf URL} (Uniform Resource Locator) を記述する．URL は 
http (Hyper Text Transfer Protocol), ftp (File Transfer Protocol),
gopher の各サービスを選ぶことができる．
http の場合は {\tt http://} の後に続けてサーバの名前を書き，
その後にファイル名を書く．

\begin{itembox}[l]{URL でリンク}
\begin{alltt}
  <a href="http://www.nanzan-u.ac.jp/index.html">南山大学</a>
  <a href="http://www-p.seto.nanzan-u.ac.jp/index.html">南山大学(瀬戸キャンパス)</a>
\end{alltt}
\end{itembox}
なお，指定するファイルが {\tt index.html} の場合，省略できる．
\begin{itembox}[l]{{\tt index.html} のときは省略可}
\begin{alltt}
<a href="http://www.nanzan-u.ac.jp/">南山大学</a>
\end{alltt}\end{itembox}

\section{文字の色・サイズ}
\begin{center}{\tt <font size= color= face=> </font>}\end{center}
{\tt size}, {\tt color}, {\tt face} の指定を行うことにより，タグに囲ま
れた文字の属性を指定する．
\begin{center}\begin{tabular}{l|l|l}
        \hline
        {\tt size} & 1-7 & サイズ．7 が最大 \\
        {\tt color} & {\tt \#RRGGBB}，色名& 色を 16 進数または色の名前で指定 \\
        {\tt face} & フォント名 & フォントを指定 \\
\hline
\end{tabular}\end{center}

\begin{itembox}[l]{{\tt font}}
\begin{alltt}
<font size="5">サイズは 5</font>
<font color="red">色は赤</font>
<font color=#00ff00>この色は緑</font>
\end{alltt}
\end{itembox}

\section{画像を扱う}
\begin{center}{\tt <img>}\end{center}
\begin{itembox}[l]{画像 ({\tt nanzan.gif}) を表示する．}
\begin{alltt}
<img src="nanzan.gif" alt="nanzan university">
\end{alltt}\end{itembox}
基本形は，{\tt src=} の後にパスを含めたファイル名または URL を書く．
画像ファイルのデータフォーマットは，ブラウザによって利用できるものが異なるが，
gif, jpeg が一般的 \footnote{次世代のフォーマットである png がこれから 
 Web 向きに普及するだろう．}である．
属性の {\tt alt} は，何らかの理由により画像ファイルが読めなかったときや，
テキスト専用の WWW ブラウザ(lynx 等)を利用している人に，
画像の代わりにどんな情報があるかを文字で説明する．

目の不自由な人の中に，音声合成装置を利用して WWW から情報を得ている方もいる．
この場合 {\tt alt} タグがないと，
内容がわかりにくいそうだ．ぜひ {\tt alt} を使いたい．
また，{\tt width}, {\tt height} も使用できる．この場合のパーセンテージ
の割合は，({\tt hr} とは違って)もとの画像に対しての割合である．

\begin{alltt}
<img src="nanzan.gif" ALT="nanzan university" width=80% height=70%>
\end{alltt}

\begin{tabular}{l|l|l}
        \hline
        {\tt width}  & ピクセル数または百分率 & 横のサイズ \\
        {\tt height} & ピクセル数または百分率 & 縦のサイズ \\
        {\tt align}  & top, middle, bottom  & テキストの揃え位置 \\
        {\tt border} & ピクセル数　         & 画像のまわりに枠を表示 \\
        {\tt hspace} & ピクセル数         & 画像とテキストとの間の横マージン \\
        {\tt vspave} & ピクセル数         & 画像とテキストとの間の縦マージン \\
\hline
\end{tabular}

\section{ちょっとひと工夫}
美しい画像は高い解像度と色数で大きく見せたい．しかし，見ている相手の通
信事情も考えざるをえない．そこで，見せる対象を考えて，
\begin{itemize}
\item イメージサイズの縮小
\item イメージファイルの減色
\item ファイルフォーマットの選択
\end{itemize}
も必要であろう．イントラネットのみでしか使わない場合などは，画像の容量
など気にしなくても良いということもある．

\section{透明化 GIF}
GIF の形式を GIF89 というフォーマットにすると，表示するときに 8 bit カ
ラーのうち 1 色だけを背景として透明化することができる．UNIX 上では 
giftrans 等を用いて変換できる．

\section{背景，テキスト色の指定}
\begin{center}{\tt <body>}\end{center}
HTML の最初のほうに書く {\tt <body>} は，オプションとして色や背景の指
定を行うことができる．
\begin{center}\begin{tabular}{l|l}
        \hline
        {\tt text} & 文字の色　 \\
        {\tt link} & リンクの色　 \\
        {\tt vlink} &　一度訪れたリンクの色  \\
        {\tt alink} & リンクをクリックしたときの色　 \\
        {\tt bgcolor} &　背景色  \\
        {\tt background} & 背景にはる画像 \\
\hline
\end{tabular}\end{center}

\section{バックグラウンドイメージ}
\begin{center}{\tt <body background="URL">}\end{center}
URL はもちろんローカルファイルで構わない．

\section{バックグラウンドカラー}
\begin{center}{\tt <body bgcolor=\#ff0088>}\end{center}
イメージを使わないで，バックグラウンドカラーを指定することもできる．
{\tt bgcolor} の値は {\tt \#} のあとに，RGB それぞれ 2 桁の 16 進数で記述する．

\begin{center}
\begin{tabular}{l|l}
\hline
白 & {\tt ffffff} \\
黒 & {\tt 000000} \\
赤 & {\tt ff0000} \\
緑 & {\tt 00ff00} \\
青 & {\tt 0000ff} \\
灰 & {\tt aaaaaa} \\
\hline
\end{tabular}
\end{center}

\begin{itembox}[l]{色の指定}
\begin{alltt}
<body bgcolor=#D9D919 TEXT=#000000 LINK=#0000ff vlink=#ff00ff>
\end{alltt}\end{itembox}

\section{表}
各行を {\tt <tr>...</tr>} で囲み，その中は {\tt <th>} (table header)
表見出しや，{\tt <td>} (table data) データを記述する．
複数行，複数列にデータがわたるときは {\tt rowspan}, {\tt colspan}
で指定する．

\begin{itembox}[l]{テーブルの例}
\begin{alltt}
<table border>
<tr>
<th colspan=2></th>
<th>今日の<br>天気</th>
</tr>
<tr align=center>
<th rowspan=2>千葉県</th>
<th>柏</th>
<td>晴れ</td>
</tr>
<tr align=center>
<TH>海</TH>
<td>大雨洪水</td>
</tr>
</table>
\end{alltt}\end{itembox}
さらに {\tt cellspacing=}，{\tt cellpadding=}，{\tt width=},
{\tt nowrap}, {\tt bgcolor=} を属性として使うことができる．

\section{フレーム (Netscape Extension)}
\begin{center}{\tt <frameset>...</frameset>}\end{center}
がある．フレームはブラウザのウィンドウをいくつかに区切る．
フレームを用いる時には，フレーム定義用のファイルと，
それぞれのフレームに対応した HTML ファイルを用意する必要がある．
分割方法は縦か横かしかないが，入れ子にすることにより，
複雑なレイアウトも可能である．

\begin{itembox}[l]{フレーム}
\begin{alltt}
<frameset rows="200,*">
<framesrc="index1.html" name="title">
<frameset cols="30%,*">
<framesrc ="index2.html" name="menu">
<framesrc ="index3.html" name="contents">
</frameset>
</frameset>
\end{alltt}\end{itembox}

\section{さらに進んだタグ}
\begin{center}{\tt applet}\end{center}
このタグをつけることにより Java や caml のアプレットを扱うことができる．
ただし，これはそれぞれの言語をサポートしているブラウザ以外では表示されない．

\section{アウトラインを考える}
ある程度まとまった量の情報をのせるときは，
全体の構成を考えたほうがよい．ページを見ている人に，
ページの中の現在位置を確認できるように工夫する必要もあるだろう．

\section{リソースをつくるときは}
画像や音声はデータサイズが大きくダウンロードに時間がかかるため，
ファイルサイズに注意する必要がある．この場合も，
見せる対象を念頭におく．一つのファイルに対し，
複数のフォーマットのファイルを用意し，ファイルサイズを明記し，
見ている人にどれをロードするか選択させるという例もある．
画像についてはアイコンのようなサムネイルをつくるのもよいだろう．

\end{document}
