|
|
「初歩の初歩」HTML講座 |
|
| ご意見、ご希望はこちら | |
|
|
|
||
| ■ | はじめに
「これからウェブページを作ろうかな、と考えているけれどHTMLって何？ ウェブページの書籍を購入したいけれど、どんな基準で選んだら良いのか分からないな。HTMLってどんなものなのかちょっと分かるとまた違うんだろうけれど・・・」 このような方を対象に考えてHTML講座を開きます。 皆さんのウェブページ作りの小さな助けになると嬉しいです。 |
|
|
|
||
| ■ | HTMLって何？
HTMLはHypertext Markup Languageの略です。 直訳すると「超度級の文書、印付け言語」になるかしら？！ ここで言うHypertextとは「文書が単独で存在するのではなく、他の文書と結びつけられているもの」と考えてください。例えば、雑誌を読んでいても文字を辿るだけで文末になってしまいますが、Hypertextは読んでいる途中にこんなところ01があって、ここを押すと別の文書を読むことができます。 青い文字の上にマウスを持っていってみて。矢印のアイコンが変わりますね。そうしたらその上をクリックしてみてください。 文末に辿り着くまでに、方々に寄り道ができます。もちろん寄った先が楽しかったら戻る必要はありません。こんな風に寄り道可能な文書がHypertextです。 では次にMarkup Language、印付け言語とは。多摩美の中で使われているパソコンはマックかウィンドウズが主流で、基本的には日本語が公用語として使われています。でも世界中では様々なコンピュータが使われているし、言葉も違います。インターネットの世界では、どんなパソコンを使っていても、どんな言葉を使っていても、人間とコンピュータの両方が理解できる簡単な構造が必要となりました。そこで簡単な一般化マークアップ言語という発想が生まれ、開発されました。HTMLではテキストに札（タグ）を付けて（これがHTMLで言う「マークアップ」です。）、コンピュータに指示を出す、という形式を取りました。 HTMLは人間とコンピュータをつなぐ簡単な言語です。 |
|
|
|
||
| ■ | タグってどんなもの？
HTMLがタグとテキスト集合体で構成されていることは分かりました。これをHTMLコードと呼びます。 では一体どのような構造になっているのか見てみましょう。 まずは、一番簡単なページこんなところ02のHTMLコードを見てみましょう。今見ているブラウザーがネットスケープならば「表示」の「ページのソース」を選びます。エクスプローラーならば「表示」の「ソース表示」を選びます。 こんなところ02のウィンドウをアクティブにしてからやってみてね。ソースコードとこのウェブページを一緒に見てね。 するとかぎブラケット（<>）で囲まれた英文文字列と、和文テキストが見えます。かぎブラケットで囲まれたものをタグと言います。HTMLコードの上部にはや、下部にはやという文字が見えますね。 スクロールしてみて。 では、これらタグについて詳しく説明していきます。 |
|
|
|
||
| ■ | HTMLコードを読んでみよっ01
引き続きこんなところ02のソースコードを開いてください。 このHTMLコードを読んでみましょう。 HTMLコードの一番はじめには<HTML>を置きます。これによりこのファイルがHTMLで書かれたドキュメントであることが定義されます。HTMLタグはコンテナタグなのでコードのおわりに</HTML>が必要となります。 HTMLタグに囲まれた中は大きく二つの部分に分かれます。一つはHEAD部分。もう一つはBODY部分。 |
|
|
|
||
| ◆ | HEAD
HEAD部分はHEADタグで囲みます。この中には主にこのファイルが何物であるかを知らせる情報を載せます。例えば、<TITLE>こんなところ02</TITLE>。ブラウザーのウィンドウバーに「こんなところ02」って文字が見えますね。ブックマークを付けたときにこの文字が記録されます。 ためしてごらん。 HEAD部分の役目はこんなものです。 |
|
|
|
||
| ◆ | COLOR
BODYタグとFONTタグの属性に色指定がありましたが、#と6文字で現されていましたね。これについて説明します。 色の属性はモニターで表示することを前提としていますので、光の三原色（赤Red / 緑Green / 青Blue）で表します。頭2文字が赤、真ん中2文字が緑、お尻2文字が青の量を表します。#RRGGBBとなります。 各色は256階調あり、16進数（0123456789ABCDEF）で表記します。例えば黒は#000000、白は#FFFFFF、赤は#FF0000、緑は#00FF00、青は#0000FFです。 各色は256階調ありますが、256色表示システムで見ている人を基準に考え、また、ファイルの読み込み時間を考えると、216色のシステムカラーパレットを使うのが良いでしょう。ウィンドウズとマックに対応するカラーチャートを参考にしてみてください。 |
|
|
|
||
| ■ | HTMLコードを読んでみよっ02
ここでは、多摩美のサイト内のウェブページを凡例に取り、HTMLコードを読んでみましょう。 タグの属性を指定することにより、見ている側のデータ読み込み時間が短縮されます。また、レイアウトを細かく指定できます。 |
|
|
|
||
| ◆ | 基本的な例
彫刻学科金属専攻3年が1号館ギャラリーで行った展示のページを読んでみましょう。 http://www.tamabi.ac.jp/choukoku/gallery/1998/03/default.htm ページのタイトル文字をFONTタグの属性をSIZE=5にして大きく見せています。 IMGタグの属性をBORDER=1にして枠線を1ピクセルにしています。各画像はAタグで囲まれているので、別のページにリンクすることができます。 ■文字もAタグで囲まれているので、リンク先を持っています。 |
|
|
|
||
| ◆ | テーブルの例
では次に日本画研究室のトップページを読んでみましょう。 http://www.tamabi.ac.jp/nihonga/default.htm BODYタグの次にTABLEタグというのがあります。TABLEタグは表を作ります。 TABLEタグの中にはTRタグとTDタグが入ります。 TRはTABLE ROWの頭文字です。表の行を意味します。 TDはTABLE DATAの頭文字です。TDタグはセルです。 TABLE・TR・TDタグはWIDTH属性で幅を指定できます。これによりブラウザーのウィンドウ幅を縮めたり伸ばしたりしても、レイアウトは変化しません。 |
|
|
|
||
| ◆ | フレームの例
プロダクトデザイン2年のページを読んでみましょう。 http://www.tamabi.ac.jp/product/1998/2P/PPP/default.htm 彼らのページは2つのフレームを使っています。 左側はメニューが常時表示されています。 右側はメインのページで、メニューから選んだページが表示されます。 ではdefault.htmのソースを読んでみましょう。 FRAMESETタグがあります。この中にFRAMEタグがあります。 FRAMESETタグはCOLS属性で縦にいくつのフレームを置き、幅をどれくらいにするかを指定しています。*は無指定を意味します。 FRAMEタグはSRC属性でどのファイルを読み込むかを指定します。更にスクロールバーを表示するかなどの属性がいくつかありまあす。 |
|
|
|
||
| ■ | おわりに
以上が「初歩の初歩」HTMLのお話です。もっと詳しくHTMLを知りたい方は書籍やウェブをご覧ください。 また、情報推進室ではこのページに対するご意見、ご希望をお待ちしています。 mc@tamabi.ac.jp それでは、Good Luck! |
|