HTML MANUAL1

ホームページとは（全体の構成）

ホームページはおおきくいって、HTML文書と画像のデータの2つからなっている。 HTML文書はさらに、情報そのものすなわち、お知らせ、サークル紹介などのデータとJava Scriptのようなプログラムからなっている。画像データそれ自身は作成はいろいろな方法があるが、ひとたび作成してしまえば文字と同じような扱いをすると思えばよい。簡単なホームページではJava Scriptについてはあまり用いず、主にデータを扱う。

全体のデザインをきめる

ホームページはhtmlファイルと画像ファイルjpgあるいはgifからなっている。さらにhtmlファイルは階層構造をなしていることがおおい。以下ではそのような全体の構成を説明する。3つのケースを考える。

お知らせ程度のページ

項目ごとに整理されたページ

見やすく構成されたページ

これらについて説明する。

1の場合　必要なhtmlファイルはひとつでよいだろう。それをindex.htmlとして、作成する。これ以外に、画像ファイルがいくつかいるかもしれない。壁紙、矢印、写真など。これらは各自のディレクトリにおいておく。

これを選択した人はindex.htmlをメモ帳で開いてそこに本文を書きます。ここをクリックすると例が見えます

必要なファイルのダウンロード(index.txt)

ダウンロードしたファイルはindex.txtとなっています。txtをhtmlとかきかえて使ってください。
名前の変更はエクスプローラでもできますが、それができない時は次のようにします。ダウンロードした時、ブラウザでソースが表示された時は「メニュー」をクリックします。そこから「名前を付けて保存」を選びます。 Webページの保存画面から「ファイルの種類」をhtmlファイルを選びます。次に[保存]をクリックします。ダウンロードした時メモ帳が起動したときは[メニュー]から「名前を付けて保存」を選びます。 [ファイルの種類]からすべてのファイルを選びます。つぎにファイル名のところをクリックして、半角文字で .txtを消して.htmlにかえます。保存をクリックします。

2の場合　必要なhtmlファイルは複数である。最初はindex.htmlとして、作成する。次にmypage1.html, mypage2.html, mypage3.htmlというようにファイルを作成する。ここで、mypage1, mypage2, mypage3は好きな名前にしてよい。ただし、アルファベットで8文字以内がよい。管理の都合最後には1,2,3, のように通し番号をつけておくとよい。これ以外に、画像ファイルがいくつかいるかもしれない。壁紙、矢印、写真など。これらは各自のディレクトリにおいておく。

これを選択した人はindex.htmlをメモ帳で開いて修正して本文を書きます。あとで新しいページが必要になったときに、mypage1.html, mypage2.html, mypage3.htmlに書きます。

ここをクリックすると見えます

必要なファイルのダウンロード(index.txt)
必要なファイルのダウンロード(mypage1.txt)
必要なファイルのダウンロード(mypage2.txt)
必要なファイルのダウンロード(mypage3.txt)

ファイルは４つすべてダウンロードしてください。ダウンロードしたファイルはindex.txt, mypage1.txt, mypage2.txt, mypage3.txtとなっています。txtをhtmlとかきかえて使ってください。
3の場合　この時は画面を縦に2つに区切り、左をやや小さく、右を大きめにしておく。ファイル構成はindex00.html, menu.html, mypage1.html, mypage2.html, mypage3.htmlというようにファイルを作成する。これらのファイルの役割はindex00.htmlは画面の分割の構成をきめる。menu.htmlは左のメニュー画面に表示するメニュー項目を記述する。 mypage1.html, mypage2.html, mypage3.htmlは本文を記述するページである。 mypage1.htmlはメニュー項目１の説明、mypage2.htmlはメニュー項目2の説明、 mypage3.htmlはメニュー項目3の説明といったようになる。これ以外に、画像ファイルがいくつかいるかもしれない。壁紙、矢印、写真など。これらは各自のディレクトリにおいておく。

これを選択した人はindex00.html, menu.html をメモ帳で開いて修正します。本文はmypage1.htmlに書きます。新しいページが必要になったとき、 mypage2.html, mypage3.htmlに書きます。

ここをクリックすると見えます

必要なファイルのダウンロード(index00.txt)
必要なファイルのダウンロード(menu.txt)
必要なファイルのダウンロード(mypage1.txt)
必要なファイルのダウンロード(mypage2.txt)
必要なファイルのダウンロード(mypage3.txt)

ファイルは５つあります。５つすべてダウンロードしてください。ダウンロードしたファイルはindex00.txt, menu.txt, mypage1.txt, mypage2.txt, mypage3.txtとなっています。txtをhtmlとかきかえて使ってください。
戻る

