高等学校情報/社会と情報/ウェブページの仕組み

出典: フリー教科書『ウィキブックス(Wikibooks)』
ナビゲーションに移動 検索に移動

HTML[編集]

ウェブページは、HTML(エイチティーエムエル、HyperText Markup Language)という言語で書かれている。

たとえば、 ファイル例をあげれば

<html>
 <head>
  <title>わたしたちの学校</title>
 </head>
<body>
 <h1>わたしたちの学校</h1>
 <p>わたしたちの学校を紹介します。わたしたちの学校は・・・
 </p>
</body>
</html>

のように書かれている。

< > で囲まれた部分1つ1つをタグという。

たとえば、<html>はタグであるし、</html>もタグである。


ウェブブラウザはHTML文書をもとにページの構造を解釈している。そして、その解釈をもとに、ウェブブラウザがページを表示している。


(※ 範囲外: )なお、何らかのウェブサイトを閲覧中に、ウェブブラウザの「ソースを表示する」などの機能をつかうと、表示している最中のページのHTMLを見ることができる。

(※ 範囲外: )なお、タグで はさまれてない 空白の部分(たとえば <title>わたしたちの学校</title>の行の最初の空白 )は、(Windowsでは)半角英数で書く必要がある。

一般にプログラミング的な入力作業では、日本文でない箇所の空白はすべて半角である。

注意事項[編集]

HTMLの文法は、時代とともに変更される場合もある。現代のHTMLの文法も、過去に何度も文法が改訂されて、変更した結果のものである。(また、教科書にあるHTMLの文法が、かならずしも最新のものとは、かぎらない。) 改訂によって古くなったほうのバージョンのHTMLの文法は、いずれ廃止されてゆく可能性がある。

近年、HTMLのバージョンが4から5に上がり、文法の多くが変更した。

なので、中学生・高校生は、HTMLの文法の暗記の必要はなく、タグなどの大まかなイメージをもっておけば、中学高校の段階では充分である。


もし実務でHTMLの知識が必要になった場合は、その時の最新のHTMLの文法を、書籍などで調べればいい。


廃止されてしまったタグの機能を使用するためには、たとえばウェブページのデザイン面を指定する『スタイルシート』の一種である『CSS』(シーエスエス)という名前の機能が必要な場合があるが、しかし中学高校生にこれらの技術の習得は難しいので、用語(『スタイルシート』や『CSS』)を紹介するだけにする。

参考[編集]


<html>...</html>

と書かれたら、「...」の部分がHTML文書である事を示している。


<head>...</head>

と書かれたら、「...」の部分が、ページ全体についての指定にかんする情報であることを示している。


<title>...</title>

と書かれたら、「...」の部分が、ページのタイトルであることを示している。


<p>...</p>

段落であることを示す。


<a href="◯◯">...</a>

「◯◯」の部分にはURLが書かれる。「...」の部分をクリックすると、「◯◯」のページに移動するというハイパーリンクになってる。


<h1>...</h1>

見出しであることを示す。

実例[編集]

(※ 範囲外)
<html>
 <head>
  <title>わたしたちの学校</title>
 </head>
<body>
 <h1>わたしたちの学校</h1>
 <p>わたしたちの学校を紹介します。わたしたちの学校は・・・
 </p>
</body>
</html>


おおまかな作業手順として・・・

  1. まず、「メモ帳」アプリをもちいて(正確には「テキストエディタ」と呼ばれる種類のアプリをつかって)、htmlファイルの内容(上記のようにタグを使用する)を記述する。けっして、Wordなどのワープロソフトは、使用しない事 (エラーの原因になるので)。
  2. htmlファイルとして保存させるために、拡張子として、ファイル名の最後に「.html」をつけて、保存する。この際、けっして、「.html.txt」のようにファイル名の後ろに余計な「.txt」がつかないよう、気をつけること。
  3. こうして作成したhtmlファイルを、マウスの右クリックなどで実行して、htmlファイルの実行結果を確認する。なお、htmlファイルを実行したとき、普通のOSの設定なら、webブラウザが自動的に起動する。

のような手順になる。


では、詳細を説明する。

上記のファイル例をOS付属の「メモ帳」ソフトなどにコピーして(手入力してもよい。タグ部分(<head>など)の入力モードは「直接入力」モードで入力すること。)、そのコピーしたファイルをWebブラウザで閲覧すると、ファイル例をwebページで表示した場合のようすを見ることができる。

けっして、「Word」などのワープロソフトでは、html制作用のファイルの入力・編集をしないでください。なぜなら、文字化け(もじばけ)の原因になり、そのせいで、エラー(不具合、プログラムの故障)の原因になります。一般に、プログラムを作る場合は、けっしてワープロソフトでは、作業しないでください。正しい手順でプログラムを作る場合は、かならず「メモ帳」などで、プログラムを制作してください。


さて、(使用しているOSによっては、メモ帳ソフトでのファイルの保存時に、ファイル名の末尾に「.html」をつける必要があるブラウザもある。「.」はドット記号である。日本語キーボードでは、右下あたりの「る」の文字に「.」がある場合が多い。スペースキーの右あたりの「Alt」の上に「る」があるだろう。)

この際、けっして、「.html.txt」のようにファイル名の後ろに余計な「.txt」がつかないよう、気をつけること。最後に「.txt」がついてしまうと、htmlファイルではなくテキストファイルとして認識してしまい、そのため、ファイルを実行してもブラウザが起動しない。(最後の拡張子が「.txt」だと、windowsの場合、「メモ帳」などのテキスト編集用のアプリケーションが起動してしまうだろう。)

