HTMLこれだけでどうだ！?

-- 目次 --
基本的な形式　テキストのフォーマット　 段落構成のフォーマット
ハイパーテキストのためのリンク　 データの列挙　イメージ表形式
表形式　 フレーム
このwww文書自体のソースと見比べてください．

ちょいとひとこと

  1. HTMLは構造を記述し，実際の見栄えはユーザのマシン環境にゆだねるもの．多様なマシン環境を許すためにも細かな表示まで制御するのはダメ．
  2. シンプルが一番．不必要なグラフィックスなどを用いてWorld Wide Waitを悪化させないように．
  3. 検索エンジンでどのページから読み出されるかわからないので，最低限，フロントのページへのリンクを各ページに用意．
  4. でも何といっても内容でしょ！

基本的な形式

<html>
<head>
<title>Title of this page</title>
</head>
<body>
この部分がウィンドウに表示される本体です。
</body>
</html>

テキストのフォーマット

<b>...</b>
太字
<i>...</i>
イタリック
<u>...</u>
下線
<var>...</var>
変数名
<tt>...</tt>
タイプライタフォント
<kbd>...</kbd>
キーボードからの入力表示用フォント
<code>...</code>
ソースコード表示用フォント
<em>...</em>
強調フォント
<strong>...</strong>
さらに強い強調
<!--- comment --->
(コメント)

段落構成のフォーマット

<p>...</p>
パラグラフ(</p>は省略可)
<p align=type>...</p>
行揃え指定（type=left,center,right）付きパラグラフ
<br>
改行
<hr>
横線
<hr attribute>
属性指定（type=left,center,right, size=n, width=n）付き横線
<hn>...</hn>

見出し（n=1）

見出し（n=2）

見出し（n=3）

見出し（n=4）

見出し（n=5）
見出し（n=6）
<hn align=type>...<hn>
行揃え指定（align=left,center,right）付き見出し（n=1,..,6）

見出し（align=right n=3）

<pre>...</pre>
そのフォーマットのまま表示 
       学年                 優          良           可         不可
         １                 16          14           9           1
         ２                 20          12           5           3
<pre width=n>...</pre>
そのフォーマットのまま表示（幅指定n）

ハイパーテキストのためのリンク

<a href="URL">...</a>
<a href="URL#label">...</a>
<a href="#label">...</a>
<a name="label">...</a>
<a href="mailto:address">...<a>
ホワイトハウスは本当に白い家ですか？
イメージを文章の中にはるやり方はここに出ています．

データの列挙

非順序（マーク付き）リスト
<ul>
<li>Hot
<li>Warm
<li>Cold
</ul>
  • Hot
  • Warm
  • Cold
順序リスト
<ol>
<li>Hot
<li>Warm
<li>Cold
</ol>
  1. Hot
  2. Warm
  3. Cold
記述リスト
<dl>
<dt>MTV
<dd>Music Television
<dt>NPR
<dd>National Public Radio
<dt>CNN
<dd>Cable News Network
</dl>
MTV
Music Television
NPR
National Public Radio
CNN
Cable News Network

イメージ

表示
<img src="filename" alt="words">
filenameで指定されるイメージを表示
altはブラウザがイメージを非表示にしている時に表示される文字列
1234(２つめはリンク，４つめはイメージファイルがない場合)


参考仕様

表形式

