HTMLはHyper Text Markup Languageの略で、マークアップによってドキュメント構造を表現するものであり、プログラミング言語ではありません。 ですが、Webページを作る際必要不可欠なものであり、CGIで掲示板などを作る際に必要になるため勉強して損はないでしょう。
現在W3CというHTMLの規格を決めている団体が勧告している最新のHTML規格はHTML4.01です。 ただし、XMLというメタ言語（言語を定義する言語）のアプリケーションである"XHTML"をW3Cは推奨しており、XMLが業界における主要なデータフォーマットとしてほぼ認知された今日においてはXHTMLおよび関連知識としてのXMLに関しても学ぶことをお勧めします。
しかし、それとは裏腹にW3Cは、XML的要素が強くなってきた最近のXHTMLの系列とは別に旧来のHTMLの考え方を踏襲した"HTML5.0"の定義を進めています。
常識的に考えるだけだと、文書といった場合に重視されるのは「どんな文が書いてあるか」が最大の要素だと思ってしまいがちです。もちろんその文書をわれわれ人間が読むにあたっては当然そのとおりと言えるでしょう。しかしこれを計算機でデータとして扱うに当たって重要なのは、たとえば文章全体の中でどこがタイトルで、どこが要約で、どこが筆者の名前でどこが日付なのか。第一に自然言語を理解できず、第二に処理に厳密性が要求されるコンピュータにとっては、本文よりもこれら「どの文がどういう意味を持つか」ということが重要になってくるのです。
そのような、文章の特定部分に対して意味づけを行う言語のことを、Markup Language(マークアップ言語)と言うのです。「こういう手続きでデータを扱いたい」ということをコンピュータに伝えるのがプログラミング言語なら、「このデータはこういう意味や形をしている」ということをコンピュータに伝えるのがマークアップ言語というわけです。ちなみに頭についているHyper Textとは、われわれが日に5万回はクリックするといわれる「リンク」機能によってつながれた文書のことを言います。結局、HTMLとはウェブ上の文書ファイルに意味や構造の情報を与える手段である、とまとめることができます。
この後の項目で誰かが詳しく説明してくれる予定になっていますが、具体的には
世の中のWebサイトの多くはHTMLで書かれていますが、かなりの割合がHTMLっぽいだけで規格から外れています。一番多い間違いはこのDocument Type Definition宣言を書いていないというものでしょう。HTMLを分かったつもりでいる人はほぼ例外なくこれを書き忘れています
DTD宣言は3種類あります。これはこのHTML文書がどのような文書型定義に従って書かれているかという宣言です。文書型定義に関しては次に説明しますが、HTMLの記述ルールとでも思ってください
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
DTDは和訳すると文書型定義であり、このHTMLをどのようなルールに従って書くかというそのルールのことです。3種類あります
最も厳しいルール。物理表現は一切許さない仁義無き文書型定義（実際にはbなどの一部の要素は非推奨で許されてはいるが）
これの狂信者集団はキモく、この規格に従っていたとしても妙な記述を見つければ情け容赦なく叩きのめす
でも、これに従って書くとCSSを入れ換えるだけでサイトデザインを一気に変更できてしまう、大抵の環境では問題なくページを読むことができるなどのメリットがあるため基本的にはこれを使用するのが良いと思う
移行型のDTD。W3Cは物理表現をなるべく排除したHTMLに向かいたいのでそういう意味で移行型。Strict DTDよりもかなりぬるく、文字の大きさや色を設定するfont要素などの物理表現要素が許されている
Strict DTDを守れている物は例外なくTransitional DTDも守れている。掲示板などで記事の文字色を指定するなどのアクセントを付けたい場合はStrict DTDをベースとしたソースにfont要素を加えてTransitional DTDを宣言するのが良いかもしれない。（文字色を指定する以上fontを使わずCSSにする必要性は薄い）
Transitional DTDにフレーム関連の定義を加えた物。フレームが扱えるのはこれのFrameset DTDのみ
フレームを使うか使わないかは好みだが、画面が小さい、ケータイで見られない、などの理由からフレームを嫌う人も少なくないので注意。使うにしてもノーフレームのページは用意しよう
HTMLを分かったつもりでいる人は要素とタグの区別がついていません、というか要素という言葉を知りません
要素とは文書の構造を成す塊、タグはその記述手段、といってもよくわからないので例を挙げましょう
<p>これは段落です。</p>
p>から</p>までをP要素と呼びます。<p>は開始タグ、</p>は終了タグと呼びます。その間に挟まれているのが内容と呼ばれる物です。
P要素は段落を意味するもので、この場合"これは段落です。"が1つの段落を成していることを意味します
要素は入れ子式に配置されます。が、どの要素にどの要素が入って良いかのルールがあり、それを守らなくては成りません。例えば<p>段落の中に <p>段落があってはいけません</p> </p>は誤りです。P要素の内容にP要素が含まれてはいけないのです（段落の中に段落は通常ありませんしね）
要素によっては終了タグや開始タグ、内容を省略できる物、省略しなくてはいけない物、省略してはいけない物があります。
実はP要素は終了タグが省略できますので先ほどの例は、"段落の中に"が1つの段落として認識され、"段落があってはいけません"が2つめの段落となり、最後に余計な</p>が存在すると考えられます
要素名は大文字で書いても小文字で書いても構いません。HTML4.01では要素名は大文字、属性名は小文字で書くことが推奨されていますが、XHTMLのことを考えて要素名を小文字で書くのも良いでしょう。
属性とは要素に付与される関連特性のことであり、要素ごとにどのような属性が付けられるかは異なる。
<img src="./sample.gif">
これはIMG要素といってHTML文書中に画像リソースの所在を指定するもので、多くのブラウザの場合画像が文書中に表示される形となる。
画像の所在位置を指定しているのがsrc="./sample.gif"の部分であり、これはIMG要素の属性である。srcを属性名、"./sample.gif"の部分を属性値と呼び、属性は属性名=属性値という形式で成り立っている。（属性値を省略できる属性もあるが、省略しない方が良い）
細かい説明は基本的にStrict DTDに従ったものを書いています
CSSとはCascading Style Sheetの略で、無理矢理和訳すると「重ね合わせ可能な表現形式の一覧」ということになります。「重ね合わせ可能」という部分はCSSについて学ばないと分からないので、当面は「表現形式の一覧」、つまりスタイルシートという部分を意識していただければ理解には差し支えありません。スタイルシートっていったい何でしょうか？
HTMLの項目を見ていただいたとき、「HTMLは文書の構造を示すべきであって、デザインを表現すべきではない」という内容の文があったかと思います（なくてもそのうち誰かが書くに決まってます）。HTMLがコンピュータに意味情報を与える物だという話を理解していただければそれは当然のことで、人が主観で感じる色やカタチの情報をコンピュータに与えるべきではないからです。「そんなん人が読むから関係ないし」とか言う方には、具体例としてよく挙げられるのが検索エンジンです。Googleを筆頭に、今現在活躍している「ロボット型」と呼ばれる検索エンジンは、プログラムが自動的にHTML文書を解釈することで検索用のデータベースを作成しています。そのため、解釈しにくいデータの入り交じったHTMLでは、正常に検索結果に反映されないという事態もあり得ます。また、製作過程としても「デザインする」という作業と「文書構造を分析する」という作業がほとんど違う物であるということは直感的にも理解いただけることでしょう。
さてここで生じる疑問は、「じゃあどうやってデザインしろっつーんだよｗｗｗｗｗバーロｗｗｗｗｗ」という一言に他ならないでしょう。その手段として現在一般的なのが、スタイルシートなのです。スタイルシートには、「この種類のタグにはこういう色や形を付けておいて」という情報を羅列したテキストのことで、これをHTMLとは別に用意してつなぎ合わせてやることで、「文書構造」と「デザイン」をほぼ完全に分離することができるのです。
具体的にCSSを使うことで得られるメリットは、
#ぶっちゃけHTMLが読みやすくなる
#単一のCSSファイルを使い回し、デザインを気にせずに複数のHTML文書を記述できる
#複数のCSSファイルを使って、気分次第や閲覧者の必要に応じて簡単にデザインを差し替えることができる
#同じ原理で、印刷スタイルとブラウザスタイルを別にすることができる
#通常のHTMLでは表現できないデザインが可能である
#ユーザースタイルシートが使用でき、アクセシビリティに配慮されたサイトを作れる などなどそれなりにありますので、是非ともHTML+CSSで素敵なウェブアプリケーションを構築してください。
URIという記述を見かけたことがあるかもしれませんが、これはURLの誤りではありません。URIはインターネット上のリソースの位置を示すもので、URLはその一部なのです。もともとURL、Uniform Resource Locatorは「モノの場所を示す方式」と和訳することができ、その名のとおりHTML文書の存在場所を示すものとして規定されました。しかし場所だけでなく、あらゆる「モノの識別のための共通方式」にまで拡張してやろう、として出てきた考え方がURI、Uniform Resource Identifierなのです。これは和訳すれば「モノの識別をする方式」となり、概念的により広いものになっていることがわかると思います。
さて、こういうRFCを書くお偉方は、上記のような抽象的かつ難解な表現が大好きですが、別に難しい話ではありません。「スキーム:識別子」つー書き方を標準にしようぜ、っていうそんだけの宣言です。スキームというのは、「何の識別子」かを意味する英数字で、このスキームの種類によって識別子の書き方は変わって来ます。たとえばHTML文書を示すためのhttpスキームでは、//をルートとしてサーバー名、ポート番号、ファイル名などを記述することが許可されています。
よくhttp://～とかftp://～とか書かれていますが、このhttpの部分はプロトコルではなくスキームと呼びます
勿論httpの意味している所はHyper Text Transfer Protocolですが、この部分にかかれていること=使用プロトコル、という意味ではありません
よくこの反例として挙げられるのがmailto:です。これはスキームですがプロトコルではありませんね
HTMLはSGMLのアプリケーションです。SGMLはマークアップ言語を定義するためのメタ言語です（wikipediaより）この場合のアプリケーションはアプリケーションソフトという意味ではなく、適用という意味です。
CSSはスタイルシートの一種であり、CSS=スタイルシートではありません。CSS以外のスタイルシートを扱うブラウザが皆無に等しいだけなのです
CSSを紹介していて残念ですが、CSSではデザインを統一することができません。それはバグや==意図的に==仕様を無視するブラウザが存在するためです。ですから表示の確認にはできるだけ多くのブラウザを使うことが望ましいです。
いきなりですがブラウザの仕様の忠実度は
Opera>>>Firefox(Gecko)>>>>safari>>IE>>Mac IE
くらいになってます。超適当（safariとかよくわかんね）なので確認にはOperaやFirefoxなどが望ましい気がします。普通ならシェアの大きいIEにしたいところですがあまりにもバグが多く結局IE専用のCSSを書くハメになるのだからいきなり相手しても無駄な気がするのです。最終的にはどのブラウザで見てもそれなりに綺麗に見えるようにするのがベストですけどね。
プログラマーにとってベストな相手はFirefoxだと勝手に思っています。それは豊富なプラグインにあります。
PerlやPHPで扱う場合にはそれ用のエディタを使って編集してください。HTML文書を単独で扱う場合は適当なテキストエディタがあると良いでしょう。エディタ開発者がHTML分かってない場合もあるので注意。
Accessibilityとは近づきやすさという意味の単語です。webの世界では情報へのアクセスのしやすさを言います。現在のネットはコンピュータおたくの為の物ではなくなってしまいました。ネットには可愛らしい幼女から老人まで多種多様な人がアクセスしています。中には色弱の方もいるでしょう。もしかしたらマウスは使えないかもしれません。携帯端末でJavascriptは動作しないかも知れません。それらの人にもきちんと情報を伝えられるように考える、それがアクセシビリティの考え方です。 :目に優しい背景色:たまに黄色背景のページに出会うことがあります。何考えてるのかわかりませんが、もう二度とお客さんは来てくれないでしょう。彩度の高い背景色は大方目に悪いのです。 :色弱の人に優しい背景色:色弱の人はある種の色が区別できません。それがどのような色なのかは様々ですが、日本には赤色が見えにくい人が多いですね。グレースケール化しても読めるように文字と背景のコントラストを上げておくのが良いでしょう。
強制をするつもりはありませんが、オナニーで満足していては上にはいけないと思います。~
{{attach_view(left_right.gif)}}
／＼
／ ＼
￣| |￣
＿__| |＿＿
／ ⌒ ⌒ ::: ＼ |＼
| （●）, 、（●）、 ￣￣ ＼
| ,,ノ(、_, )ヽ、,, 左を見ろ> こっちは右だバカ！
| ｀ﾄｪｪｪｪｲ' .:::::＿＿ .／
＼ ｀ニニ´ .:::／ |／
l_!!! ,､ ,..-ヽｰ'',,.. ' ノ｀丶--'ー--､ -―--､ + + +
| ! !_!|i::::::::::｀´ｰ''´:::::::::::::::::::|:::::::::::::::::::::,..､::｀ヽ + +
.! ', ,|!::::::::::::::::::::::::::::::::::::::::::ヽ／---‐'´｀＼::::＼ +
!､_,ｲ:::ヽ::::::::::::::::::::::├┤:::／::| ＼:::ヽ､_
',::::::',::::::|ヽ::::::::::::::::::::::::::::/:::::::l ヽ' ヽ
',:::::::',::::! ヽ:::::::::::::::::::::::::::::::::,! ヽ __ノ
',:::::::::::| ',::::::::::::::::::::::::::::/|
ヽ_ ノ ヽ::::::::::::::::::::::::::::::
これも大変悪い例と言えるでしょう。
そんな事より１よ、ちょいと聞いてくれよ。Wikiとあんま関係ないけどさ。
このあいだ、Webサイト見たんです。Webサイト。
そしたらなんかレイアウトがめちゃくちゃで見られないんです。
で、よく見たらなんかtableがあって、margin=0、とか書いてあるんです。
もうね、アホかと。馬鹿かと。
お前らな、tableレイアウト如きで普段書かないカラム書いてんじゃねーよ、ボケが。
tableだよ、table。
なんかfontとかもあるし。物理表現要素でHTMLか。おめでてーな。
よーし文字が目立っちゃうぞー、とか言ってるの。もう見てらんない。
お前らな、css教えてやるからそのサイト閉鎖しろと。
HTMLってのはな、もっと殺伐としてるべきなんだよ。
要素をタグと間違った奴といつ喧嘩が始まってもおかしくない、
刺すか刺されるか、そんな雰囲気がいいんじゃねーか。Tranditionalは、すっこんでろ。
で、やっと座れたかと思ったら、隣の奴が、ホームページビルダー、とか言ってるんです。
そこでまたぶち切れですよ。
あのな、ホームページビルダーなんてきょうび流行んねーんだよ。ボケが。
得意げな顔して何が、ホームページビルダー、だ。
お前は本当にホームページビルダーを使いたいのかと問いたい。問い詰めたい。小１時間問い詰めたい。
お前、ホームページって言いたいだけちゃうんかと。
HTML通の俺から言わせてもらえば今、HTML通の間での最新流行はやっぱり、
メモ帳、これだね。
スタート->アクセサリ->メモ帳。これが通の使い方。
メモ帳ってのはUTF-8も読み込める。そん代わり改行コードLFがだめ。これ。
で、それにLynx。これ最強。
しかしこれを使うと次からCtrl+Zで1個しか戻れないという危険も伴う、諸刃の剣。
素人にはお薦め出来ない。
まあお前、１は、DreamWeaverでも使ってなさいってこった。