インターネットで稼ぐ流儀　『第５８号』

【 インターネットで稼ぐ流儀 】

- MENU -

1. 前記
2. [ サイト作成 HTML 講座　入門編 -03- ]
3. 編集後記

おはようございます。


Gadget-Project ガジェット・プロジェクト の瀬尾です。


HTML 講座、
そろそろイヤになってきたのではないかと思います。（笑）

ですが、ざっと目を通して頂くだけで結構ですので、
とりあえずは最後まで読んで下さいね。

頭の片隅に概要だけでも残っていれば、
改めて勉強しようと思った時に楽ですから。

そして、こういう、ちょっと知っておくことが、
あとで差が開くことになることがありますし、
無駄にはならないと思います。


まずはとりあえず、
いつもの新着情報から。


【 今週の新着情報 】
『 Free Download フリー（無料）・ダウンロード』のページに、
『最短であなたに成功をもたらす5つのヒント』 [ Volume 7 〜 10 ]
『スーパーアフィリエイター5つの魔術』 [ Volume 7 〜 10 ]
それぞれ続編をアップし、
さらに、 [ Volume 1 〜 6 ] も内容を一部改め再アップしています。

Free Giveaway Right 無償配布権も継続してお付けしていますので、
どうぞご利用下さい。

Free Download フリー（無料）・ダウンロード

そして、今週のスクリプト！
Give Me Comment ギブ・ミー・コメント
スクロールするコメント受付システムと
広告の合体でプローモーションを強化！
「スクロール・コメント・ボックス」で注目を集め、
気軽に書き込んでもらう。
そして、サンキュー・ページで……。
ネット利用者の習性を利用したシステム！

このメルマガでは、
インターネットで稼ぐための、
サイトの作り方、SEO の考え方、
アフィリエイト、アドセンス、情報起業、リセールライト、
等についてお話していきます。

更に、精神的なことの話や、脳の話など、
あらゆる面でサポートできればと思っています。

どうぞ、末永いお付き合いをよろしくお願い致します。

前回の復習

• プログラミング・ソース編集には『テキスト・エディタ』を使う
• HTML の基本的構造は、
  ＜HTML＞
  　＜HEAD＞
  　＜/HEAD＞
  
  　＜BODY＞
  　＜/BODY＞
  ＜/HTML＞
  という形になっている
• 『 HEAD 部』には、そのページの基本情報を記述する
• 『 BODY 部』には、実際にブラウザで表示させる内容を記述する

サイト作成 HTML 講座　入門編 -03-

基本的構造の前に

前回で説明させて頂いた「 HTML の基本的構造」から始まって、
実際に使用される HTML に、一歩ずつ近づけていきます。

前回、ブラウザで表示させた HTML はご理解頂けましたでしょうか。

あれだけでも表示できるんですね。

ですが、実際にページを作って、それをサーバーにアップして、
となってくると、皆さんに正常に見て頂く必要から、
色々な約束事に関連した、
必要になってくるソース・コードが出てきます。

今日は、
「 HTML の基本的構造」の前に記述しておくソースの説明です。

HTML のバージョン

前回のソースは、出だしが、
＜HTML＞　になっていました。

ですが、ウェブでページを公開しようと思えば、
その　＜HTML＞　の記述の前に、
「 HTML のバージョン」を記載しておく必要があります。

HTML にも、様々なバージョンがあって、
どのバージョンに従って書かれたソースなのか、
これを明記しておく必要があるんですね。

これは覚える必要はありません！

基になるテンプレートを作成する時に、
自分がどのバージョンの HTML を書こうとしているのか、
確認して、それにマッチしたものを記述しておけば、
あとはそれをコピペして使えばいいですから。

そういう、頭に引っ付いてくるものがあるというのだけ、
覚えておいて下さい。


何を書いておかなくてはいけないかというと、
『文書型宣言』というのですが、
＜!DOCTYPE＞
というものを書かなくてはいけないんですね。

これが、ソース・コードの１行目に来ます。


今から、詳しい内容ではなく、概要を説明していきますが、
内容的に分かりにくく、難しく感じるかもしれませんが、
「おまじないの一文がある」、程度の理解で結構です。

ご自身で HTML を記述される際、
それをマスターするのに使った本の HTML バージョンを確認して、
そこの中に記述しているものを確認して下さいね。


＜!DOCTYPE＞　の例を一つ、記述しておきます。

＜!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
　"http://www.w3.org/TR/html4/loose.dtd"＞

このようなものなのですが、お決まりの形がありますので、
あなたが利用する HTML に該当するものを探して下さいね。

