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

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

HTML

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

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

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

のように書かれている。

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

<html>はhtml要素の「開始タグ」と言い、</html>はhtml要素の「終了タグ」と言い、このように「開始タグ」や「終了タグ」と言った表現をすることもある（※　出典は、数研出版「情報I」巻末資料。ほか、実教出版の副教材、）。

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

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

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

一般にプログラミング的な入力作業では、テキスト（文章）でない箇所の空白はすべていわゆる半角文字あるいはタブ文字である。

注意事項

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>

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

まず、「メモ帳」アプリをもちいて（正確には「テキストエディタ」と呼ばれる種類のアプリをつかって）、htmlファイルの内容（上記のようにタグを使用する）を記述する。けっして、Wordなどのワープロソフトは、使用しない事（エラーの原因になるので）。
htmlファイルとして保存させるために、拡張子として、ファイル名の最後に「.html」をつけて、保存する。この際、けっして、「.html.txt」のようにファイル名の後ろに余計な「.txt」がつかないよう、気をつけること。パソコンの設定を、拡張子の表示を消す設定にしている場合、「.html.txt」のファイルでも末尾の .txt の表示だけが消されて「.html」と表示されてしまう場合もある。（だから、たとえばファイルのアイコン画像などを見て、区別するなどしよう。）
こうして作成した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（現： X（エックス））、LINE、匿名掲示板5ch などでは、ユーザーが入力した文章はHTMLとして解釈されず、特別な意味を持たないプレーンテキストと解釈されるためである。利用しているサービスにもよるが、大抵のサービスはHTMLの利用を禁止しているか、特定のタグのみを許可している、あるいはHTMLでなく他の書式に従った文章を受け付ける。

その他色々

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

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

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

（※範囲外）どこでサイト公開するか

HTMLでwebサイトを作る場合、家庭などでプロバイダとインターネット契約した場合、たいていはブログ公開サービスなども付いてきたりするので、そこでHTML編集して公開すればいい（ただし、2020年以降になってブログサーバ事業から撤退する会社もありそうなので、不透明）。

自宅でサイトを作る場合も、学校でサイトを作る場合も、どちらにせよ、いちいち自宅サーバーとかを買う必要は無い。レンタルサーバーという、サーバー貸し出しのサービスも存在している。

学校の場合、サイト公開の一つの手段としては、そのまま学校の持っているサーバー（学内にあるにせよ、レンタルサーバーにせよ）で公開してしまう方法もあるが、しかし、いちいち外部とのセキュリティやら生徒などのプライバシーを保護など考えるのが面倒である。

学級限定・学校内限定のプライベートなサイトを作りたい場合、2020年以降なら、たとえば Google サイトというサービスがあるので、そこで限定的に仲間内だけで公開する事例も日本の中学校では出てきている^[3]^[4]。グーグル検索などでは出てこないようにさせて、URLを知っていないと訪問できないようなサイトもクラウドで簡単に作れる。

これなら、セキュリティ問題などはGoogle などのクラウドサービス提供者に任せられるので、授業ではHTMLの実習に集中できる。ただし、あくまで学生レベルの練習用のサイトを作る場合の話である。

ただし、実際にgoogleサイトを試したところ、google側が公開時などに勝手にコードのタグ部分などを書き替えてしまい、入力したコードそのままにならない。

しかし、程度の差はあれ、他サイトのブログサービスなどを使った場合でも、ある程度のコードの自動書き換えをされる可能性はあります。じっさい、NTT系のgooブログで実験したところ、ブログ公開時にHTMLのタグ部分などが書き換わっていました。

ほか、Googleサイトがタグを書き換えるということはつまり、jQueryなどの公開ライブラリを使おうとしても、うまく動作しないことを意味する。GoogleサイトでJavaScriptを安定的に動作させたい場合、事実上、ライブラリ無し（あるいはフレームワーク無しの）の素のJavascriptで埋め込みコードを書く必要があります。

jQueryについて知らなければ、気にしなくて構いません。

gooブログに至っては、そもそもJavaScript自体の埋め込みを受け付けていないようです。Gooブログの編集画面のバーでHTML編集モードに切り替えても、勝手にサーバー側がsrcタグを消します。必然的に、gooブログではjQueryなどのライブラリを使えません。

さて、Google Classroom 以前の従来だと、検索よけをするサイトを作るのは、なかなか技術的に難しかった。しかし現代では、クラウドによって、わざわざ自前で検索よけは作る必要がなくなっている。

もちろん、クラウドで限定公開するにせよ、念のため、プライバシーなど余計な情報は乗っけないのが当然のマナーであろう。たとえば外部にURLが漏れた場合など、外部の人間でもサイトを閲覧できてしまう可能性がある。

あるいは、単純に公開の設定をミスして、外部に公開してしまう可能性もありうる。

2015年くらいまで、かつてサーバーの管理にはセキュリティなどに高度で専門的な知識が必要になるので、プロバイダまたはレンタルサーバー業者の貸し出すサーバーを使うのが一般的ではあった。2020年以降の現代では、さらに選択肢としてクラウド業者が加わっている。

