\documentstyle{jarticle}
\title{HTMLの書き方}
\author{牧之内研 M1 龍 浩志}
\begin{document}
\maketitle
\section{WWW}
WWW(World Wide Web)とは,インターネット上に構築された「ハイパーテキスト環
境」で,これを構成する主な要素がHTML(Hyper Text Markup Language)文書と呼ば
れるマルチメディア文書です．

WWWでは,URL(Universal Resource Locator)によってインターネット上の資源
の種類と場所を指定します．URLの構成は次のようになっています．\\
\verb|scheme://server[port][/path]| \\
schemeは,資源の種類(接続プロトコル名)を示すもので,HTML文書を要求・応答
するのはHTTP(Hyper Text Transfer Protocol)です．

WWWを閲覧するためには,WWWブラウザと呼ばれるツールが必要です．代表的なも
のとしてはNetscape NavigatorやInternet Explorerなどがあります．

\section{HTML}
HTMLは,テキストファイルの間にタグを挿入して作ります(例1)．タグとは,\verb|<|と
\verb|>|の間に命令(directive)を書いたもので,通常2つが対になっています(例:
\verb|<H1>見出し</H1>|)．/のついたものは範囲の終りを示します．終りを示す
タグがないものもあります(エンプティタグ)．\\ \\
例1
\begin{verbatim}
	<HTML>
	 <HEAD>
	  <TITLE>Basic of HTML</TITLE>
	 </HEAD>
	 <BODY bgcolor="#ffffff">
	  <H1>HTMLの基礎</H1>
	  HTMLの基本的な作り方．<BR>
	  <UL>
	   <LI><A href ="www.html">WWW</A>
	   <LI><A href ="tags.html">タグについて</A>
	   <LI>以下略
	  </UL>
	 </BODY>
	</HTML>
\end{verbatim}

タグの記述は大文字・小文字どちらでもかまいません．
\verb|<title>|も\verb|<TITLE>|も\verb|<TitLe>|でも同じ意味です．
また,ブラウザによっては解釈されないタグもあります．解釈されなかったタグ
は無視されます．

以下では,一般的なHTML文書で用いられる(または便利だと思われる)主なタグについて説明します．

\section{基本的なタグ}
\subsection{ドキュメントの構成}
以下の3つのタグは,ファイルの内容がHTML文書であることを知らせるための構造
タグです．実際の画面には表示されませんが,ドキュメントの構成を知らせる重
要なタグです.
\begin{itemize}
 \item \verb|<HTML></HTML>|:HTMLファイルであることを明示するタグ \\%
       ファイルの始めと終わりにおかれ,その中に書かれたテキストはHTMLのファ%
       イルであることを示します．%
 \item \verb|<HEAD></HEAD>|:ドキュメントの情報記載部分 \\%
       タイトルやデフォルトURL,制作者の情報,日付などブラウザには現れない%
       情報を記入します(タイトルは見えますが)．%
 \item \verb|<BODY></BODY>|:ファイルの内容 \\%
       \verb|<HEAD>|タグに続いて記述し,ブラウザに表示される内容を表しま%
       す．\\%
       また,この中で\verb|bgcolor|や\verb|text|を指定することで,背景色や%
       文字の色を変えることもできます(この指定をアトリビュート(属性)とい%
       います)．
\end{itemize}
\subsection{タイトル}
タイトルは\verb|<TITLE></TITLE>|で表します．このエレメントは必ず
\verb|<HEAD>|タグ内におかれます．
\subsection{見出し}
文章の先頭に書かれるような見出しを指定するのは\verb|<Hn></Hn>|(Header)タグで
す．nには数字が入ります．ヘッダには７つのレベルがあり,\verb|<H1>|が最大,\verb|<H7>|が最小で
す．但し,見出しとして使えるのは3か4くらいまでです(後は小さすぎ)．
\subsection{リスト}
番号無しのリストを作るのは\verb|<UL></UL>|(Unnumbered List)です．リスト
アイテムは\verb|<LI>|の後に記述します．終りを示すタグはありません．番号
付リストは\verb|<OL></OL>|(Ordered List)です．

