■ WSJ21[GHP] - XHTMLタグ講座で覚えよう

■Section 2-1■良いホームページ作成講座■

▼GHP講座2.1　−　XHTMLタグを覚える


◎ 基本的なホームページを作るために最低限必要な知識(言語)
◎ ホームページを作るために覚えなくてはいけないんです。
◎ 頑張って覚えて下さいね＜他人事＞初めは見ながらでいいですからっ♪
◎ 簡単な英語ができるなら、かなり楽に覚えられますよ。

★タグって何？


ホームページを作るにはXHTML(HTML)を覚えなくてはなりません。
また良いデザインにするためには更にCSSも覚えなければなりません。
HTMLは英語を基本としていますので、英語を覚えれば自然とタグも覚えられます。
※今後これらの言葉を多く使いますので覚えておいてね。
.
「タグ」って何？

　タグというのは「<」と「>」を含め囲まれた特定の文字列を指します。 具体的には「<body>」や「</body>」、「<hr>」や「<hr />」と言ったものです。


「開タグ」「閉タグ」「空要素タグ」

　タグには「開タグ」「閉タグ」「空要素タグ」の３つの書き方があります。 開タグは「タグはここから始まるよ」という目印で「<〜>」と書きます。 閉タグは「タグはここまでで終わるよ」という目印で「</〜>」と書きます。 基本的に開タグと閉タグは一緒に使い「<strong>適応範囲</strong>」のように開タグと閉タグの間に文字を挟みます。 空要素タグはHTMLでは「<hr>」のように開タグのみで閉タグを持ちません。 一方XHTMLでは「<hr />」のように開閉タグとして使うんです。 何故かというと、XHTMLは文法に厳しく「必ずタグを閉じなければいけない」というきまりがあるからです。 規則は厳しいですが、HTMLとは違い省略が不可能なので、省略による予期せぬ表示がなくなるのは大いに利点となります。


タグの「要素」

　タグを構成している要素です←そのままですね(^o^)
「<」と「>」に囲まれた特定の文字列のみを指します。 「<body>」や「</body>」だったら「body」のみを指します。 これをタグの要素と言います。


タグの「属性」

　タグには属性というものもあります。
　属性というのは「<a href="http://www8.ocn.ne.jp/~wallshop/wsj/">ホームページ</a>」の 「=」の左部分の「href」を指し、「href属性」と言います。 また、「=」以下の「""」で囲まれた部分は「属性値」といいます。 「属性="属性値"」を付加することにより色々は役割を持たすことができます。
※当講座ではCSSを使う都合上、class属性を頻繁に使います。


★雛形で覚える宣言の違い [XHTML<->HTML]


★XHTMLとHTMLの宣言の違い

　「タグ」がどういったものか理解したところで、実際にタグを打っていきましょう。
.
　まずメモ帳を開いて下さい。右下のスタートメニューから「スタート＞プログラム＞アクセサリ＞メモ帳」にあります。 「スタート＞ファイル名を指定して実行＞notpad」でも起動します。
　お気に入りのテキストエディタがあるのでしたらそちらをお使い下さい。 フリーソフトのTeraPadなんかがオススメ☆です。 起動させ「表示＞編集モード＞HTML」を選ぶとタグの部分の色が変わりますので、入門者、初心者の方には結構便利なことだと思います。 ただ「<」と「>」に囲まれた部分はタグの打ち間違いに問わず色が変わるので気を付けて下さい。
.
　▼次にタグを打っていきます。次の通り打ち込んでみて下さい。コピペはダメよん♪
　以下のソースは「HTML4.01 Transitional」の雛形です。
　当講座はXHTMLで進めていきますが、HTMLとの違いを知るためにも見ておいて下さいね。
　※左端にある数値は利便上の行番号ですので、写さないで下さいね。
　※字下げは「半角スペース」た「タブ」を使って下さい。

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html lang="ja">
  3. <head>
  4.   <meta http-equiv="content-type" content="text/html; charset=shift_jis">
  5.   <title>タイトル：サイト名など</title>
  6. </head>
  7. <body>
  8. 本文：表示される部分
  9. </body>
  10. </html>
