Webの中に存在するシステム、URLやHTMLとは？
前回の続きで、ハイパーテキストやハイパーリンク、URL、HTTP、HTMLなどのWeb内に存在するシステムについて説明していきます。内容の理解に不安な部分がありますので、間違っている場合はお問い合わせフォームに問合せ願います。
今回の記事目的
ハイパーテキストやHTML、URL、HTTP、などの専門用語を理解する
- ハイパーテキストとは （HTMLも含めて）
- HTML（HyperText Markup Language)
- CSS（Cascading Style Sheets)
- ブラウザとは
- URL(Uniform Resource Locator)
- まとめ（前回記事含め）
- 最後に
ハイパーテキストとは （HTMLも含めて）
ハイパーテキストとはWebページのファイル名を意味する「.html」の「ht」の部分をさします。（今見ている記事もハイパーテキストです）ハイパーテキストとは直訳すると「テキストを超えたテキスト、すごい文」とされ、普通の文の機能に＋αが加わった物のことを言います。じゃあ、何が文に加えられたのか？それが「ハイパーリンク」機能です。単に「リンク」とも言われます。
ハイパーリンクとは
例えば、検索者が美味しいパンが食べたいと思い、図１の「パン」という言葉を検索したとします。「パン」という検索結果から他の関連記事を表示する機能をハイパーリンクと呼びます。多分、図１だけではピンとこない方もいると思いますので、身近にある物で説明します。
昨日私が投稿した記事の内容になるのですが、赤丸で囲った部分が「リンク」です。関連する文書を呼び出す機能のことです。
HTML（HyperText Markup Language)
ウェブページを作成するために開発された言語です。大まかな役割は、コンピューターがハイパーテキスト内の位置情報を認識（特定）できるように情報構造を伝えることがHTMLの役割です。
HTMLとは
HyperText Markup Language直訳すると【ハイパーテキストに目印をつける言語】です。言葉だけではなんのことやら？という感じなので下記の図を使用して説明します。
例えば図３の本文位置に記事を書きたいとしましょう。HTMLは、直訳の通り「ハイパーテキスト（特定の位置）に目印をつける言語」なので、HTMLを駆使すると図３の本文位置に文章の記載が出来るようになります。その他、構造部分も構成していて、見出しなどの設定も担っています。
CSS（Cascading Style Sheets)
ウェブページのスタイリングを指定するための言語。大まかな役割は、HTMLで表示された言語のデザインを行います。
CSSとは
サイズ・レイアウトなどの調節を行い、見栄えを整える役割を担います。下記、図４の赤のアンダーラインや緑枠のボックスデザインもCSSを使用して記載しています。
本来であれば、Webは図５のHTMLとCSSが混合した文字でしか表示されません。このプログラミング言語を綺麗に表示させているものこそが「ブラウザ」です。
ブラウザとは
ブラウザにはGoogle chromeやFirefox、Safari、Internet Explorer、Microsoft Edgeと様々なブラウザーが存在します。このブラウザが図５の言語を処理して、Webサイトを表示・閲覧できるようにしています。
ちなみにWeb日本国内のWebブラウザシェアランキングです。
こちらが世界のWebブラウザシェアランキングです。
ブラウザーのシェア率は日本、世界ともにGoogleが１位を独占しています。
URL(Uniform Resource Locator)
インターネット上のホームページの位置情報を知らせる住所のようなもの。
URLとは
Uniform Resource Locator直訳すると「統一資源位置指定子」だそうです。インターネット上には数えられないほどの情報が存在します。その情報を1つ1つ分類するために付けられたものがURLです。例えば（http://www.......）
HTTPとは
URL内に書かれているhttp(Hypertext Transfer Protocol)直訳すると「ハイパーテキストで移動（転送）する時の約束」です。私たちは携帯やパソコンでホームページ上のデータをやりとりしています。携帯やパソコンと一言で言っても、携帯にはIPhoneとAndroidがあります。また、パソコンではWindowsやMacなどOSの違いも存在します。インターネットを使用するに当たって、機種の違いやOSの違いなどによって通信や閲覧に弊害が起きてしまっては不便です。なので、httpという共通の通信規約を定めることでデータのやり取りに弊害が出ないようにした仕組みがhttpです。
まとめ（前回記事含め）
文ばかりの説明でわかりづらかったですよね？なので、今までの内容を図５の画像を使用し比喩させながら解説し、ザックリ理解出来るように説明していきます。
平地（インターネット）に建つ１軒の家（Web）です。
この景色はカメラ（ブラウザ）を使用して撮影しています。
この家の形は２階建てで煙突が3つあります。（HTML 構造の作成）
外装は白を基調として、黒色の屋根がよく映えます。（CSS 装飾）
この家は○○県○○町にあります。（URL 住所）
本当にザックリなのですが、インターネットやWeb、システムはこの家の画像で全体像をある程度表現することが出来ます。
最後に
最低限の知識理解のために記載しました。上記でも記載していますが、内容の理解に不安な部分があるため、間違いがあればご指摘願います。
私たちがウェブマーケティングを行うに当たって使用しているブラウザー「Google」。世界の約９０％が検索エンジンとして使用しています。今回までの記事はGoogleに到るまでに知っておかなければならない最低限の知識を記載しました。次回の記事はGoogleという企業についてです。Googleがどんな事をしているか知っていますか？私も知らないので調べながら知識共有というところで記載していこうと思います。
注）莫大な量になりそうなので数日後に記載します。
自分のライティング技術がどの程度か客観的に評価をしています。もし、わかりにくいところや文章構成がおかしいと思う点がありましたら、具体的にご指摘願います。
前回内容はこちらです。
