『 HTMLタグを覚えましょう。 』

 HTMLとは、ブラウザで画面表示させる際、色や文字の大きさ、レイアウトなどを指定したり、リンクさせたりするためのコマンドで文章中に埋め込みます。
  これは一見面倒そうですが、実は視覚障害者にはとても便利な方法です。

画面の色や文字の大きさ、改行位置を文字だけでおおよそ指定できるからです。

 HTMLタグは、本文が完成してから埋め込むようにしたほうがいいでしょう。後で本文の内容を修正するときなどタグが入っているとちょっと手間取ってしまうかもしれません。

(作成とチェック)
 HTML文書がある程度できたら自分のパソコンでそれをチェックすることができます。あなたは音声を使ってホームページを閲覧することができているでしょうか、もしまだできていなかったら先にそれができるようにしておきましょう。 自分で作ったHTMLファイルを確認するときにも同じインターネットブラウザが起動するからです。

 では、前のページで作成した 熊さんのファイルをサンプルにして、HTMLをひとつずつ覚えていきましょう。

index.htmは一番最後に説明します。
最初はKUMA.HTM です。

ファイル名:kuma.htm


 上のようなのがHTMLのタグです。一見複雑そうですが、ある決まったルールにしたがってできています。

  1. タグはすべて半角文字で指定します。(大文字でも小文字でもかまいません)
  2. コマンドは<>で区切ります。
  3. コマンドを終了させるには のように、頭に/をつけて指定します
  4. コマンドの有効範囲は <コマンド>  で挟まれた範囲となります。

では、一つずつ説明します。
●<HTML>
上のサンプルを見ると、最初の行に<HTML>があり、最後の行に</HTML>があります。
このようにHTMLファイルの指定範囲は <HTML> と</HTML> ではさまれた範囲となります。
●<HEAD>
ページのヘッダーになります。
ここでは <TITLE>熊さんの俳句集</TITLE> となっています。
この行がブラウザのタイトルバーに表示されます。
</HEAD> で終了しておきます。

●<BODY>
</BODY> までの間が本文となります。

●<BR> 
 これは改行の指定です。これがないと、もとの本文で改行していてもブラウザで見ると改行されずに表示されてしまいます。

●<p>
この指定は、この行の上に一つ空行を入れる指定です、行が詰まってくると見づらいので文脈が変わるところに入れておくといいでしょう。

 上で指定したタグはHTMLファイルには最低必須のタグです。同じ方法で、tabi.htmやmake.htmなど他のファイルにもタグをつけてみましょう。
とりあえずこれでブラウザで読むことができるようになりました。

しかしこれだけではあまりに寂しいので、背景や文字に色をつけたりすると、さらにホームページらしくなってきます。それらについては後述します。

◆次にindex.htmを作成します。

ファイル名: index.htm

 さて、ちょっと複雑になりました。
基本的な部分は同じですが、本文がちょっと違います。

 と 


 これはパラグラフの指定で段落を意味します、この指定を付けると、1行の上下に空白が入ります。ここはメニューのようなものですから、見る人が区別しやすいように、少し空白を入れると選択しやすいようです。

●<A HREF="リンク名"> リンクの名前</a
はアンカータグと呼ばれ、この行は音声ブラウザでは声が変わるところです、ここでクリックまたはリターンすると、"リンクファイル名"で指定したファイルにリンクしてそちらが表示されるようになります。
ここでの注意は、指定するファイル名は必ず大文字か小文字に統一しておくこと、自分のハードディスク内で見ている限り、どちらでもリンクしてくれますが、実際にサーバーに転送すると、厳密に区別されて、ファイル名が正しくない・といったエラーとなる場合が多いので、あらかじめどちらかに決めておく必要があります。
ここではすべて小文字を指定するようにしました。

 ではこれを、先ほどとおなじようにブラウザで見てみてください。
そしてリンク行でリターンしてみてください。ちゃんと指定したファイルにリンクしたでしょうか。
 でも、kuma.htm にはindex.htmに戻るリンクはまだ指定されていないので、とりあえずはalt+左カーソルキーで前のページに戻ってください。
そこでついでに kuma.htmにも戻るリンクを作っておきましょう。
kuma.htmの </BODY> の前に以下の1行を付け加えてください。

トップページに戻るためのアンカー

と付け加えておくといいでしょう。

この<a>というアンカータグには他のホームページのアドレスも指定できます。 リンク集などではすべてこの指定が行われています。

お友達のページへのリンク

このように指定します。

 また、以下のように自分のメールアドレスなどを指定すると、メーラーが起動して自分宛にメールを書いてもらうこともできます。

メールはこちら・の例

 もうこれだけでホームページそのものですから、そのまま転送してもいいんですが、ちょっとこれだけでは寂しいので、以下を参考に 背景の色や文字の大きさなどを指定すると、さらにめりはりのついた見やすいページとなります。
もちろん音声で聞くだけなら、このままでも十分ですが、画面の色でさえ音声で指定できるという便利なHTMLなのですから、サンプルを参考にして、ぜひやってみてください。

  (色の指定)
背景の色や文字の色、リンク部分の色をつけてみましょう。

色を付けてみよう

これはサンプルですが、背景は黒、文字は白、リンクがゴールド、
リンクを押したとき(アクティブリンク)の色がホットピンク、一度訪問したリンク(ビジテッドリンク)がライム となります。しかしこの色だとコントラストが強すぎて目にはよくないようです。

色の指定は16進数でも指定できます。
以下のように#をつけて指定します。

16進数を使う例

色のサンプルは最後に示しますので参考にしてください。

  (文字の大きさ)
 文字の大きさを変えて、画面にメリハリを付けてみましょう。前の例ではタイトル部分を大きくして、それ以下の文字はそれより1〜2段階小さく表示されるように指定してみましょう。

文字の大きさを指定する

通常の文字はFONT SIZE="3" となっているようなので、タイトルなどは大きめに"5"と指定してみました。だいたいこのぐらいがバランスがいいようです。

  (レイアウト)
文字やタイトルを、画面上のどのあたりに表示させるかという指定で、さらに見やすい画面にすることができます。

レイアウトの例

前に説明した<p のオプション ALIGN(アライン)で"CENTER" "RIGHT" "LEFT" のように、右寄せ、左寄せ、中央そろえを指定できます。
ここではタイトルを中央に指定しました。

 このように上の指定をいろいろ組み合わせて、画面をできるだけ見やすいようにレイアウトしていきます。もちろんこれらは音声で読んでも変化はありませんが、見やすい画面にしておくと印象がよくなります。
以下は、これまでのタグを埋め込んだサンプルのindex.htmです。

ファイル名: index.htm

 以上はHTMLタグのもっとも基本的な形です。
でもこれだけ覚えておけば、だいたいのページはできてしまいます。

色を示す記号は に示しておきます、アルファベット順になっています。

次へ

もどる

トップページ