また,リストはいくらでもネスティング(入れ子にする)が可能です．つまり,リス
トアイテム自体を更にリストにすることができます．

他に,定義型リスト(Definition List:\verb|<DL></DL>|)というものもあります．
\subsection{改行}
文章を改行したいときには改行したい場所で\verb|<BR>|(BReak)を使います．

また,\verb|<P></P>|(Paragraph)でその中身を1つの段落として扱うことができ
ます．当然,\verb|</P>|の後で改行が行われます．
\subsection{コメント}
\verb|<!--   -->|の中に文字を書くと,それはコメントとして扱われ,ブラウザ
には表示されません．ソースを読みやすくする為などに使われます．
\subsection{水平ライン}
\verb|<HR>|(Horizontal Rule)で水平なラインが引けます．レイアウト上結構便
利です．エンプティタグです．
\subsection{センタリング}
\verb|<CENTER></CENTER>|で囲んだ範囲をセンタリングすることができます．文
字だけでなく,表や図もセンタリングできます．
\subsection{引用文}
\verb|<BLOCKQUOTE></BLOCKQUOTE>|で,囲んだ部分を前後の文章から独立させ,且
つインデントを揃えることができます．また,右側にもスペースができます．

「引用文」と書いてはいますが,普通に文章のレイアウトを整える際にかなり便
利だったりします．
\subsection{文字飾り}
Webサイトでは文字の飾りつけが結構重要な要素だったりします．
\verb|<B></B>|で太字(Bold),\verb|<I></I>|で斜体(Italic),\verb|<U></U>|で
下線つき(Underlined),\verb|<S></S>|で取消線つき(Strike-through)の文字が
書けます．

また,\verb|<FONT></FONT>|タグで文字の色(\verb|color|)や文字の大きさ
(\verb|size|,1〜7)を変えることもできます．

\section{ちょっと複雑なタグ}
\subsection{アトリビュート}
アトリビュートとは,タグの機能の微調整をしたり,条件を付け足したりするもの
です．アトリビュートの書式は,一般に以下のようになります．\\
\verb|<TAG attribute = 値>|\\
値に数値以外のものを取るときは,”(ダブルクオーテーション)で囲みます．

\subsection{イメージの貼付}
HTMLでイメージ(図)を表示させるには\verb|<IMG>|(IMaGe)を使います．必ず
\verb|src|アトリビュートを伴います．\verb|src|はソース(SouRCe)を表し,表
示させるイメージのファイル名を指定します．\\
\verb|<IMG src="イメージファイル">|

他に,以下のようなアトリビュートが使用できます．
\begin{itemize}
 \item \verb|alt="テキスト"|:イメージの代わりにテキストを表示させる(ALTernative)\\
       イメージが表示できなかった場合に表示されるテキストを指定します．%
 \item \verb|width,height|:イメージの大きさを変化させる\\%
       \verb|width|で幅,\verb|height|で高さを調整できます．値にはピクセ%
       ル数または％を取ります．％はウィンドウの大きさに対するパーセンテー%
       ジです．%
 \item \verb|align|:イメージとテキストの位置関係(ALIGNment) \\%
       イメージの左右のテキストがどのように表示されるかを指定します．値%
       に\verb|top,center(middle),bottom|をとった場合,イメージ横のテキス%
       トは１行になります．複数行を表示させるときは,値を\verb|right|また%
       は\verb|left|にします．%
 \item \verb|border|:枠を作る\\%
       イメージの縁に枠を作ります．値にはピクセル数を取ります．
