HP Guide for Beginners(タイトルロゴ)


   

"tags (P.1)"

  • 半角英文字であれば、大文字でも小文字でもOKです。
  • <HTML>~</HTML>のようにペアで使用するタグを複数使う場合、閉じる方のタグは開始を表すタグとは逆の順序で書いて下さい。
      ex) <HTML><BODY><H1>~</H1></BODY></HTML>
  • "オプション"があるタグがありますが、複数指定する場合、どれから書いてもかまいません。
    (それぞれ半角スペースで区切って下さい)
〔"BODY & IMAGE TAG"〕
  <HTML>~</HTML>

HTMLファイルであることを宣言するタグ。

  <HEAD>~</HEAD>

"<TITLE>タグ"など "HTMLファイルの各情報"を記述する時、その外側に書きます。
 ("tags (P.3)"の方に詳しく解説してあります)

   <TITLE>~</TITLE>

ブラウザのウインドウのタイトルバーと"ブックマーク"(IEは"お気に入り")にタイトルを表示するタグ。

(タイトルは何を書いてもOK(書かなかった場合、ファイル名が表示されますが、本来は書かなければなりません)ですが、
"WELCOME!"とか"ようこそ!"などだと、ブックマーク/お気に入りに追加した人が、後から何のページだったかわからなくなったりするので、できるだけ具体的に書くようにして下さい)
また、ロボット型サーチエンジンの検索時にも題名として表示されます。

ex) <HTML><HEAD><TITLE>Coolest Moment(HP Guide)</TITLE>
   </HEAD><BODY>~

  (このタグは"<HEAD>内タグの一種"ですが、特に大事なものなので、
  ここで諸説しています)

  <BODY>~</BODY>

このタグに挟まれた部分がブラウザに表示されます。
(オプションとして、
  "BACKGROUND"、"BGCOLOR"、"TEXT"、"LINK"、
  "VLINK"、"ALINK")
  ex) <BODY BACKGROUND="pc_backsample_nf.jpg"
      BGCOLOR="#fffdf0" LINK="#339f91" VLINK="#8cccb9">
      ("default layout"中のサンプル)

(以下のオプションはすべて、指定しなかった場合は、HPを見ている側のブラウザで設定している色
(デフォルトでは、背景=グレー(または白)、テキスト(文字)=黒、"リンク(前)ボタン"=青、"リンク後ボタン"=紫(IEではあずき色)
(センスのいい配色とは、私には思えないのですが・・・)
でブラウズされます)

  <BODY BACKGROUND="file name.gif">
   または<BODY BACKGROUND="file name.jpg">

背景パターンを表示します。"file name"には、背景パターンに使いたいイメージのファイル名を入れて下さい。
(ファイルの大きさは3センチ四方ぐらいまでにした方が無難です。

あまり大きいと、ファイルの容量が大きくなって、なかなかブラウズされなかったりします。
また、PNGファイルも使用可能ですが、一部のブラウザでは全く、または正しく表示されなかったりします)

  <BODY BGCOLOR="#xxxxxx">
   または<BODY BGCOLOR="color name">

    ("color name": Netscape3.0以上 & IE2.0以上有効)
    (x:0~9またはa~f "color name": 任意の色)  ( ex) "silver")

背景色を変えます。

("BACKGROUND"と"BGCOLOR"の両方が指定されている場合"BACKGROUND"が優先で表示されますが、イメージがブラウズされるまでの間、また、サーバーの不調,etc.でイメージがブラウズされなかったりすると、見ている人がグレーまたは白の背景しか見れなくなるので、"BGCOLOR"も必ず指定しておきましょう。

(特に、テキスト(文字)の色が白や黄色などの時、"<BODY BGCOLOR>指定"(もちろん、テキストがちゃんと読めるような背景色で)がないと"悲惨"です))

  <BODY TEXT="#xxxxxx">または<BODY TEXT="color name">
    ("color name": Netscape3.0以上 & IE2.0以上有効)
    (x:0~9またはa~f "color name": 任意の色)

ページ全体の基本文字色を決めます。

  <BODY LINK="#xxxxxx">または<BODY LINK="color name">
    ("color name": Netscape3.0以上 & IE2.0以上有効)
    (x:0~9またはa~f "color name": 任意の色)

