情報処理実習F: 第3回　HTMLの基礎１（タグの使い方と基本骨格）

前回の復習

WWWはいつリリースされたか？
HTMLとは何か？何の略か？

HTMLの基礎

とほほのWWW入門を参考に、HTMLについて学ぶ。
ホームページ入門のHTMLの基本テクニックまでを習得する。前回の課題で作成したホームページに使われているタグを理解する。

HTMLのバージョン

先週作成したページの最初の行にある

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

とは、どういうことでしょうか？この行は、HTMLのバージョンを宣言しています。HTML 4.01 Transitional を使って、HTMLを作成することになります。

参考：<!DOCTYPE> - ドキュメントタイプ

なお、この授業はHTML 4.01を基本として進めますが、現在HTMLの次のバージョンであるHTML 5の策定が進められています。

参考: Wikipedia: HTML 5

文字コード

文字コードは、コンピュータで文字を利用するために文字とバイト表現（数字）との対応を定めたものです。詳しくは日本語と文字コード (Web KANZAKI)を参照してください。日本語のWebサイトでは、使用する文字コードとしてシフトJIS、JISコード(ISO-2022-JP)、EUC、あるいは国際標準の Unicode (UTF-8) がよく使われています。Windows付属のメモ帳でテキストファイルを作成すると、シフトJISコードとなります。秀丸エディタでは、複数の文字コードを扱うことができます。

Webサイトがどの文字コードを使っているかは、Webブラウザが自動的に判別します。しかし、自動判別が正常に働かないと文字化けを起こします。ヘッダ部分に

<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">

と書かれているのは、このファイルはHTML文書であり、文字コードはシフトJISであることを意味しています。このように明記することで、ブラウザはそのページがシフトJISコードで書かれていることを知り、文字化けを起こさずにすみます。

この授業のページでは、Unicode (UTF-8) が使われています。ソースを確認してみてください。Unicode を使うと、以下のように色々な国の文字を同じページに表示する事ができます。留学生等で、日本語、英語以外の文字を扱う人は Unicode を使うのがいいでしょう。

中国語: 你好。我是日本人。我姓関。我叫関勝寿。谢谢。

韓国語: 안녕 하세요. 일본말 할 줄 아세요?

タイ語: สวัสดี ครับ ผมชื่อ คัตสึโทะชิ เซะบิ ครับ

ロシア語: Здравствуйте!

アラビア語: اَلسَّلامُعَلَىْكُمْ

色の指定

とほほの色入門・色見本で、色の指定に関する基本を学ぶ。
色を選ぶ時にはカラーチャートや色見本の館のようなサイトを参考にすると良い。
色名で指定するのはHTMLで定義されている標準16色に限り、それ以外の色を指定する時にはRGB値の16進数で記述すると良い。

課題

今日学んだことを使って、自己紹介のページを作成してください。

h1とh2で見出しを構成してください。例：h1に「関勝寿のホームページ」h2に「趣味」「自己紹介」
太字、斜体、文字の大きさを変える、色を変える、といったタグを適宜使って下さい。
リスト書きを使って下さい（例えば、趣味を列記するなど）。

作成したページをToyoNet-ACEから提出して下さい。

情報処理実習F

情報処理実習F: 第3回 HTMLの基礎１（タグの使い方と基本骨格）