なお、gooブログとかGOogleサイトのように、利用者がHTMLを書かなくてもマウス操作やテキスト本文の入力くらいでwebページ作成・管理・更新などをできるサーバーシステムのことを「CMS」（コンテンツ管理システム、contents Management System）という。（※ 第一学習社、実教出版がCMSを紹介。）

CMSによって、スマートフォンでもwebページの更新をするのが簡単である、という需要もある（※ 実教出版の見解）。

※ 範囲外?： HTMLメール

メールの一種で、HTMLを使ってきれいな表示をできるHTMLメールと言う技術がある。

ただし、これはウイルス的に悪用されることも多い。

あるいは、悪意のあるスクリプトを埋め込んでいるかもしれません。

また、webビーコンと言う画像に埋め込む機能によって、メールを開封したかどうかを知られてしまいます。

なので、会社などでは、会社のパソコンをHTMLメールの閲覧を禁止している設定にしている場合もあり、テキストメールしか閲覧を許可していない場合もあります。

テキストメールと言うのは、例えるならWindows『メモ帳』アプリで開いた文章と同じで、要するに、フォントサイズの設定も無ければ色の設定もなければ、画像の挿入もない、本当に文字列だけしか表示できないメールです。

一般に gooメールとか、プロバイダの提供する biglobeメール（NEC系）とか OCNメール（NTT系）とかには、メール閲覧のモードが2種類あり、HTMLメールのモードと、テキストメールのモードの2種類があります。

ただし、Googleの Gメールは、基本的にHTMLメールだけを使用するようになっています。

gooメールとか、プロバイダの提供する biglobeメール（NEC系）とか OCNメール（NTT系）だと、メールアプリの設定コマンドでテキストメールに変更できます。

ただし、メール閲覧モードをテキストメールに設定しても、閲覧時のハイパーリンクは有効化される設定にしているメール会社もあります。ハイパーリンクとは、webアドレスをクリックするとwebブラウザでリンク先に移動できる機能です（読者がよくネットで使っている、いつものあの機能です）。なので、信用できないハイパーリンクはクリックしないようにしましょう。

なお、テキストメールでも、画像を添付ファイル（てんぷファイル）によって送ることができます。

ただし容量制限があるので、あまり大きな容量の画像は送れません。大きな画像で送れない場合は、送れるように、画像を縮小するなどする場合もあります。

HTMLメールを悪用したウイルスという歴史的な経緯があるので、ビジネスマンなどが仕事のメールを送る場合、基本的なマナーとして、なるべくメール本体には画像は組み込まず、添付メールのほうで画像を送る、というのがマナーとなっていました。（2020年まで）

ただし、Gメールなどによって、今後はどうなるかは分かりません。さすがにGoogleさんは馬鹿ではないので、webビーコンなどの悪用は想定済みで対策済みだろうとは思いますが。

その他

ハイパーリンクなどの用語も検定教科書では紹介。

日本文教出版いわく、ハイパーリンクは「単にリンクとも呼ばれる」とのこと。

本ページでは中学でハイパーリンクを習っているだろうから省略。

厳密に考えると、ハイパーリンクとハイパーテキストの違いとか難しいが、そこまで問われれないだろう。

CSS（カスケーディングスタイルシート）も検定教科書で紹介。　※実教、第一、日本文教、

参考文献

^ 文部科学省、教員研修用テキスト、高等学校情報科「情報Ⅱ」教員研修用教材　第2章 - 20200609-mxt_jogai01-000007843_003.pdf、『コミュニケーションとコンテンツ』、P.89
^ 参考文献の親ページ『高等学校情報科「情報Ⅱ」教員研修用教材(本編)：文部科学省』 2021年1月16日に閲覧して確認
^ 平井聡一郎著『これならできる！学校DXハンドブック小中高特別支援学校のデジタル化を推進する「授業以外のIT活用事例」』、翔泳社、2022年 3月16日初版第1刷発行、P62
^ 渡辺光輝著『逆引きICT活用授業ハンドブック』、東洋館出版社、2023年5月30日初版第1刷発行、P107

[1] 文部科学省、教員研修用テキスト、高等学校情報科「情報Ⅱ」教員研修用教材　第2章 - 20200609-mxt_jogai01-000007843_003.pdf、『コミュニケーションとコンテンツ』、P.89

[2] 参考文献の親ページ『高等学校情報科「情報Ⅱ」教員研修用教材(本編)：文部科学省』 2021年1月16日に閲覧して確認

[3] 平井聡一郎著『これならできる！学校DXハンドブック小中高特別支援学校のデジタル化を推進する「授業以外のIT活用事例」』、翔泳社、2022年 3月16日初版第1刷発行、P62

[4] 渡辺光輝著『逆引きICT活用授業ハンドブック』、東洋館出版社、2023年5月30日初版第1刷発行、P107

[1]

[2]

[3]

[4]