ホームページに手を加える

ここではすでにあるindex.htmlあるいはmypage1.htmlに手を加えて行く手順を説明します。まず、自分のディレクトリにはダウンロードしたファイルがあると思います。index.htmlのように.txtを.htmlに変更しておいてください。

ホームページを閲覧する

"マイコンピュータ"をクリックします。すると自分のドライブがあります。ここをさらにクリックすると先ほど保存したHTMLファイルがありますから、これをダブルクリックします。するとブラウザソフト Internet Explorer が立ち上がってダウンロードしたホームページが表示されます。

ファイルの修正　

ソースファイルを修正するためにはブラウザソフトにおいてメニューから表示をクリックします。つぎにメニューの中からソースを選んでクリックします。メモ帳が起動してソースが表示されます。
ここに適当な変更をします。ここでは変更の説明は次を参照してください。
これを保存します。ファイル(F)を選択し、　上書き保存(S)をクリックします。これで更新されています。
こんどはNetscapeあるいはInternet Explorerをクリックします。すでに起動されていますが、表示されているのは古いファイルなので再読み込み　あるいは　Reload ボタンをクリックして、更新します。ページの出来具合を確認して、さらに修正が必要な時はメモ帳の画面に修正をします。
この作業を繰り返してホームページを更新します。

ブラウザソフトでソースを選んでもメモ帳が起動しない場合には次のようにしてソースを表示します。これは、メモ帳以外のソフトをエディタとして用いる場合にもこの方法でできます。

まずデスクトップの下のスタートボタンを押すと、プログラムとか最近使ったファイルとか設定とか検索とかのメニュが現れますが、ここでプログラムをえらび、さらにそこで表示されるメニューの中からアクセサリをえらび、次に表示されるメニューからメモ帳を選び2回クリックします。
　メモ帳の画面になったら、ファイルを左クリックして、次に開くをクリックします。ここで新しいウィンドウが表示されますが、その中のマイコンピュータを2回クリックします。そこに、g92333002などのような各自のディレクトリが見えると思います。それを2回クリックします。するとその中のファイルの一覧がでます。ファイルが表示されないときはファイルの種類をわきの矢印をクリックしてプルダウンメニューをだして、すべてのファイルを選択します。このようにして、ファイル一覧が表示されたら、index.html　あるいは　mypage1.html　をクリックして選択します。つぎに開くをクリックすればファイルが表示されます。

戻る

ホームページの作成　(新規ページの作成)

　 メモ帳ソフトの起動
1. まずデスクトップの下のスタートボタンを押すと、プログラムとか最近使ったファイルとか設定とか検索とかのメニュが現れますが、ここでプログラムをえらび、さらにそこで表示されるメニューの中からアクセサリをえらび、次に表示されるメニューからメモ帳を選びます。
2. メモ帳のプログラムが立ち上がったらここに、HTML文書を記述します。とりあえず次のようにかいてください。

<HTML>
<TITLE>My home page</TITLE>
<BODY>
こんにちわ。
</BODY>
</HTML>

My home pageはホームページを閲覧したとき画面の上部に表示される。これは気に入った名前をつけてよい。
こんにちわは文書であるので何を書いてもよい。
2. これを書きおわったらメモ帳のファイル(F)をクリック　それから名前を付けて保存(S)をクリック　します。そうすると"ファイル名を付けて保存"の画面になりますが、ここで保存する場所は矢印キーをクリックし、"マイコンピュータ"をだします。それをクリックするとその中に各自のドライブ(Z)があるとおもいます。 g10263..のようにかいてあります。ここをクリックしてここを選びます。
次にファイル名ですが、これはコンピュータの内部で参照されるホームページの本当の名前ですので、よく考えてつけます。注意する点は最初に参照されるあるいは見られるページはindex.htmlとするのが慣例です。これはあとでホームページを公開したときに有利になります。
次にindex.htmlから参照される２つめ以降の名前は自由です。たとえば渡辺太郎君の場合には半角の英語で twata1.html のようにします。ここでtwata1は自由ですが、英語と数字であって8文字を越えない方が問題がないでしょう。またあとでページを多数作成することを考えてtwata1.html, twata2.html,twata3.htmlとすることを考えて最後に1,2,3 をふります。他方、.htmlは拡張子といわれ文書の種類をあらわすものですからこれは変更してはいけません。これがすんだら"保存(S)"をクリックします。保存したファイルは前と同じようにダブルクリックすればブラウザで見ることができます。

