簡単なHTMLをブラウザに表示してみる

Home>HTML>簡単なHTMLをブラウザに表示してみる

この情報はお役に立ちましたか?よろしければ皆様にもお知らせください。

  このエントリーをはてなブックマークに追加 mixiチェック  

まずは、どうすればブラウザで表示できるのか、簡単なHTMLをつくってみましょう。

テキストエディタを起動し、以下のように入力して、保存するときに、「hello.html」とファイル名をつけてください。

<html>
<head>
<title>簡単なHTML</title>
</head>
<body>
<p>こんにちは</p>
</body>
</html>

保存してできたファイルをダブルクリックすると、ブラウザが立ち上がり、画面に「こんにちは」と表示されます。

サンプルファイル「hello.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」のように、正確な記述でなくてもブラウザを介せば、こちらが意図したように表示してくれますが、これはブラウザの機能に甘えているだけで、正しい文法に則っていないといえます。正しい記述をするには、文書定義を最初に行う必要があります。
次は文書定義の記述をします。

関連リンク

よく読まれている記事

UpDate:2009-10-23