home
information

for contents

how-to HTML files

default layout

browsers

pictures

table

frame
upload
tags

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

[tags] (P.1)

(Note:


〔"BODY & IMAGE TAG"〕

 <HTML>~</HTML>
  HTMLファイルであることを宣言するタグ。
 <HEAD>~</HEAD>
  "<TITLE>タグ"など"HTMLファイルの各情報"を記述する時、その外側に書きます。
  (こちらにも解説してあります)
 <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="#******">または<BODY BGCOLOR="color name"> ("color name": Netscape3.0以上 & IE2.0以上有効)
   (*:0~9またはa~f "color name": 任意の色) ( ex)"silver")
   背景色を変えます。
   ("BACKGROUND"と"BGCOLOR"の両方が指定されている場合、"BACKGROUND"が優先で表示されますが、イメージがブラウズ
   されるまでの間、また、サーバーの不調,etc.でイメージがブラウズされなかったりすると、見ている人がグレーまたは
   白の背景しか見れなくなるので、"BGCOLOR"も必ず指定しておきましょう)
    (特に、テキスト(文字)の色が白や黄色などの時、"<BODY BGCOLOR>指定"(もちろん、テキストがちゃんと読めるような
    背景色で)がないと"悲惨"です))
  <BODY TEXT="#******">または<BODY TEXT="color name"> ("color name": Netscape3.0以上 & IE2.0以上有効)
   (*:0~9またはa~f "color name": 任意の色)
   ページ全体の基本文字色を決めます。
  <BODY LINK="#******">または<BODY LINK="color name"> ("color name": Netscape3.0以上 & IE2.0以上有効)
   (*:0~9またはa~f "color name": 任意の色)
   リンク先(他のファイルまたはURL)へジャンプするためのボタンの色を決めます。
  <BODY VLINK="#******">または<BODY VLINK="color name"> ("color name": Netscape3.0以上 & IE2.0以上有効)
   (*:0~9またはa~f "color name": 任意の色)
   リンクボタンをクリックした後、指定した色に変化します。
  <BODY ALINK="#******">または<BODY ALINK="color name"> ("color name": Netscape3.0以上 & IE2.0以上有効)
   (*: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"=紫
 (---緑と紫は、私たちがイメージする色とちょっとズレてると思いますが・・・)

その他の色を指定したい場合は、数値をいろいろ変えて実際にブラウズしてみればいいのですが(慣れると、この数値ならだいたいこんな色、と直感的にわかるようになります)、そんなの面倒、という人は(---面倒ですよね)、"カラーピッカー"と呼ばれるソフトを使って下さい。

  (Windows用ソフト)
  (Mac用ソフト)
















  <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","ALT","WIDTH & HEIGHT")

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

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

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


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

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

    (イメージをそのままの大きさで表示させたい場合)
     オリジナルのイメージと同じ数値を書いて下さい。(---これが書いてあると、ブラウズが早く、また、HPをブラウズする時、
     イメージのスペースをあらかじめとってテキストが先に表示される
ので、見ている人はイメージが表示されるまでテキストを
     読んで待っていられるのです)

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

    (文字やイメージの間隔を微調整したい場合)
     1*1ピクセルの透過gifを作成し、'WIDTH'と'HEIGHT'で調節して下さい。



→Next 


Copyright 1998-2018 (C) "Opal" All Rights Reserved.