初心者のためのHTML講座

HTML初心者のための、HTMLの作り方を解説するHTMLを作ってみました。
初歩的なことしか説明していませんが、これだけ理解すればなんとかホームページを
作れるはずです。僕自身HTML初心者なものでまだまだ勉強中ですが、新しい方法を
みつけたら少しずつアップデートしていきます。

基本的にNetscapeで見ることを前提に書いていますので、他のブラウザでは
うまく表示されなかったり、働かない機能があるかも知れませんが、どうかご勘弁を。

さあ、これであなたもHTMLの達人だあっ!

Last updated at Mar 8 , 1996  by Daigo Yamasaki


HTMLの作成を支援するハイパーカードスタックを作りました。
今回のバージョン(Version 1.1)ではTableタグに対応しました。
詳しくは”おまけ”の項を見てください。


目次


HTMLの基本形式

HTMLを書くときの基本形の説明です。

<html>

 <title>my Home Page!</title>

  <body>

   (ここに本文を記述)

  </body>

</html>

これらの記述をしなくてもページは作ることはできるんですが、Netscapeなどのブラウザでは、<title>、</title>で囲まれたところ(上の例では"My Home Page!)をページのタイトルとしてウインドウのタイトルバーに表示するので、きちんと書いていたほうがいいでしょう。ほら、このページも"初心者のためのHTML講座"ってタイトルがタイトルバーに表示されてますよね。

目次へ戻る


改行の方法

ただの改行には <br> を使います。
改行して一行空けたいときは <p> を使います。
次のように記述すると、以下のようになります。

(1) 私は<br>インターネット<br>初心者です。

私は
インターネット
初心者です。

(2) 私は<p>インターネット<p>初心者です。

私は

インターネット

初心者です。

あ、そうそう、区切り線は <hr> を使います。

<hr>


区切り線の太さや長さを指定する

こともできます。対応してるのはNetscapeだけかも知れません。

<hr size="5" width="50%" >
<hr size="15" width="30%" align="left" >

それぞれ、こんな感じです。



ページのちょっとしたアクセントにも使えそうですね。

目次へ戻る



文字の大きさ

文字の大きさは、"h1"から"h5"で設定します。
次のように書くと以下のようになります。

<h1>これは"h1"です。</h1>
<h2>これは"h2"です。</h2>
<h3>これは"h3"です。</h3>
<h4>これは"h4"です。</h4>
<h5>これは"h5"です。</h5>

これは"h1"です。

これは"h2"です。

これは"h3"です。

これは"h4"です。

これは"h5"です。
"h1"を書いたら、"/h1"で閉じることを忘れないように。
またこれらの記述では自動的に改行が入って文字が一行おきに書かれること
に注意して下さい。 文字も太字になってますね。

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>

テキストを点滅させる

こともできますよ。よく、注意をひくために使われます。例えば、

このページは7月9日にアップデートしました。

てな感じです。

<blink >と</blink >でテキストを囲めばいいんです。

目次へ戻る


文字の位置

文字の横方向の位置を指定するには、"p align"を使います。
こんな感じです。

<p align=left>左寄せ。
<p align=center>中央ですね。

左寄せ。

中央ですね。

この命令も自動的に一行おきの改行が入るようです。

目次へ戻る


List表示

マークでリスト表示したいとき。

<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>

  1. WINDOWS
    1. PC9801
    2. IBM互換
  2. Mac OS
    1. Macintosh
    2. Pioneer

この記述も自動的に改行してくれてますね。

目次へ戻る


GIF画像を貼りつける。

さあ、お待ちかねの画像貼りつけですよ。画像はGIF形式のものを用意しましょう。

画像をそのまま貼りつける。

なにも考えずにただ画像を貼る場合。
画像ファイルが仮に"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のハイパーテキストたるゆえんですよね。
これがない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="がセットになっている訳です。

目次へ戻る


定義テキストの書き方

よく、次のように書いている文章を見かけますよね。

WWW
ワールドワイドウェブ。インターネット上のリソースにアクセスするための ハイパーテキスト型のシステム。画像や音声なども扱うことができ、 WWWサーバにアクセスするためのさまざまなクライアントプログラムがあり MOSAICはその代表的なものである。
モデム
コンピュータを通信回線(電話回線など)と接続するための装置。通常の モデムは1200ビット/秒から14.4キロビット/秒の範囲でデータを伝送する。
(以上、「よくわかるインターネット」(ハイパーネットワーク研究会著)から
文章を拝借しました。藤野さん、ごめんなさい m(__)m )

こうなっているんです。

<dl>
<dt>WWW
<dd>ワールドワイドウェブ。インターネット上のリソースにアクセス
するためのハイパーテキスト型のシステム。画像や音声なども扱う
ことができ、WWWサーバにアクセスするためのさまざまな
クライアントプログラムがありMOSAICはその代表的なものである。
<dt>モデム
<dd>コンピュータを通信回線(電話回線など)と接続するための装置。
通常のモデムは1200ビット/秒から14.4キロビット/秒の範囲で
データを伝送する。
</dl>
目次へ戻る

書いた文章をそのまま表示

文章を <pre> と </pre>で囲むと、書いた文章のイメージそのままの文章を
表示できます。

      例えばこの文章は一行ごとに段落がついていますが、
              こういったことは "pre" を使わなければ表示できません。
                     通常、HTMLは空白を無視して一番左から表示するのです。
目次へ戻る

段落表示をするには

文章を <blockquote> と </blockquote>で囲むと、次のように見えます。

段落が下がって表示されているでしょ?
目次へ戻る

Table(表組み)

表組みを活用したページを作ってみたいと思うことがよくありますよね。
例えば、次のような表を作りたいとき、

aaabbbccc
dddeeefff

以下のように記述しています。

<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を見つけたので、参考までに紹介します。

お気に入りの背景画像を仕入れて、個性的なページを作ってください。

目次へ戻る


電子メールアドレスの記述

htmlの作者などをドキュメントの最後に記述するのにこんな方法があります。

<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>

メール待ってます!

実際にクリックしてみてください。メールサーバは起動しましたか?
起動しない場合は、ブラウザの設定をいじってみましょう。

目次へ戻る


コメントを送ってもらうには

よく次のようなコメントを催促するダイアログボックスをホームページにのっけている人がいますよね。僕も最近始めました。"mailto"だとメールを送るのに敷居が高くても、このような方法をとると意外と送りやすいもんです。

ぜひぜひ感想をお寄せください。

あなたのお名前 : 

あなたのE-Mailアドレス : 

コメント

上の例は次のように記述しています。

ぜひぜひ感想をお寄せください。<p>

<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>

FORMというコマンド(?)を使って、宛先(Action)にmailtoを使うのがミソです。もちろんmailetoに続くアドレスにはあなたのメールアドレスを指定してくださいね。

あとは<input name="name" type="text">でnameという名前のテキストボックスを、また<input name="E-mail" type="text">でE-mailという名前のテキストボックスを、そして<textarea name="comment" cols=40 rows=2></textarea>で40行2列のテキストエリアを定義しています。

<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がお役に立てれば幸いです。

僕自身HTML初心者であり、ひょっとしたら間違ったことを書いているかも
知れませんが、どうか大目に見てやってください(^^:

おまけ

HTMLの記述を支援するハイパーカードスタックを作りました。
主な特徴は、

EditHTMLはメールウエアです。お使いになったご感想をメールでお寄せください。

EditHTML 1.1をGetする (26kbyte)


ご意見、ご感想をぜひお寄せください。
HTMLの作り方HTML / 山崎 大吾 / daigo@fat.coara.or.jp

目次へ戻る