PDF file

Html のこれだけは！
∼ Shigetoshi Yazaki ∼
はじめに
HTML(Level 3.0)
.
,
Home Page
このガイドでは
と呼ばれる
を作る上で必要な道具のこれだ
けは知っておきたい！ことを解説するといっても私自身このマニュアルを作りながらはじめ
て
を作成しているので超ド初心者であるしかしそれでもこのくらいはすぐで
きるということを紹介したつもりである
ここでは unix といわれる
上で mule なるエディタを用いて
のソースファ
イルを作成することを前提としますですから unix や mule の多少の知識はあることと仮定し
てはなしを進めますその多少の知識は『ものの本で調べる』
『人に聞く』
『拙著「
のこれ
だけは！」
「
のこれだけは！」を読む』のどれかを選択することによってすぐに得られます
また
後述としては
を使うことにしましょう
言語は日々進歩しているので最新の情報そしてより詳しいこった機能について
しりたい人は書店に並ぶ沢山の
の入門書・解説書を参照されることもしくは知ってい
る人に聞くことをお勧めします3
" Home Page
,
OS
.
Mule
WWW Browser(
HTML
,
)
.
.
,
,
.
.
"
,
Home Page
,
Unix
Netscape
,
HTML
.
(
,
,
.
)
目次
x1 手始めに...
x
・
・
x
ちょろっと人様の
x
ちょろっと人様の
1.1 HTML WWW Browser って？
1.2
Home Page を覗いてみる
1.3
Home Page のソースファイルを覗いてみる
: : : : : : : : : : : : : : : : : : : :
x2 簡素な Home Page をつくってみよう
x
を作る前にすること : : : : : : : : : : :
x
とにかく一行からなる
をつくってみよう
x
もうすこし手を加えましょう : : : : : : : : : : : : :
2.1 Home Page
2.2
2.3
2
: : : : : : : : : : : : : : : : : : : : : : : :
Home Page
x3 色つけて, リンクして...
x
public html の中 : : : : : : : : : : :
x
public html のサブディレクトリの中
x
index.html の中身 : : : : : : : : : : :
3.1
3.2
3.3
: : : : : : : : : :
2
2
3
3
: : : : : : : : : : : : : : :
: : : : : : : : : : : : : : :
: : : : : : : : : : : : : : :
3
3
4
5
: : : : : : : : : : : : : : : : : : : : : :
: : : : : : : : : : : : : : : : : : : : : :
: : : : : : : : : : : : : : : : : : : : : :
5
5
6
x4 数時間後の感想
8
x5 参考文献
8
3 このガイドは , 平成 9 年度冬学期「総合科目・数理科学 III(文系・北田均教官) 」の補助資料として作成
した (1997.10.30 矢崎成俊＠東大数理).
Shigetoshi Yazaki 1997
c .
1
x1
手始めに...
x1
2
手始めに...
x1.1
HTML・WWW・Browser って？
我々の目標は世界に発する情報発信基地の作成, つまり Home Page を作って, イン
ターネット上でみんなに見てもらおうということです. 作る際には何らかの言語が必要
で , 現在は素人でも手軽に操れる HTML という言語が流行しているようです. HTML
とは Hyper Text Markup Language の略称です.
さて, インターネット上で人の作った Home Page を覗くには, あるシステムを利用
する必要があります. そのシステムは WWW(World Wide Web) といわれ , 具体的には
WWW Browser と呼ばれる, 情報探索用のアプリケーションソフトを用います. ここ
では, 現在主流の Netscape Navigator (Netscape Communications 社) を使いましょう
(他にもある：MOSAIC, MacWeb, Lynx,...). ちなみに Browse とは「拾い読みする」
という意味だそうです.
x1.2
ちょろっと人様の Home Page を覗いてみる
まず Netscape を立ち上げましょう:
% netscape &
とする.
立ち上がったら , Open もしくは File の中の Open Location を選択してする. そし
て見てみたい場所＝アドレスを入力する. 例えば ,
http://www.asahi.com
と入力すれば , 朝日新聞が読めるし ,
http://www.tbs.co.jp/news23
とすれば , 筑紫さんの顔が拝める. また, この授業の指導教官の北田先生のページは
http://www.komaba.ecc.u-tokyo.ac.jp/~nkitada
でみれるし , 超初心者の僕のページは
http://fjord.ms.u-tokyo.ac.jp/~shige
でみれる. この文章を入力している時点では「 Hello. 」の一行しかない. さっき知った
のだが ,
http://joyjoy.com
というのは色々リンクされていて面白い (Japanese Open Yellowpage の略).
ここで , http とは hyper text transfer protocol の略で, 「ハイパーテキスト転送プ
ロトコル」の意味らしい. これでは , あまりわかった気がしないのだが , プロトコルと
いうのは「条約・規約」の意味で, ハイパーテキストというのは「テキストの中に他の
ファイルなどとリンクできる言葉が入っているテキスト」のことだそうなので, そこか
らとりあえずは想像できよう. この仲間には ftp=le transfer protocol などがある.
x2
簡素な HOME PAGE をつくってみよう
x1.3
3
ちょろっと人様の Home Page のソースファイルを覗いてみる
上であげたいくつかのホームページは , どれも HTML 言語で書かれたものである.
そのソースファイルは, View をクリックして , その中の Document Source をさらにク
リックすれば , 中身を見ることができる. それらを参照しつつ我々も独自の Home Page
を作成していこう.
x2
簡素な Home Page をつくってみよう
x2.1
Home Page を作る前にすること
一番はじめにやらねばならぬことは public html というディレクトリをつくるこ
とと, その中に index.html というファイルをつくることの２点である....
まず, 自分のディレクトリに public html もしくは .public html というディレク
トリをつくる (mkdir=MaKe DIRectory):
% mkdir public html
次に , その新しいディレクトリに移動する (cd=Change Directory):
% cd public html
その中で, index.html というファイルを作って, その中に HTML 言語を書き込ん
でいくことになる:
% mule index.html &
以上のことは約束ごとで, また以降いろいろなファイルをつくっていく際には, 全ての
ファイルの拡張子に .html をつけることになる. それらのファイルすべてが public html
のディレクトリの中にあることも必要である.
さて mule でファイル index.html が書き込める状態になっているので, さっそく
簡素な Home Page を作成していこう.
x2.2
とにかく一行からなる Home Page をつくってみよう
ディレクトリ public html の中にあるファイル index.html の中に下のように書
き込んでみよう.
<html>
Hello.
</html>
これが一番の根幹をなすものです. もうこれで一応 Home Page のできあがりです. ぼ
くの場合は,
http://fjord.ms.u-tokyo.ac.jp/~shige
として Netscape でみてみると...
x2
簡素な HOME PAGE をつくってみよう
4
Hello.
と一行寂しくでてきました.
スタイルとしては
<html>
<aaa>
.....
</aaa>
<bbb>
.....
</bbb>
</html>
<...> は tag といわれます. これは始まりの tag です.
終りの tag </...> を書き込みます.
となります.
x2.3
それに対応して
もうすこし手を加えましょう
上のものにもう少し手を加えましょう. とりあえず下の様にしてみました.
<html>
<head>
<title> Shige's
</head>
<body>
<center>
<h1> Welcome to
</center>
</body>
</html>
Page
</title>
my home page !
</h1>
<html> と </html> があり, そのなかに, 「頭: <head>
<body> </body> 」を作ります. これら３つの tag が全ての基
これが骨です. 一番外枠に
</head> 」と「体:
礎となって, あとはいろいろな tag を「頭」と「体」の中に埋め込むことによって様々
な Home Page が作られるのです.
さて, 上で
<title> </title> という tag がありましたが , これは Netscape を
立ち上げたときに枠の一番上に表示されるものです. 今の場合は,
Netscape: Shige's Page
と表示されます. だから , このタイトルの部分に日本語で書き込むと, 普通は文字化け
して読めませんので注意してください.
さてさて, 「体」の中身が本論です.
x3
色つけて, リンクして...
<h1>
5
</h1>
とありますが , <h1> というのは文字のサイズです. <h1> から <h6> まであって, <h1>
が一番大きいサイズです. 結局一番大きいサイズの文字列が <center> </center> に
Welcome to my home page !
よって Browser の中心に表示されるということになります.
x3
色つけて, リンクして...
Home Page 製作に慣れている人みたいに作ってみたいものだ . 彼らの Home Page
はカラーであって, さらにその製作者の意図による様々な他の Home Page へ簡単にリ
ンク (link: 繋がりをもつこと) できるようになっている. しかし , まだ製作はじめて数
時間の僕でも, 上の２点をそれなりにクリアーすることは簡単だということがわかりま
した.
あっ, 先程いいわすれましたが , tag は大文字でも小文字でもどちらでも良いです.
さて Home Page 製作数時間目の作品は下のようになりました. 僕のホームページ
(fjord.ms.u-tokyo.ac.jp/~shige) を覗きつつ参考にしてください.
x3.1
public html の中
現在の僕の public html の中は,
bg/
gif/
photo.html tools.html
dvi/
index.html ps/
です. ps/ などのサブディレクトリは, 僕が勝手につくったもので, ディレクトリの中を
整理するためです.
x3.2
public html のサブディレクトリの中
それぞれのサブディレクトリの中は下のようになっています.
bg:
bluewind_weave.gif
purple_paper.gif
greenred_marble.gif raindrops_light.gif
dvi:
yellow_paper.gif
x3
色つけて, リンクして...
gnu.dvi
6
hpage.dvi mule.dvi
unix.dvi
gif:
starup3.gif undcon.gif
yazaki.gif
yazaki2.gif
ps:
gnu.ps
x3.3
hpage.ps mule.ps
unix.ps
index.html の中身
本体である index.html の中身を覗いてみましょう.
<html>
<head>
<title> Shige's Page </title>
</head>
<body background="bg/yellow_paper.gif">
<center>
<img align=bottom src="gif/undcon.gif">
<img align=bottom src="gif/undcon.gif">
<img align=bottom src="gif/undcon.gif">
<img align=bottom src="gif/undcon.gif">
<img align=bottom src="gif/undcon.gif">
This page is under construction.
<img align=bottom src="gif/undcon.gif">
<img align=bottom src="gif/undcon.gif">
<img align=bottom src="gif/undcon.gif">
<img align=bottom src="gif/undcon.gif">
<img align=bottom src="gif/undcon.gif">
</center>
<center>
<hr><h1> Shigetoshi Yazaki's Home Page </h1>
</center>
<center>
<h3><font color="#dd8822">Welcome to my home page !</font></h3><hr><p>
</center>
x3
色つけて, リンクして...
7

