続きです。簡単な HTML と CSS の例です。
簡単な HTML 文書を作る
簡単な HTML の文書を作って、ブラウザで表示させてみましょう。相変わらず windows 向けです。まず、文書を書く前に、上で説明したように、ファイルの拡張子が表示されるように windows を設定しておいて下さい。
最小限度の HTML 文書を書いてみます。メモ帳で
<html> <head></head> <body> <h1>HTML example</h1> <p>Hello World!</p> </body> </html>
と書いて（コピペ、つまりコピー＆ペーストして構いません）、適当に名前をつけて（好きなフォルダに）保存します。その際、拡張子は「.html」としなければなりません。「html_example1.html」のような感じです。あとは、そのファイルをダブルクリックするだけでブラウザが立ち上がり、何か表示された筈です。これと同じになりましたか？
ところで、保存したファイルがどこにあるか、ちゃんと把握しておいて下さいね。ファイルを管理するには、[すべてのプログラム]→[アクセサリ]→[エクスプローラー]で、エクスプローラー（IE とは関係ないです）というソフトを開いてやるといいです。それで見つけて、ファイル名をダブルクリックです。
それから、メモ帳の注意ですが、メモ帳は基本的に「.txt」の拡張子のついたファイルしか編集できません。面倒ですが、HTML ファイルを読み込みたければ、メモ帳の[ファイル]→[開く]をやって、ファイル名を指定する欄のとなりの、「テキスト文書（*.txt）」のところを「すべてのファイル（*.*）」に直して下さい。
ちなみに、メモ帳は開きっぱなしで問題ないです。中身を修正したら、「上書き保存」で保存すると楽です。
上の HTML 文書の簡単な説明です。山括弧で囲まれた <html> とか <p> というのは、タグと呼ばれます。タグでブラウザに、文書の表示の仕方を伝えるわけです。タグの種類はたくさんあるので、「html タグ」とかでぐぐってみて下さい。
もう少し詳しい説明は、例えばここなどを見て下さい。「html 書き方」などでぐぐるといいでしょう。
それから、アルファベットだけで書いていれば問題ないのですが、日本語をつかうと文字化けの問題がきっと出てきます。漢字などが変な文字で表示されてしまう、あれですね。これはプログラミングをしていてもよく問題になります。これについては、何度もぐぐることになるでしょう。
元々コンピュータは、日本語などのアルファベット以外の文字のことは考えずに作られました。なので、色々な規格があります。日本語だけでも、UTF-8, Shift_JIS, EUC-JP 等々があります。世界的には UTF-8 が標準的ですが、日本語では他のものもよく使われています。これらもぐぐってみて下さい。関連する語句に、エンコードなどがあります。
簡単な CSS
CSS についてはまったく説明してなかったですね。これは HTML の見え方をアレンジするものです。上の HTML 文書に、少し追加してみます。
<html> <head> <style type="text/css"> body {background-color: mintcream;} h1 {color: green;} p {color: red;} </style> </head> <body> <h1>HTML example</h1> <p>Hello World!</p> </body> </html>
「html_example2.html」などのファイル名で保存してエクスプローラーを開き、上と同様にファイル名をダブルクリックしてみて下さい。こんな風になりましたか。さっきとは少しちがいますね。
ここで CSS は、<style type="text/css"> と </style> のタグで囲まれた、4〜6 行目がそうです。何となくわかると思いますが、文字の色や背景色を指定しているのですね。
ここでは CSS は HTML の中に埋め込んでありますが、CSS だけ別のファイルにするとか、他にもちがう導入の仕方があります。CSS は色を変えるだけでなく、HTML を様々にアレンジすることができます。じつは、僕もすべてを把握しきってはいません。（PM5:43）