\end{itemize}
\subsection{テーブルの作成}
テーブルとは表組のことです．テーブル作成を示すタグは
\verb|<TABLE></TABLE>|です．テーブルの横方向の枠を作るのは
\verb|<TD></TD>|(Table Data),縦方向の枠を作るのは\verb|<TR></TR>|(Table
Row)です．通常,以下のような書式になります．
\begin{verbatim}
<TABLE>
<TR>
<TD>1段目第1列</TD><TD>1段目第2列</TD>
</TR>
<TR>
<TD>2段目第1列</TD><TD>2段目第2列</TD>
</TR>
</TABLE>
\end{verbatim}
そのほか,テーブルでは以下のようなタグ・アトリビュートが使えます．
\begin{itemize}
 \item \verb|<TH></TH>|:ヘッダをつける(Table Header)\\
       \verb|<TD>|の代わりに使うことで,行や列の見出しを作ることができま%
       す．中身はセンタリングされ,フォントはボールドになります．%
 \item \verb|<CAPTION></CAPTION>|:タイトルをつける\\%
       テーブルの上部にタイトルを入れます．通常,\verb|<TABLE>|タグの直後にい%
       れます．\verb|align = "bottom"|でテーブルの下にすることもできます．
 \item \verb|border|:枠の太さ\\%
       \verb|<TABLE>|タグの中で使います．枠組みの先の太さを変更できます%
       (ピクセル数)．%
 \item \verb|align,valign|(Vertical ALIGNment):文字位置のコントロール\\%
       \verb|<TD>,<TH>|タグの中で使います．セル内の文字位置を調整することがで%
       きます．\verb|align|で水平位置(left,center,right),\\ \verb|valign|で%
       垂直位置(top,center,bottom)が調整できます．%
 \item \verb|rowspan|:複数行にわたるセルを作る\\%
       \verb|<TD>,<TH>|タグの中で使います．値の数の行に跨るセルを作りま%
       す．%
 \item \verb|colspan|:複数列にわたるセルを作る(COLumn SPAN)\\
       \verb|<TD>,<TH>|タグの中で使います．上と殆んど一緒です．
\end{itemize}
\subsection{リンク}
他のページなどへのリンクを貼るときには,\verb|<A></A>|(Anchor)タグ＋
\verb|href|(Hypertext REFerence)を使い
ます．通常,次のような書式になります．\\
\verb|<A href = "ファイル名">テキスト</A>|\\
ブラウザでは,タグに囲まれたテキスト(ホットテキスト)を選択することでファ
イルの場所へと飛びます．

指定するファイルはHTMLファイルに限りません．イメージファイルやテキストファ
イルを指定すればそれ自体を表示させることができます．また,ファイルのダウ
ンロードを促すときにもこれを使います．
違うサーバのページ(もしくはファイル)にリンクを貼るときにはそのページ(ファ
イル)のURLを指定します．``mailto:メールアドレス''でメールアドレスのURL指
定もできます．

他に,ファイルの途中へリンクを貼るための\verb|name|アトリビュートもありま
す．

\subsection{メタ情報}
\verb|<META>|タグで,テキストの著者や更新日,キーワードなどを記述する事が
できます．このタグは,\verb|<HEAD>|タグの間に書き,ブラウザには直接表示さ
れません．必ずしも書く必要のあるタグではありませんが,幾つか重要な機能が
あります．
\begin{itemize}
 \item テキストの更新日\\%
       キャッシュの更新に役立つ?\\%
       \verb|<META http-equiv="Expires" content="Tue,18 Apr 2000
       13:00:00 GMT>|
 \item URL転送\\%
       指定秒数後に指定URLへ画面更新します．URL変更などでよく見掛けます．%
       \\
       \verb|<META http-equiv="refresh"
       content="5,http://www.db.is.kyushu-u.ac.jp/~hideo/index-j.html">|
 \item サーチエンジン\\%
       サーチエンジンのためのキーワード指定ができます．最も一般的な用途%
       といえます．\\%
       \verb|<META name="keywords" content="MAPPLE,C++,JAVA">|
 \item デフォルト情報\\%
       デフォルトのスクリプト言語,スタイルシート言語,文書内の文字エンコー%
       ディング方法などを特定します．\\%
       \verb|<META http-equiv="Content-Type" content="text/html;
       charset=EUC-JP">|
\end{itemize}
その他,様々ありますので調べてみてください．

\subsection{その他}
他にもいろいろありますが,例によって研究室内にもたくさん参考書があります
のでそちらの方を読んでみてください．もちろんWeb上にもその手の話はたくさ
んありますので探してみてください.


