このページで説明していること
- HTMLとWEBプログラムの違い
- HTMLを視点としたWEBプログラムの考え方
目次
- HTMLって何？
- HTMLだけでは限界がある（表現の限界）
- HTMLだけでは限界がある（できることの限界）
- まとめ
HTMLってなに？
HTML説明するにあたり、
いきなりコードの書き方とか、HTMLは（HyperText Markup Language）だぜとか、そんなページをよく見かけますが、そのあたりの説明は他のページにお任せしておきます。
じゃあ、HTMLって何なの？
「ネット上に情報を公開するための手法です！」
あっさり過ぎて、全然説明になっていないですが、
例えば、HTMLを使わずに自分の日記をテキストエディタに書いて、自分でレンタルサーバーを契約し、それをサーバーにアップロードすれば、それで情報公開ができる訳です。
ただしその場合、真っ白の背景に黒い文字が味気もなく並んでいるだけになります。
さらに、何が「見出し」なのか、「本文」なのか判らず、超絶見づらい情報になってしまいます。また、文字情報だけになってしまうので、Microsoft Wordで文章を作ったみたいに、画像も配置できません。
例：イメージ図
そこで、HTMLってのが出てきて、
タイトルはここ、本文はここ、画像はここ、表はここ、みたいに配置する方法が出てきました。
HTMLだけでは限界がある１（表現の限界）
大昔（25年前とか）はHTMLだけでページのレイアウトやデザインも表現してしまおうという感じでしたが、
本来、HTMLは構造を表現するだけであって、見た目を表現するものだけではありません。
そこで、CSSっていうのが20～15年前くらいからだんだん使われるようになってきました。
CSSっていうのは、カスケーディング・スタイル・シートといわれるもので、
一般的に「スタイルシート」だけで通じると思います。
CSSは、構造だけのHTMLにデザインを持たせてくれます。
例：イメージ図
HTMLだけでは限界がある２（できることの限界）
HTMLはプログラムじゃない。
Webに詳しくない方は、HTML・CSSをプログラムという方もいると思います。
しかし、HTMLは載せただけの情報を構造的に表示するだけなのでプログラムではありません。
例えば、あるショッピングサイトがあって、そのサイトに無料登録するというのを想像してみます。
すると、下記の様な流れが一般的だと思います。
楽天やAmazonなどでも構いません。（電話番号認証などは省きます）
・サイトの入会（メールアドレス、名前、住所等を入力）
・入会完了メールが届く
・ログインする→利用開始
・マイページに自分の情報が表示されている
・購入
こういった「動的な処理」が入ってくると、HTMLだけでは何もできません。
勿論、これらのページでHTMLは画面の表示に使わていますが、
ログインページとか自分の個人情報が表示されるページとか、動的な処理が必ずあります。
ここ初めてプログラムで処理されていると言えますね…。
まとめ
ホームぺージを勉強してみたい・作ってみたい、という人はまずは下記の流れで勉強してみては如何でしょうか。
自分はプログラマなので、エンジニア的な目線で話を進めることが多いと思いますが。
・HTML
↓
・CSS
↓
・Webプログラム（PHP, Ruby, Java, JavaScript等）
↓
・サーバ
※サーバサイドとクライアントサイドの違いは割愛します。ここは後日また触れます。
この流れが絶対とは言えませんが、結局はHTMLも必要になってきます。
興味のあるところから入っても構わないと思いますが、これらの全体像を知ったうえで勉強を進めると、理解のスピードが違うと思います。
自分がデザイナ向きのか、プログラムが向きなのか、判ってくると思います。