HTMLの概要
ホームページ製作はHTMLで
ウェブ上で公開されているホームページのほとんどは、『HTML』（ハイパー・テキスト・マークアップ・ランゲージ）と呼ばれる言語で記述されています。HTMLは文書の構造や見栄えを決定するための言語で、テキストはもちろん、画像・音声・動画を表示させることができます。特徴的なのは、ハイパーリンクという機能です。ドキュメントの中に埋め込まれたハイパーリンクをクリックすると、関連付けられた他の文書や画像などが表示され、次々に必要な情報を取得していくことができます。
HTMLは仕様がシンプルなため覚えるのが容易で、テキストエディタだけで製作することができます。
テキストエディタはテキストを編集するためのソフトウエアで、ウインドウズではメモ帳、マッキントッシュではSimpleTextといったソフトが標準で付属されています。HTMLドキュメントを製作し終えた後の確認は、Internet ExplorerやFireFoxなどのウェブブラウザを使って行うことができます。現在では、HTMLの知識がなくても編集できるソフトウエアが数多く出回っており、誰でも簡単にHTMLドキュメントを作ることができます。
『HTMLの歴史』 事の起こりは1990年、スイスのジュネーブにある 『CERN』という組織が、インターネット上でハイパーテキストを利用できるように、『HTTP』プロトコルを作ったことに始まります。HTTPはハイパーテキストを利用するための、全世界共通の約束事です。
そしてこの新しいプロトコルに対応したマークアップ言語として『SGML』という言語規約が策定されました。このSGMLに従って作成された文章は、コンピュータの機種が異なっても情報の共有が可能になります。
このSGMLをベースにして、SGMLよりもずっと簡単にハイパーテキストベースのファイルを作成できる言語としてHTMLが開発されました。
用語
- HTML
- ハイパー・テキスト・マークアップ・ランゲージ（-HyperText Markup Language）の略。
ウェブ用のドキュメントを記述するためのマークアップ言語。文字の飾りやレイアウト、さらに画像や音声などを埋め込むこともできる。 - CERN
- Centre Europeen pour la Recherche Nucleaire: 欧州素粒子物理学研究所
- HTTP
- HyperText Transfer Protocol: サーバとクライアントとの間でデータをやりとりるための伝送機構
- SGML(Standard Generalized Markup Language.)
- スタイルシートを記述するための最良のプログラミング言語です。
- WWW (World Wide Web)
- WWWは、最近最も関心をもたれているインターネットのサービスです。これは、テキストはもちろん、静止画像・音声・動画を同時に取り扱えるサービスです。関心のある文字や絵をクリックすることにより、様々なネットワーク上のWEBサーバから、目的の情報を持ってくることが出来ます。
スピードHTML体験
HTMLの主な機能は文章を表示させたり、レイアウトすることにありますが、それ以外にも、テキストボックスやセレクトメニューといった入力フォームなどを簡単に作ることができます。HTMLは、ユーザが操作するブラウザ表示画面のインタフェースを決め、入力を受け付ける役割までを担っているということですね。
それでは、簡単なHTMLファイルを作って、ブラウザに表示させるまでの過程を体験してみましょう。
いちばん簡単なHTMLファイルは驚くほど簡単です。
HTMドキュメント その1
<HTML> <BODY> HTMLの世界へようこそ！ </BODY> </HTML>
上記のように、HTMLなどのプログラム言語で記述したデータをソースコード(source code)と呼びます。通常はそのソースコードが記述されたファイルのことをソースファイル呼びますが、HTMLの場合は単純にHTMLファイルでもよいでしょう。
それでは、上記の「HTMドキュメントその１」を、テキストエディタで編集し、ブラウザに表示させてみましょう。手順は下記のとおりです。
手順：ホームページをブラウザに表示させるまでの作業
- 任意のフォルダに、「index.html」という名前のテキストファイルを作成します。
- ファイルをテキストエディタで開き、「HTMドキュメント その１」の内容を記述します。
- ファイルを保存して閉じます。
コンピュータで扱うファイルには、テキストファイルや画像ファイル、ムービーファイルなど多数の種類がありますが、それらは拡張子によって識別できるようになっています。ファイル名のうち、ピリオド（.）で区切られた一番右側の部分が拡張子で、.txt
ならテキストファイル、.exe なら実行ファイル、.pngなら画像ファイルになります。
HTML形式のファイルの拡張子は「.html」が一般的です。通常、この拡張子のファイルはブラウザに関連付けられているので、ダブルクリックすればブラウザが起動し、翻訳された文書が表示されるはずです。それでは、上記の手順で製作したファイルをダブルクリックするか、ブラウザにドラッグしてみましょう。結果は、次のように表示されます。
HTMLの世界へようこそ！
HTMLの基礎知識
タグの概要
HTMLでは文書を構成するパーツを要素と呼び、要素を組み合わせて1つのページを完成させます。その要素は、タグと呼ばれる目印によって明示的にされます。タグは、もともと付けフダとか付箋という意味で、ブラウザ中でそのテキストがどのように表示されるかを定義する、マークの役割をするものです。
開始タグと終了タグ
タグは三角カッコ(< >)でくくられていて、<html>...</html>のように2個でワンセットになっています。これをここでは便宜上、前に置くタグを開始タグ、後ろに置くタグを終了タグと呼ぶことにします。タグはこの開始タグと終了タグの間にテキストや画像などの要素を挟んで、1つの要素を表現します。
たとえば、ひとつの段落を表現するために、Pタグを使って次のように記述できます。
<P>Hello HTML4.01 World.</P>
上記全体が段落を示すP要素になる部分で、<P>が開始タグ、</P>が終了タグです。
終了タグは、上記のように、開始タグにスラッシュ(/)を加えた表記です。例えば、開始タグの<P> は段落が始まることを指示するもので、</P>は、段落が終わったことを指示します。終了タグがないと、前タグの定義がファイルの終わりまで影響するので、注意が必要です。
※開始タグ、終了タグのセットには例外があって、間に挟む要素がなく、開始タグのみでできているタグもあります。
タグの属性
タグには属性と呼ばれるオプションがあります。属性は、明示的に設定された値がなくても、デフォルトの値が設定されています。属性は常に要素の開始タグの中で使用します。属性が複数ある場合は各組を空白で区切り、出現順序は問われません。
次の例では、H1要素にID属性を設定しています。
<H1 id="sec01">これはid属性によって識別された見出し</H1>
属性値は上記のように、ダブルクォーテーション（ " ）、もしくはシングルクォーテーション（ ' ）といった引用符で囲みます。ただし、属性値が、アルファベット(a-z and A-Z)、数字(0-9)、ハイフン(ASCII十進45)、ピリオド(ASCII十進46)、アンダースコア(ASCII十進95)、及びコロン(ASCII十進58)のみを含む場合は、推奨されませんが、引用符を省略することができます。
要素名と属性名
HTMLでは大文字・小文字の区別をしませんが、要素名は<A>のように大文字、属性は href="..." のように小文字で表記することが推奨されています。また、属性値も大文字・小文字で区別されません。
廃止される予定の属性
HTMLはバージョンアップする毎に表現能力をアップさせてきましたが、そのために様々な弊害が出てきました。そこで、HTML 4
でスタイルシート言語が導入されました。これまでHTMLで表現してきた配置、フォントサイズ、テキスト色などの指定はスタイルシート言語を使って指定することが推奨され、その代わり今まで使われていた要素や属性のいくつかは廃止される予定になっています。
改行は手動で行うもの
多くのワープロのドキュメントと違い、HTMLでは改行を無視します。また、複数の半角スペースは1つの半角スペースとして表現されます。
たとえば、下記のようなHTMLドキュメントを作成した場合です。
エディタで表示
<HTML> <BODY> Enterキーを押して改行。 どうだろう、ブラウザで改行されたかな？ </BODY> </HTML>
ブラウザで表示
Enterキーを押して改行。
どうだろう、ブラウザで改行されたかな？
最初の例には文章の間に改行コードが入っていますが、ブラウザはこの改行コードを無視してしまいます。ブラウザに改行を指示するためには<BR>タグを使う必要があります。
<HTML> <BODY> Enterキーを押して改行。<BR> どうだろう、ブラウザで改行されたかな？ </BODY> </HTML>
今度は次のように改行されます。
Enterキーを押して改行。
どうだろう、ブラウザで改行されたかな？
URIの概要
ウェブで利用できる資源、HTML文書、画像、ビデオクリップ、プログラム等はすべて住所を持っていて、この住所はURI(Universal
Resource Identifier)と呼ばれる符号化形式で表されます。
URIの構成は次の例が基本です。
プロトコル://サーバーネーム.ドメイン/
例： http://www.rfs.jp/
上記のURIは、「HTTPプロトコルを用いて利用できる文書が、 www.rfs.jp
というコンピュータに存在し、 / というパスでアクセスできる。」という意味を持っています。場合によっては上記に続いて、サブディレクトリやファイル名が続いたりします。HTTPプロトコル(Hypertext Transfer Protocol)というのは、データをやり取りする規格で、これに続くファイルは、ウェブサーバ用のファイルであることを示しています。
プロトコルについては、HTTP以外にも、メール用の mailto やFTPの ftp などがあります。
※一般には「URL(Uniform Resouce Locator)」という単語のほうが有名ですが、URIはそのURLの上位に位置するものです。
※「http://www.rfs.jp/」は、ファイル名を省略したアドレスです。サーバの設定により、ファイル名を省略した場合に使われるファイル名というのがあります。一般に多く使われるデフォルトのファイル名はindex.htmlで、その場合、「http://www.rfs.jp/」と「http://www.rfs.jp/index.html」は同じファイルを指定していることになります。
このアドレスは、ハイパーリンクで利用されます。
<A href="http://www.rfs.jp/">smartホームページ</A>
表示結果は下記のとおりで、クリックするとタグで指定したアドレスのドキュメントが表示されます。
相対URI
相対URIは、ページが置いてある場所を基準にして、リンク先のURIを指定するものです。例えば、http://www.rfs.jp/sb/html/index.html
というURIのページから、http://www.rfs.jp/sb/html/01/01.html
というページに相対RUIのリンクを貼る場合は、下記のようになります。
<A href="01/01.html">smartホームページ</A>
上の階層にあるページ、たとえば、http://www.rfs.jp/sb/html/index.html
というURIのページから、http://www.rfs.jp/index.html というページに相対RUIのリンクを貼る場合は、下記のようになります。
<A href="../index.html">smartホームページ</A>
詳しくはハイパーリンクの章を参照してください。
タグのネスティング
タグでタグを挟んだ状態をネスティングといいます。下記の例は、段落を示すPタグで、見出しを示すH1タグをネスティングしています。
<P> <H1>Welcom to My Home Page!!</H1> ･･･・・・・・・・・・・・・・・・・・ </P>
上記の構造は、Pタグで示した段落要素の中に、H1タグで示した見出しが入っています。
ネスティングを用いるときには終了タグの位置に注意してください。鏡に映したように、囲むタグの両外側の位置が一致するようにします。
ブロックレベル要素とインライン要素
HTMLを構成する要素は、ネスティングできるレベルで大別し、ブロックレベル要素とインライン要素に分類できます。
簡単に説明すると、ブロックレベル要素は直接BODY要素内に配置できるもので、インライン要素はもちろん、ブロック要素をネスティングすることもできます。インライン要素はブロックレベル要素にネスティングされるもので、ブロックレベル要素を逆にネスティングすることはできません。
- ブロックレベル要素
- 他のブロックレベル要素やインライン要素を含むことができます。一般的には、改行されてから表示されます。
- インライン要素
- データや他のインライン要素を含むことができます。一般的には、表示の際に改行を伴いません。
コメントタグ：<!--,-->
HTMLは文書中にコメントと呼ばれる要素を置くことができ、ブラウザはコメント部分を無視し表示しません。HTMLではそのコメントを記述するために、各行でコメントを <!-- と-->で囲みます。コメント中に複数のハイフン( - )を含むことは避けたほうがよいそうです。
<!-- ############## COMMENT ############### -->
コメントには、HTMLファイルの著作権の表示や、ファイルの注意点を記述するために使われます。なお、ブラウザによっては、コメント内にHTMLタグを記述することもできます。コメントの中にタグが書けるというよりは、今書いているHTML文書をコメントにしておきたい場合、コメントタグを使うことによってHTMLタグを無効にできます。
<!-- <b>COMMENT</b> COMMENT -->
エスケープ文字
タグの表記で使用する<>などは、文章中で使いたい場合などがあります。そのような際は、特別に用意された文字列（エスケープ文字）で参照することができます。よく使う例には、次のものがあります。
| エスケープ文字 | 記号 |
|---|---|
| < | < |
| > | > |
| " | " |
| & | & |