戻る

拡張子とファイルの性質

文書の種類をあらわす拡張子としては、たとえばWordで作成された文書であることをあらわす .doc, テキストであることをあらわす.txt, プログラムファイルであることをあらわす.exe, .dllなどがあります。これ以外にも、Window systemの設定に関わる .iniなどもあります。画像としては .jpg, .gif, .bmp, .pdf, .ps などの拡張子がついたファイルがあります。これらは画像データを記述する言語あるいは方法の違いをあらわしていると考えればよい。
是非覚えておいて欲しいのはホームぺージを記述した.html,画像のファイルである .jpg, .gif、テキストである.txtである。これらのうち、画像ではきれいな画像を見せたいときは.jpg, それほどきれいでなくてもよいが早く送りたいときに用いる.gifがある。.txtは簡単な文書の作成に用いる。

戻る

HTML文書と通常のワープロなどで作成された文書の違い
HTML文書は通常のワープロなどの文書(これをテキスト文書という)のなかに文字の色の変更などの命令(これをタグという)を同じ文書の中に書き込んだものである。たとえば、

中央大学経済学部 

とかけば、これでホームページのなかで

中央大学経済学部

と表示される。ここで注意するのは  は改行をさせる命令である。 HTML文書のなかにはこのような命令(タグ)が混在する。

  のような命令と異なり、色をつけたり、文字を大きくするときには文字をはさんで指示を書く。つまり、色をつけたければ

中央大学経済学部

のようにする。ここでは命令の始まりとその命令をあらわす。 は命令の終わりをあらわす。つぎのようになる。

中央大学経済学部

このような命令を組み合わせて文書は成り立っている。戻る

HTML文書の構成
ホームページ作成の基本的な手順はわかったと思うのでHTML文書の構成について少し説明しておきます。
ホームページはすでに述べたように
<HTML>
.....
</HTML>
の形をしています。これは<HTML>はHTML文書の始まりを </HTML>は終わりをしめしています。
HEAD ..... /HEAD の中には <TITLE>My home page</TITLE>
のタイトルをあらわす部分と
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=x-sjis">
のファイルの内容を表す部分があります。
本文は
<BODY> ... </BODY>
のように<BODY>と</BODY>の間に記述します。ここには通常に文書をかけます。戻る

Internet ExplorerやNetscapeを用いて他のホームページを見る

いま、自分の前に Window 95, 98, Window NTのいずれかが起動可能なコンピュータがあるとしよう。ゼミの受講者はWindow NTが使える環境にある。デスクトップをみるとそこにInternet ExplorerとかNetscape Navigatorのアイコンがある。それを2回クリックする。ソフトが起動してくる。そこで通常はボックスの中にURL すなわちホームページの住所を記入する。たとえば http://www.yahoo.co.jp　あるいは http://www.asahi.com のように書く。そのあとエンターキーか、リターンキーを押せばホームページが表示される。あとはマウスでクリックすればかなり使えるはずだ。
戻る

ホームページの公開
ホームページを公開するためにはサーバといわれるコンピュータに公開するHTML文書を転送すればよい。そのためにはあらかじめ、プロバイダーと契約する必要があるがここでは大学のサーバを用いることにし、各自のディレクトリがすでにあり、そこにアクセスできるとする。
すでに、HTML文書は準備してあり、閲覧可能であることは確認済みとする。このとき、次の手順による。

1. HTML文書と画像データを準備する。これは各自のディレクトリにあるとします。
2. 転送ソフト(ftp)を用いて、HTML文書と画像のデータをサーバーといわれるコンピューターに転送する。この時、接続するためにはIP アドレスが133.91.154.53です。また、アカウントとパスワードが必要です。これは直接お教えします。
3. NetscapeあるいはInternet Explorerなどのブラウザソフトを用いて閲覧する。出来具合を確認することになります。
4. データの更新あるいは修正をする。たとえば、新しい機能を付け加えることをする。

FTP はデスクトップの上にはないのでメニューの中から選んで起動する。

戻る

背景の色を変える、画像を背景に貼りこむ

背景の色を変えるにはmypage1.htmlの中のBGCOLOR="#90EE90"の部分の #90EE90を別の記号に変えます。色と記号の対応はその項目を参照してください。 ここをクリックすると色番号対応表がみれます。

ここでこの記号は 16進法です。
色を変えるには直接色を書くこともできます。 BGCOLOR="#90EE90"の部分の #90EE90をblueなどの色の名前にします。色と名前の対応は ここをクリックしてください

文章の中の文字の色を変えたければ次のようにします。

