HTMLはHyper Text Markup Languageの略で、マークアップによってドキュメント構造を表現するものであり、プログラミング言語ではありません。 ですが、Webページを作る際必要不可欠なものであり、CGIで掲示板などを作る際に必要になるため勉強して損はないでしょう。
なんやかんやあって現在WHATWGという団体がHTMLの規格を決めており、HTML Living Standard が最新のHTML規格です。
常識的に考えるだけだと、文書といった場合に重視されるのは「どんな文が書いてあるか」が最大の要素だと思ってしまいがちです。もちろんその文書をわれわれ人間が読むにあたっては当然そのとおりと言えるでしょう。しかしこれを計算機でデータとして扱うに当たって重要なのは、たとえば文章全体の中でどこがタイトルで、どこが要約で、どこが筆者の名前でどこが日付なのか。第一に自然言語を理解できず、第二に処理に厳密性が要求されるコンピュータにとっては、本文よりもこれら「どの文がどういう意味を持つか」ということが重要になってくるのです。
そのような、文章の特定部分に対して意味づけを行う言語のことを、Markup Language(マークアップ言語)と言うのです。「こういう手続きでデータを扱いたい」ということをコンピュータに伝えるのがプログラミング言語なら、「このデータはこういう意味や形をしている」ということをコンピュータに伝えるのがマークアップ言語というわけです。ちなみに頭についているHyper Textとは、われわれが日に5万回はクリックするといわれる「リンク」機能によってつながれた文書のことを言います。結局、HTMLとはウェブ上の文書ファイルに意味や構造の情報を与える手段である、とまとめることができます。
この後の項目で誰かが詳しく説明してくれる予定になっていますが、具体的には
などなどの構文があり、これらのおかげでわれわれが愛するFirefox君は文書をわかりやすく表示してくれているというわけです。まあ純粋に意味構造だけじゃ使いづらいので、その特性上ブラウザに処理の指示を与えるとか、文字の色やカタチを指定するとかそういう文もありますので、あんまり硬くなる必要も無いんですけどね。ちなみにOperaを愛しているwiki編集者もここにいます。Operaの速度とレンダリングの忠実さは神に最も近いブラウザを名乗るにふさわしいと思います。Lynxで表示を確認する変人もいます。色んな人がいるので色んな環境で綺麗に見られるHTMLを書きましょう。
<!doctype html> <title>Test</title>
validなHTML文書を書くのはHTML4時代にはややこしい点があったが、HTML5以降は上記の型宣言とtitleタグを入れればそれで一応OKなのだからずいぶん簡単になった。
HTMLを分かったつもりでいる人は要素とタグの区別がついていません、というか要素という言葉を知りません
要素とは文書の構造を成す塊、タグはその記述手段、といってもよくわからないので例を挙げましょう
<p>これは段落です。</p>
p>から</p>までをP要素と呼びます。<p>は開始タグ、</p>は終了タグと呼びます。その間に挟まれているのが内容と呼ばれる物です。
P要素は段落を意味するもので、この場合"これは段落です。"が1つの段落を成していることを意味します
要素は入れ子式に配置されます。が、どの要素にどの要素が入って良いかのルールがあり、それを守らなくては成りません。例えば<p>段落の中に <p>段落があってはいけません</p> </p>は誤りです。P要素の内容にP要素が含まれてはいけないのです(段落の中に段落は通常ありませんしね)
要素によっては終了タグや開始タグ、内容を省略できる物、省略しなくてはいけない物、省略してはいけない物があります。
実はP要素は終了タグが省略できますので先ほどの例は、"段落の中に"が1つの段落として認識され、"段落があってはいけません"が2つめの段落となり、最後に余計な</p>が存在すると考えられます
要素名は大文字で書いても小文字で書いても構いませんが、普通は小文字で統一します。 実際の作業手順として、HTML文書とする(文書インスタンスと成す)文書の構造(ツリー構造*1)に合わせ、マーク付けをする*2、という順序で作業を考えると不思議マークアップやDIV厨*3などに陥る可能性はかなり低くなるのではないかな、と思います。 ついでに『DIV厨』についてさらに言及しておきますと、(大雑把な説明ですが)DIV要素は(匿名ブロック*4は作らず)グループ分け*5を目的に使う、と考えておくとDIV厨にならずに済むのではないでしょうか。
属性とは要素に付与される関連特性のことであり、要素ごとにどのような属性が付けられるかは異なる。
<img src="./sample.gif">
これはIMG要素といってHTML文書中に画像リソースの所在を指定するもので、多くのブラウザの場合画像が文書中に表示される形となる。
画像の所在位置を指定しているのがsrc="./sample.gif"の部分であり、これはIMG要素の属性である。srcを属性名、"./sample.gif"の部分を属性値と呼び、属性は属性名="属性値"という形式で成り立っている。(属性値を省略できる属性もあるが、省略しない方が良い)
それからBODY要素の中で使われる要素は大きく分けて「ブロックレベル要素」と「インライン要素」*6があり、それぞれどのように使われるのか理解しておく必要があります。
CSSとはCascading Style Sheetの略で、無理矢理和訳すると「重ね合わせ可能な表現形式の一覧」ということになります。「重ね合わせ可能」という部分はCSSについて学ばないと分からないので、当面は「表現形式の一覧」、つまりスタイルシートという部分を意識していただければ理解には差し支えありません。スタイルシートっていったい何でしょうか?
HTMLの項目を見ていただいたとき、「HTMLは文書の構造を示すべきであって、デザインを表現すべきではない」という内容の文があったかと思います(なくてもそのうち誰かが書くに決まってます)。HTMLがコンピュータに意味情報を与える物だという話を理解していただければそれは当然のことで、人が主観で感じる色やカタチの情報をコンピュータに与えるべきではないからです。「そんなん人が読むから関係ないし」とか言う方には、具体例としてよく挙げられるのが検索エンジンです。Googleを筆頭に、今現在活躍している「ロボット型」と呼ばれる検索エンジンは、プログラムが自動的にHTML文書を解釈することで検索用のデータベースを作成しています。そのため、解釈しにくいデータの入り交じったHTMLでは、正常に検索結果に反映されないという事態もあり得ます。また、製作過程としても「デザインする」という作業と「文書構造を分析する」という作業がほとんど違う物であるということは直感的にも理解いただけることでしょう。
さてここで生じる疑問は、「じゃあどうやってデザインしろっつーんだよwwwwwバーロwwwww」という一言に他ならないでしょう。その手段として現在一般的なのが、スタイルシートなのです。スタイルシートには、「この種類のタグにはこういう色や形を付けておいて」という情報を羅列したテキストのことで、これをHTMLとは別に用意してつなぎ合わせてやることで、「文書構造」と「デザイン」をほぼ完全に分離することができるのです。
具体的にCSSを使うことで得られるメリットは、
などなどそれなりにありますので、是非とも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ではデザインを統一することができません。それはバグや意図的に仕様を無視するブラウザが存在するためです。ですから表示の確認にはできるだけ多くのブラウザを使うことが望ましいです。
エンジンでブラウザの特徴がでますです。
しかしすべての環境を再現するのは難しいでしょう。とくにMacとか。ですのでbrowsershotsをおすすめします。このサイトは各環境のSSをとってくれる便利なやつです。ただしいつも夏休みのディズニーランドくらい行列ができています。気長に待ちましょう。使い方はGIGAZINEを参照のこと。
いきなりですがブラウザの仕様の忠実度は
Opera>>>Firefox(Gecko)>>>>Safari>>IE>>Mac IE
くらいになってます。超適当(Safariとかよくわかんね)なので確認にはOperaやFirefoxなどが望ましい気がします。普通ならシェアの大きいIEにしたいところですがあまりにもバグが多く結局IE専用のCSSを書くハメになるのだからいきなり相手しても無駄な気がするのです。最終的にはどのブラウザで見てもそれなりに綺麗に見えるようにするのがベストですけどね。
補記: SafariはCSSに強いかと思う( Safariの仕様に関するQ&A )。FireFoxよりは忠実に感じる。JavaScriptはFireFoxよりは弱いかも。Safariが対応してるCSS
プログラマーにとってベストな相手はFirefoxだと勝手に思っています。それは豊富なプラグインにあります。
PerlやPHPで扱う場合にはそれ用のエディタを使って編集してください。HTML文書を単独で扱う場合は適当なテキストエディタがあると良いでしょう。エディタ開発者がHTML分かってない場合もあるので注意。
Mac OS Xの場合、無料で付いてくるXcode(Apple謹製)だとか、Coda(シェアウェア)とか便利。
Accessibilityとは近づきやすさという意味の単語です。webの世界では情報へのアクセスのしやすさを言います。現在のネットはコンピュータおたくの為の物ではなくなってしまいました。ネットには可愛らしい幼女から老人まで多種多様な人がアクセスしています。中には色弱の方もいるでしょう。もしかしたらマウスは使えないかもしれません。携帯端末でJavascriptは動作しないかも知れません。それらの人にもきちんと情報を伝えられるように考える、それがアクセシビリティの考え方です。
強制をするつもりはありませんが、オナニーで満足していては上にはいけないと思います。~
/\
/ \
 ̄| | ̄
