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

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

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

のように書かれている。
HTML

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

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

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

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

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

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

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

※ 以下、タグの内側と言った場合、「...」の部分のことを指すとする。
実例

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

のような手順になる。
実例

では、詳細を説明する。
実例

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

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

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

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

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

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

ファイル例
実例

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

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

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

なお、<html> </html>のタグ内では、直接入力のスペースは、普通は、無視される。
範囲外: 字下げ と、html内でのスペースのあつかい

(ながいスペースは無視される)
範囲外: 字下げ と、html内でのスペースのあつかい

そのため、たとえば、上記のように書いても、webブラウザでみたときに表示されるのは
範囲外: 字下げ と、html内でのスペースのあつかい

(↓ 表示結果の例)
範囲外: 字下げ と、html内でのスペースのあつかい

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

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

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

この表示結果は、
範囲外: 字下げ と、html内でのスペースのあつかい

です。上記の表示結果のように、ひとつながりに、つながった状態で表示されます。
範囲外: 字下げ と、html内でのスペースのあつかい

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

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

のような字数にしています。べつに、3文字ずつでなくとも、4文字ずつでも、かまいません。
範囲外: 字下げ と、html内でのスペースのあつかい

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

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

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

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

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

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

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

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

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

学級限定・学校内限定のプライベートなサイトを作りたい場合、2020年以降なら、たとえば Google サイトというサービスがあるので、そこで限定的に仲間内だけで公開する事例も日本の中学校では出てきている。グーグル検索などでは出てこないようにさせて、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メールと言う技術がある。
※ 範囲外?： HTMLメール

ただし、これはウイルス的に悪用されることも多い。
※ 範囲外?： HTMLメール

あるいは、悪意のあるスクリプトを埋め込んでいるかもしれません。
※ 範囲外?： HTMLメール

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

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

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

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

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

gooメールとか、プロバイダの提供する biglobeメール(NEC系) とか OCNメール(NTT系)だと、メールアプリの設定コマンドでテキストメールに変更できます。
※ 範囲外?： HTMLメール

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

なお、テキストメールでも、画像を添付ファイル(てんぷファイル)によって送ることができます。
※ 範囲外?： HTMLメール

ただし容量制限があるので、あまり大きな容量の画像は送れません。大きな画像で送れない場合は、送れるように、画像を縮小するなどする場合もあります。
※ 範囲外?： HTMLメール

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

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

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

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

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

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

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