html言語の約束事を覚えよう
今まではhtml言語なんていうものを特に意識せずに、
『ただ表示されさえすればそれで良い』というような感覚でhtmlファイルをいじってきました。
究極のところ、ホームページとは作り手が表示させたいと思ったものを表示させる事ができれば、それで良いと思うのですが
html言語と呼ばれるものには、一種の礼儀作法と申しますか・・・約束事のようなものが存在します。
これらの決められた約束事に則った文法や書式を綴らなければ、
他のパソコンの使用するブラウザや環境などによっては作り手の意図とは違う表示のされ方をしたり、
全く表示されなかったりするようなケースも発生してきます。
ホームページビルダーなどのツールを使うのは悪い事だとは決して申しません。
・・・ですが、それらのツールは時として激しく決め事を無視した＜タグ＞の使い方をしたり、
間違った文法を平然と使うことがよく見受けられます。
html言語を用いて
ホームページを作り手の「このように表示したい」という意図を元に書き綴った書式の事を
一般的に『ソース』と呼称します。
正しい文法と書式からなるソースは、あらゆる環境のパソコンから
作り手の意図しない表示などを防ぐだけでなく、検索サイトの擁するクローラーと呼ばれるロボット達からも
高い評価を得ることもできるので、
ここでしっかりと正しい文法とその書式を覚えていくようにしていきましょう。
レベル４：正しい文法とその書式
html言語には様々な種類の文法が存在していますが、
現在ではHTML4.01やXHTML1.0などが主流なのではないかと思われます。
HTMLとXHTMLとではXHTMLの方が新しいので、
これから始めようとする方にはXHTMLをお勧め致します。
ゆえに、ここからは全て誠に勝手ながらXHTML1.0をベースに話を進めさせて頂きます。
↑HTMLソースの文法をチェックし、１００点満点で採点してくれるサイトです。
まず、先程アップしたサイトのＵＲＬを入力して採点してもらいましょう。
HTML構文チェック gateway
注）↑※2012年7月12日現在、上記のサイトはサービスを終了したようなので、
代わりにこちらのサイトを参照してください。
↑ま・・・マイナス１３５点・・・。
なかなかヒドイ言われようですね。
でも、全く文法を意識せずに作ったサイトなので当然の結果です。
これを、ここの段階で正しい文法を身に付けて、１００点満点を目指していきましょう！
<html>
<head>
このホームページについて定義したい事などはこの＜head＞の中に書く。
このページの名前である<title>もこの中の一つ。
</head>
<body>
</html>
↑ソースと呼ばれるものは、どんなに大きくて複雑な構造をした内容でも
概ね上記のような約束事に基づいて作成されなければなりません。
正しい文法を理解するために実際にhtmlファイルに書き込んでみましょう。
まず、今までindex.htmlという名前だったファイルをlev2.htmlという名前に変え、
新しくindex.txtというファイルを作り、
以下の文章をコピー＆ペーストしてみてください。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta name="keywords" content="キーワード1,キーワード2,キーワード3" />
<meta name="title" content="ページのタイトル" />
<meta name="author" content="作った人の名前" />
<meta name="copyright" content="Copyright (c) 作った人の名前 All right reserved." />
<link rel="stylesheet" href="style.css" type="text/css" />
<link rel="index" href="index.html" />
<link rev="made" href="mail@mail.com" />
<title>このページの名前</title>
</head>
<body>
レベル２のページへ行く。 </body>
</html>
↑このようにメモ帳にコピー＆ペーストで持ってきて保存・・・。
↑index.htmlと名前を変えてダブルクリックすればこの通り・・・。
さっそくＦＦＦＴＰでアップロードして、
もう一度採点サイトに採点してもらいましょう・・・。
さて、今度は何点がでるでしょうか・・・？
↑エラーは見つかりませんでした。＼(^o^)／ このHTMLは 100点です。
・・・だそうです。
でも、ソースに書かれている内容の意味がなにがなにやら・・・ではつまらないので順を追って説明します。
それぞれの＜タグ＞の意味は・・・？
長ったらしいあの文字列についてひとつひとつ解説していきたいと思います。
今の段階では意味不明なものが多いので、
「これはこういうものだ」と割り切った考えのできる人は
今は読み飛ばしてしまったとしてもさして問題はありません。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
↑まず一番最初の行に「このホームページではXHTML1.0を使いますよー」と宣言します。
この長ったらしい意味不明な文字列を入れることで宣言することができます。
↑いわゆる＜html＞タグ内における定義です。
「このホームページの＜html＞タグの中では日本語を使いますよー」と宣言します。
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
↑ここからの＜head＞タグの中で、このホームページは一体どんなホームページなのか？を詳しく定義します。
最初の一行目のやつは、日本語が間違いなく正しく表示されるようにする為のおまじないみたいなものです。
これがないとブラウザや環境によっては一部の文字が文字化けしたり表示されなかったりしてしまいます。
二行目と三行目は「スタイルシートを使う時にはこの言語を指定するよー」と言う意味です。
ホームページを作るときに重宝する
スタイルシートと呼ばれる超便利キットみたいなものがあるのですが
これはまた追って説明します。
この宣言文がなくても
スタイルシートが使われる場面になった時には
ブラウザが各々勝手に判断してなんとかしようとするのですが、
はっきりと宣言しておいた方が親切と言うものです。
↑このホームページで強調したいキーワードを入力します。
強調したいキーワードがなければ特にこのままでも問題はありません。
<meta name="author" content="作った人の名前" />
<meta name="copyright" content="Copyright (c) 作った人の名前 All right reserved." />
↑ページのタイトルとか作った人の名前などを入れておく部分です。
さして重要な部分ではないので、なくても全く問題なくホームページは動作しますが
「ないとやっぱり寂しい・・・」という人はきっちり入れておいて下さい。
↑「スタイルシートを外部から呼び込むときにはstyle.cssという名前のファイルを参照してねー」と言う意味です。
style.cssの部分は任意に変えられるので、この部分を例えばabc.cssとしたら、
「スタイルシートを使え」という命令が出たときにブラウザはabc.cssというファイルを探しに行きます。
スタイルシートについてはまた追って詳しく説明しますので、
とりあえず名前もこのままにしておいてください。
<link rev="made" href="mail@mail.com" />
↑あってもなくても差異はありません。大して重要なものではないのでなくても全く問題はありません。
採点サイトでノーミスを狙いたい人は入れておいて下さい。
メールアドレスには上記のようにダミーを入れておいた方が良いです。
これはサイトに徘徊して来るロボットの中には
ここに記されているメールアドレスを収集して悪用しようとする悪いロボットもいるからです。
サクッとリンクも作ってしまいましょう！
<body>タグの中に
レベル２のページへ行く。という文章を少しいじってみましょう。
↑このように<a>タグで囲ってみましょう。
同一フォルダの中にlev2.htmlがあればそこへ画面がワープします。
同様に、lev2.htmlの中身もいじってみましょう。
はじめてのホームページ
<br /> ２行目に改行してみた。<br />
続けて３行目に改行してみた。<br />
↑さらに一行追加して『トップページへもどる』ための文字列を追加してみてください。
上記の赤い部分の文字列をコピー＆ペーストしても良いのですが、
自分で一文字一文字手で入力していった方が、確実に身につきます。
↑この内容を保存して・・・あとはいつものように拡張子を.htmlに変える。
↑ダブルクリックするとこの通り・・・。
リンクが出現しているのでこれをクリックすると・・・。
↑このような画面が出現・・・。
さらにコレのリンクを辿ればまたトップページへと戻る・・・。
ちなみにこのようにページとページが互いにリンクし合う事を『相互リンク』と呼びます。
↑今までの説明通りに順当にこなしてきていたならば。
『はじめてのホームページ』フォルダの中身はこのようになっているハズ・・・。
次のページからはスタイルシートも含めて
本格的にhtmlソースの<body>の中身をいじっていこうと思います・・・。
スポンサードリンク
当サイトの内容を無断で複製・転載することはご遠慮願います。