@tamabi Step by Step
 
「初歩の初歩」HTML講座
     
はじめに
     
HTMLって何?
     
タグってどんなもの?
タグの基本
     
HTMLコードを読んでみよっ01
HEAD
BODY
COLOR
     
HTMLコードを読んでみよっ02
基本的な例
テーブルの例
フレームの例
     
画像ファイル形式
     
おわりに
     
付録: カラーチャート
     
     

     
はじめに
ホームページを始めて作ってみようと思う方を対象とした初歩的なHTMLの解説です。ご参考にご覧ください。尚、さらに詳しい情報は書籍等でご確認ください。
     
     
HTMLって何?
HTMLはHypertext Markup Languageの略です。
  直訳すると「超度級の文書、印付け言語」になるかしら?!
ここで言うHypertextとは「文書が単独で存在するのではなく、他の文書と結びつけられているもの」と考えてください。例えば、雑誌を読んでいても文字を辿るだけで文末になってしまいますが、Hypertextは読んでいる途中にこんなところ01があって、ここを押すと別の文書を読むことができます。
  緑色の文字の上にマウスを持っていってみて。矢印のアイコンが変わりますね。そうしたらその上をクリックしてみてください。
文末に辿り着くまでに、方々に寄り道ができます。もちろん寄った先が楽しかったら戻る必要はありません。こんな風に寄り道可能な文書がHypertextです。
では次にMarkup Language、印付け言語とは。多摩美の中で使われているパソコンはマックかウィンドウズが主流で、基本的には日本語が公用語として使われています。でも世界中では様々なコンピュータが使われているし、言葉も違います。インターネットの世界では、どんなパソコンを使っていても、どんな言葉を使っていても、人間とコンピュータの両方が理解できる簡単な構造が必要となりました。そこで簡単な一般化マークアップ言語という発想が生まれ、開発されました。HTMLではテキストに札(タグ)を付けて(これがHTMLで言う「マークアップ」です。)、コンピュータに指示を出す、という形式を取りました。
HTMLは人間とコンピュータをつなぐ簡単な言語です。
     
     
タグってどんなもの?
HTMLがタグとテキスト集合体で構成されていることは分かりました。これをHTMLコードと呼びます。では一体どのような構造になっているのか見てみましょう。
まずは、一番簡単なページこんなところ02のHTMLコードを見てみましょう。今見ているブラウザーがネットスケープならば「表示」の「ページのソース」を選びます。エクスプローラーならば「表示」の「ソース表示」を選びます。
  こんなところ02のウィンドウをアクティブにしてからやってみてね。ソースコードとこのウェブページを一緒に見てね。
するとかぎブラケット(< >)で囲まれた英文文字列と、和文テキストが見えます。かぎブラケットで囲まれたものをタグと言います。HTMLコードの上部には<HTML>、<HEAD>、<BODY>下部には</BODY></HTML>などといった文字が見つかりますね。
     
タグの基本
  タグには基本的に二種類あります。一つはコンテナタグ。もう一つは空タグ。
  コンテナタグは開始タグと終了タグの二つ一組で指示が成り立ちます。例えば、<HEAD></HEAD>。
  空タグは一つで指示が成り立ちます。例えば、<BR>。
    探してみて。
  コンテナタグの開始タグは<xxxxx>、終了タグは終了を意味するスラッシュ(/)を足して</xxxxx>となります。この二つに囲まれた部分がコンテナタグの指示を受けます。
  空タグは<yyyyy>だけで指示が実行されます。</yyyyy>は要りません。
  タグには更に属性があり、いろいろと修飾することができます。例えば、配置指定や大きさ指定などができます。
     
     
HTMLコードを読んでみよっ01
引き続きこんなところ02のソースコードを開いてください。このHTMLコードを読んでみましょう。
HTMLコードの一番はじめには<HTML>を置きます。これによりこのファイルがHTMLで書かれたドキュメントであることが定義されます。HTMLタグはコンテナタグなのでコードのおわりに</HTML>が必要となります。HTMLタグに囲まれた中は大きく二つの部分に分かれます。一つはHEAD部分。もう一つはBODY部分。
     
HEAD
  HEAD部分はHEADタグで囲みます。この中には主にこのファイルが何物であるかを知らせる情報を載せます。例えば、<TITLE>こんなところ02</TITLE>。ブラウザーのウィンドウバーに「こんなところ02」って文字が見えますね。ブックマークを付けたときにこの文字が記録されます。
    ためしてごらん。
  HEAD部分の役目はこんなものです。
     
BODY
  BODY部分はBODYタグで囲みます。この中には実際にウィンドウに表示される情報を載せます。まずは上から読んでいきます。
    これからはちょっと複雑になるよ。
  BODYタグはコンテナタグです。属性でテキストの色、背景の色などを指定します。
  H2タグはコンテナタグで、見出しレベル2で表示します。
  FONTタグはコンテナタグで、表示する文字の大きさや色などを指定します。(色については次の項で詳しく説明します。)
  BRタグは空タグで、キャリッジリターンと同じ役割をし、改行をします。
  HRタグは空タグで、水平線を引きます。属性で太さや幅を指定できます。
  Aタグ(アンカータグ)はコンテナタグで、どこへリンクさせるかを指定します。URLは必ず"(ダブルコーテイション)で囲みます。
  IMGタグはコンテナタグで、画像をどのように見せるかを指定します。
  代表的なタグはこんなところです。
     
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属性で幅を指定できます。これによりブラウザーのウィンドウ幅を縮めたり伸ばしたりしても、レイアウトは変化しません。
     
フレームの例
  メディアセンターのトップページを読んでみましょう。
  http://www.tamabi.ac.jp/mc/default.htm
  このページは2つのフレームを使っています。左側はメニューが常時表示されています。右側はメインのページで、メニューから選んだページが表示されます。ではdefault.htmのソースを読んでみましょう。FRAMESETタグがあります。この中にFRAMEタグがあります。
  FRAMESETタグはCOLS属性で縦にいくつのフレームを置き、幅をどれくらいにするかを指定しています。*は無指定を意味します。
  FRAMEタグはSRC属性でどのファイルを読み込むかを指定します。更にスクロールバーを表示するかなどの属性がいくつかありまあす。
     
     
画像ファイル形式
ウェブブラウザーで見れる代表的な画像ファイル形式はGIF(Graphic Interchange Format)とJPEG(Joint Picture Experts Group)です。
GIFはどんなウェブブラウザでも認識可能なファイル形式です。色数は256色です。透明化が可能です。また、白黒の画像はJPEGよりもファイルサイズが小さくなります。拡張子は.GIFです。
JPEGはGIFよりもファイルサイズが小さくなるので、ユーザがダウンロードする時間を短縮できます。色数は1670万色です。透明化はできません。JPEGの圧縮方式はカラーに最適です。拡張子は.JPEGまたは.JPGです。
     
     
おわりに
以上が「初歩の初歩」HTMLのお話です。参考になりましたでしょうか?
尚、実際に多摩美のホームページを更新する際は各部署のWEB担当者までご確認ください。
     
     
    基礎知識解説へ