いまさら聞けないHTML講座
HTMLとは
Hyper Text Markup Language
HTML言語(Hyper Text Markup Language)で記述された命令文(構文)のことです。
そのファイルをインターネットエクスプローラーやネットスケープといったブラウザ開けば、ブラウザがそこに書かれたタグの命令を判断して自動的にレイアウトし表示してくれるしくみです。 ちょっとした命令文を付けるだけで写真やイラストをインライン上に配置して思い通りのレイアウトを作り出せます。
さらに ハイパーテキストといった機能を利用してリンクを張ることができます。 文章の中にリンクを付けておけば、そこをクリックすることで別の文章を開いたり、同じ文章内の別のところへ移動できます。本のページをめくるようなものですね。もちろん 大きなグラフィックスにもリンクを張ることが出来きるので工夫次第で無限の可能性があります。
最近は、ホームページを簡単に作るアプリケーションが多くありますが、基本のhtmlを知ることで、記述した構文の間違いを見つけることができる上、高価なソフトを使うことなく簡易ワープロでもホームページを作る事が出来るのです。
ホームページを作るためのタグの使い方 文章や画像はタグに囲まれることによって表現されレイアウトしていきます。
タグで挿むものは例外を除いて <****> で始まり </****> スラッシュで終わるようにして囲みます。
始まりと終わりの**** は同じ命令文(構文)を記述します。
タグは、英大文字でも英小文字でも原則として構いませんが、小文字を使うことをお勧めします。
もちろん 日本語や2バイト文字のアルファベットは使ってはいけません。
インターネットエクスプローラーやネットスケープなど、ブラウザの種類やバージョンによって、狙ったタグが表現することが出来ないことがあることに十分注意する必要があります。
なお、この講座では
記号「****」「++++」は、ファイル名を表し、「〜」は、囲む範囲。
大文字の「****」は、文字を表す事とします。
全体的構成
HTMLで記述されていることを示すため <html>〜</html> で全体を大きく囲みます。
その中に、ページのタイトルなどを示すヘッダー部分 <head>〜</head> で囲みます。
ヘッダーの中にはタイトルとして <title>〜</title> のように記入します。
さらにドキュメント内の共通な文字カラー、バックカラーやバックグランド画像を指定しておきましょう。
その下に本文スペースとして <body>〜</body> で囲み。この間に書いた文章や画像がブラウザに表示されようになります。
色指定
テキスト色、バックグランド色、リンク色は、すべて RGBの16進法で表記します。
基本html構文
基本がわかればワープロだけでホームページが作れますよ。以下の文章でも立派なホームページになっています。
手順
1. 以下の例文の文章をワープロを使って記述し、テキストとして書き出し保存します。
2. 次に、保存された「****.txt」の拡張子を「****.html」に変更します。
3. この保存した「****.html」をインターネットエクスプローラーなどのブラウザで開きます。
<html>
<head>
<title>ここにタイトルを記入する</title>
</head>
<body bgcolor="#FFFFFF" text="#000000">
この部分が本文スペースで文章や写真のリンク(下記)を記述する
<img src="****.gif" width="160" height="120"> ← 画像の配置
</body>
</html> |
見出し文字の大きさ
数字が小さいほど文字は大きい h1〜6 自動的に太文字強調されます。
<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>
<h4>見出し4</h4>
<h5>見出し5</h5>
<h6>見出し6</h6> |
フォントサイズ
数字が大きいほど文字は大きい 7 〜 1 「3」が基準値
太文字強調されない。
<font size=7>サイズ7</font>
<font size=6>サイズ6</font>
<font size=5>サイズ5</font>
<font size=4>サイズ4</font>
<font size=3>サイズ3</font>
<font size=2>サイズ2</font>
<font size=1>サイズ1</font>
サイズ設定なし
|
フォントサイズ
基準の大きさとの相対値指定 +7 〜 -7 太文字強調されない。 <font size="+7">サイズ+7</font>
<font size="+6">サイズ+6</font>
<font size="+5">サイズ+5</font>
<font size="+4">サイズ+4</font>
<font size="+3">サイズ+3</font>
<font size="+2">サイズ+2</font>
<font size="+1">サイズ+1</font>
サイズ +-0
<font size="-1">サイズ-1</font>
<font size="-2">サイズ-2</font>
<font size="-3">サイズ-3</font>
<font size="-4">サイズ-4</font>
<font size="-5">サイズ-5</font>
<font size="-6">サイズ-6</font>
<font size="-7">サイズ-7</font>
サイズ設定なし
|
文字のスタイル
文字の表現(スタイル)を変更できる
<b>太文字</b> |
<strong>最大強調</strong> |
<em>強調斜体</em> |
<smole>小文字</smole> |
<big>大文字</big> |
<i>イタリック体</i> |
<u>下線付文字 </u>(Explorerのみ) |
<tt>等幅フォント</tt> |
文字の色
<font color=#FFFFCC>赤色</font>
<font color=#00ff00>緑色</font>
<font color=#3399FF>青色</font>
|
テキストの点滅 テキストの点滅 (ネットスケープのみ) |
< LISTING>〜 < /LISTING> タグ内の表示できないテキストを表示
タグ内の表示できないテキストを等幅フォントで表示 |
< NOBR>〜< /NOBR>
自動改行の禁止 |
< NOBR>< WBR>〜< /WBR>< /NOBR>
自動改行の禁止内での改行可能ポイント |
罫線 <hr> (</>で囲む必要はない)
|
箇条書
箇条書きリストにはいろいろな表現があります。
以下の構文で表現方法を参考にしてください。
<ol> 〜 </ol> 番号付 箇条書リスト
<ul>〜 </ul> 箇条書リスト (3レベルまで入れ子が可能です)
リスト<li>は 一行ずつ頭のみ付ける タグの例外的な使い方で、後ろは付けずに囲まないこと
構文 |
表示 |
<ul>
<li> あいうえお
<li> かきくけこ
<li> さしすせそ
</ul> |
黒丸
|
<ul type="CIRCLE">
<li> あいうえお
<li> かきくけこ
<li> さしすせそ
</ul> |
白丸
|
<ul type="SQUARE">
<li> あいうえお
<li> かきくけこ
<li> さしすせそ
</ul> |
白矩形
|
<ol>
<li> あいうえお
<li> かきくけこ
<li> さしすせそ
</ol> |
番号付きリスト
|
<ol>
<li value=150> あいうえお
<li value=200> かきくけこ
<li value=250> さしすせそ
</ol> |
番号付きリストで、特定の項目に任意の番号を指定する
|
<ol type=a start=5>
<li> あいうえお
<li> かきくけこ
<li> さしすせそ
</ol> |
英小文字「e」から始める
- あいうえお
- かきくけこ
- さしすせそ
|
<ol type=I start=10>
<li> あいうえお
<li> かきくけこ
<li> さしすせそ
</ol> |
アラビア数字「X」から始る
- あいうえお
- かきくけこ
- さしすせそ
|
<ol type=1>
<li>第1階層 項目A
<ol type=A>
<li>第2階層 項目A
<ol type=i>
<li>第3階層 項目A
<li>第3階層 項目B
<li>第3階層 項目C
</ol>
<li>第2階層 項目B
<ol>
<li>第3階層 項目D
<li>第3階層 項目E
</ol>
<li>第2階層 項目C
</ol>
<li>第1階層 項目B
<ol>
<li>第2階層 項目D
<ol>
<li>第3階層 項目F
</ol>
</ol>
</ol> |
階層表示
- 第1階層 項目A
- 第2階層 項目A
- 第3階層 項目A
- 第3階層 項目B
- 第3階層 項目C
- 第2階層 項目B
- 第3階層 項目D
- 第3階層 項目E
- 第2階層 項目C
- 第1階層 項目B
- 第2階層 項目D
- 第3階層 項目F
|
定義型リスト
定義型リストの範囲 用語の説明に等に使用
定義型リスト コンパクト
構文 |
表示 |
<dl>
<dt> 用語
<dd> 説明
</dl> |
用語
説明 |
<dl>
<dt>レベル1
<dd>
<dl>
<dt>レベル2
<dd>レベル3
</dl>
</dl> |
アウトライン
-
- レベル1
-
- レベル2
- レベル3
|
<dl COMPACT>
<dt>コンパクト
<dd>改行無し
</dl> |
コンパクト改行なし
- コンパクト
- 改行無し
|
<!--表示されない--> |
コメント
この部分はブラウザでは表示されない |
<address>〜</address> |
電子メールのアドレス ブラウザにはイタリック体で表示れる |
「&」や「;」の表示 |
「&」や「;」の表示 |
画像の形式
画像や音声にはいくつかの種類があります。
適切な圧縮ファイルにしておいてからそれぞれを指定しましょう。
構文 |
形式 |
表示 |
****.gif |
画像 |
ジフ画像(最大256色でHTMLで使う基本的な画像形式)
透明部分を持たせたり、アニメーションを表示させることも出来る |
****.jpeg |
画像 |
ジェイペグ画像 フルカラー1670万色の高画質画像の高圧縮形式 |
****.mp3 |
音声 |
エムピースリー形式のサウンドファイル(mp3) |
****.au |
音声 |
サウンドファイル |
****.mov |
動画 |
クイックタイムムービー(QickTimeMovie)・クイックタイムバーチャル(VR) |
****.mpg |
動画 |
エムペグ動画(mpeg1:エムペグワン形式) |
****.swf |
動画 |
フラッシュムービーファイル(swf:ショックウェーブフラッシュ) |
画像の表示 画像の表示のされ方にはいくつかのパターンがあります
ジフ画像の表示
|
透明ジフ画像の表示
|
表示画像のサイズ変更
(注)表示画像のサイズが変更されたからといって、オリジナル画像は変更がされません。
よって容量も変更されていないため、適切なサイズに解像度を変更するようにしましょう。
ここでのサイズ指定は、あくまでも例外的な使用法と考えるようにしましょう。
構文 |
表示 |
オリジナルサイズ
<img src="****.gif" width="90" height="90"> |
|
WIDTH=50 幅のみピクセル指定
<img src="****.gif" width=50> |
|
HEIGHT=50 WIDTH=200 ピクセル指定
<img src="****.gif" height=50 width=200> |
|
表示サイズとオリジナルサイズの違いには十分注意が必要です。
画像サイズは、フォトショップなどレタッチソフトを使い、解像度の変更(リサイズ)する必要があります。
画像の配置
画像をインライン上に配置する時、文字列に対して上下の表示位置関係を指定してあげます。
特に指定がない場合は、文字列の下合わせになります。
- TEXTTOP:文字列の最上部合わせ
- ABSMIDDLE:行高さの中央合わせ
- ABSBOTTOM:行高さの最下部合わせ
- BASELINE:文字列のベースライン(文字の下側)合わせ
上 <img src="strip.gif" align=TOP>
|
テキスト上部 <img src="strip.gif" align=TEXTTOP>
|
中央 <img src="strip.gif" align=MIDDLE>
|
中央(絶対)<img src="strip.gif" align=ABSMIDDLE>
|
下 <img src="strip.gif" align=BOTTOM>
|
下部(絶対)<img src="strip.gif" align=ABSBOTTOM>
|
ベースライン <img src="strip.gif" align=BASELINE>
|
ハイパーリンクの使い方
リンク先のディレクトリーを指定してあげます。
ディレクトリーには、相対パスと絶対パスの二通りがあります。
相対パス = 自分との位置関係(相対関係)で同じフォルダ(ディテクトリー)か、上か下かを指定していきます。
絶対パス = おおもと(ルート)から、たどって指定してあげます。
構文 |
表示 |
<a href="****.html">****</a> |
****をクリックすると同じファイルにある
「 ****.html」へジャンプする
「 border="0" 」でリンク枠を消すことが出来る |
<a href="++++/****.html">****</a> |
****をクリックすると相対パス「/」以下に示された一つ下のファイルにある
「 ****.html」へジャンプする |
<a href="****/++++/****.html">****</a> |
****をクリックすると相対パス「/」以下に示された二つ下のファイルにある
「 ****.html」へジャンプする |
<a href="../****.html">****</a> |
****をクリックすると相対パス「/」以下に示された一つ上のファイルにある
「 ****.html」へジャンプする |
<a href="../../****.html">****</a> |
****をクリックすると相対パス「/」以下に示された二つ上のファイルにある
「 ****.html」へジャンプする |
<a href="http://www.****.html">****</a> |
****をクリックするとインターネット上にあるファイルにジャンプする
絶対パス |
<a href="****.html#+++">****</a> |
****をクリックすると同じ文章、または
他の文章「****.html」の「++++」という名前のアンカーのあるところにへジャンプする
ジャンプ先に名前をつけておきます。
<a name="+++"></a> |
クリックブルマップ
画像の中を分割して別々にリンク用のボタンを作れます。
クライアントサイド クリックブルマップは、画面に表示されているイメージ上の座標を指定しておくことでボタンを作成し、そこをクリックすることで、リンクをおこなうことができる便利もの。
USEMAP属性を付けた IMGタグのブロックで、マップデータに付けた名前を設定し、MAPタグとAREAタグでリンク指定ブロックをつくりましょう。
- SHAPE :リンクのボタン形状(四角・円・多角形)
- COORDS:リンクボタンの形状データ
- HREF :ハイパーリンク先(URL)
- NOHREF :リンクしない
<map name="****"> ←必ず名前を付けること
<area shape=rect coords=50,50,100,100 href="#****"> ←四角
<area shape=circle coords=150,75,25 href="****.html"> ←丸型
<area shape=polygon coords=205,52,255,52,285,77,255,102,205,102 href="****.html"> ←不定形
<area shape=rect coords=0,0,400,150 NOHREF> ←全体の指定
</map>
形状 |
SHAPEのパラメータ |
COORDSのパラメータ |
四角 |
rect |
X1,Y1,X2,Y2
左上・右下 |
円 |
circle |
X1,Y1,R1
円の中心・半径 |
多角形 |
polygon |
X1,Y1,X2,Y2・・・
各頂点 |
指定するエリアが重なる場合、先に指定されたエリアが優先されます。
このため、最後にRECT属性でイメージの最大エリアを指定しておけば、
その他の部分という形でリンク先を指定できます。
表(テーブル)の作成
表の枠線を消して使えば複雑なレイアウトを表現することが出来ます。
ボーダーの幅を「0」にして表が見えないようにします。table border="0"
構文 |
表示 |
<table border="1"> ←表の指定(テーブル)
<tr>
<th>セルA</th> ←タイトル行(特にタイトルにする必要はありません)
<th>セルB</th>
</tr>
<tr> ←行
<td>セル1・1</td> ←列
<td>セル1・2</td>
</tr>
<tr>
<td>セル2・1</td>
<td>セル2・2</td>
</tr>
<tr>
<td>セル3・1</td>
<td>セル3・2</td>
</tr>
</table> |
セルA |
セルB |
セル1・1 |
セル1・2 |
セル2・1 |
セル2・2 |
セル3・1 |
セル3・2 |
|
構文 |
表示 |
<table border="5"
cellspacing="15" cellpadding="10">
<tr>
<th>セルA</th>
<th>セルB</th>
</tr>
<tr>
<td>セル1・1</td>
<td>セル1・2</td>
</tr>
<tr>
<td>セル2・1</td>
<td>セル2・2</td>
</tr>
<tr>
<td>セル3・1</td>
<td>セル3・2</td>
</tr>
</table> |
セルA |
セルB |
セル1・1 |
セル1・2 |
セル2・1 |
セル2・2 |
セル3・1 |
セル3・2 |
|
クイックタイムムービー
|
クイックタイムなどプラグインを必要とするファイルを組み込むときは「ENBED」エンベットタグを利用します。
ENBED=埋め込みオブジェクト
WWWサーバーから転送されたファイルが、クライアント側にあるアプリケーションに関連付けられる時データの表示や内容の編集ができるようになります。
< ENBED SRC="++++.mov" WIDTH=160 HEIGHT=136>
クイックタイムムービーの大きさが160×120の場合、高さ分にコントロールバー表示サイズ分として16ピクセルをプラスします |
構文 |
表示 |
<AUTOPLAY=TRUE or FALSE> |
ムービーファイルが開かれたときに、自動的に再生 |
<CONTROLLER=TRUE or FALSE> |
コントローラーの表示 |
<LOOP=TRUE or FALSE or PALINDROME> |
繰り返し再生 PALINDROME=最後まで再生すると逆再生 |
<PLAYEVERYFRAME=TRUE or FALSE> |
すべてのフレームの再生(時間軸は無視される) |
<HIDDEN=TRUE or FALSE> |
ムービーの表示・非表示 |
ファイルをサーバーに転送する
お使いのソフトによって違いますが、ここではFeathというソフトの場合です
くわしくは、それぞれのお使いのソフト使用説明を参照しましょう。
自分のファイルをディレクトリに転送するときは、ftp(File Transfer rotocol)が便利
ftp用にFetchというソフトがあります
- Fetchを起動する
- Host ・・・・・自分がデータ転送するマシンの名前を入力
- User ID ・・・・転送するUNIX用の自分のIDを入力
- Password・・・UNIX用のパスワードを入力
- Directory・・・データ転送するディレクトリのパスネームを入力
例:(/++++/****)最初の「/」はルート
以上を入力し終ったら「OK」をクリックします。
犬のアイコンが走ってきて目的のディレクトリにつないでくれます。
ウインドウの「Transfer」の項目に移動したいファイルを選択してから「Put File」(送り込む)をクリックします
注:「Automatic」が選択されているようにしてください。
上級者用テクニック
上級者のちょっとしたテクニックを紹介します。
レイアウト乱れを無くす方法
ページをレイアウトするときWindows(96dpi)とMacintosh(72dpi)の環境では、フォントの標準サイズが違うため同じようなレイアウトにならず崩れてしまいます。そんなときはCSS(カスケード スタイル シート)をつかって、極力レイアウトの違いを吸収しましょう。
ただし、CSSに対応していない古いブラウザには残念ながらこの方法が使いないことも頭にいれておいてください。
- ヘッドにスタイル定義の設定をします。
- 対象を テーブルに設定します。その時は、必ず見えないテーブルですべてを囲んでおくのを忘れないようにしましょう。
- ついでに、リンクにカーソルが重なったときの効果(疑似クラス)も設定しておくと良いでしょう。
(注)以下の構文で、赤文字部分はユーザーが設定。
<head>
<title>****</title>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<style type="text/css">
<!--
table { font: 12px "MS Pゴシック", "Osaka"} ←文字の大きさとフォントをテーブルに指定する
a:hover { color: #FFFFCC} ←リンクのカーソルが重なったときの色を指定する
a:active { color: #FFFF00} ←リンクボタンを押した時の色を指定する
a { text-decoration:none; } ←リンクに付くアンダーラインを消去する
-->
</style>
</head>
<body bgcolor="#FFFFFF" link="#3399FF" vlink="#00FF00" text="#000000">
<table width="100%" border="0" cellspacing="0" cellpadding="5" height="100%" align="center">
</table>
</body>
|
ポップアップウインドウを作る
ボタンを押すとポップアップするためのジャバスクリプト設定してみましょう。
見本は、幅高さとも400ピクセルでスクロールバー以外のメニューバーなどを非表示設定しています。
ヘッダー内にジャバスクリプトを記入する
<SCRIPT LANGUAGE="JavaScript">
function newwindow1() { ←フォームボタンの指定(名前がnewwindow1の場合)
window.open ("****.html", ←ポップアップさせる方のページ
"Newwindow",
"toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=400,height=400")
} ←ツールバーの設定(yes or no)
</SCRIPT>
ここから下は本文中(ボディの間)にフォームを割り込ませる
<FORM METHOD="post">
コメント
<INPUT TYPE="button" VALUE="Open" ONCLICK="newwindow1()">
</FORM> |
また、ポップアップした側には、クローズボタン(文字または画像)を設定すると親切です。
<a href="javascript:window.close()">
<img src="****.gif" width="**" height="**" border="0">
クローズ</a> |
背景画像を隙間無く表示する(IE/Ns)
<body bgcolor="#FFFFFF" topmargin="0" marginheight="0" leftmargin="0" marginwidth="0"> |
スタイルシートによる文字サイズの定義 class="f03"を追加する (設定名は自由です)
.f00 { font-size: 9px; line-height: 11px}
.f01 { font-size: 10px; line-height: 13px}
.f02 { font-size: 11px; line-height: 15px}
.f03 { font-size: 12px; line-height: 17px}
.f04 { font-size: 13px; line-height: 18px}
.f05 { font-size: 14px; line-height: 19px}
.f05b { font-size: 14px; line-height: 22px; font-weight: bold}
.f06 { font-size: 15px; line-height: 20px}
.f07 { font-size: 16px; line-height: 21px}
.f08 { font-size: 17px; line-height: 22px}
.f08b { font-size: 17px; line-height: 24px; font-weight: bold} |
別パターンによるCSS設定と表示の実例
CSS設定と表示例 head内各種フォントサイズと表示色を設定しておく
★ スタイルシートの設定をhead内に設定しておく
<style type="text/css">
<!--
body {
background-color: #000000;
}
body,td,th {
font-family: MS Pゴシック, Osaka;
font-size: 10px;
color: #FFFFFF;
line-height: 15px;
}
a {
font-family: MS Pゴシック, Osaka;
font-size: 10px;
color: #000000;
line-height: 15px;
}
a:link {
text-decoration: none;
color: #CCCCCC;
}
a:visited {
text-decoration: none;
color: #CCCCCC;
}
a:hover {
text-decoration: none;
color: #FFFF00;
}
a:active {
text-decoration: none;
color: #FF0000;
}
.style02 {
font-size: 14px;
color: #000000;
}
.style03 {
font-size: 12px;
color: #000000;
}
.style04 {color: #000000}
.style05 {
font-size: 9px;
color: #000000;
}
.style06 {font-size: 14px}
.style07 {font-size: 12px}
.style08 {font-size: 9px}
.style09 {font-size: 14px; color: #FFFFFF; }
.style10 {
color: #FFFFFF;
font-size: 12px;
}
.style11 {color: #FFFFFF}
.style12 {font-size: 9px; color: #FFFFFF; }
.style13 {font-size: 14px; color: #FFFF99; }
.style14 {font-size: 12px; color: #FFFF99; }
.style15 {
font-size: 10px;
color: #FFFF99;
}
.style16 {
color: #FFFF99;
font-size: 9px;
}
.style17 {
color: #FFFF00;
font-size: 14px;
}
.style18 {color: #CCCCFF}
.style19 {color: #66CC33}
.style20{color: #FF0000}
.style21 {color: #999933}
-->
</style>
★ 文字列をタグで囲む
<span class="style**">文字列</span>
黒特大 <span class="style02">
黒大 <span class="style03">
黒中 <span class="style04">
黒小 <span class="style05">
フレー特大 <span class="style06">
グレー大 <span class="style07">
グレー小 <span class="style08">
白特大 <span class="style09">
白大 <span class="style10">
白中 <span class="style11">
白小 <span class="style12">
黄色特大 <span class="style13">
黄色大 <span class="style14">
黄色中 <span class="style15">
黄色小 <span class="style16">
イエロー特大 <span class="style17">
ブルー中 <span class="style18">
緑中 <span class="style19">
赤中 <span class="style20">
金色中 <span class="style21"> |
|