基本的にNetscapeで見ることを前提に書いていますので、他のブラウザでは
うまく表示されなかったり、働かない機能があるかも知れませんが、どうかご勘弁を。
さあ、これであなたもHTMLの達人だあっ！
Last updated at Mar 8 , 1996 by Daigo Yamasaki
<html>
<title>my Home Page!</title>
<body>
（ここに本文を記述）
</body>
</html>
これらの記述をしなくてもページは作ることはできるんですが、Netscapeなどのブラウザでは、<title>、</title>で囲まれたところ（上の例では"My Home Page!）をページのタイトルとしてウインドウのタイトルバーに表示するので、きちんと書いていたほうがいいでしょう。ほら、このページも"初心者のためのHTML講座"ってタイトルがタイトルバーに表示されてますよね。
(1) 私は<br>インターネット<br>初心者です。
私は
インターネット
初心者です。
(2) 私は<p>インターネット<p>初心者です。
私はあ、そうそう、区切り線は <hr> を使います。インターネット
初心者です。
<hr>
<hr size="5" width="50%" >
<hr size="15" width="30%" align="left" >
それぞれ、こんな感じです。
<h1>これは"h1"です。</h1>
<h2>これは"h2"です。</h2>
<h3>これは"h3"です。</h3>
<h4>これは"h4"です。</h4>
<h5>これは"h5"です。</h5>
Netscapeでは他の方法もあります。数字は1から7が使えます。
<font size=2>FONT SIZEは2です。</font>
<font size=5>FONT SIZEは5です。</font>
FONT SIZEは2です。
FONT SIZEは5です。
<b>これがボールド</b>
<i>これがイタリック</i>
テキストを点滅させる
こともできますよ。よく、注意をひくために使われます。例えば、
このページはにアップデートしました。
てな感じです。
<blink >と</blink >でテキストを囲めばいいんです。
<p align=left>左寄せ。
<p align=center>中央ですね。
この命令も自動的に一行おきの改行が入るようです。左寄せ。
中央ですね。
<ul>
<li>WINDOWS
<ul>
<li>PC9801
<li>IBM互換
</ul>
<li>Mac OS
<ul>
<li>Macintosh
<li>Pioneer
</ul>
</ul>
上の例はこんな感じ。
<ol>
<li>WINDOWS
<ol>
<li>PC9801
<li>IBM互換
</ol>
<li>Mac OS
<ol>
<li>Macintosh
<li>Pioneer
</ol>
</ol>
この記述も自動的に改行してくれてますね。
画像をそのまま貼りつける。
なにも考えずにただ画像を貼る場合。
画像ファイルが仮に"coara.gif"だとして、
<img src="coara.gif">
と記述すると、次のようになります。
真ん中に表示したい場合は、<center>,</center>"で囲んでみてください。
<center><img src="coara.gif"></center>
ほら、どうです？
ちょっとCOARAの絵が大きすぎますね。小さい絵を準備するのも手ですが、
次のようにすると、絵を縮小表示できるんです。
<img src="coara.gif" width=40 height45>ってやってみて下さい。
小さくなったでしょ？ "width"と"height"で絵の大きさを指定する訳です。
次は画像の横に文字を書いてみましょう。
<img src="coara.gif" width=40 height=45>これは、COARAの絵です。
てな感じで記述すると、
これは、COARAの絵です。
てな感じで、デフォルトでは絵の下にテキストが表示されます。
絵の上の方や真ん中にも表示できます。
<img align=top src="coara.gif" width=40 height=45>と記述
<img align=middle src="coara.gif" width=40 height=45>と記述
普通は絵の横に一行しかテキストが書けませんが、
<img align=left src="coara.gif" width=40 height=45>というふうに記述すると、
どうです？
一行だけでなく
複数行書けましたね。
画像の貼りつけは覚えましたか？次は少しワザを使って、画像に額縁をつけてみましょう
<table border>
<td>
<img src="coara.gif">
</td>
</table>
と記述してみてください。
|
どうです？ 画像が引き立つ感じで、ときどき使うとよさそうですね。
<table border="10">のように数字を指定すると、額縁の太さを変えることができますよ。試してみてください。
これぞ、HTMLのハイパーテキストたるゆえんですよね。
これがないHTMLは物足りない！！
この文章のホットテキスト（色の変わっているところ）をクリックすると、僕のホームページに飛んで行けます。
飛んで行ってもいいけど、ブラウザの"Back"ボタンでこのページにちゃんと
戻ってきてくださいね。
以下のように記述したんです。
この文章のホットテキスト（色の.....）をクリックすると、<a href="my.html">僕のホームページ</a>に飛んで行けます。"a href="のあとに画像ファイル名を書けば、画像をリンクさせることもできます。
例えば、
<a href="coara.gif">COARAの絵</a>とすると、次のようになります。
ここをクリックするとCOARAの絵が表示されます。
てな具合ですね。
ホットテキストの手法はテキストだけでなく、画像にも適用することができます。
例えば、
<a href="my.html"><img src="coara2.gif">僕のホームページへ</a>とすれば、次のようになって、貼り付けたイメージがホットイメージ(?)になります。
え、画像のまわりの境界線が気になるって？
でもそれは、この画像がリンクしてますよってことを知らせるために必要なんですよ。
でもやっぱり気になるって？ しょうがないなあ、境界線をなくす方法を教えましょう。
<a href="my.html"><img src="coara2.gif" border="0">僕のホームページへ</a>とやってみてください。
あら不思議、境界線が消えちゃいました。でもうまく使わないと、だれもこれがホットイメージだと思わずに、ただの画像かと思ってしまいますよ。
例えば下にある「定義テキストの書き方」という項目に飛んでいきたいとします。ホットテキストをクリックしてみてください。
どうです、飛んでいけたでしょ？
次のように記述します。
<a href="#difinition">定義テキストの書き方</a>それに対応させて、次のテキストを書きます。
<a name="difinition">定義テキストの書き方</a>"a href="#"と"a name="がセットになっている訳です。
こうなっているんです。
<dl>目次へ戻る
<dt>WWW
<dd>ワールドワイドウェブ。インターネット上のリソースにアクセス
するためのハイパーテキスト型のシステム。画像や音声なども扱う
ことができ、WWWサーバにアクセスするためのさまざまな
クライアントプログラムがありMOSAICはその代表的なものである。
<dt>モデム
<dd>コンピュータを通信回線（電話回線など）と接続するための装置。
通常のモデムは1200ビット／秒から14.4キロビット／秒の範囲で
データを伝送する。
</dl>
僕のホームページへ
例えばこの文章は一行ごとに段落がついていますが、
こういったことは "pre" を使わなければ表示できません。
通常、HTMLは空白を無視して一番左から表示するのです。
目次へ戻る
段落が下がって表示されているでしょ？目次へ戻る
| aaa | bbb | ccc |
| ddd | eee | fff |
以下のように記述しています。
<table border width="100%">
<tr>
<td align=center>aaa</td>
<td align=center>bbb</td>
<td align=center>ccc</td>
</tr>
<tr>
<td align=center>ddd</td>
<td align=center>eee</td>
<td align=center>fff</td>
</tr>
</table>
データを<td>で、行を<tr>で、そして全体を<table>で囲んでいる訳です。
tableタグの"border"オプションで囲み線を設定、"width"は表の横の幅を指定しています。100%を指定すると、ブラウザの幅一杯に表が表示されます。
背景をかえたページを作ってみたので、行ってみて下さい。そう、ホットテキストをクリックしてね。解説はそのページに書いています。
<body>タグを使います。
例えば"background.gif"という画像ファイルをページの背景に使いたいとき、次のように記述します。
<body background="background.gif">
これをHTMLの頭に書くことで、"background.gif"という画像がページの背景にはめこまれます。あまり大きいサイズの画像を指定すると読み込みに時間がかかるので、画像のサイズには気を付けましょう。
また、画像を貼り込むと画像の色によって文字が見えにくくなったりするので、文字の色にも気を使ってください。文字の色については、ページの背景色をかえるにはで解説しています。
そうそう、背景に使える画像を提供してくれるURLを見つけたので、参考までに紹介します。
<address>HTMLの作り方HTML / daigo@fat.coara.or.jp</address>
というふうに記述すると、
HTMLの作り方HTML / daigo@fat.coara.or.jp
まあ、ただイタリックになるだけみたいですが。。。
さらに、クリックするとメールサーバが立ち上がって、
メールを催促するような仕掛けもあります。Netscapeしかサポートして
いないようですが...
<a href="mailto:daigo@fat.coara.or.jp">メール待ってます！</a>
実際にクリックしてみてください。メールサーバは起動しましたか？
起動しない場合は、ブラウザの設定をいじってみましょう。
ぜひぜひ感想をお寄せください。<p>FORMというコマンド（？）を使って、宛先（Action）にmailtoを使うのがミソです。もちろんmailetoに続くアドレスにはあなたのメールアドレスを指定してくださいね。<FORM METHOD="POST" ACTION="mailto:daigo@fat.coara.or.jp"><p>
あなたのお名前 ： <input name="name" type="text"><p>
あなたのE-Mailアドレス ： <input name="E-mail" type="text"><p>
コメント<textarea name="comment" cols=40 rows=2></textarea><p>
<input type=submit value="コメントを送る"> <input type=reset value="やめる"><p></form>
あとは<input name="name" type="text">でnameという名前のテキストボックスを、また<input name="E-mail" type="text">でE-mailという名前のテキストボックスを、そして<textarea name="comment" cols=40 rows=2></textarea>で40行２列のテキストエリアを定義しています。
<input type=submit value="コメントを送る">
<input type=reset value="やめる"><p>
の部分はボタンです。typeでsubmitを指定すると書いたコメントを送信します。resetなら取消ですね。
さて、これだけではまだ不十分なんです。なぜならこの方法で自分のメールアドレスに送られてきたメールは漢字やひらがなが次のように記号に変換されて訳がわかりません。
%8Du%8D%C0%82%C5%95%D7%8B%AD%82%B3%82%B9%82%C4%82
さてどうするか。
http://mtlab.ecn.fpu.ac.jp/provHome.htmlというURLに、この記号化されたメールを日本語に変換してくれるHyperCardスタックがあります。試してみてください。
僕自身HTML初心者であり、ひょっとしたら間違ったことを書いているかも
知れませんが、どうか大目に見てやってください(^^:
おまけ
HTMLの記述を支援するハイパーカードスタックを作りました。
主な特徴は、