トップページ | 全エントリー一覧 | RSS購読

[耳寄りな情報]

[リンク]

[FC2カウンター]

[ブログランキング]


人気ブログランキングへ

[ブログ内の検索]

[最近のコメント]

[最近のトラックバック]

[カテゴリー]

[FC2]

ホームページ作り、さっそくつまずきました

さて、新しいホームページを作成している最中ですが、いかんせん
知識が足りない経験も浅いと、無い無い尽くしでございます。一応、
人様のテンプレートを参考にしながら構築して見ようと思い、ソース
を眺めておりましたら、次のような疑問にぶち当たりました。

そこで、勉強も兼ねて検索して見る事に致します。

1)必要なツールは?
2)そもそもHTMLとはなんぞや?
3)CSSも必要なの?
4)XHTMLと言うものもあるが?
5)だいたいDOCTYPE宣言って何?

1)必要なツールは?
ホームページを作るには、何らかのエディタ(メモ帳などのテキスト
エディタや専用のツール)を用います。文字や絵を書く時に紙と鉛筆
を準備するのと同じです。これに文法チェック機能や段落表示などの
各種支援機能を持たせたのが、Homepage ManagerやCrescent Eve
だと言う事になります。当初はWindowsに標準で付属しているメモ帳
ソフトで行けると思っていましたが、やはり専用のツールには適いま
せんね。(追記:Homepage ManagerをVista以降の環境で使うのは
難しそうなので、alphaEDIT v2.0.3を推奨致します。)

Homepage Manager(Vector)
alphaEDIT v2.0.3(KraftWorks)
Crescent Eve(kashim.com)

2)そもそもHTMLとはなんぞや?
HTMLはHyper Text Markup Languageの略称。Webページを記述
するためのマークアップ言語で、この言語でホームページを作るの
が普通。文法や用法が予め決まっており、これはW3C(World Wide
Web Consortium)と言う国際的な団体が決めています。HTMLの規定
に沿って正しく書かれたWEBページならば、インターネットエクスプロ
ーラーなどのWebブラウザで問題なく表示をする事が出来るわけです。
現在はHTML4.01が最も普及している言語で、ブラウザで読める様に
するには、拡張子を.htm(または.html)にする必要があります。

また重要なのはトップページを必ず作ること。トップページはホーム
ページの顔であり入口です。訪問者はURLを指定してやって来るので
すが、必ずしもHTMLファイルの名前まで指定しているとは限りません。
この場合、ブラウザには該当無しと表示されるか自動的にindex.html
を探し出して表示されるようになっています。従ってトップページには
index.htmlと言う名前を付ける必要があります。

しかし、1999年に勧告されたHTML4.01が未だに現役で使われていると
は驚きです。ITの世界でこれほど長く使われている言語なのですから、
すっかり枯れた技術(言語)だと言っても良いでしょう。
HTMLのはじまり~HTML4_01の勧告-HTMLの基本

