ホームページを創ろう：HTML文章の基礎の基礎 2003/07/27 | |
|
さて、ホームページの骨格となるファイルはすでに創りました。次は、そのファイルにコンテンツという魂を入れる作業が必要になりますね。
ホームページでは、HTLMのルールにのっとりテキストスタイルで文章のように書いてゆきます。すると、そのルールを解釈し表示する機能を備えたプラウザ（Explorerなど）が ルールに従って表示をしてくれるのです。 HTMLファイルには、表示する文章や画像のファイル名を書くほかに、「タグ」と呼ばれる記号を書くことにより、特定の機能を持たせることができます。 HTMLエディターには、このタグが、アイコンで表示されていて、マウスでクリックするだけで簡単に書けるように工夫がされています。 タグには多くの種類がありますが、初心者は全てを覚える必要はないと思います。文章の書き始めと終わり、画面に「表」を作る機能。画像や写真を表示される機能、リンクを張る機能を覚えれば それでコンテンツは創れます。それでは、順に解説します。 ・文章の書き方 文章の始めを定義するタグは「＜ＴＤ＞」と「＜ＴＲ＞」です。 （ＨＴＭＬのルールでは、半角文字を使いますが、ここで使うとプラウザが動いてしまうので、は、全角文字を使います） 「＜ＴＤ＞ 文章 ＜／ＴＤ＞」で表現します。「/」は、「終わり」を意味します。 「＜ＴＲ＞」は、横の行のコントロールに使います。「＜／ＴＲ＞」を使い、行の終わりを意味します。 「＜／ＴＲ＞」が書かれたところまでは、同じ行として表示され改行がされません。 一般には、「＜ＴＲ＞＜ＴＤ＞ 本文１ ＜／ＴＤ＞ ＜ＴＤ＞ 本文２ ＜／ＴＤ＞＜／ＴＲ＞」と使います。 一連の文章の最初は「＜ＴＲ＞＜ＴＤ＞」と、二つがペアで始まるのです。 「＜／ＴＲ＞」を使った改行のほかに、文章の途中で強制的に改行されるタグが、「＜ＢＲ＞」です。 また、「＜Ｐ＞」を使うと、１行スペースを空けてくれます。文末に使えば、改行して１行空くことになります。 ・表の書き方 画面上に表を作るには、「＜ＴＡＢＬＥ＞」タグを使います。ここでいう表は、文字通り線で囲まれた表だけではなく、見えない線で囲まれた表も意味します。つまり、見えない線で囲んだ表を作り、その中に 文章や画像を入れるとにより、画面上の特定の場所に文字や画像を表示することが可能になるのです。 このタグも、最後は「＜／ＴＡＢＬＥ＞」として、表の終わりを表現します。 この表の中で、「＜ＴＤ＞と＜ＴＲ＞」が大活躍します。 「＜ＴＲ＞＜ＴＤ＞ 文章 ＜／ＴＤ＞＜ＴＤ＞ 画像 ＜／ＴＤ＞＜ＴＤ＞ 文章 ＜／ＴＤ＞＜／ＴＲ＞」と書くと、真ん中に画像があり、左右に文章が入る構成を創ることができます。 「＜ＴＲ＞ ＜／ＴＲ＞」の中に「＜ＴＤ＞ ＜／ＴＤ＞」の組み合わせが３個あれば、横に三個の箱が並ぶ表になりますし、５個あれば五個の箱が並ぶことになります。 「＜ＴＡＢＬＥ＞ ＜／ＴＡＢＬＥ＞」の中に、「＜／ＴＲ＞」が２個あれば、縦に二個の表が並び、６個あれば縦に六個の表が創れるのです。 表の線をコントロールするのが「BORDER=" "」です。例えば「＜ＴＡＢＬＥ BORDER="3" ALIGN="CENTER" BGCOLOR="#CAFFFF" WIDTH="90%"＞」のように使います。 「""」内の数字が「０」ならば表示されず、「１」以上ならば線が表示され、大きくなるほど太くなります。ちなみに、「ALIGN="CENTER"」は、中央に表示させる機能ですｈし、「BGCOLOR="#CAFFFF"」は、 背景の色を色番号で指定するコマンド、「WIDTH="90%"」は、表全体の大きさを指定するコマンドです。詳しくは参考書などで勉強してくださいね。 ・画像の挿入 画像は、表示させたい場所に、「＜ＩＭＧ SRC="画像ファイル名"＞」と書き込むことにより表示させることができます。 ・リンクの張り方 自分のホームページ内の別のページや、他のホームページへ飛ばしたいときには、「＜Ａ HREF="リンク先のHTMLファイル名"＞コメント＜／Ａ＞」と書きます。 この書き方の場合は、プラウザを新しく開くことなく移りますが、元のページをそのまま表示させ、新たにプラウザを開き表示させたい場合には、「TARGET="_blank"」を、ファイル名の後に追加します。 以上で基礎の基礎の解説を終わります。読んだだけではなかなか理解することは難しいと思います。習うよりも慣れろです。ともかく、書いてみることが上達の秘訣ですよ。
|
トップページへ／その７へ
hpmanager@albsasa.com Albert 佐々木