ウェブのしくみ(1/5)~ハイパーテキスト編~
2016/12/15
ウェブのしくみ
~ハイパーテキスト編~
※ この説明に出てくるアドレスは全て架空のものです。実在するアドレスとは一切関係ありません。
ウェブは通信サービス
通信は、
(1) データ
(2) 道
(3) 相手
(4) 共通認識
の4つに整理して考えられました。
ウェブでは、それぞれ、以下のしくみが使われています。
(1) データ・・・・・・・・・・ HTML + HTTP
(2) 道・・・ TCP/IP →インターネットのしくみ
(3) 相手・・・・・・・・・・・・・・・・ URL
(4) 共通認識・・・・・・・・・ HTTP + HTML
TCP/IPについては、インターネットのしくみ で学んできました。
ここでは、HTMLとURLについて見ていきます。
HTTPに関しては、~HTTP編~ で学んでいきます。
ウェブの原形ができるまで
ウェブができる前、調べものは主に「本」で調べていました。
本で調べ物をする場合、目次や索引で、書かれているページを探します。
その後、パソコンが普及して、文書も電子ファイルになりました。
しかし、本物の紙と違って、たくさんのページをめくっていくのは大変!
そこで、
クリックするだけで、そのページへジャンプできる機能
がつくられました。
この機能を ハイパーリンク(Hyperlink)と言います。
(略して リンク とも言います)
Hyper=超スゲェ、link=つながり のような意味
ハイパーリンクとハイパーテキスト
次に、
ハイパーリンクで効率よく調べものができる文書ファイル
(例: 先ほどの「○○のしくみ」)をネットで公開しました。
しかし、この「○○のしくみ」を見ていくと、
その中で「●●」という、わからない言葉が出てきました。
そこで、「●●」について書かれた別の文書を探します。
こうして、今度は「●●とは」の文書を見ていきます・・・
本で調べものをする場合は、こういうやり方しかできません。
電子ファイルでは、もっといいやり方ができないものでしょうか?
そう、他のファイルにも、同じファイル内と同様に
ハイパーリンクでジャンプできれば、もっと便利になるはずです。
ということで、できました!
このように、ハイパーリンクで他の文書とつながった文書ファイルのことを
ハイパーテキスト(Hypertext)と言います。
Hyper=超スゲェ、Text=本 のような意味
ハイパーリンクの入口と出口
ハイパーリンクをつくるには、その 入口 と 出口 を決めておく必要があります。
入口 ・・・ ハイパーリンクをつけておく範囲(クリックすべき場所)
出口 ・・・ ハイパーリンクでジャンプする先(次に表示されるもの)
ウェブでは、この入口の指定に、HTML が主に使われています。
ハイパーリンクの入口
HTMLとは
HTML: Hyper Text Markup Language
ハイパーテキスト 書き込み用の 言葉
HTMLは、
芝居で使われる「台本」のように、
「言葉の意味を読み取って表現される部分」と
「言葉が文字通りそのまま表現される部分」の
両方が書かれた文書です。
上の例では、HTMLで <リンク 柴の説明へ>柴</リンク> と書かれた部分が、
ハイパーリンクの入口になっています。
なお、この例ではわかりやすくするために、正しいHTMLではなく日本語で書いています。
本当のHTMLでは、<a href=”shiba.html”>柴</a> のように書きます。
また、上の例を見てわかるように、HTMLはハイパーリンクのためだけでなく、
ウェブページ全体で使われ、様々な機能・デザインのもとになっています。
HTMLでできることの例
HTMLでは、例えば以下のようなことが可能です。
しくみかんでは、HTMLの詳しい使い方は省略します。詳しい使い方は「HTML」で検索してください。
ハイパーリンクの出口
入口のHTMLタグ内で出口の場所を指定する
ハイパーリンクの出口をどこにするかという指定も、
入口となるHTMLのタグ内に書いておく必要があります。
↓入口となるHTMLのイメージ↓
<ハイパーリンク = “ 出 口 ” へ> 入 口 </ハイパーリンク>
↓入口となるHTMLの実例↓
<a href=”#GOAL”> 入 口 </a>
実際に表示されるハイパーリンク
↓↓
GOAL
出 口
同じコンピューター内での出口指定
出口が、入口と同じフォルダ内にある場合
※フォルダ=ファイルを整理するための箱のこと。ディレクトリとも言います。
同じフォルダ内にあるファイルであれば、
よけいな情報はいりません。ファイル名だけで指定します。
例)「麺類」フォルダ内で、入口が「そば」で、出口が「うどん」の場合:
ハイパーリンクの出口=” うどん “
と書くだけで指定できます。
(フォルダ名「麺類」すら不要)
ファイルの中で、さらに特別な位置にジャンプも
HTMLでその位置に名前を付けておき、#に続けてその名前で出口指定します。
例)そばファイル(入口と同じファイル)内の わさび を指定
# わさび
例)うどんファイル(入口と別のファイル)内の ねぎ を指定
うどん # ねぎ
出口が、入口と同じフォルダ内にない場合
出口が入口と同じフォルダ内にない場合、
入口のフォルダから出ていかないと、出口は見えません。
この場合の出口の指定には、 相対パス と 絶対パス があります。
※パス(path)は、「道すじ」と言う意味です。
相対パスは 入口 を スタート地点 として たどっていく指定方法で、どこに入口があるかで異なります。
絶対パスはルートフォルダ( / )をスタート地点とした指定方法で、どこに入口があっても同じです。
相対パスでも絶対パスでも、/ がフォルダを表し、 / の前にフォルダ名をつけます。
唯一、フォルダ名が省略されるのがルートフォルダで、絶対パスの先頭の / が、それになります。
※ ルート(root) = 根っこ、ルーツ。「ルート」は本当のフォルダ名ではなく、組織の「トップ」のように代名詞的なもの。
相対パスでは、一つ上のフォルダを ../ で表します。
※一つ上のフォルダは1個しかないので、フォルダ名の指定が不要です。
もし、フォルダ名やファイル名の中に / の記号が入っていたら?
フォルダ名の後ろに / をつけるので、
フォルダ名やファイル名の中に / の記号を使ってしまうと、
どこまでがフォルダ名なのか、区別ができなくなってしまいます。
例: 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つだけということになります。
URL
このように統一されたファイルの場所の表し方をもとに、
ウェブだけでなく、広く様々な目的に応用できるよう改良された、
http://1.1.5.8/和食/麺類/うどん
のような表し方を URL と言います。
URL = Uniform Resource Locator
統一された 必要な物の 場所表示
先頭につけられた http: は「HTTPというプロトコルで通信するよ」という意味です。
※HTTPについては、~HTTP編~で説明します。
しかし、コンピューターの指定は、数字が並んだIPアドレスではわかりにくいものです。
そこで、サーバーのアドレスには通常、ドメイン名 が使われるようになりました。
http://food.jp/和食/麺類/うどん
※ドメイン名について、詳しくはインターネットのしくみ(4/4)~ ドメイン編 ~を参照してください。
まとめ
ウェブのしくみをまとめると、以下のようになります。
文書の一部をクリックすると、別の場所にジャンプする機能をハイパーリンクと言います。
ハイパーリンクにより、簡単に他の文書につながる文書をハイパーテキストと言います。
ハイパーテキストとしてウェブで使われているのが、HTMLファイルです。
HTMLはタグで文書内に意味づけをします。ブラウザはその意味に従って表示します。
だからウェブは…