｢HTML｣に挑戦！
HTML（Hyper Text Markup Language)はインターネット上でホームページや動くメールなど を表示させるための言葉です。 もともと WWW は、世界中の研究者が最新の研究成果を共有するため、1989 年に開発された 仕組みです。ホームページを見るためのソフト（ブラウザ）、また、そのソフトを動かすた めの基本ソフト OS（Operating System）、プロバイダが使っているサーバーコンピュータな ど、違った環境で開いても同様に表示されるように工夫された共通語が HTML です。 アルファベットと記号を組み合わせて書くものなので、テキストエディタ（ メモ 帳、Simple Text など）を使って書きましょう。 どのように表示されるかはブラウザソフト（ Internet Explorer など）で確かめま しょう。 HTML 文書をつくるためのソフトも発売されています。専用ソフトを使えば、ワープロソフ ト（Word など）と同じような感覚で HTML 文書がつくれます。
また、 Word や Excel で「Web ページ」として保存すると HTML 文書ができあがり ます。 でも、基本になる HTML を理解していると、もっとシンプルに、自由に、オリジナルのペー ジをつくることができます。 はじめは難しく感じますが、すこしずつ、根気よく、自分のページをつくってみましょう。
目次
準備∼テキストエディタに直接入力∼··· 2 タグ∼命令の開始と終了を宣言∼··· 4 タイトル∼ページの題名∼··· 5 背景∼ページ全体につける∼··· 6 色∼2 桁の 16 進数であらわす∼ ··· 8 文字∼文字列・文章を表示させる∼··· 11 画像∼写真やイラストを表示させる∼··· 14 レイアウト∼配置を変える∼··· 17 リンク∼他のページやメールをつなぐ∼··· 19 応用∼もっと楽しむために∼··· 20準備
∼テキストエディタに直接入力∼ ウィンドウズパソコンには標準で 「メモ帳」がはいっています。 HTML を書くには「メモ帳」を使いましょう。 スタート→（すべての）プログラム→アクセサリ→メモ帳 HTML はアルファベットと記号の組み合わせで書かれています。 必ず直接入力で書きましょう。全角アルファベットでは動いてくれません。 例外もありますが、すべて小文字で構いません。 表示させる文字列は日本語の場合もありますから、「半角/全角キー」を使って切り替えな がら入力しましょう。 ⇔ メモ帳で HTML を書いたら、名前をつけて保存します。 HTML 文書やそこに表示させる画像などは、「新しいフォルダ」をつくってすべてその中に保 存するようにしましょう。フォルダの名前は、「homepage」、「HP」などとし、「デスクトッ プ」や「マイドキュメント」などわかりやすいところに置きましょう。 ×ｈｔｍｌ ○html ○HTMLファイル→名前をつけて保存 開いたダイヤログボックスで保存先に フォルダを指定します。 ファイルの種類を「すべてのファイル」にします。 ファイルの名前を直接入力して、名前の後に「.htm」または「.html」という拡張子をつけ ましょう。 フォルダの中に「e」のマークの HTML ファイル ができます。 HTML ファイルはダブルクリックすると 「エクスプローラー」が起動します。表示の 仕方を確認しましょう。 編集したいときには、アイコンの上で右クリックして、開いたメニューの中の「プログラ ムから開く」または「アプリケーションの選択」から、 「NotePad（メモ帳）」を選 びます。 HTML 文書は、「メモ帳」と「Internet Explorer」（ブラウザソフト）の両方で同時に開いて 編集します。 メモ帳で HTML の一部を書き換えたら、ファイル→上書き保存 して、 次にエクスプローラーで、表示→最新の情報に更新 をして変更した部分の表示を確かめ ます。 １つのファイルを同時に２つのアプリケーションで開いています。 ⇔
タグ
∼命令の開始と終了を宣言∼ HTML は「<」と「>」で囲まれた「タグ」を使って命令を書きます。 いろいろな種類のタグがあって、また、新しいタグもつくられています。 そこから命令をはじめることを宣言する「開始タグ」とそこで命令を終了する「終了タグ」 があります。 開始タグを書いたら必ずそれと同じ命令の「/」ではじまる終了タグを組み合わせて書きま す。 ただし、改行<br>や水平線<hr>など終了タグが必要ないものもあります。 大文字でも小文字でも構いませんが、開始タグを大文字にしたら、終了タグも大文字にし ます。 <html> ···HTML 文書であることを宣言するタグ <head> ···ファイルの情報に関することを書いてある部分（ヘッダー）であること を宣言するタグ <body> ···実際に表示される文字や画像などが書いてある部分であることを宣言す るタグ もちろんそれぞれに終了タグがあって、そこで終了することを宣言します。 メモ帳に直接入力でタグを書いて、「test.html」と名前をつけて保存してみましょう。 同時に、その「test.html」をエクスプローラーで開いてみましょう。まだ何も表示されま せんが･･･。 ⇒タイトル
∼ページの題名∼ HTML の「題名」をブラウザのタイトル部分に表示させましょう。 <head> </head>の間に書きます。 ⇒ お気に入りに追加される際には、この名前が登録されます。 検索エンジンで紹介されるのもこの名前です。 ページの内容にふさわしい、一度でわかる名前をつけましょう。背景
∼ページ全体につける∼ 背景色や背景画像をページにつけましょう。 表示されるページ全体に反映するので、ふさわしいものを選びましょう。 また、文章が見にくくならないよう、邪魔にならないものを選びましょう。 背景色 bgcolor <body>開始タグに半角空白をいれ、続けて指定します。 色は 2 桁の 16 進数で R（赤）G（緑）B（青）をあらわします。 <body bgcolor="CCFFFF"> </body>ページ全体が指定した色で塗りつぶされます。
"CCFFFF"
⇒
あまり濃い色を選ぶと目が疲れます。文字の色との関係を含め、ブラウザで確かめながら 選びましょう。
背景画像 background
<body>開始タグに半角空白をいれ、続けて指定します。
背景にする画像は、あらかじめ名前をつけて保存しておきましょう。 <body background="haikei.gif"> </body>
画像が繰り返してページ全体に表示されます。 " haikei.gif" ⇒ 背景用の画像は色合いの薄い、文字の邪魔にならないものを選びましょう。 画像を指定するときには、画像の保存してあるフォルダと、HTML の保存場所の関係をきち んと指定しましょう。
色
∼2 桁の 16 進数であらわす∼ 光の 3 原色は赤（R）、緑（G）、青（B）です。 「#」のあとに赤、緑、青の順にそれぞれの強さを 2 桁の 16 進数であらわします。 16 進数は、0∼9 までの数字と a∼f の 6 つのアルファベットを使います。 0、1、2、3、4、5、6、7、8、9、a、b、c、d、e、f RGB の 3 色のそれぞれに 2 桁の 16 種類、全部で、 （16×16）×（16×16）×（16×16）＝16,777,216 例えば、「#000000」だと「黒」、「#FF0000」だと「赤」、「#FFFFFF」だと「白」、･･･ 基本 16 色は、どんな初期のブラウザでも表示できます。 RGB の値で指定するほかに色名を指定することもできます。#000000 Black #FF0000 Red #800000 Maroon
#808080 Gray #FFFF00 Yellow #808000 Olive
#C0C0C0 Silver #00FF00 Lime #008000 Green
#FFFFFF White #00FFFF Aqua #008080 Teal
#0000FF Blue #000080 Navy #FF00FF Fuchsia #800080 Purple 216 色を「Web セーフカラー」といいます。256 色のディスプレイでも表示することができ ます。 RGB それぞれの強さを 6 段階（00、33、66、99、CC、FF）に固定して、組み合わせます。 6×6×6＝216 文字の色や背景色には基本 16 色と Web セーフカラー216 色の中の色を使うといいでしょう。
#000000 #003300 #006600 #009900 #00CC00 #00FF00 #000033 #003333 #006633 #009933 #00CC33 #00FF33 #000066 #003366 #006666 #009966 #00CC66 #00FF66 #000099 #003399 #006699 #009999 #00CC99 #00FF99 #0000CC #0033CC #0066CC #0099CC #00CCCC #00FFCC #0000FF #0033FF #0066FF #0099FF #00CCFF #00FFFF #330000 #333300 #336600 #339900 #33CC00 #33FF00 #330033 #333333 #336633 #339933 #33CC33 #33FF33 #330066 #333366 #336666 #339966 #33CC66 #33FF66 #330099 #333399 #336699 #339999 #33CC99 #33FF99 #3300CC #3333CC #3366CC #3399CC #33CCCC #33FFCC #3300FF #3333FF #3366FF #3399FF #33CCFF #33FFFF #660000 #663300 #666600 #669900 #66CC00 #66FF00 #660033 #663333 #666633 #669933 #66CC33 #66FF33 #660066 #663366 #666666 #669966 #66CC66 #66FF66 #660099 #663399 #666699 #669999 #66CC99 #66FF99 #6600CC #6633CC #6666CC #6699CC #66CCCC #66FFCC #6600FF #6633FF #6666FF #6699FF #66CCFF #66FFFF
#990000 #993300 #996600 #999900 #99CC00 #99FF00 #990033 #993333 #996633 #999933 #99CC33 #99FF33 #990066 #993366 #996666 #999966 #99CC66 #99FF66 #990099 #993399 #996699 #999999 #99CC99 #99FF99 #9900CC #9933CC #9966CC #9999CC #99CCCC #99FFCC #9900FF #9933FF #9966FF #9999FF #99CCFF #99FFFF #CC0000 #CC3300 #CC6600 #CC9900 #CCCC00 #CCFF00 #CC0033 #CC3333 #CC6633 #CC9933 #CCCC33 #CCFF33 #CC0066 #CC3366 #CC6666 #CC9966 #CCCC66 #CCFF66 #CC0099 #CC3399 #CC6699 #CC9999 #CCCC99 #CCFF99 #CC00CC #CC33CC #CC66CC #CC99CC #CCCCCC #CCFFCC #CC00FF #CC33FF #CC66FF #CC99FF #CCCCFF #CCFFFF #FF0000 #FF3300 #FF6600 #FF9900 #FFCC00 #FFFF00 #FF0033 #FF3333 #FF6633 #FF9933 #FFCC33 #FFFF33 #FF0066 #FF3366 #FF6666 #FF9966 #FFCC66 #FFFF66 #FF0099 #FF3399 #FF6699 #FF9999 #FFCC99 #FFFF99 #FF00CC #FF33CC #FF66CC #FF99CC #FFCCCC #FFFFCC #FF00FF #FF33FF #FF66FF #FF99FF #FFCCFF #FFFFFF
文字
∼文字列・文章を表示させる∼ 本文になる文字列は<body> </body>の間に書きます。 <p> </p>の間がひとつの段落（paragraph）になります。 段落の途中で改行(break)するときには<br>を使います。 テキストでする改行は途中に空白がはいるだけでブラウザのには反映されません。 <br>に終了タグはありません。 ↓ 標準（何も指定しないということ）では、12 ポイントの黒い文字です。文字の大きさ <font size="○">文字列</font> 文字の大きさは１∼７の数値で表します。 1＝8 ポイント、2＝10 ポイント、3＝12 ポイント、4＝14 ポイント、5＝18 ポイント、6＝24 ポイント、7＝36 ポイント ディスプレイ表示を「拡大」して見ている人もいるので、この数値の指定と実際の大きさ は違っている場合もあります。 標準をもとに指定する方法もあります。 1 レベル大きな文字にする <font size="+1">文字列</font> 2 レベル小さな文字にする <font size="-2">文字列</font>
文字の色 <font color="○">文字列</font> 文字の色は RGB 値を指定します。 太字 <b>文字列</b> 太字(ｂold)になります。 斜体 <i>文字列</i> 斜体(italic)になります。 青い太字で斜体のレベル５の文字列は、
<i><b><font color="#0000FF" size="5">はじめての HTML です。</font></b></i>
書体を指定することもできますが、相手のパソコンに書体が入っていなければすべて標準 （P ゴシック体）になってしまいます。特殊な書体を使いたいときは、画像にして表示させ る方法をとりましょう。
↓
画像
∼写真やイラストを表示させる∼ 画像を表示させるには、表示させる画像をジェイペグ(.jpg)形式やジフ(.gif)形式で準備 しておかなければなりません。 無駄に大きい画像は、ダウンロードに時間がかかるので使ってはいけません。見かけ上の サイズを小さくするのではなく、あらかじめファイル自体を小さくしておきましょう。 800 ピクセル×600 ピクセル・・・ブラウザの画面いっぱいに広がります。次頁参照 400 ピクセル×300 ピクセル・・・サービスサイズの現像写真に近い大きさです。 200 ピクセル×150 ピクセル 100 ピクセル×75 ピクセル・・・サムネイル 表示（縮小表示）にむいています。<img src="○○">
ファイル名は、HTML ファイルと画像ファイルのある場所の位置関係をきちんと指定します。 HTML ファイルと画像ファイルが同じフォルダにある場合、
<img src="Water lilies.jpg">
HTML ファイルと同じフォルダに画像の入っているフォルダ「image」がある場合 <img src="image/Water lilies.jpg">
画像のサイズをあらかじめ指定しておくと表示が速くなります。 幅を width、高さを height で単位はピクセルを使います。
画像の説明文をつけておくとアップに失敗したときや画像を表示させない設定をしてある ブラウザに親切です。日本語で書いて構いません。
<img src="Water lilies.jpg" alt="蓮池の写真">
レイアウト
∼配置を変える∼ 文字や画像を好きなところにレイアウトしましょう。 中央揃え（center） <center>文字列</center> 文字列を中央に配置します。 <p align="center">段落</p> 段落を中央に配置します。 <div align="center">文字列</div> 複数の文字列や段落をまとめて中央に配置します。 <img src="Water lilies.jpg" align="center"> 画像を中央に配置します。
右揃え（right）、左揃え(left)も同様にします。
画像の文章に対する表示位置を指定しましょう。 <img src="gazo.jpg" align="top">文字列
画像の上端が文字の上端にあわせて表示されます。 <img src="gazo.jpg" align="middle">文字列 画像の中央が文字の下端にあわせて表示されます。 <img src="gazo.jpg" align="bottom">文字列 画像の下端が文字の下端にあわせて表示されます。
リンク
∼他のページやメールをつなぐ∼ <a href="○○.HTML">文字列</a> 文字列をクリックすると指定されたリンク先が開きます。 リンクが張ってある文字列は標準では下線つき青色で表示されます。 文字列の代わりに画像にリンクを貼ることもできます。 縮小サイズの画像を見本に並べておいて、大きな画像にリンクを貼るのは読者に親切です。<a href="mailto:アドレス"> 文字列</a>
文字列をクリックするとメールソフトが起動して、指定したアドレス宛にメールを出せる ようになります。
文字列には、メールアドレスを書いたり、受取者の名前を書いたりしておきましょう。