リンク先(他のファイルまたはURL)へジャンプするためのボタンの色を決めます。

  <BODY VLINK="#xxxxxx">または<BODY VLINK="color name">
    ("color name": Netscape3.0以上 & IE2.0以上有効)
    (x:0~9またはa~f "color name": 任意の色)

リンクボタンをクリックした後、指定した色に変化します。

  <BODY ALINK="#xxxxxx">または<BODY ALINK="color name">
    ("color name": Netscape3.0以上 & IE2.0以上有効)
    (x:0~9またはa~f "color name": 任意の色)

リンクボタンをクリックした時に指定した色がフラッシュしますが、こだわりがなければ、特に指定しなくてもいいでしょう。

   (カラー指定)

HPに"<COLOR>タグ"で色を付けるには、16進法の数値 & アルファベット(0~9およびa~f)で色を指定する方法と、直接color name("blue"とか"green"など)を指定する方法があります。

"color name指定法"は簡単ですが、表現できるのはごく大ざっぱな色だけです。
・・・"なんとなくシックなうすめのグリーン"とか、"かぎりなく白に近いアイボリー"とかいう場合は、"数値指定法"を使うしかありません。

"数値指定法"は、0~9およびa~fの16種類の数値&アルファベットを組み合わせて、6桁で指定していく方法ですが、左の2桁がR(Red="赤み")、中央の2桁がG(Green="緑み")、右の2桁がB(Blue="青み")で、数値が増えるにしたがって色はうすくなっていきます(この"数値指定法"は"加色混合"("RGB方式")と言って、絵の具を混ぜ合わせた時とは反対に、赤と緑と青を重ねると"白"になるのです)

例えば、"#0000ff"と指定した場合、R=00、G=00、B=最高値なので"青"、"#ffffff"はR、G、Bすべて最高値なので"白"、"#000000"は逆にR、G、Bとも00なので"黒"、"#999999"は"#ffffff"と"#000000"の中間なので"グレー"、"#aaaaaa"は"#999999"よりちょっと薄めのグレーになります。

下に、代表的な色をいくつか挙げておきます。

"#ffffff"="white"=白  
"#000000"="black"=黒 
"#0000ff"="blue"=青 
"#00ff00"="green"=緑 
"#ffff00"="yellow"=黄 
"#ff0000"="red"=赤 
"#ff00ff"="purple"=紫 

(緑と紫は、私たちがイメージする色とちょっとズレてると思いますが・・・)

その他の色を指定したい場合は、数値をいろいろ変えて実際にブラウズしてみればいいのですが(慣れると、この数値ならだいたいこんな色、と直感的にわかるようになります)

そんなの面倒、という人は(・・・面倒ですよね)、"カラーピッカー"と呼ばれるソフトを使って下さい。

  <BODY LEFTMARGIN="*">
   (*:ピクセル数)

ページ全体の左右を、指定された間隔分開けます。(IEのみ有効)

  <BODY TOPMARGIN="*">
   (*:ピクセル数)

ページの上部を、指定された間隔分開けます。(IEのみ有効)

  <BODY RIGHTMARGIN="*">
   (*:ピクセル数)

ページ全体の右側を、指定された間隔分開けます。(IE4以上有効)
("LEFTMARGIN"と同時に指定されている場合、左側は"LEFTMARGIN"、右側は"RIGHTMARGIN"で指定された間隔になります)

  <BODY MARGINWIDTH="*">
   (*:ピクセル数)

ページ全体の左右を、指定された間隔分開けます。(NC4のみ有効)

  <BODY MARGINHEIGHT="*">
   (*:ピクセル数)

ページの上部を、指定された間隔分開けます。(NC4のみ有効)

   <IMG SRC="file name">

イメージファイルを表示するタグ。(デフォルト: 左側)
(オプションとして、"ALIGN"、"HSPACE"、"VSPACE"、"BORDER"、
"WIDTH & HEIGHT"、"ALT")

  <IMG SRC="file name" ALIGN="p">