___| |__
/ ⌒ ⌒ ::: \ |\
| (●), 、(●)、  ̄ ̄ \
| ,,ノ(、_, )ヽ、,, 左を見ろ> こっちは右だバカ!
| `トェェェェイ' .:::::__ ./
\ `ニニ´ .:::/ |/
l_!!! ,、 ,..-ヽー'',,.. ' ノ`丶--'ー--、 -―--、 + + +
| ! !_!|i::::::::::`´ー''´:::::::::::::::::::|:::::::::::::::::::::,..、::`ヽ + +
.! ', ,|!::::::::::::::::::::::::::::::::::::::::::ヽ/---‐'´`\::::\ +
!、_,イ:::ヽ::::::::::::::::::::::├┤:::/::| \:::ヽ、_
',::::::',::::::|ヽ::::::::::::::::::::::::::::/:::::::l ヽ' ヽ
',:::::::',::::! ヽ:::::::::::::::::::::::::::::::::,! ヽ __ノ
',:::::::::::| ',::::::::::::::::::::::::::::/|
ヽ_ ノ ヽ::::::::::::::::::::::::::::::
これも大変悪い例と言えるでしょう。
そんな事より1よ、ちょいと聞いてくれよ。Wikiとあんま関係ないけどさ。
このあいだ、Webサイト見たんです。Webサイト。
そしたらなんかレイアウトがめちゃくちゃで見られないんです。
で、よく見たらなんかtableがあって、margin=0、とか書いてあるんです。
もうね、アホかと。馬鹿かと。
お前らな、tableレイアウト如きで普段書かないカラム書いてんじゃねーよ、ボケが。
tableだよ、table。
なんかfontとかもあるし。物理表現要素でHTMLか。おめでてーな。
よーし文字が目立っちゃうぞー、とか言ってるの。もう見てらんない。
お前らな、css教えてやるからそのサイト閉鎖しろと。
HTMLってのはな、もっと殺伐としてるべきなんだよ。
要素をタグと間違った奴といつ喧嘩が始まってもおかしくない、
刺すか刺されるか、そんな雰囲気がいいんじゃねーか。Tranditionalは、すっこんでろ。
で、やっと座れたかと思ったら、隣の奴が、ホームページビルダー、とか言ってるんです。
そこでまたぶち切れですよ。
あのな、ホームページビルダーなんてきょうび流行んねーんだよ。ボケが。
得意げな顔して何が、ホームページビルダー、だ。
お前は本当にホームページビルダーを使いたいのかと問いたい。問い詰めたい。小1時間問い詰めたい。
お前、ホームページって言いたいだけちゃうんかと。
HTML通の俺から言わせてもらえば今、HTML通の間での最新流行はやっぱり、
メモ帳、これだね。
スタート->アクセサリ->メモ帳。これが通の使い方。
メモ帳ってのはUTF-8も読み込める。そん代わり改行コードLFがだめ。これ。
で、それにLynx。これ最強。
しかしこれを使うと次からCtrl+Zで1個しか戻れないという危険も伴う、諸刃の剣。
素人にはお薦め出来ない。
まあお前、1は、DreamWeaverでも使ってなさいってこった。