マークアップ (markup)とは、普通の文字や行間に施す指定のことで、
段落やスペースや文字の大きさや色などの指定を施す事で、見栄え
を良くする為に用いられます。この指定を記述するための文字列がタグ
(tag)と呼ばれるもので、 <*>で始まり</*>で終わると言う形式に
なっています。*の部分は規定に沿って様々な文字が使われます。

エディタで<strong>太字</strong>と記述すれば、太字 と表示が
されるわけですね。(マークアップ自体は半角文字である必要があり
ます。)

2012年12月現在、HTML5がW3Cによって策定中だそうです。HTML4
とHTML5の違いはマークアップの記述方法。以前なら<!DOCTYPE
HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">と記述する様にしてい
たのが、<!DOCTYPE html>だけで良い事になりました。

また<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">としなければならなかった記述も、<meta charset
="utf-8">と単純化されています。<>の部分はタグですが、このタグ
の記述が整理されて分かり易くなっています。

詳細はこちらをご覧ください。
HTML5が注目を浴びる理由とは?ここが違う!サンプルで見る
HTML5(1)(CodeZine)


現在の主流は文章の構造をHTMLで記述し、見栄えに該当する部分は
CSS(Cascading Style Sheet)に分離して記述する事が多くなっていま
す。

3)CSSも必要なの?
CSS1、CSS2、CSS2.1、CSS3と進化しており、デザインに相当する部分
をこちらへ記述する事で、後からの修正や改良を簡単に出来ると言うメリ
ットがあります。全ての記述をHTMLに任せても良いのですが、内容が膨
大になってメンテナンス性が悪化すると言うデメリットもあります。そこで、
背景の色や文字のサイズなどはCSSで記述し、そのファイルを別に作って
置けばHTMLから参照するだけで使えます。構造を変えずにデザインの変
更をするユーザーには最適な方法です。

CSSの記述・配置には、下記のやり方があるそうです。

1.HTMLタグ内へCSSを直接書き込む。
 HTMLタグに<strong style="color:#ff0000">テスト</strong>を記述
 するとテストと表示されます。最もシンプルにCSSを使う方法です。

2. HTMLのヘッダ部分(<head>~</head>)に記述する。
 この方法だと、そのページにだけ反映させる事が出来ます。欠点は
 グーグルなどの検索エンジンが訪問してきた時に、あまりヘッダ部分
 が混雑していると検索結果が不利になるかもしれないこと。読み込み
 に時間を要するなどデメリットもあります。

3.CSSファイルを別に作って管理する。
 これが最良の方法だと言います。テキストエディタなどでCSSを記述し、
 保存する時に拡張子を.cssとする事で作る事が出来ます。詳細はこちら
 をご覧ください。
 →CSSの記述方法 -外部ファイルに記載(CSSレイアウト実践講座)

4)XHTMLと言うものもあるが?
正直、これの解釈に悩みました。上記のHTMLは最も普及している言語で、
これから覚えるならHTML5が良いと聞きます。HTMLは古くからある言語
ですが、いずれ時代に合わせてXHTMLへと移行するはずでした。ところが
暫くはHTMLも並存する事になり、現在ではHTML5が登場しています。

一方でXHTMLとは何でしょうか?私にはさっぱり分かりませんwww
XMLに準拠したHTML言語と解せば良いのでしょうが、HTMLとは共通性が
あり一部の点を注意すれば大丈夫なんだそうです。詳細はこちらへどうぞ。
XHTML基礎講座(CSSレイアウト実践講座)
HTMLからXHTMLへ(基礎知識)(Web Frontier)
HTML5の登場で、XHTMLは結局どうなったの?(@IT)
HTML=>XHTMLという形で学んだほうが良いのでしょうか(Yahoo!知恵袋)

と言うことで、暫くはHTML5とCSSについて勉強して行こうかなと考えて
おります。

5)だいたいDOCTYPE宣言って何?
HTML4.01の規定では、ページの一番最初(<html>タグよりも前)に必ず
DOCTYPE宣言をするようになっています。Strict DTD、Transitional DTD、
Frameset DTDの三種類があります。それぞれ意味がありまして、最も規定
に厳密なら<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">を記述する事になります。
Transitional DTDはフレームの利用が出来ないタイプ、Frameset DTDは
フレームが使用可能なタイプと区分けされている様です。

ブラウザはこの宣言を最初に読み込んで、適切な表示をする様になって
います。ところがグーグルニュースなどのページでソースを見てみると、
<!DOCTYPE HTML>としか書かれていません。HTML5の規定ではこれ
だけで良いとなったからでしょう。

ブラウザは、DOCTYPE宣言の内容を参照し標準モード(Standards mode)
で表示するか、互換モード(Quirks mode)で表示をするか決めています。
標準モードはHTMLの記述に文法上の誤りがあっても補正はせずそのまま
表示します。互換モードでは古いHTMLの規定に合わせて記述したページで
あっても、ブラウザがちゃんと補正をして表示します。しかし、互換モードは
CSSを正しく解釈出来ない事があるので、ページのデザインが崩れて見えた
り、意図した表示をしない事があるようです。

HTML5になるとDOCTYPE宣言は重要性を失って来ましたが、DOCTYPE
宣言自体は必要だそうです。ブラウザに標準モードで読み込ませたいの
であればDOCTYPE宣言を記述する必要があります。<!DOCTYPE html>
と記述されたHTMLは標準モードで扱われる事になります。

うーん、この世界は奥が深い。
トラックバック
トラックバック送信先 :
コメント

[楽天市場の注目商品!]


[楽天ソーラー]

[楽天カードが便利!]

[楽天スーパーWiFi]