何を選択したらいいのか分かりにくいかもしれないですが、
インライン・フレームというのが使えるようなタイプのもので、
非推奨の要素や属性が使える、
一番制限のゆるいものを探して記述しておくのが無難です。


少し難しい話になりますが、
ブラウザ側で、この記述による表示方法の判別がなされています。

ブラウザの表示方法には、
標準的な仕様に従って表示される「標準モード」と、
ブラウザ独自の表示方法に互換性を持たせた「互換モード」というのが
あるんですね。


この判別なのですが、
上記　＜!DOCTYPE＞　の例でいうと、
「 Transitional 」と書かれていて、
プラス、
URL （ "http://www.w3.org/〜" の部分）が記載されていると、
「標準モード」になります。

が、「 Transitional 」と書かれてあっても、
URL の記載がないと「互換モード」になってしまいます。


何がどう違うのか分からないかもしれませんが、
極力「標準モード」で表示されるようにしておくことを、
お勧めします。

この様に、URL の有無でも違ってきますので、
＜!DOCUTYPE＞　の記載は正確にして下さいね。


HTML を正確に表示させる第一歩なので、
具体的な内容のことは分からなくとも、
こういう部分があることと、
マッチしたものを選択しなくてはいけないということは、
覚えておいて下さい。

今現在、「 HTML 5 」というのが出てきていますが、
上記　＜!DOCTYPE＞　はその直前のバージョンで、

＜!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
　"http://www.w3.org/TR/html4/loose.dtd"＞

この記述が、制限のゆるいものとなっています。
（ただし、フレームは使えません。
「フレーム」の説明はまたの機会にしますが、
そういうものがあるということだけ、理解しておいて下さい。）

W3C という、HTML を標準化している団体の、
サイト内の参考ページを紹介しておきます。
W3C　"DOCTYPE"
（このページに記載されている「 DTD 」というのは、
" Document Type Definition "　の略で、
『文書型定義』ということです。）


HTML の１行目、
コピペで済ます部分のお話でした。

言語の特定

上記同様、コピペで済ます部分として、
HTML が何語で書かれているのか、
これを記述しておくことをお勧めしておこうと思います。

記述箇所は、＜HTML＞　のところで、
＜HTML LANG="ja"＞
としておきます。

お察しの通り、LANG="ja"　とは、
“日本語を使っていますよ”ということです。

これを記述したからといって、
目に見えて何かあるということはないのですが、
ブラウザによっては、まれに、
フォントに影響があることもあるようですし、
何より、
翻訳のサービスやそういったソフト、
及び、サーチ（検索）・エンジンに言語を伝えておくことは、
有用です。

私のサイト内ページも、たまに、
国外で翻訳して表示して下さっている方がいらっしゃいます。

そういった際、使用言語の記載をしておくと、
何語で書かれているのかが、
翻訳サービスのエンジンにも的確に判断できるわけですね。


＜!DOCTYPE＞　同様、
＜HTML LANG="ja"＞　というのもセットで、
コピペ箇所として理解しておいて下さい。


面白いので、
アクセス解析で判明した、
実際に翻訳されていた例を、キャプチャー画像でお見せします。




漢字で「瀬尾和弘」と書かれた名前が、
見事に翻訳されているのに感心しましたが、
Gadget-Project が " Gadget-projet " になっていたので、
慌てて該当ページを確認しましたよ！
スペル・ミスはありませんでした。
ふ〜っ。焦らすなよ！
（「瀬尾和弘」という文字列が名前だと判断していることと、
名前としての読み方が出来ていることから、
そういうデータベースが出来上っているのでしょうか。
世界的規模で考えると、ありえるのか？と思うのですが、
昔から考えると、この翻訳技術の進歩って素晴しいですね。）

今日のおさらい

ここまでのお話で、この様な HTML になりました。

（クリックで、コード全体の画像をご覧頂けます。）


ではまた次回。。。

最新情報をお伝えしていきます。
『 Gadget-Project Newsletter 』

編集後記

今日の HTML 講座は、
そんなのがあるってことだけ頭の片隅に置いておいて下さいね。
コピペでやってしまえるところなんで。

ここからあと、ところどころで、
ブログをやるにしてもなんにしても、
知っておいた方がいいですよ、ってことが、
チラホラ出てきます。

順を追って説明していきますから、
毎回辛いかもしれませんが、（笑）
目を通すだけでも通して下さいね。

メルマガを解除するのはもったいないですよ！（笑）

Gadget-Project　瀬尾　和弘

ご意見・ご感想、何でも結構です！
お気軽にメール下さいね！

お待ちしております。
info@gadget-project.jp

ということで、
次回もお楽しみに！！

See You !!