1行3列
<table border="1">
<tbody>
<tr>
<td bgcolor="#ff0000" width="50" height="30"><CENTER>赤色</CENTER></td>
<td bgcolor="#ffff00" width="50" height="30"><CENTER>黄色</CENTER></td>
<td bgcolor="#0000ff" width="50" height="30"><CENTER>青色</CENTER></td>
</tr>
</tbody>
</table>
borderで表のフレームの太さ"1"を決定
bgcolorでフレーム内の色を決定
widthとheightでフレーム内の大きさを決定
widthとheightの値はピクセルと％で設定することが可能
ピクセルの場合には数値のみ．％の場合には「％」を数字の後ろに付ける
赤色
黄色
青色
3行1列
<table border="5">
<tbody>
<tr>
<td width="100" height="20" bgcolor="#ff0000"><CENTER>赤色</CENTER></td>
</tr>
<tr>
<td width="100" height="20" bgcolor="#ffff00"><CENTER>黄色</CENTER></td>
</tr>
<tr>
<td width="100" height="20" bgcolor="#0000ff"><CENTER>青色</CENTER></td>
</tr>
</tbody>
</table>
borderで表のフレームの太さ"5"を決定
bgcolorでフレーム内の色を決定
widthとheightでフレーム内の大きさを決定
赤色
黄色
青色
3行3列
<table border="1">
<tbody>
<tr>
<td width="50" height="30" bgcolor="#ff0000"><CENTER>赤色</CENTER></td>
<td width="50" height="30" bgcolor="#ffff00"><CENTER>黄色</CENTER></td>
<td width="50" height="30" bgcolor="#0000ff"><CENTER>青色</CENTER></td>
</tr>
<tr>
<td width="50" height="40" bgcolor="#ffffff"><CENTER>白色</CENTER></td>
<td width="50" height="40" bgcolor="#666666"><CENTER>グレー</CENTER></td>
<td width="50" height="40" bgcolor="#000000"><CENTER>黒色</CENTER></td>
</tr>
<tr>
<td width="50" height="50" bgcolor="#00ff00"><CENTER>黄緑色</CENTER></td>
<td width="50" height="50" bgcolor="#ff8000"><CENTER>橙色</CENTER></td>
<td width="50" height="50" bgcolor="#ffffff" background="/images/cube.gif"><CENTER>画像</CENTER></td>
</tr>
</tbody>
</table>
backgroundで表に画像の貼り付け
赤色
黄色
青色
白色
グレー
黒色
黄緑色
橙色
画像
表のフレームの消去
border="1"を消去
表の水平連結
<table>
<tbody>
<tr>
<td width="50" height="30" bgcolor="#ff0000" colspan="3"></td>
</tr>
<tr>
<td width="50" height="40" bgcolor="#ffffff"></td>
<td width="50" height="40" bgcolor="#666666"></td>
<td width="50" height="40" bgcolor="#000000"></td>
</tr>
<tr>
<td width="50" height="50" bgcolor="#00ff00"></td>
<td width="50" height="50" bgcolor="#ff8000"></td>
<td width="50" height="50" bgcolor="#ffffff" background="images/cube.gif"></td>
</tr>
</tbody>
</table>
colspan="3"を使用して、フレームを連結
表の垂直連結
<table bgcolor="#00ffff">
<tbody>
<tr>
<td width="50" height="30" bgcolor="#ff0000" rowspan="3"></td>
<td width="50" height="30" bgcolor="#ffff00"></td>
<td width="50" height="30" bgcolor="#0000ff"></td>
</tr>
<tr>
<td width="50" height="40" bgcolor="#666666"></td>
<td width="50" height="40" bgcolor="#000000"></td>
</tr>
<tr>
<td width="50" height="50" bgcolor="#ff8000"></td>
<td width="50" height="50" bgcolor="#ffffff" background="images/cube.gif"></td>
</tr>
</tbody>
</table>
colspan="3"を使用して、フレームを連結
表のフレーム部に着色

フレーム

上下方向にフレーム分割
　 Index： ファイル名･･･TopPage1.html
<html>
<head>
<title>FrameView</title>
</head>
<frameset rows="20%,80%">
<frame src="Frame.html" name="Frame">
<frame src="Main-A.html" name="Main">
</frameset>
</html>
　　Frame： ファイル名･･･Frame.html
<html>
<head>
<title>Frame</title>
</head>
<body>
<P align="center">Frame<BR>
<BR>
Main-<A href="Main-A.html" target="Main">A</A>　　　
Main-<A href="Main-B.html" target="Main">B</A>　　　
Main-<A href="Main-C.html" target="Main">C</A>
<BR>
<BR>
<A href="../html.html" target="_parent">Return</A></P>
</body>
</html>
　 Main： ファイル名･･･Main-A.html,Main-B.html.Main-C.html
<html>
<head>
<title>MAIN-A</title>
</head>
<body bgcolor="#ff0000">
<P align="center"><BR>Main-A</P>
</body>
</html>
AをBやCに置き換えてそれぞれのファイルを作成

ここをクリックすると、フレームを使用したWebSiteが見れます。

左右方向にフレーム分割
　　 Index： ファイル名･･･TopPage2.html
<html>
<head>
<title>FrameView2</title>
</head>
<frameset cols="15%,85%">
<frame src="Frame.html" name="Frame">
<frame src="Main-A.html" name="Main">
</frameset>
</html>
以下、Frame，Mainは上記のものと同じ

ここをクリックすると、フレームを使用したWebSiteが見れます。

色の設定

色の設定には色名もしくは16進表記を使用します．
赤 ⇒ 色名：red,　 16進表記："#ff0000"
青 ⇒ 色名：blue,　 16進表記："#0000ff"
黄色 ⇒ 色名：yellow,　16進表記："#ffff00"
グレー ⇒ 色名：gray,　 16進表記："#bebebe"
緑 ⇒ 色名：green,　 16進表記："#00ff00"