調べるほどではないけど、聞くに聞けない、インターネットとWebの海図(きほんのき)

#根本を知ってる知らないで、理解と表現が変わる#

この海図シリーズは英語で言う**"アルファベット"**みたいなものです。

本当にきほんのきほんのき、ですが、そこを頭文字に単語が形成され、文法、文章となるように、インターネットとWebにおける全てのことの頭文字のようなものです。
目印をしっかり把握して、広大だけども楽しい海原をスイスイっと航海していきましょう。

##WebブラウザでWebページが表示される仕組み##

WebのコンテンツはWebサーバに置かれています。
置かれたコンテンツのデータをダウンロードして、ユーザーに表示する機能をもつのがWebブラウザです。

コンテンツはHTMLという書式のデータで構成されています。これに画像をはめ込んだり、レイアウトを適用したりすることによって、最終的なWebページが表示されます。

Webブラウザには、ブラウザの内部でプログラムを実行する機能もあります。この機能を使うと、キーボード操作やマウス操作などによって動くWebページを構成できます。

1つのWebページは主に4つの要素で構成されています。必須なのは1.のHTMLのみで、それ以外はオプションみたいなものです。

1.HTML・・・Webコンテンツが記述されています
2.画像や動画など・・・1.に差し込まれる画像や動画です
3.CSS・・・1.のタイトルや見出し、本文、画像などをどのようにレイアウトするのかを指示します
4.JavaScript・・・Webブラウザの内部で実行されるプログラムです

[補足]
・クライアント・・・情報を取得する端末のこと
・サーバ・・・Webサイトを提供するインターネットに接続されたPCのこと
・URL・・・Webサイトの住所みたいなもの。接続方法を示すプロトコル「http、セキュリティ的に暗号化されているものがhttps」、
サーバの名前「www.◯◯.co.jp」、場所を特定するパス「index.html」で構成されています
・静的ページ・・・リクエストに対して毎回同じページで表示するもの
・動的ページ・・・ユーザーの入力や現在の状態をみてコンテンツを生成し、内容を変化して表示するもの(ここにWebプログラミングを使う)
・レンダリング・・・ブラウザによってHTMLが解釈、整形されること

を踏まえて、

1.Webにアクセスして、ページを表示する
2.入力フォームなどからのデータ入力
3.プログラムの実行機能

がWebブラウザの役割となります。

##WebサーバからWebブラウザにコンテンツが届くまで##

1.IPアドレス・・・インターネットに接続されているクライアントやサーバにはIPアドレスと呼ばれる値が割り当てられており、この値が通信先を示すものとなります

2.DNSサーバ・・・URL内のサーバを示す部分をアクセスする際にIPアドレスに変換するときに使われるサーバ

3.Webサーバソフト・・・クライアントからの要求にデータを返すソフト。代表的なソフトは「Apache(アパッチ)」

4.TCP、UDP、ポート・・・Webサーバソフトにあるデータの出入り口

##Webプログラムがコンテンツを作る仕組み##

Webプログラムは、ブラウザ上で実行される「クライアントサイド」とWebサーバ上で実行される「サーバサイド」に分かれます

1.サーバサイドのプログラム・・・WebサーバではPHPやPerl、Ruby、Javaなどの各種プログラミング言語で記述したプログラムを実行できます。
プログラムは、クライアントからの要求があったときに実行され、その実行結果が返されます。

2.クライアントサイドのプログラム・・・Webブラウザ上では、JavaScriptなどで記述したプログラムを実行できます。「ボタンがクリックされた」「マウスが動かされた」などのタイミングでアニメーションなどを働かせることができます。クライアントサイドのプログラムは「Ajax」と呼ばれる仕組みを使ってサーバサイドのプログラムと通信することもできます。

3.入力フォーム・・・テキスト入力や、チェックボックス、ラジオボタン、選択肢などの入力欄が提供されており、フォームにつけたボタンをクリックすると、サーバに送信されます。

4.データベース・・・サーバ上で、データを保存する場所として使われ、複雑な条件で抽出して条件に合致したものだけを取り出せます。

[覚えておきたいHTML要素としての入力フォーム例]＊注　タグ省略

・input type="text" / 一行入力

・input type="password" / 入力した文字が隠れる

・input type="checkbox","radio" / 複数選択、単一選択

・select,option~ / プルダウンリスト、リストボックス

・textarea / 複数行のテキスト入力

・input type="file" / フィアル送信

・input type="botton" / 汎用的なボタン

---

といった感じになります。さらーーっとでしたが基本的な目印となりますので、理解しておきましょう。

では、また次の航海で。