<BODY BGCOLOR=blue TEXT=#FF0000>

ここで #FF0000 は色を指定する方法です。 red のように直接かいてもよいのですが、 16進法であらわす方が中間色を用いることができるのできれいなホームページを作成できます。

背景に壁紙をはり込みたいとき　今HTML文書のあるのとおなじ自分のディレクトリに画像ファイルがあるとします。その上でそのファイル名がたとえば kabe1.jpg であるとします。その時、mypage1.htmlの中のBGCOLOR="#90EE90" を消して次のように書き換えます。

BACKGROUND="kabe1.jpg"

壁紙の取り方についてはその項を参照してください。

戻る

段落の指定
段落は文書のまとまりです。これを指定するには

ここに文書を書きます

あるいは <DIV>ここに文書を書きます</DIV>

と書きます。ここでDIVタグは段落の前後に空白が入りません。これに対して、Pタグは前後に空白が入ります。つまりマージンがとられます。

段落の文章の幅を指定する

書式は次の通りです。

この場合には段落の幅は360ピクセルです。ピクセルは単位です。cm,mmで指定することもできます。 

次のように見えます。

この場合には段落の幅は360ピクセルです。ピクセルは単位です。cm,mmで指定することもできます。

段落の文章の大文字小文字を自動変換する

次のようにします。

<DIV STYLE="text-transform: uppercase">I am a student of Chuo University. </DIV>

uppercaseは大文字にします。lowercaseは小文字にします。capitalize は先頭の一文字のみ大文字にします。次のように見えます。

I am a student of Chuo University.

段落の背景色を指定する

書式は次の通りです。

ここに本文を書きます。

次のように見えます。

このタグではこのように段落の背景の色が変わります。色は名前で指定することもできます。

段落を枠で囲んで枠に色をつける

書式は次のようになります。

<DIV STYLE=" width: 600px; border-style: outset; border-width: 10px; border-color: blue"> ここに本文を書きます。 </DIV>

段落を枠で囲んで色をつけます。枠の幅は cmセンチメートルやmmミリメートルあるいは細線thin太線thick中程度の太さの線mediumを指定できます。枠の形状はsolid以外にもdashed, dotted, double, outset, ridgeなどがあります。次のように見えます。

段落を枠で囲んで色をつけました。枠の幅は cmセンチメートルやmmミリメートルあるいは細線thin太線thick中程度の太さの線mediumを指定できます。枠の形状はsolid以外にもdashed, dotted, double, outset, ridgeなどがあります。試してください。

段落の幅、高さを指定、背景に画像を表示

書式は次のようになります。

<DIV STYLE=" width: 360px; height: 240px; overflow: auto; margin: 10px; padding: 5px; background-image: url(kabe5.jpg); border-style: outset; border-width: 10px; border-color: blue"> 本文を書きます </DIV>

段落を枠で囲んで色をつけました。枠の幅は cmセンチメートルやmmミリメートルあるいは細線thin太線thick中程度の太さの線mediumを指定できます。枠の形状はsolid以外にもdashed, dotted, double, outset, ridgeなどがあります。 widthは幅をheightは高さを指定します。単位は以前に述べたとおりです。overflowは範囲に入らない時の処理の仕方を指定します。visible, scroll, hiddenなどがあります。順に幅、高さの指定によらずすべて見えるようにする、スクロールバーをつける、表示幅を越えたところを非表示にするとなります。autoは表示幅を超えたらスクロールバーをつけます。marginは領域の枠と外側の文章の間の余白を指定します。paddingは段落文書を囲む枠と段落文書の間の余白を指定します。また背景には画像を表示しています。background-image: url(kabe5.jpg)はkabe5.jpgを背景に張り込んでいます。試してください。
次のように見えます。

段落を枠で囲んで色をつけました。枠の幅は cmセンチメートルやmmミリメートルあるいは細線thin太線thick中程度の太さの線mediumを指定できます。枠の形状はsolid以外にもdashed, dotted, double, outset, ridgeなどがあります。 widthは幅をheightは高さを指定します。単位は以前に述べたとおりです。overflowは範囲に入らない時の処理の仕方を指定します。visible, scroll, hiddenなどがあります。順に幅、高さの指定によらずすべて見えるようにする、スクロールバーをつける、表示幅を越えたところを非表示にするとなります。autoは表示幅を超えたらスクロールバーをつけます。marginは領域の枠と外側の文章の間の余白を指定します。paddingは段落文書を囲む枠と段落文書の間の余白を指定します。background-image: url(kabe5.jpg)はkabe5.jpgを背景に張り込んでいます。試してください。

