簡単なHTMLをブラウザに表示してみる
まずは、どうすればブラウザで表示できるのか、簡単なHTMLをつくってみましょう。
テキストエディタを起動し、以下のように入力して、保存するときに、「hello.html」とファイル名をつけてください。
<html>
<head>
<title>簡単なHTML</title>
</head>
<body>
<p>こんにちは</p>
</body>
</html>
保存してできたファイルをダブルクリックすると、ブラウザが立ち上がり、画面に「こんにちは」と表示されます。
「<」と「>」で囲まれた文字を「要素」と呼びます。
この「要素」ではさんだ文字列は、要素の種類によって文書のパーツとしての意味をもたされます。要素とは、文書構造を示すもので、デザインを決めるものではありません。
しかし、ブラウザで表示すると、要素によって見た目は様々に変化します。
文書構造を示すということは、「ここは見出しです」という場合、機械的には要素を読み取るだけで、それが見出しを示していることは理解できますが、要素をそのまま表示したのでは、わたしたちが読むにはわかりづらくなってしまいます。
そこで、ブラウザで表示する場合には、便宜上太字にするなど、見出しとして視覚的にわかりやすく表示しているのです。
なお、要素を記述するときは、大文字でも小文字でも同じ要素として認識されます。
<HTML>~</HTML>
この要素で囲われた部分がHTML文書であることを示します。
HTMLを書くときには、必ず最初と最後に対のHTML要素を書きます。
<HEAD>~</HEAD>
これはHTML文書におけるヘッダーを示します。
ブラウザに表示されるような本文は書きません。HEAD要素には、HTML文書の設定関係の要素が入ります。例えば、文字コードの指定や、JavaScript、CSSなどです。文書のタイトルもここに入れます。
<TITLE>~</TITLE>
ブラウザのタイトルバーに表示されるタイトル文字列を入力します。
タイトルの設定は必ずしましょう。ブラウザを開いたときに、何のページを見ているのかがわかるし、検索エンジンもそのHTML文書が何について書かれているのかを理解しやすくなり、後々検索エンジンに登録するときに役立ちます。
あまり長い文字列だと、表示したときに読めなくなるので、ブラウザを開いたときに読める程度の文字数にしましょう。多くても30文字程度が適当でしょう。
<BODY>~</BODY>
HTMLの本文を示します。この要素の間に書いた内容が、ブラウザで表示されます。
<P>~</P>
この要素はパラグラフ(=段落)を示しています。
このHTML文書の構造は以上の通りです。
本来はハイパーリンクを駆使して様々なページと関連付けされてこそ、HTMLといえるのですが、ここではまず簡単に表示してみました。
この他にも、正確にHTML文書をつくるのであれば、最初に定義を示す必要があります。
上記の「hello.html」のように、正確な記述でなくてもブラウザを介せば、こちらが意図したように表示してくれますが、これはブラウザの機能に甘えているだけで、正しい文法に則っていないといえます。正しい記述をするには、文書定義を最初に行う必要があります。
次は文書定義の記述をします。
関連リンク
よく読まれている記事
- 右クリックメニューの表示が遅い【Information】
- 画像の一部にリンクを貼る(クリッカブルマップ【Dreamweaver】
- 一定時間でローテーションする広告【JavaScript】
- Dreamweaver【Dreamweaver】
- クリックした画像を拡大・縮小する【JavaScript】
UpDate:2009-10-23