さて、実際に上記ファイルどおりのhtmlファイルをブラウザで見てみると、文字化け(もじばけ)が起こることがある。なぜなら、上記のファイル例は日本語を使っているため、文字コードの関係により、ブラウザで表示したときに文字化け(もじばけ)が起こることがある。

もし文字化けが起きる場合、のように、<meta charset="UTF-8">タグで文字コードを指定すると、直る場合があるので、下記のようなファイル例になる。

ファイル例

<html>
 <head>
  <meta charset="UTF-8">
  <title>わたしたちの学校</title>
 </head>
<body>
 <h1>わたしたちの学校</h1>
 <p>わたしたちの学校を紹介します。わたしたちの学校は・・・
 </p>
</body>
</html>

なお、<meta charset="UTF-8">には終わりのタグ(</○○>の部分)が無いが、これはけっして間違いでなく、<meta charset="UTF-8">タグはそういう仕様のタグである。



もし、自分でhtmlファイルを書く場合には、タグの文字入力は、直接入力モードで書くこと。それ以外の入力モードでhtmlを書くと、まちがった表示になる。

なお、各行の冒頭の空白の部分には、直接入力モードで「スペース」を入れている。直接入力モードで、キーボードの下のほうにあるスペースキーを、1回、押すと1文字ぶんの空白が入る。


範囲外: 字下げ と、html内でのスペースのあつかい[編集]

スペースのあつかい[編集]

なお、<html> </html>のタグ内では、直接入力のスペースは、普通は、無視される。

(ながいスペースは無視される)

<html>
  <meta charset="UTF-8">
<body>
 <p>わたし      たちの学校を紹

介します。わ た し たち の学校は・・・
 </p>
</body>
</html>

(上記のコードでは、h1タグを除外してある。なぜなら、wikiのシステムでは、h1〜h6のタグが、wikiのタグと共有されてしまっているので、実行結果例を、wiki内で正しく表示できないので。)


そのため、たとえば、上記のように書いても、webブラウザでみたときに表示されるのは

(↓ 表示結果の例)

わたし たちの学校を紹 介します。わ た し たち の学校は・・・ 


というふうに、改行が無視されたり(「紹」と「介」のあいだの改行が無視され、スペースに置き換わってる)、長いスペースが無視されたりして、つながった状態で表示されたりします。


上記の話は、あまり重要ではないので、分からなかったら、そのまま、次の節を読んでください。 次の、字下げ(じさげ)についての節のほうが、すっと重要です。


字下げ(じさげ) について[編集]

htmlには、前節でも説明したように、スペースをなるべく無視したりする仕組みがあるため、htmlを書くときに、次のように、各行の冒頭に適切なスペースを入れることで、見やすくすることができます。このようにスペースを入れても、webブラウザでの表示結果がズレたりしないのが、普通です。

<html>
   <head>
      <meta charset="UTF-8">
      <title>わたしたちの学校</title>
   </head>

   <body>
      <p>わたしたちの学校を紹介します。わたしたちの学校は・・・</p>
   </body>
</html>

この表示結果は、

わたしたちの学校を紹介します。わたしたちの学校は・・・

です。上記の表示結果のように、ひとつながりに、つながった状態で表示されます。


なお、上記のhtmlファイルでは、スペースの字数は、直接入力で3文字ごとにしています。(一般的には2文字または4文字ですが、本wikiでは中立的な理由から3文字にしました。)

上記のhtmlファイルのように、直接入力モードのスペースを入れることで、ファイルの構造を見やすくする手法を一般に、「字下げ」(じさげ)といいます。「字下げ」のことを英語では、インデント(indentation)といいます。

字下げをした場合、ねんのため、実際にwebブラウザで表示を目で見てチェックしてみて、文字がズレてないか、などを確認しましょう。


さて、上記のhtmlファイルでは、スペースの字数は、直接入力で3文字ごとにしています。 つまり、スペースの字数は、下記のように、

<html>
123<head>
123456<meta charset="UTF-8">
123456<title>わたしたちの学校</title>
123</head>
(以下、省略)

のような字数にしています。べつに、3文字ずつでなくとも、4文字ずつでも、かまいません。

※ 範囲外: webページの書き込みのHTMLなどへの変換[編集]

ネット上のSNSやウェブ掲示板などのwebページに書き込みをする際、いちいちHTMLを書く必要はない。

この理由は、webサイト側が、利用者の書き込みを、自動的にHTMLなどへと変換するプログラムを実行しているからである。

むしろ、SNSや掲示板に「<h1>わたしたちの学校</h1>」とか投稿しても、無効化され、文字が大きくならずに、「<h1>」や「</h1>」などの文字がそのまま表示される場合も多い。

つまり、サイト運営者は、投稿者からのHTMLタグを無効化しようとしているのである。

なので、SNSや掲示板への投稿では、あまりHTMLタグをもちいた投稿は、しないほうが良いだろう。


さて、ブログなどを記述する場合だと、プロバイダの用意したブログ制作用ページでブログを制作する場合などでは、そのブログ記述用のwebページでは、文字サイズを変更するためのツールがあったり、文字の色を変更するためのツールなどがあったりして、最初からそういうツールを用意しておいてくれている場合も多い。

こういうブログのツールも、背後では、書き込みやツール操作内容が、HTMLなどに自動的に変換されているわけである。

ブログは、自分用のウェブページだということもあり、普通のブログ製作用ページではHTMLタグを用いることが出来るような設定されている場合も多いだろう。

しかし、せっかくプロバイダ等の提供するブログ制作用ページが、書き込み用のツールを用意している場合には、なるべくwebサイトの提供するツールを用いて記述したほうが、安全である。なぜなら、ツールを用いて記述したほうが、タグの記述ミスなどによる予想外のエラーなども防げるから、よって安全なのである。