戻る

改行と罫線
<BODY> ... </BODY> の間には文章をかいていくわけですが、その時注意することに 文章はHTML文書で改行しても表示された方では改行されません。 改行するためには改行したい場所に  を書く必要があります。改行してから間を空けたいときには を用います。

これ以外に罫線を入れたいことがあります。そのためには <HR>を用います。これを用いた例を次に示します。

こんにちわ。ようこそ私のホームページへ<HR>
最終更新日　平成11年6月5日<HR>

罫線の太さと横幅

罫線の長さを変えるには次のように書きます。

<HR WIDTH="360">

360ピクセルの長さの罫線を引きます。次のようになります。

<HR WIDTH="50%">

全体の50%の長さの罫線を引きます。次のようになります。

<HR SIZE="20">

20ピクセルの幅の罫線を引きます。次のようになります。

全体の50%の長さの20ピクセルの幅の罫線を引きます。ここでrightはleft, centerを指定できます。次のようになります。

罫線の色

罫線の色を変えるには次のように書きます。

<HR COLOR="red">

赤の罫線を引きます。次のようになります。

これらをまとめて次のようになります。

戻る

文字の大きさ、色、字体の変更

文字の大きさの変更

 ここに文字を書く 
のようにすると文字の大きさが変わります。ここで数字は１から７まであり、数字が大きいほど大きくなります。たとえば
 ここに文字を書く 
と書くと文字が大きくなります。例を示します。

サイズ７の文字
サイズ６の文字
サイズ5の文字
サイズ4の文字
サイズ3の文字
サイズ2の文字
サイズ1の文字
文字の色を変えたいとき

 ここに文字を書く 

ここでもちろん色は#FF0000 のように直接かいてもかまいません。色の指定について詳しくはそちらを参照してください。上の例は次のように見えます。

ここに文字を書く

文字を太字(ボールド）やイタリックにするとき

 ここに文字を書く 

とすると太字(ボールド）になり、

 ここに文字を書く 

とするとイタリックになります。上の例は次のように見えます。

ここに文字を書く

ここに文字を書く

これらは文字の大きさを変える命令や色を変える命令と入れ子にして使えます。たとえば、青で太字（ボールド)にするには

 ここに文字を書く 

とかけばよい。　これは次のようにみえます。

ここに文字を書く

青でイタリックにするには

 ここに文字を書く 

とかけばよい。これは次のようにみえます。

ここに文字を書く

文字をまわりよりひとまわり大きくする、小さくする

このためにはつぎのようにかきます。

<BIG>この文字は大きくなります</BIG>

この文字は小さくなります

次のようになります。

この文字は大きくなります

この文字は小さくなります

文字を強調表示にする

つぎのタグを使います。

この文字は強調されます

この文字は強く強調されます

次のようになります。

この文字は強調されます

この文字は強く強調されます

戻る

文字に下線をつける、下線を消す
つぎのタグを使います。
この文字は下線がつきます
この文字は下線がつきます。指定の方法が異なります。 
<A HREF="htmltxt1.html#J10" STYLE="text-decoration: none"> この文字はリンクが張ってありますが、下線がつきません。</A>
次のようになります。
この文字は下線がつきます
この文字は下線がつきます。指定の方法が異なります。
この文字はリンクが張ってありますが、下線がつきません。
文字に取り消し線をつける。
このためにはつぎの３つの書き方があります。
<S>この文字は取り消し線がつきます</S>
<STRIKE>この文字は取り消し線がつきます。指定法が前と違います。</STRIKE>
 この文字は取り消し線がつきます。指定法が前と違います。 
次のようになります。
~~この文字は取り消し線がつきます~~
~~この文字は取り消し線がつきます。指定法が前と異なります。~~
この文字は取り消し線がつきます。指定法が前と違います。
戻る
文字の背景色,背景画像を指定する
次のように書きます。
 この文字は背景色が変わります 
次のようになります。
この文字は背景色が変わります
文字の背景画像を指定する。
次のように書きます。
 この文字は背景に画像が表示されます 
次のようになります。
この文字は背景に画像が表示されます
戻る
文字を枠で囲む
文字を枠で囲みます。枠の太さ、色、形を指定します。形はnone,hidden, dotted,dashed, solid, double,groove, ridge, inset, outsetがあります。書式は次のようになります。
 この文字は枠で囲まれます 
次のようになります。
この文字は枠で囲まれます
　
この文字は枠で囲まれます
　
この文字は枠と背景がつきます
戻る