しくみかん

しくみかんは、世の中にある様々なもののしくみをわかりやすく説明するサイトです。

ウェブのしくみ(1/5)~ハイパーテキスト編~

      2016/12/15

 

ウェブのしくみ

~ハイパーテキスト編~

 ※ この説明に出てくるアドレスは全て架空のものです。実在するアドレスとは一切関係ありません。

 

ウェブは通信サービス

通信は、

(1) データ

(2) 道

(3) 相手

(4) 共通認識

の4つに整理して考えられました。

 

通信のポイント:「データ」「道」「相手」「共通認識」

 

ウェブでは、それぞれ、以下のしくみが使われています。

(1) データ・・・・・・・・・・ HTML + HTTP

(2) 道・・・ TCP/IP →インターネットのしくみ

(3) 相手・・・・・・・・・・・・・・・・  URL

(4) 共通認識・・・・・・・・・ HTTP + HTML

 

TCP/IPについては、インターネットのしくみ で学んできました。

ここでは、HTMLURLについて見ていきます。

HTTPに関しては、~HTTP編~ で学んでいきます。

 

ウェブの原形ができるまで

 

ウェブができる前、調べものは主に「本」で調べていました。

 

本(○○のしくみと書かれた51ページ目)

 

本で調べ物をする場合、目次や索引で、書かれているページを探します。

 

本の目次(○○のしくみは51ページ)

 

その後、パソコンが普及して、文書も電子ファイルになりました。

 

電子ファイルの目次(○○のしくみは51ページ)

 

しかし、本物の紙と違って、たくさんのページをめくっていくのは大変!

 

そこで、
クリックするだけで、そのページへジャンプできる機能
がつくられました。

 

電子ファイルの目次(○○のしくみがリンクになっている)

 

↓次へ進む

 

 

電子ファイル(○○のしくみと書かれた51ページ目)

 

この機能を ハイパーリンク(Hyperlink)と言います。
(略して リンク とも言います)

Hyper=超スゲェ、link=つながり のような意味

 

ハイパーリンクとハイパーテキスト

次に、
ハイパーリンクで効率よく調べものができる文書ファイル
(例: 先ほどの「○○のしくみ」)をネットで公開しました。

 

電子ファイルの目次(○○のしくみがリンクになっている)

 

↓次へ進む

 

電子ファイル(○○のしくみと書かれた51ページ目)がさっと開けて便利

 

 

しかし、この「○○のしくみ」を見ていくと、
その中で「●●」という、わからない言葉が出てきました。

 

電子ファイル(○○のしくみのページ内に●●という知らない単語が書かれている)

 

 

そこで、「●●」について書かれた別の文書を探します

 

電子ファイル(「●●とは」について書かれている)を見つけた

 

こうして、今度は「●●とは」の文書を見ていきます・・・

 

本で調べものをする場合は、こういうやり方しかできません。

 

電子ファイル(「●●とは」について書かれている)を見て、●●のファイルにもハイパーリンクができたらと思う

 

電子ファイルでは、もっといいやり方ができないものでしょうか?

 

そう、他のファイルにも、同じファイル内と同様に
ハイパーリンクでジャンプできれば、もっと便利になるはずです。

 

ということで、できました!

 

同じファイル内だけじゃなくて他のファイルにもハイパーリンク

 

↓次へ進む

 

他の文書にもハイパーリンクでジャンプした結果

 

このように、ハイパーリンクで他の文書とつながった文書ファイルのことを

ハイパーテキスト(Hypertext)と言います。

Hyper=超スゲェ、Text=本 のような意味

 

ハイパーリンクの入口と出口

ハイパーリンクをつくるには、その 入口 と 出口 を決めておく必要があります。

 

入口 ・・・ ハイパーリンクをつけておく範囲(クリックすべき場所)

出口 ・・・ ハイパーリンクでジャンプする先(次に表示されるもの)

 

ハイパーリンクの入口と出口

 

