初心者のためのホームページ作り 第1号

Web作成支援 初心者でもタグやスタイルシートを学んで、思い通りのホームページが作成できる講座を、現在メールマガジンにて配信しています。当サイトを利用するに当たって、是非メールマガジンを購読することをお勧めします。なお、未だ購読されていない方はこちらから登録できます。念のため無料です。

今週のおさらいはこちらから → 目次    プレーンテキスト版

<第1号>マガジンのおさらい
まず、記事から抜書きでおさらいします。

                  毎週金曜日配信 What's New 2002/5/17
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

決まりごと・・使う文字
HTMLを書く上で絶対に半角のカタカナを使ってはダメだということです。これは
常識ですから必ず守りましょう。文字化けを起こしてしまいます。全角であれば
カナも漢字も表示できます。また、英数字は半角でも大丈夫です。
The HTML Coded Character Setでは、様々な制御コードがあり、ここにコードが
重なると制御記号として解釈され、まともでない動作になってしまう可能性があ
るわけです。
 半角カナを表わすための1バイト目のコード番号とHTMLの制御記号を表わすた
めのコード番号がもろにぶつかってしまい、障害の原因となってしまいます。
◆解説
半角カタカナはブラウザでもメールでもタブーとされています。

実はインターネットの日本語文字コードISO-2022-JP のコードが、半角カタカナのコードとぶつかって文字化けを起こすのです。

これ以外の文字符号化方式、たとえば Shift_JIS や EUC-JP や UTF-8 などを使えば、半角カナを表現することは可能です。ただし、これらの文字符号化方式は 8bit コードですから、そのまま SMTP を通すことには問題があります。base64 などで符号化して送れば問題ありません。

このサイトではISO-2022-JPを使っています。私が長年これに親しんだ、というのが実際の理由です。つい最近には Shift_JIS がインターネットでも使われるようになったので折があればと思います。何故かスタイルシートは Shift_JIS を使っています。理由は、ブラウザによってスタイルシートを ISO-2022-JP で書くと判読できないものがあるからです。本当にブラウザってやつはメーカーのエゴが丸出しでユーザ環境にとってよくありません。

文字符号セットについてはサイト内のTips言語を参照してください。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
まず下記のタグをエディタにタイプします。不精な人はコピーなんていう手もあ
りますが、近い将来自分のHPを立ち上げようと思うなら、せっせと打ち込みま
しょう。慣れることが肝心です。

<html>
<head>
<title>初心者のためのホームページ作り</title>
</head>
<body>

</body>
</html>

◆解説
<html> このタグはHTML文書全体を囲みます。初期のブラウザではこれがないとページを正しく表示されないものがありました。

このタグはオプションとみなされています。ほとんどのブラウザは、このファイルがWebページであることを示すMINEタイプ(いずれ講座で説明します)、あるいはファイル名の拡張子から判別します。必ず書くようにしましょう。

</html>は終わりの意味である終了タグで、ほとんどのタグが対となるコンテナタグと呼ばれていますので、必ず記述します。なお、<br>などの改行を示す1回だけで終わらせるものを空タグと呼び終了タグはありません。

<head>〜<head> はまさに頭です。この中にはブラウザを制御したり、ページ全体に定義づけしたりいろいろなものが埋め込まれる場所です。これも講座を進めていく中で詳しく説明します。

下の図が上記のタグの結果です。ブラウザの表題のところに <title>〜</title>に書かれたページのタイトルが表示されます。この結果が「お気に入り」のブックマークにも挿入されるのです。

Sampleの画

タグは必ず半角で入力してください。大文字でもかまいませんが、将来小文字だけしか認定されなくなる予定なので、講座は小文字を使用します。皆さんも出来る限り小文字を使用してください。

さて、ここまで入力したら保存します。適当なフォルダをあらかじめ作っておき、そこに index.html という名前で必ず小文字で保存します。.html とは拡張子でHTML文書になります。.htmでもかまいません。必ずこの拡張子を小文字で入力してください。

その他タグを設けることの規則があります。詳しくはHTMLの基本で述べていますのでごらん下さい。
それでは、今まで作ったHTMLのなかで、</head>から</html>の間を入力しま
す。ここからブラウザに表現をつけていくのです。

<html>
<head>
<title>初心者のためのホームページ作り</title>
</head>

<body bgcolor="#00ff00">

</body>
</html>
◆解説
サンプルの画その2 今度は全体が緑になります。

<body>タグはまさに「体」です。表示する全部がこのbodyなのです。この体全部に緑の背景色を指定したところです。

タグのことを要素あるいはエレメントと呼びます。その要素には属性(アトリビュート、あるいはプロパティ)がありこの場合は、bgcolorがそれに当たります。

また要素には値があり上記の場合は、"#00ff00"が値です。上記のタグの書き方はHTML4.1の厳然たる書き方(Strict)では違反となります。スタイルシートを用い、要素、属性、値を列記します。スタイルシートについては近々マガジンでお届けします。右の図は上記HTMLをブラウザで表示したものです。

なお、カラーの16進法記述については、Web Safe Colorをご覧下さい。カラーの使い方にはユーザ環境を配慮することが求められます。安全なカラー表示も制作者にとっても重要な意味があります。詳しくは、WEBセーフカラーをお読みください。

Tips:body(要素)bgcolor(属性)"#00ff00"(値)
タグはすでに理解できたと思いますが、かぎブラケット、<&>で囲んだものを総称しています。タグを別の言い方をすると「要素」あるいは「エレメント」と呼びます。

それらの要素の「属性」を「プロパティ」とか「アトリビュート」と呼び、属性に対するパラメーターを「値」と呼びます。これらの組み合わせが、<>の中に盛り込まれてHTML文書が作成されるわけです。

要素(エレメント)と要素に囲まれたものが内容、すなわちコンテンツというわけです。分かりやすく言い換えれば、開始タグと終了タグとに囲まれた中身そのものがコンテンツと呼びます。

こういったことを知っておくとサイト内のHTML4.01リファレンスを読むときに理解しやすいと思います。



Copyright(C) 2002-2003 banban@scollabo.com