HTML講座第二回[用意するものとちっちゃなサンプル] ~ Puti Developers Blog

前回は「HTMLとは何ぞや」ということでHTMLのイメージをつかんでいただきました。

今回は、実際に書き始めていこうと思います。といっても、簡単なものですが。
有料のソフトは一切使わずに作れますよ。

◆書くにあたって必要なもの

テキストエディタ(メモ帳やSimpletextなど)
webブラウザー(InternetExplorerやFirefox、Google Chromeなど)

あと、できれば紙とペンも用意しましょう。
勉強のためでなく、デザインの案を考えるときも使います。
これだけです。

◆簡単なHTML

まず簡単なものを書いてみましょう。言わゆるHello, world。

なれるためコピペ許可。この下の、書き移す（書いていく）、人が読めるプログラムをソースコードと言いますよ。※人が読めないがCPUが直で実行できるのをバイナリファイルとか、実行可能形式ファイルと言います。それは機械語で書かれています。HTMLは機械語に変換する必要はありません。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>簡単なHTML</title>
</head>
<body>
<p>Hello,world!!!</p>
</body>
</html>

これをテキストエディタで入力したら、名前をつけて保存しましょう。

※webサイトを外部に公開したいという方は、半角英数のみで名づけていくことをお勧めします。全角文字を使うと問題が発生することがあります。

名前は何でもいいですが、名前の最後に[.htm]か[.html]を入れてください。

そうしないと、ただのテキストファイルになります。

開いてみましょう。

ちゃんと下のように[Hello,world!!!]と表示されましたか？

◆解説
■1行目 <!DOCTYPE …> これは、文章型宣言と言って、これがどういう文章か、明示するものです。

-//W3C//DTD HTML 4.01//EN　の部分がそのままだと厳格なもの、

-//W3C//DTD HTML 4.01 Transitional //EN だと、「非推奨」のものを含めるもの、

-//W3C//DTD HTML 4.01 Frameset //EN だと、フレームセットと言うものを含むものです。

■2行目から下
<と>で囲まれたものをタグと言います。(例外：コメント)
二行目からよーく見ていくと、似ているタグがあります。
<html> と </html> や<p>と</p>など、いくつか組になるものがありますね。
実は、タグには開始タグと終了タグの二種類あります。

開始タグは、[<]で始まり、要素名と属性、属性値が入って[>]で終わります。

終了タグは、[</]で始まり、要素名が入って[>]で終わります。

その開始タグと終了タグの間に入るものを要素と言います。
ということは、<html>はhtml要素を開始するタグ、</html>はhtml要素を終了するタグですね。

※注意：属性と属性値は省略できますが、それがないと成立しないタグもあります。

要素は厳格な入れ子にしましょう。そうしないとちゃんと表示してくれない場合もあります。今回のサンプルは入れ子構造にしてあります。

これから解説していく中で、終了タグがないタグがあります。これは開始タグだけを書けば、そこに内容のない空要素が埋め込まれます。「改行」を示すタグ[<br>]がその例です。

次回は二行目から下の詳細な解説をします。