ウェブでは、この入口の指定に、HTML が主に使われています。

 

ハイパーリンクの入口

HTMLとは

HTML:   Hyper  Text    Markup   Language
ハイパーテキスト 書き込み用の  言葉  

HTMLは、

芝居で使われる「台本」のように、

「言葉の意味を読み取って表現される部分」と

「言葉が文字通りそのまま表現される部分」の

両方が書かれた文書です。

 

HTMLのイメージ(桃太郎の台本の例)

 

HTMLのイメージ(桃太郎の話をHTMLで表現する例)

 

上の例では、HTMLで <リンク 柴の説明へ></リンク> と書かれた部分が、
ハイパーリンクの入口になっています。

なお、この例ではわかりやすくするために、正しいHTMLではなく日本語で書いています。
本当のHTMLでは、<a href=”shiba.html”></a> のように書きます。

 

また、上の例を見てわかるように、HTMLはハイパーリンクのためだけでなく、
ウェブページ全体で使われ、様々な機能・デザインのもとになっています。

 

 

HTMLでできることの例

 

HTMLでは、例えば以下のようなことが可能です。

 

HTMLでできること(他ファイル読み込み・文書装飾・画像配置・プログラム連携・入力フォーム、ボタン配置)

 

しくみかんでは、HTMLの詳しい使い方は省略します。詳しい使い方は「HTML」で検索してください。

 

 

ハイパーリンクの出口

入口のHTMLタグ内で出口の場所を指定する

 

ハイパーリンクの出口をどこにするかという指定も、
入口となるHTMLのタグ内に書いておく必要があります。

 

↓入口となるHTMLのイメージ↓

<ハイパーリンク = “ 出 口 ” へ> 入 口 </ハイパーリンク>

 

↓入口となるHTMLの実例↓

<a href=”#GOAL”> 入 口 </a>

 

実際に表示されるハイパーリンク
↓↓

 入 口 

 

↓次へ進む

 

GOAL

出 口

 

 

同じコンピューター内での出口指定

 

  出口が、入口と同じフォルダ内にある場合  

 

※フォルダ=ファイルを整理するための箱のこと。ディレクトリとも言います。

 

同じフォルダ内にあるファイルであれば、

よけいな情報はいりません。ファイル名だけで指定します。

 

例)「麺類」フォルダ内で、入口が「そば」で、出口が「うどん」の場合:

フォルダ「麺類」の中にあるファイル「そば」から、同じフォルダ「麺類」の中にあるファイル「うどん」を指定

 

ハイパーリンクの出口=” うどん “

と書くだけで指定できます。
(フォルダ名「麺類」すら不要)

 

ファイルの中で、さらに特別な位置にジャンプも

HTMLでその位置に名前を付けておき、#に続けてその名前で出口指定します。

例)そばファイル(入口と同じファイル)内の わさび を指定
# わさび

例)うどんファイル(入口と別のファイル)内の ねぎ を指定
うどん # ねぎ

 

 

  出口が、入口と同じフォルダ内にない場合  

 

出口が入口と同じフォルダ内にない場合、
入口のフォルダから出ていかないと、出口は見えません。

 

この場合の出口の指定には、 相対パス と 絶対パス があります。

※パス(path)は、「道すじ」と言う意味です。

 

相対パスは 入口 を スタート地点 として たどっていく指定方法で、どこに入口があるかで異なります。

絶対パスはルートフォルダ( / )をスタート地点とした指定方法で、どこに入口があっても同じです。

 

相対パス・・・ハイパーリンクの入口をスタート位置としたファイル指定

絶対パス・・・入口によらず、常にルート( / ) をスタート位置としたファイル指定

 

相対パスでも絶対パスでも、/ がフォルダを表し、 / の前にフォルダ名をつけます。

 

唯一、フォルダ名が省略されるのがルートフォルダで、絶対パスの先頭の / が、それになります。
※ ルート(root) = 根っこ、ルーツ。「ルート」は本当のフォルダ名ではなく、組織の「トップ」のように代名詞的なもの。

 

