各ページ作成


さて、やっと打込みに入るわけですが、これまでの工程が必要なのか気になるかと思います
それに、「面倒だ」とか「お前はそんな事やってるのか」とか思う方も居られるかと思います
ほんとの事を書いてしまえば、あまりやってません
ただし、こういう工程でやっていると楽であるという事を書いているに過ぎません

まずは基本

さて本題に入りましょう
まず、いくつかの基本を押さえましょう
HTMLのマニュアル本や辞典を見ると「〜定義する」とか書いてあります
はっきり言ってしまえば「定義する」とか言われても何がなんだかわかりません
まずは、HTMLがマークアップ言語である事を理解する必要があります
ただ、マークアップ言語と言っても、漠然とも想像がつきにくいと思います
現実世界にこれを割り当てるのであれば、試験前などに教科書とかに蛍光ペンでラインを引いたりする事になります(私は実際、引いた事なんてほとんどなかったのですが……………)
なので、「〜という文字の色を変えたい」というよりは「〜の範囲の文字色を変えたい」と考えるのが正確になります
また、表を作りたい場合は「〜の範囲を表にする」という考え方をする事になります
よくある「機種依存文字(正確には環境依存文字)は使用しない」とか「機種依存フォント(正確には環境依存フォント)は使用しない」とかは、「作った人間側のコンピュータ環境が見る人間側のコンピュータ環境と必ずしも一致しない」というのが原因です
これは、「各家庭環境(宅内環境に限った話ではなく)が全て同一ではない」というのとよく似ています
この手の事は、WebPageを作る時だけではなく、他の事でも同一だと思います
まずは、ある程度でいいので現実世界のモノに割り当ててみましょう
他の事に割り当てて考える事は、何かを理解する事への重大な一歩に繋がります

蛍光ペンでラインを引いた時のイメージ 蛍光ペンでラインを引いた時のイメージ

相対と絶対

他にも、よく出てくるのは「相対」「絶対」でしょう
アドレス、位置固定、文字サイズ等に使われます
たとえば絶対サイズでフォントサイズを指定(32 Pixels)とか相対サイズでフォントサイズを指定(200%)とかするわけです
相対サイズというのは「現在のサイズに対しての比率やサイズ」で「現在の値はいくつかは不明だが二倍のサイズで表示」なんて時に使います
また、絶対サイズというのは「現在のサイズは無関係に固定されたサイズ」で「絶対に32 Pixelesで表示する」なんて時に使います(一個目と二個目で見た目が変わらないかもしれないですが)
<font>要素では「+1」とか「-1」が相対サイズで「3」とか「2」とかが絶対サイズとなります
アドレスで使う場合、現在のページが「http://www.aaa.bb.jp/~cc/test/index.html」の場合(このアドレスは存在しません)、「http://www.aaa.bb.jp/~cc/index.html」を「../index.html」と表記するのが相対アドレスという事になります
この意味合いとしては、「一つ上のフォルダのindex.html」と言う事になります
また、「http://www.aaa.bb.jp/~cc/test2/index.html」は「../test2/index.html」と表記できます
これは「一つ上のフォルダにあるtest2フォルダのindex.html」と同一となります
この書き方の利点は、ローカル(自PC)のフォルダ構成の一部が無視できる事にあります
WindowsXPでマイドキュメントに「HTML」というフォルダを作ってその中でWebPageを作っている場合で、画像が「HTML\images」に納められている場合
絶対アドレスで表記すると画像のアドレスは「C:\Documents and Settings\ユーザ名\My Documents\HTML\images\画像名」あたりになるのではないかと思います(ユーザ名は使用しているユーザ名が、画像名は使用する画像名がそれぞれ入ります、またCドライブとは限りません)
もしも、これで書かれた文書をサーバ上に置いた場合、全く同じフォルダ構成・画像でない場合は、一切表示されません
また、リンク先ページが同様にされていた場合、そのページは表示されません
下記に相対表記で使われる単位などを一部羅列します

上三つはわかりやすいでしょう
また、「../」は「一つ上の」という意味で「./」は現在のという意味となります
「/」が出てきたので「/」から始まるアドレスについても説明をします
「/」から始まるアドレス(上の「http://www.aaa.bb.jp/~cc/test/index.html」を例に取れば)「/index.html」は「http://www.aaa.bb.jp/index.html」のアドレスになります
これは「/」がルートの意味を持つ事になったからです
Webアドレスは各サーバ毎でツリー構造(実際には木の根に近い)になっています
このツリーの一番上をルートと呼びます
したがって「/index.html」という表記が「http://www.aaa.bb.jp/index.html」になるわけです

文書の中身

かなりピュアな物を下の表にまとめました
横にコメントを書きましたが、あまりあてにしないでほんとの所はDTD文書を読んでください

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> この文書がHTMLのどのバージョンで書いてあるかが書いてあります
<html lang="ja-JP"> HTML文書が始まる事を示しています
また、この文書が日本語で書かれている事も同時に示してています
<head> その他、文書定義が始まる事を示しています
<meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS"> この文書が「Shift-JISの文字コードで書かれている事を示します
<title></title> この文書のタイトルです(一般的にはタイトルバーに表示される事が多いようです)
</head> その他、文書定義が終わる事を示しています
<body> この文書の中実が始まる事を示しています
<h1></h1> この文書の章のタイトルです
<p> その章の本文の開始を示しています
</p> その章の本文の終了を示しています
</body> この文書の中実が終わる事を示しています
</html> HTML文書が終わる事を示しています

その他、書く時にしておくとヨサゲな物

ここに関しては読み飛ばしてもかまいません
はっきりいって、やってもやらなくても関係ありませんし、やったからといってよくなると自信をもって言えません
その点をよく理解してから読み進んでいただければと思います

  1. <〜></〜>の間はインデント(書き始め桁揃え)をして見やすくする
  2. <!-- -->を利用して適度にコメントを入れる
  3. 確認環境を増やす

Go Back  Go Next  Go Menu