\section{アップロード}
作成したHTMLファイルは,そのまま手元に置いていても殆んど意味がありません
ので,通常はftpなどでWWWサーバにアップロードします．こうすることで初めて
万人がそのページを見れるわけです．

しかし,研究室でサイトをつくった場合には,ftpを使う必要はありません．
まず,\\
\verb|% mkdir ~/public_html|\\
で,自分のホームの下にディレクトリを作ります．そして,その中にindex.htmlと
いう名前でHTMLファイルを作ります．これでオッケーです．URLは\\
\verb|http://www.db.is.kyushu-u.ac.jp/~xxx/|(\verb|xxx|は自分のアカウント)
\\
になります．

ちなみに,研究室のページ(http://www.db.is.kyushu-u.ac.jp/index-j.html)か
らはindex-j.htmlがリンクされるので,このファイルも用意した方が無難です．

\section{スタイルシートとJavaScript}
スタイルシートとは,フォント,テキスト,テーブルなどそのスタイルの指定をパ
ターン化し,まとまった形でドキュメントに適応させることができるという機能
です．これを用いればHTMLページの体裁,テキストのフォントやサイズ,色や背景,
配置などを整えることができます．更に,スタイルシートはドキュメント全体や,
ドキュメントのコレクション全体の表示特性を均一に指定する方法を提供します．

JavaScriptは,ブラウザがユーザに対してどのように振る舞うかをコントロール
するための機能とコマンドを持ったオブジェクト指向プログラミング言語です．
ドキュメントとそれを表示しているブラウザをオブジェクトの集合としてとらえ,
そのプロパティに対して計算をしたり変更を行ったりしています．

\section{CGIとSSI}
CGI(Common Gateway Interface)とは,外部のアプリケーション(CGIスクリプト)
で生成した情報をWebサーバ(httpd)経由でブラウザに送るためのインターフェー
スの総称です．通常,Webサーバでは静的な情報(イメージやテキスト)をブラウザ
に送信しますが,CGIを用いれば静的な情報だけでなくCGIスクリプトで生成した
動的な情報をブラウザに送ることが可能になります．

CGIはブラウザで入力した情報(フォームやタグなどでの)をCGIスクリプトに渡す
ことができます．CGIスクリプトは渡された情報を加工したり,他の情報を元にし
て新しいデータを生成したりすることができます．ここで生成されたデータは,
HTMLファイルやイメージファイルと同じようにブラウザに表示されます．つまり,
CGIを使うことでユーザのアクションによって動的に変化するドキュメントが作
れるのです．

SSI(Server Side Include)とは,HTMLファイルの中にSSIコマンドを書いておくこ
とで,サーバ側でそのコマンドが実行され,結果がブラウザに表示されるという仕
組みです．このSSIを用いれば,現在の時刻やどのドメインからアクセスしている
のかが判ります．

\section{XML}
XML(eXtensible Markup Language)とは，主にインターネット上で文書やデー
タを交換したり配布したりするためのマークアップ言語です．HTMLでは，決め
られたタグを使って文書を表現しますが，XMLでは，タグによってデータを表
現し自由にそのタグを定義するこ
とができます．XMLはデータの構造を記述したもので,レイアウトの情報は持っ
ていないのでXMLを表示させるにはスタイル指定言語が必要になります．ブラウ
ザでXML文書を表示するには，スタイル指定言語を用いてHTML形式に変換する
ことによって表示可能となります．Internet explorer5.0以上のブラウザで
はこれらの変換を内部的に行っており，XMLを表示することができます．
\section{課題}
今日の課題は「自分のページをつくる」です．

どんなものでも構いませんが，少なくともトップページ，自己紹介，その他の
3ページ程度作ってみてください．また，できるだけいろんなタグを使ってみ
てください．

作ったものは,先に述べた方法で自分のホームの下に置いて確認できるように
してください．研究室の本や，研究室のページ（ブラウザメニューの「表示」${\rightarrow}$\
「ソース」でそのページのソースを見ることができます）など参考にしてみ
てください．
\end{document}