イメージの横にテキストを回り込ませます。

  p=LEFT:(イメージが左寄せになり)右側にテキストが
       回り込みます。
  p=RIGHT:(イメージが右寄せになり)左側にテキストが
        回り込みます。
   (上の2つの回り込みを終了させたい時は、回り込み終了タグ
   <BR CLEAR=ALL>でクリアして下さい)

  p=top:イメージの右上にテキストを配置します。
  p=middle(またはcenter):イメージの中央にテキストを
               配置します。
  p=bottom:イメージの右上にテキストを配置します。

   (下の3つはテキストを一行しか表示できません)

  <IMG SRC="file name" HSPACE="*">
   (*:ピクセル数)

イメージの左右に余白を作ります。

  <IMG SRC="file name" VSPACE="*">
   (*:ピクセル数)

イメージの上下に余白を作ります。

  <IMG SRC="file name" BORDER="*">
   (*:ピクセル数)

イメージの枠の太さを決めます。
(イメージをリンクボタンにした場合、デフォルトではイメージに枠線(<BODY LINK>または<BODY VLINK>で指定した色と同色)が付きますが、'BORDER="0"'にすると枠線が消えます)

  <IMG SRC="file name" WIDTH="*" HEIGHT="*">
   (*:ピクセル数)

(オリジナルのイメージの大きさに関係なく)指定された大きさ(WIDTH=幅、HEIGHT=高さ)でブラウザに表示されます。
(%指定もできますが、ブラウズする側のウインドウの大きさによって見え方が変わってしまうので、使わない方が無難かもしれません)

(イメージをそのままの大きさで表示させたい場合、オリジナルのイメージサイズと同じ数値を書いて下さい。

(これが書いてあるとHP表示が早く、また、HPをブラウジングする時、イメージのスペースをあらかじめとってテキストが先に表示されるので、見ている人はイメージが表示されるまでテキストを読んで待っていられるのです)

また、"隠しイメージ"にしたい(カウンタ、etc.を表示させたくない)場合、'WIDTH=1' 'HEIGHT=1'と指定して下さい。
(ごく小さな点が見えてしまうこともありますが、'WIDTH=0' 'HEIGHT=0'にすると、ブラウザーによっては誤作動することがあります)

  ((文字やイメージの間隔を微調整したい場合))

1 *1 ピクセルの透過gifを使用して('WIDTH'と'HEIGHT'の数値を調整)下さい。
(下図の額縁内側のどの部分をマウス右クリック→「画像の保存」しても、1 *1 ピクセルの透過gifダウンロードが可能です)

   
  <IMG SRC="file name" ALT="name">
   (name:任意のテキスト)

何らかの原因でイメージがブラウズされない時、代わりに任意のテキストが表示されます。
(イメージをリンクボタンにしている場合は、文字色が"リンクカラー"になります(Netscapeの場合)。また、IE, NC4では、イメージにマウスポインタをもっていくと、"吹き出し"で表示されます。
(ネットスケープの場合、テキストが長いと、途中で(または文頭の方が)切れてしまうことがあります))

("イメージの読み込みをオフ"にしている人(通信速度の関係でかなりいるようです)またはテキストブラウザで見ている場合、イメージのリンクボタンしかない時にこのオプションがないと他のページへ行けなくなってしまいます。
・・・レイアウトの関係で文字のリンクボタンを併用できない場合もあるので、最低、イメージリンクボタンにはこのオプションを書いて下さい)

(・・・と書きましたが、HTML4(HTMLの最新規格(99年2月現在))では、ALTは(オプションではなく)"必須"になりました。
全てのイメージに指定して下さい)

   ("ALT"の書き方)
  • タイトルロゴ:<ALT="HP Guide for Beginners">
    (ファイル名ではなく、「タイトルロゴと同名」にする)
  • "サムネイルのイメージ":<ALT="My Room(サムネイル)">
    (何のサムネイルなのか具体的に記述)
  • 罫線代わりのイメージ:<ALT="-------">
  • 箇条書きの頭につける小さなアイコンなど:<ALT="">
    (テキストブラウザでは何も表示されなくなり、検索エンジンも無視します)
  • 文字やイメージの間隔を微妙に開けるための透過gif画像など、表示されなくてもかまわないイメージ:<ALT="">
    (テキストブラウザでは何も表示されなくなり、検索エンジンも無視します)