Wikibooks

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

< 高等学校情報‎ | 社会と情報
※ このページは、高校の『情報』教科のほか、『中学校技術』 の参考ページとも共有しています。

HTML 編集

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

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

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

のように書かれている。

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

たとえば、<html>はhtml要素の開始タグであるし、</html>はhtml要素の終了タグである。


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


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

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

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

注意事項 編集

HTMLの文法は、時代とともに変更される。教科書に掲載されているHTMLの文法が、最新でないことがある。このため、大人が仕事でHTMLを使うために勉強する場合にはインターネットのサイトで調べながら文法を覚えることをおすすめする。廃止されてしまったタグの機能を使用するためには、たとえばウェブページのデザイン面を指定するCSS(英: Cascading Style Sheet、シーエスエス) が必要な場合がある。しかし、範囲外であるため用語を紹介するに留める。

参考 編集

<html>...</html>
タグの内側がHTML文書である事を示している。
<head>...</head>
タグの内側が、ページについての指定にかんする情報であることを示している。
<title>...</title>
タグの内側がページのタイトルであることを示している。
<p>...</p>
段落であることを示す。
<a href="◯◯">...</a>
「◯◯」の部分にはURLが書かれる。「...」の部分をクリックすると、「◯◯」のページに移動するハイパーリンクを作成する。
<h1>...</h1>
<h2>...</h2>
<h3>...</h3>
<h4>...</h4>
<h5>...</h5>
<h6>...</h6>
見出しであることを示す。

実例 編集

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


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

  1. まず、「メモ帳」アプリをもちいて（正確には「テキストエディタ」と呼ばれる種類のアプリをつかって）、htmlファイルの内容（上記のようにタグを使用する）を記述する。けっして、Wordなどのワープロソフトは、使用しない事 （エラーの原因になるので）。
  2. htmlファイルとして保存させるために、拡張子として、ファイル名の最後に「.html」をつけて、保存する。この際、けっして、「.html.txt」のようにファイル名の後ろに余計な「.txt」がつかないよう、気をつけること。パソコンの設定を、拡張子の表示を消す設定にしている場合、「.html.txt」のファイルでも末尾の .txt の表示だけが消されて「.html」と表示されてしまう場合もある。（だから、たとえばファイルのアイコン画像などを見て、区別するなどしよう。）
  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>

そのため、たとえば、上記のように書いても、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ファイルでは、スペースの字数は、直接入力で3文字ごとにしています。 つまり、スペースの字数は、下記のように、 

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

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


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

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

範囲外の情報 編集

Webページの書き込みとHTMLの関係 編集

ネット上のSNSやウェブ掲示板などのwebページに書き込みをする際、あまりHTMLを書くことはない。なぜならば、Twitter、LINE、5chなどでは、ユーザーが入力した文章はHTMLとして解釈されず、特別な意味を持たないプレーンテキストと解釈されるためである。利用しているサービスにもよるが、大抵のサービスはHTMLの利用を禁止しているか、特定のタグのみを許可している、あるいはHTMLでなく他の書式に従った文章を受け付ける。

その他色々 編集

実はHTMLのコードを記述しなくても、HTMLファイルを作成できるソフトウェアが既にいくつも公表されてあり、そのような種類のソフトウェアのことを「Webオーサリングツール」という[1][2]。


 
SeaMonkeyによるHTML作成画面の例

無料ソフトでは、SeaMonkey（シーモンキー）という無料ブラウザ（オープンソースソフト）に、無料のwebオーサリングツールも付属してくる。

欠点としてWebオーサリングツールでは、けっして自動では複数のタグどうしの構造を整理してくれない。そのため、画面の見た目は意図したとおりでも、ソースファイルでは複雑なソースが出力されている場合がある。編集画面に切り替えで、HTMLソースを見ながら編集する画面もあるので、ある程度 慣れてきたら、ソースを見ながら編集したほうが、今後の維持管理（メンテナンス）をしやすいソースを書けるので、できれば将来的にはソースを見ながらHTMLを書けるようになるのを目指すのがよいだろう。

参考文献 編集

  1. ^ 文部科学省、教員研修用テキスト、高等学校情報科「情報Ⅱ」教員研修用教材　第2章 - 20200609-mxt_jogai01-000007843_003.pdf、『コミュニケーションとコンテンツ』、P.89
  2. ^ 参考文献の親ページ 『高等学校情報科「情報Ⅱ」教員研修用教材(本編)：文部科学省』 2021年1月16日に閲覧して確認
"https://ja.wikibooks.org/w/index.php?title=高等学校情報/社会と情報/ウェブページの仕組み&oldid=221969" より作成