↓　↓　↓　解　説　↓　↓　↓
  1. DOCTYPE宣言。HTMLのバージョン表記
  2. ホームページの始まり。「lang="ja"」は日本語のページであることを表す。
  3. ヘッダーの始まり。以下に内容識別の為の定型の情報を書く。
  4. このページが「shift_jis」で書かれていることを示す。他に「EUC」などがある。
    通常は「shift_jis」である。
  5. タイトル：ブラウザの左上に表示される文字列。印刷時の先頭行にも書き出される。
    検索エンジンの検索結果に表示されるので内容が分かるように書くべき。
  6. ヘッダーの終端
  7. 本文の始まり。以下に表示されるものを書く。
  8. 本文：表示される部分
  9. 本文の終端
  10. ホームページの終端

打ち終わったら「名前を付けて保存」で「index.html」とでもしておきましょう。 「.html」まで打って下さいよ！そうしないとただのテキスト文書になってしまいますからね。
　無事保存し終えたらダブルクリックで開いてみましょう。何やら表示されていますよね？ 「<body>」と「</body>」の間を変更したら内容が変わりますよ。 一度変えて表示してみて下さいね。
.

　▼次にXHTMLで書いてみます。以下のソースは「XHTML1.1」の雛形です。

  1. <?xml version="1.0" encoding="Shift_JIS"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
  4. <head>
  5.   <meta http-equiv="content-type" content="text/html; charset=shift_jis" />
  6.   <title>タイトル：サイト名など</title>
  7. </head>
  8. <body>
  9. <div>
  10. 本文：表示される部分
  11. </div>
  12. </body>
  13. </html>
↓　↓　↓　解　説　↓　↓　↓
  1. XML宣言。記述を推奨
  2. DOCTYPE宣言。XHTMLのバージョン表記
  3. (同上)　記述項目が増えているので注意！
  4. (同上)
  5. (同上)　metaタグは空要素タグなので最後が「 /」で終わっていることに注目！
  6. (同上)
  7. (同上)
  8. (同上)
  9. bodyタグ内に直接テキストを書いてはいけないのでdivタグを使用している。
  10. 本文：表示される部分
  11. divタグ終了
  12. (同上)
  13. (同上)

★自分だけの雛形を作ろう！


★雛形はコピーするもの！

　雛形は一度作ってしまえば後はコピーして使います。その方が効率的ですからね。 毎回書いて覚えても良いんですけど、かなり面倒なので私もコピーして使っています。 大量のページにいちいち書いていったらキリがないからね♪ でも、意味だけは理解しておきましょう。
.
　▼以下のソースは私の推奨する「XHTML1.1」の雛形です。

  1. <?xml version="1.0" encoding="Shift_JIS"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
  4. <head>
  5.   <meta http-equiv="content-type" content="text/html; charset=shift_jis" />
  6.   <meta http-equiv="content-style-type" content="text/css" />
  7.   <meta http-equiv="content-script-type" content="text/javascript" />
  8.   <link rev="made" href="mailto:メールアドレス" />
  9.   <link rel="index" href="ホームページのアドレス" />
  10.   <link rel="stylesheet" type="text/css" href="./css.css" />
  11.   <title>タイトル：サイト名など</title>
  12. </head>
  13. <body>
  14. <div class="frm">
  15. <!-- ================================ -->
  16. 本文：表示される部分
  17. <!-- ================================ -->
  18. </div>
  19. </body>
  20. </html>

　前回の雛形から増えた部分を解説します。
　　　L. 6　「スタイルシートを使うよ」と宣言
　　　L. 7　「Javascriptを使うよ」と宣言
　　　L. 8　「責任者のメールアドレス」自分のメアドを入れて下さいね。
　　　L. 9　「ホームページのトップページのアドレス」
　　　L.10　「スタイルシートのＵＲＬ」必要に応じて書き換えて下さいね。
　　　L.14　divタグをスタイルシートにしてみました。
　　　L.15　しきいの為のコメント
　　　L.17　しきいの為のコメント
　以上です。
.
　書き終えたら「template.html」とでも名前を付けて保存しておいて下さい。 上書き禁止にしておくといいかもね♪ この雛形は、これからの講座で練習のために使用していきます。 練習に使う場合には「sample.html」など別名で保存して使って下さいね。

←講座１へ　 ●もどる●　 講座2-2→