HTML文書記述規則(抄)
web表示文書記述形式としてプレーンテキストにコマンドを記述するHTML形式の文書が用いられる。その基本的な記述規則をまとめる。- HTML命令一般を｢TAG｣と呼び、命令語＋パラメターを不等号で囲んで表す。
- TAGの終了は、 命令語の前にスラッシュ｢/｣を加える。(単独単発TAGを除く)
- １文書単位は
- HTML TAGで挟んだ範囲が１文書単位：<html>～～</html>
- html tag内は、ヘッダーTAG'head'と本文TAG`body`で構成する。
：<head>宣言</head>＋<body>～本文～</body>
- tytle TAGは'head'tag内に置き、記述は栞ショートカットやタスクトレーに表示される
- コメントTAGは <!--コメント//-->
［ 基本形 ］
<html>
<head>
ヘッダー定義内容
<tytle>表示標題</tytle>
検索キーワード，漢字コード，著作権，日時，スタイル，等の宣言項
</head>
<body>
本文記述内容<br>
</body>
</html> - 段落(文節)TAG： (自動改行幅設定)
- 改行TAGは、 <br>
- 文字強調斜体下線下付上付TAGは、
- 文字修飾指定 <font 属性=パラメター>～～～</font>
- 文字色 <font color="#RRGGBB">～～～</font>
：RR,GG,BB＝00～FFh強度指定
- 文字サイズ：
相対指定 <font size=+2>指定書体表示～ </font>指定書体表示
- 書体＆サイズ：
絶対指定 <font style="font:20pt,'ＭＳ 明朝'"> 指定書体表示</font> - 水平罫線TAGは、 <hr>
- TAGの表示(機能停止)は、
<xmp> (～この間を<TAG><b>もPlaneTextとして表示．前後１改行)</xmp> - 'URL'指定法
MSDOSのディレクトリー区切り符号｢\｣に代わり、｢/｣スラッシュを用いる他はDOSに準じる。
Web上では大文字と小文字は別扱い。DOSとは異なるので注意！ - 他ファイルの画面貼り込み < …… src="url">
- 画像： <img src="画像url"><br>
- 画像位置指定と回り込み許可、間隔指定 right, left, center
<img src="./画像url" align=right border=0 hspace=0> 画像接着＝0,0
回り込み解除は<br clear=all> (all、right、left)以降 - 画像の大きさ指定
<img src="./画像url" width=WWW>
縦横長指定 width=WWW, height=HHH
- 背景音ＢＧＭ <bgsound src="./MIDIurl" loop="infinite繰返し数">
- 背景模様 <body background="url"> </body>
- 背景色 <body bgcolor="#RRGGBB">～～</body> ：RR,GG,BB＝00～FFh強度指定
- FRAME読み込み
(読込み) <frameset rows=垂直分割比 cols=水平分割比> ： cols="2*,5*"：
横方向２：５に分割
rows="2*,3*"：
縦方向２：３に分割<frame src="url1" name=frame名1> (左側) <frame src="url2" name=frame名2> (右側) </frameset> - IFRAME読み込み <iframe src="url" ＨＶパラメター> </iframe>
- <table border=n>～～
</table> が表の範囲宣言。n=0 は位置合わせに用いる。∵枠線不表示
align=right 位置と回り込みの指定。'align'項、無指定は回り込み禁止。
- <tr> 行頭宣言。行数だけ必要。
- <td> 項頭宣言。セル毎の先頭TAG
- <tr><td> 内の表示位置指定は、縦横それぞれにつき、
横 align= right , center , left 縦 vAlign= upper , middle , bottom
と指定する。
- <th> 標題用項頭宣言。色など他のTAGが効かないことが多いのでtd＋太字を使用
- TABLE TAG 内では、終了TAG</tr>、</td>、</th>は総て省略可。∵次項頭か</TABLE>終了TAGが代行する
- 位置合わせはborder=1 で行い、位置が決まればborder=0 にする。
- セルの縦横連結、項幅指定：大きなセルを作る
<td colspan=n>、 <td rowspan=m> m,nは連結項数。
後位列のセルは無条件でこの拡大セルを取り入れて、次の位置に描画する
- 項：セルの項幅指定：width=nnn画素
<td width=nnn> nnnは画素数。
- TABLE全体の幅はTABLE TAG内で width＝画素数、相対幅％等で指定する
- 枠線･罫線の単線化：<table cellspacing=0>
- 横太罫線表示：<table frame=box>
- 外枠色指定：<table bordercolor="#RRGGBB">
- 背景色指定：<table bgcolor=
"#RRGGBB">
［TABLE TAG colspan、rowspanの効果］ （｢行，列｣表示。横の同一色が同一行）
<table border=2 bordercolor="#00AF00" width=640 cellspacing=0 bgcolor="#FEFEAF">
回込＆禁止<br clear=all><tr> <td>1,1 <th>1,2 <th colspan=2>1,3 <td colspan=2>1,5 <td
row
span
=5>
1,7<tr> <td>2,1 <td colspan=2 rowspan=3><b>2,2 <td>2,4 <td>2,5 <td>2,6 <tr> <td>3,1 <td>3,4 <td>3,5 <td>3,6 <tr> <td rowspan
=2>4,1<td colspan=2 rowspan=2>4,4 <td>4,6 <tr> <td>5,2 <td>5,3 <td>5,6
</table> - 箇条書き
- <ul type=型>～～</ul> ul TAB内は<li>～～<br> で箇条書き。
- または<ol type="A">～<li>～</ol>(全体指定)
- 行毎指定 <li type=A>～～～(<br> ……各行の改行TAGは末行を除く)
- 型：type=1＝1、I＝Ⅰ、i＝ⅰ、A＝A、a＝a、circle＝小○、square＝小■、disc＝小●
- 入れ子構造可。この文書自体が箇条書き入れ子構造である。
- 任意の画像を箇条書き符号に(CSS)
li.id { list-style: disc url("画像url"
);
(<HEAD>領域で宣言：画像／不存在でdisc)
<li class=id> （<body>本文領域内）
- 任意の箇条書き文字符号(CSS)
li.sid { list-style-type: 種別 ); (<HEAD>領域で宣言)
<li class=sid> （<body>本文領域内）種別： - disc
- circle
- square
- decimal
- decimal-reading-zero
- lower-roman
- upper-romam
- lower-alpha
- upper-alpha
- 定義リスト(箇条書き２)
- 項目１
- 説明１
- 項目２
- 説明２
- 項１
- 説明１
- 項２
- 説明２
- インデックス・ラベル指定
- リンク指定
- <a href="URL">リンク表示（文字/画像)</a> クリックでURL内容表示
- <a href="URL#label_NAME">リンク表示（文字/画像)</a>
〃 URLのラベル位置～表示
- <a href="URL" target="_blank">（文字/画像)リンク</a>
〃 別ウィンドウで 〃
- ファイルダウンロードは、圧縮ファイルにリンクさせると実現
<a href="DL URL">リンク表示</a> クリックでダウンロード画面 - メール指定 赤字部＝個々DATA
- 検索キーワードの設定
<H1>標題行</H1>
<H2>標題行</H1>
<H3>標題行</H1> (３までgoogleの検索範囲)
<H4>標題行</H1> (標題行は太字で２改行される。数値は1～6)
<H5>標題行</H1>
<H6>標題行</H1>
<h7>標題行</H1> 値域を外れると改行以外無効。終了TAGの数値は1～6任意 - FRAME、iframe の設定(複数のHTML文書の同時表示)
- 他文法領域の設定：Cascading Style Sheet，Java Script，Java Applet，
実質HTMLファイルの機能拡張として、見栄え指定を行うCSS、動的にDATAを取り込み動作を変えるJavaScript、Javaなどがあり、HEAD領域で使用宣言をして、HTMLファイルの注釈領域内にそれぞれの記述領域を設ける．同一HTMLファイル内の複数の記述領域では共通の値である．
- <JavaScript の利用>
- 戻るスクリプト：リンク元へ戻るJAVAスクリプト
<a href="javascript:history.back();"> ……………………(戻るスクリプト)
<img src="ボタンURL" alt="戻る" width="幅" height="高"> ………(ボタン画像)
</a>
- FRAME、iframe の設定(複数のHTML文書の同時表示)
<命令語 パラメター> ……TAG開始
(被制御DATA)
</命令語> ……………TAG終了
<div>～～</div> 前後改行なし
<div style="width:178mm">～～</div> 自動改行幅178mm
図＆表の回り込み指定解除＝<br clear="all"> 次の行は図＆表の下から開始
| 被強調対象 | <b>被強調対象</b>被強調対象
| 斜体文字 | <i>斜体文字</i>斜体文字
| 下線付加 | <u>下線付加</u>下線付加
| 取消線付加 | <s> | 下付文字 | <sub>下付文字</sub>下付文字
| 上付文字 | <sup>上付文字</sup>上付文字
| 等幅文字 | <tt>12345.67890試</tt>12345.67890試
| |
'../' 上位フォルダ(ディレクトリー)：相対指定可能
'./' 同フォルダ(ディレクトリー)
[例]：内容LIST：'../../list.html'
-
<dl compact>[compact属性付]（任意文字列）
<dt>項目１<dd>説明１
<dt>項目２<dd>説明２
</dl>
</dt>、</dd>は省略可、次項と</dl>が代行
SAMPLE：[compact属性なし]
- [compact属性付]
<a name="label_NAME">表示ラベル</a> 'label_NAME'は数字を含む任意文字列
（"#label_NAME"で検索リンクできる）
mail to： <A HREF="mailto:your@mail.adrs.メアド?subject=ヘッダ"> …(リンクurl指定)
<img height="26" width="63" SRC=" 画像url" border="0"> ………(リンクボタン画像)
</A> adrs<br>
Last update: 2004/02/25日付
</ADDRESS>
<META NAME="KEYWORDS" CONTENT="検索語リスト,ATS,ATC,衝突,鉄道">
<META NAME="description" CONTENT="概要説明約100字内に検索キー">
google検索ヒット率向上には加えて
<tytle>標題中に検索語挿入</tytle>
<H1>本文タイトル中に検索語を記述</H1>
本文冒頭200字以内に検索語を配置
<a href="リンク先ファイル">にも本文同様に検索語を配置</a>
読み込みファイル名も出来れば検索語(英文のみ)
<META name="robots" content="all"> 自動検索許容範囲指定
| 指定 | 内容 |
| all | 全許可 |
| none | 全不許可 |
| index | 現頁許可 |
| noindex | 現頁不許可(リンク頁可) |
| nofollow | リンク頁不許可(現頁可) |
mail to：
 adrs |
|
|
|
|
| Last Upload: ： Last Update: 2004/04/22 （02/29，org.02/25) | ||||