ホームページ作成 HTML 編 (その一) 注釈、HEAD、META、TITLE、STYLE


\| VB \| SQL \| Perl \| PHP \| ASP \| JSP \| C \| PC \| HP \| FAQ \| フリーソフト \|

ホームページ作成 HTML 編 (その一) 注釈、HEAD、META、TITLE、STYLE

■HTML 基本型

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<TITLE>タイトル</TITLE>
</HEAD>
<BODY>
<P>段落</P>
</BODY>
</HTML>

■フレーム型

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<TITLE>タイトル</TITLE>
</HEAD>
<FRAMESET cols="20%,*">
<FRAME src="contents.htm" name="frame1">
<FRAME src="top.htm" name="frame2">
<NOFRAMES>
<BODY><P>フレーム未対応ブラウザ用メッセージ</P></BODY>
</NOFRAMES>
</FRAMESET>
</HTML>

  ・<FRAMESET cols="20%,*"> の cols= は横分割。
    rows= にすると縦分割。
    フレームの幅は、% 指定、ピクセル指定、* は残り全部と言う指定ができる。

  ・それぞれのフレーム内を更に <FRAMESET>...</FRAMESET> で、
    細分化できる。

<FRAMESET frameborder="no" cols="20%,*">
                       |_ 境界線なし

<FRAME frameborder="no" src="contents.htm" name="frame1">
                    |_ 境界線なし

<FRAMESET border="10" cols="20%,*">
                  |_ 境界線の幅

<FRAMESET bordercolor="#e0e0e0" cols="20%,*">
                       |_ 境界線の色

<FRAME bordercolor="#e0e0e0" src="contents.htm" name="frame1">
                    |_ 境界線の色

<FRAME noresize src="contents.htm" name="frame1">
       |_ フレームサイズ変更禁止

■注釈

<!--
ここが注釈扱いになる
//-->

JAVA Script 以外の場所なら、次の書式でも良い。

<!--
ここが注釈扱いになる
-->

■特殊文字

%20         空白
& n b s p;  空白 (実際の記述ではスペースを詰めて書くこと)
& l t;      <    (実際の記述ではスペースを詰めて書くこと)
& g t;      >    (実際の記述ではスペースを詰めて書くこと)

■<HEAD> タグ

  ・<HEAD>...</HEAD> 間には、
      <META> タグ
      <TITLE> タグ
      <STYLE> タグ
      <SCRIPT> タグ
    などが入れられる。

■<META> タグ

  ・サーチエンジン用のキーワードは、content= にキーワードをカンマで区切
    って列挙し、次のように定義する。

<META name="Keywords" content="システム開発,プログラミング,VB,SQL,CGI">

  ・S-JIS コードで記述する場合、お約束で次の <META> タグを入れると良い。
    日本語文字化け対策とサーチエンジンの日本語ページ判定になる。

<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">

  ・自動リロードには、次のように指定する。

<META HTTP-EQUIV="Refresh" CONTENT="60">
                                    |_ 60 秒後にリロードする

■<TITLE> タグ

  ・ブラウザのタイトルとして表示される。

<TITLE>タイトル</TITLE>

■<STYLE> タグ

  ・ホバースタイルなどに使用する。
    スタイルシートタグに対応していないブラウザ用にタグ間を注釈扱いにして
    おくと良い。

<STYLE type=text/css>
<!--
  A:hover {BACKGROUND-COLOR: ; COLOR: #229022; TEXT-DECORATION: underline}
-->
</STYLE>

  ・フォントファミリーの指定は、次のようにする。

<STYLE type=text/css>
<!--
  body {font-family: arial,sans-serif;}
-->
</STYLE>

■<BODY> タグ

  ・<BODY>...</BODY> 間には、
      <DIV> タグ
      <P> タグ
      <B> タグ
      <I> タグ
      <FONT> タグ
      <HR> タグ
      <PRE> タグ
      <BLOCKQUOTE> タグ
      <UL> タグ
      <LI> タグ
      <BR> タグ
      <IMG> タグ
      <TABLE> タグ
      <FORM> タグ
      <A> タグ
      <FRAME> タグ
      <IFRAME> タグ
      <SCRIPT> タグ
    などが入れられる。

<BODY bgcolor="#ddcab0" link="#6040aa" vlink="#903090" alink="#229022" text="#404040">
               |              |               |               |              |_ テキストカラー
               |              |               |               |_ アクセスリンクカラー
               |              |               |_ 既読リンクカラー
               |              |_ 未読リンクカラー
               |_ ページ背景カラー

  ・表示マージンを 0 にするには、IE とネスケ用に、次のようにする。

<BODY TOPMARGIN=0 MARGINHEIGHT=0 LEFTMARGIN=0 MARGINWIDTH=0>

  ・背景画像を凝って、左に一列表示するとき、次のようにする。

<BODY style="BACKGROUND:white url(image.gif)
  repeat-y">

  ・上に一列表示するとき、次のようにする。

<BODY style="BACKGROUND:white url(image.gif)
  repeat-x">

  ・右に一列表示するとき、次のようにする。

<BODY style="BACKGROUND:white url(image.gif)
  repeat-y; background-position:top right">

  ・下に一列表示するとき、次のようにする。

<BODY style="BACKGROUND:white url(image.gif)
  repeat-x; background-position:bottom left">

  ・繰り返さず表示するとき、次のようにする。

<BODY style="BACKGROUND:white url(image.gif)
  no-repeat">

  ・繰り返して表示するとき、次のようにする。

<BODY style="BACKGROUND:white url(image.gif)
  repeat">

  ・スクロール固定表示するとき、次のようにする。

<BODY style="BACKGROUND:white url(image.gif)
  repeat-x"; background-attachment:fixed>

■ホームページ作成 HTML 編資料

■企業サイト、商用サイト作成編資料

■ホームページ作成 設計編資料

■ホームページ作成 JAVA Script 編資料


\| VB \| SQL \| Perl \| PHP \| ASP \| JSP \| C \| PC \| HP \| FAQ \| フリーソフト \|