next up previous contents index
次へ: 別の文書への関連付け--リンク(link) 戻る: public_htmlを作る   目次   索引

ホームページの元になるファイルを作る

ホームページの元になるファイルは、先程作成した public_html というディレ クトリの中の index.html という名前のファイルです。このファイルは、 HTML と呼ばれる言語を使って書きます。 この index.html というファイルの内容が、

http://home.hiroshima-u.ac.jp/ub123456/
という URL で世界中から閲覧することができるのです。

まず最初に index.html の簡単な雛型を作ってみましょう。 エディターアプリケーションを起動して、以下のように入力してください。 

<html>
  <head> 
    <title> これはタイトルです。</title> 
  </head>
  <body>
    ここに本文を書きます。
  </body> 
</html>



以上を入力し終えたら、エディターウインドウのメニューの 「ファイル」→「保存」をクリックします。ファイル保存のパネルが 現われます。先程作った public$\_{}$html というディレクトリの中に index.html という名前で保存します。

保存し終えたら、Netscape を起動して自分のホームページを見てみましょう。 ユーザー名が ub123456 である人のホームページは、

http://home.hiroshima-u.ac.jp/ub123456/
という URL になります。まだ内容は何もありませんが、 上で作った自分のホームページがきちんと表示されたでしょうか。 もしうまく表示できないときは、ホームディレクトリの中に名前を間違えず public$\_{}$html というディレクトリができているか、その中に index.html という ファイルが作られているかを確認しましょう。

さて上で作った HTML ファイルを見ると < や > に囲まれた印、例えば <html> や <body> といったものが幾つか見られます。 これらは、文章の論理構造を指定するためのもので、 タグ(tag, markup tag)と呼ばれます。 タグには、次の様に対で使うものと単独で使うものの 2 種類あります。

対になっているものはその間に挟まれている内容を特定の書式にします。 単独のものは強制改行や段落の区切り線の表示などに用いられます。

上の例で言うと、<head>…</head> はその間が文章のヘッダーで あることを意味し、<body>…</body> はその間が本文になる と指定してます。 様々なコンピュータのウェブ閲覧アプリケーションは、これらのタグを解釈して、 指定された論理構造に従い表示を行います。 先にも述べましたが、基本的に HTML は文章の論理構造を記述するものですので、 使われるウェブ閲覧アプリケーションによって、細かい表示のされ方は 異なります。ですから、センターのコンピュータでこのように見えていたからと いって、別のコンピュータでも同じように表示されるわけではないことを 憶えておきましょう。

幾つかのタグについて、どのような役割を果たしているかまとめてみます。

html 囲まれる部分がHTMLである。
head 囲まれる部分が文章のヘッダ部分である。
title 囲まれる部分が文書のタイトルである。
Netscape ウインドウのタイトルバーに表示される。
body 囲まれる部分に本文が入る。
h1, h2 囲まれる部分が見出しである。見出しのレベルは6段階。
h3 $\cdots$ H1からH6まで設定可。H1 が最も大きな見出し。
p 段落の指定。改行と空白が挿入されます。
hr 横罫線の指定。
ul, li 箇条書。
dl, dt, dd 定義リスト。

この中の見出しレベルを指定するタグは、

<h3> HTML の書き方 </h3>
のように書いて、文章の見出しを設定します。何が書いてあるかすぐに分るよう に見出しの部分は、文字が大きくなったり前後に空白が入ったりします。 見出しの論理的なレベルは 6 段階あり、それぞれ文字の大きさが 変わったりしますが、表示されるときにどのような大きさになるかを 指定するものではありません。

箇条書と書かれたタグは次のように使います。 

<ul>
  <li> りんご
  <li> いちご
  <li> みかん
</ul>



このように書くと、``りんご''と``いちご''と``みかん''の三つの項目が 並んで表示されます。

定義とその意味を記述するときに使う定義リストは、次のように書きます。 

<dl>
  <dt> HTML <dd> Hyper Text Markup Language
  <dt> WWW <dd> World Wide Web
  <dt> JPEG <dd> Joint Photographic Experts Group
</dl>



項目名付きの箇条書としても使うことができるでしょう。

NAGATO Yasushi 平成16年4月6日