<li><a href="tools.html">
Manuals for UNIX, GNUPLOT, MULE and HTML (in Japanese) </a><p>
<li><a href="photo.html">
Smoking Man (in Japan) </a><p>
<li><a href="http://fjord.ms.u-tokyo.ac.jp">
Home Page of Matano Seminar </a><p>

<hr>
<address>
<a href="http://www.ms.u-tokyo.ac.jp">
Graduate School of Mathematical Sciences,
The University of Tokyo, Komaba Tokyo 153, Japan.
</a>
<br>
Shigetoshi Yazaki <[email protected]&gt
</address>
</body>
</html>
新しい tag の解説をしていきます. 上から. 基本形としては <○○○> </○○○> で
すが , オプションとして <○○○ △△△="□□□"> </○○○> というアトリビュート
(属性): △△△ を付け加える場合がある. これら属性については, ここではでてきたも
ののみ解説します. その他の属性については, ものの本をみてください.
<body backgound="○○○.gif"> </body> ・
・
・ background(背景) の模様の設
定. ○○○.gif というイメージファイルを僕は,
http://www.netscape.com/assist/net sites/bg/backgrounds.html
の中から拾って (ダウンロードして ) きた.
・
・<img>(イメージ ) は様々なイメージ
<img align=○○○ src="○○○.gif"> ・
を src=SouRCe ファイルである gif ファイルを参照してつくり出す tag. align
は , 位置を合わせるという意味.
<hr> ・
・
・水平の罫線を引く tag. 罫線の上下に空白があく.
x4
数時間後の感想
8
<font color="○○○"> </font>・
・
・文字フォントの color(色) を設定.
・
・段落替えで, 空白を作る.
<p>・
<!○○○>・
・
・コメントを書く tag. ブラウザには現れない.
<li> </li>・
・
・リストアップする.
・
・○○○のファイルへリンクする.
<a href="○○○"> </a>・
<address> </address>・
・
・アドレス・文責を表し , 斜体で書かれる.
<br>・
・
・改行.
x4
数時間後の感想
まだまだ奥は深い. というより凝りだしたらキリがなさそうな気がする. 「動く
Home Page 」なども作りたいし ... 皆さんもそうだと思う. さらなるステップアップは
「人に聞く」
「本を読む」もしくは「人の作ったよさそうな Home Page のソースファイ
ルをパクル」のがよさそうだ.
x5
参考文献
近くにあった次の本のみ参考にしました. まだまだ山のように参考書はありますの
で , 自分にあったものを選んでください.
はじめての HTML3.0
{ Sachi(著), 宇野謙吉 (監修)・
・
・リブロス 2700 円

Download Report