相対パスでは、一つ上のフォルダを ../ で表します。
※一つ上のフォルダは1個しかないので、フォルダ名の指定が不要です。

 

もし、フォルダ名やファイル名の中に / の記号が入っていたら?

フォルダ名の後ろに / をつけるので、
フォルダ名やファイル名の中に / の記号を使ってしまうと、
どこまでがフォルダ名なのか、区別ができなくなってしまいます。

例: 1999/12/31/24時 というパスが表すのはどれ?

1999/12/31/24時 というパス

 

このため、フォルダ名やファイル名に / を使うことはできません

 

別のコンピューターへのファイル指定

 

  別のコンピューターを指定  

 

例えば、IPアドレスが 1.1.5.8 のコンピューターであれば、

//1.1.5.8

のように、// を先頭につけてコンピューターであることを表します。

 

 // が先頭につくものだけがコンピューター ということになるので、
仮に 1.1.5.8 という名前のフォルダやファイルがあったとしても、
それぞれちゃんと区別がつきます。

 

  1.1.5.8  ・・・同じフォルダ内にある 1.1.5.8 というファイル
 ただし、同じフォルダ内に1.1.5.8というフォルダしかない場合は、1.1.5.8というフォルダ

  1.1.5.8/ ・・・・・・・ 1.1.5.8 というフォルダへの相対パス

 /1.1.5.8  ・・・・・・・ 1.1.5.8 というファイルへの絶対パス
 ただし、ルートフォルダ内に1.1.5.8というフォルダしかない場合は、そのフォルダへの絶対パス

 /1.1.5.8/ ・・・・・・・ 1.1.5.8 というフォルダへの絶対パス

//1.1.5.8  ・・・・・ 1.1.5.8 のアドレスにあるコンピューター

 

 

  別のコンピューター内のファイル指定  

 

別のコンピューター内のファイルを指定する場合、

そのコンピューターの指定に続けて、
そのコンピューターの公開用フォルダをルートフォルダとした
絶対パスでファイル指定をします。

 

例)//1.1.5.8/和食/麺類/うどん

 

※ この指定方法では、そのコンピューターの公開用フォルダ外にはアクセスできません。
※ 前提として、公開用フォルダはコンピューターごとに1つだけということになります。

 

ネットワーク(アドレス=1.2.5.8のサーバーがつながる)

 

1.1.5.8/和食/麺類/うどん

 

URL

このように統一されたファイルの場所の表し方をもとに、
ウェブだけでなく、広く様々な目的に応用できるよう改良された、

 

http://1.1.5.8/和食/麺類/うどん

 

のような表し方を URL と言います。

URL = Uniform Resource Locator
統一された  必要な物の  場所表示 

 

先頭につけられた http: は「HTTPというプロトコルで通信するよ」という意味です。

 

※HTTPについては、~HTTP編~で説明します。

 

しかし、コンピューターの指定は、数字が並んだIPアドレスではわかりにくいものです。

そこで、サーバーのアドレスには通常、ドメイン名 が使われるようになりました。

 

http://food.jp/和食/麺類/うどん

 

※ドメイン名について、詳しくはインターネットのしくみ(4/4)~ ドメイン編 ~を参照してください。

 

まとめ

ウェブのしくみをまとめると、以下のようになります。

 

文書の一部をクリックすると、別の場所にジャンプする機能をハイパーリンクと言います。

桃太郎の話のページ(柴にリンク)

↓次へ進む

柴の説明ページ

ハイパーリンクにより、簡単に他の文書につながる文書ハイパーテキストと言います。

 

ハイパーテキストとしてウェブで使われているのが、HTMLファイルです。

柴の説明ページのHTML

HTMLタグで文書内に意味づけをします。ブラウザその意味に従って表示します。

 

だからウェブは…

だからウェブは・・・

 

 - IT ,