この章ではまだ HTML を書きません。Web ページがブラウザに表示されるまでの流れと、HTML と CSS の役割、この教材で使う HTML と CSS のバージョン、HTML を学ぶうえで必要な用語を理解しましょう。
この章で学ぶこと
- Web ページがブラウザに表示されるまでの流れ（リクエストとレスポンス）
- HTML と CSS の役割の違い
- この教材で使う HTML と CSS のバージョン
- タグ・要素・属性という用語
- この教材で使う道具（Eclipse・Tomcat・Chrome）と、ファイルの置き方
1.1 Web ページが表示されるまで
Chrome などの ブラウザ で URL を開くと、Web ページが表示されます。このとき、ブラウザは自分でページを持っているわけではありません。ページのファイルを持っている サーバー に「このページをください」と頼み、送られてきたファイルを画面に表示しています。
ブラウザからサーバーへの頼みごとを リクエスト、サーバーからブラウザへの返事を レスポンス といいます。
図1-1 Web ページが表示されるまでの流れ（この教材の場合）
- Chrome で URL を開くと、Chrome は Tomcat に「このファイルをください」という リクエスト を送る
- Tomcat は、URL で指定されたファイルを読み出す
- Tomcat は、ファイルの中身（HTML）を レスポンス として Chrome に返す
- Chrome は、受け取った HTML を読み取って、ページを画面に表示する
ふだん見ている Web サイトでは、サーバーはインターネットの向こう側にある別のコンピューターです。この教材では、Tomcat というサーバーのソフトウェアを自分のパソコンで動かし、同じパソコンの Chrome から使います。
サーバーの側から考える
これまで皆さんは、ブラウザ（Chrome）を使う側でした。ブラウザを使う側から見ると、リクエストを送って依頼し、その結果をレスポンスとして受け取ります。
この教材では、皆さんはサーバー（Tomcat）の側に立ち、レスポンスとして返す HTML を作ります。サーバーの側から見ると、ブラウザからリクエストを受け取り、その結果をレスポンスとして返します。同じリクエストとレスポンスでも、立場によって「送る・受け取る」の向きが逆になるので、考え方を切り替えてください。
| 立場 | リクエスト | レスポンス |
|---|---|---|
| ブラウザ（Chrome）を使う側（これまで） | 送る | 受け取る |
| サーバー（Tomcat）の側（この教材） | 受け取る | 返す |
URL の読み方
URL は、リクエストの宛先です。この教材では、次のような URL を Chrome で開きます。
http://localhost/html/ch03/hello.html
| 部分 | 意味 |
|---|---|
http:// |
ブラウザとサーバーがやり取りするときの決まり（HTTP）を使う、という意味 |
localhost |
サーバーの場所。localhost は「自分のパソコン」を表す |
/html |
Eclipse で作るプロジェクトの名前（第2章で作る） |
/ch03/hello.html |
プロジェクトの中の、ファイルの場所（ch03 フォルダーの中の hello.html） |
【知識メモ】ポート番号
1台のパソコンの中では、サーバーのソフトウェアが ポート番号 という番号でリクエストを受け付けます。URL では http://localhost:8080/… のように : の後ろに書きますが、80 番だけは書かなくてよい決まりです。この教材では、Tomcat を 80 番で動かすので（第2章で設定します）、URL にポート番号は出てきません。
1.2 HTML とは
HTML（HyperText Markup Language）は、Web ページの内容と構造を書くための言語です。文章の中の「ここは見出し」「ここは段落」「ここは表」という部分を、タグ という印で囲んで表します。
次の HTML を見てください。どう書くかは第3章で学ぶので、ここでは雰囲気をつかめれば十分です。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>はじめての HTML</title>
</head>
<body>
<h1>はじめての HTML</h1>
<p>HTML で書いたページです。</p>
</body>
</html>
<h1> と </h1> で囲んだ部分は「見出し」、<p> と </p> で囲んだ部分は「段落」という意味になります。この HTML を Chrome で開くと、次のように表示されます。
図1-2 上の HTML を Chrome で表示したところ
タグそのものは画面に表示されません。Chrome はタグを読み取り、見出しは大きく太い文字に、段落は普通の文字にして表示します。
【知識メモ】HyperText と Markup
HyperText は、リンクで別の文書へ移動できる文書のことです（リンクは第5章で作ります）。Markup は、文章に印を付けて意味を表すことです。HTML は、計算や条件分岐をするプログラミング言語ではなく、文書の内容と構造を表す言語です。
1.3 HTML と CSS の役割
Web ページを作るときは、HTML と一緒に CSS（Cascading Style Sheets）を使います。役割は次のように分かれています。
| 言語 | 役割 | 書く内容の例 |
|---|---|---|
| HTML | ページの 内容と構造 を表す | ここは見出し、ここは表、ここは入力欄 |
| CSS | ページの 見た目 を決める | 文字の大きさ、色、表の罫線、余白 |
次の2つの画像は、どちらも同じ HTML で書いた社員一覧の表です。図1-3 は HTML だけ、図1-4 は CSS で見た目を整えたものです。
図1-3 HTML だけで表示した社員一覧
図1-4 CSS で見た目を整えた社員一覧
HTML だけでも、表の内容は正しく伝わります。罫線や余白、見出しのマスの背景色は、CSS で付けています。この CSS は第7章で作ります。表と CSS を使った社員一覧の画面は、第10章でもう一度作り、Spring入門 の社員管理アプリにつなげます。
1.4 HTML と CSS のバージョン
HTML のバージョン
HTML は 1990年代の初めに生まれ、HTML 4.01、HTML5 のように、番号の付いた版を重ねてきました。
今の HTML は HTML Living Standard です。主要なブラウザを作っている Apple・Google・Microsoft・Mozilla などが参加する WHATWG という団体が管理しています。Living Standard は、版を区切らずに少しずつ更新し続ける仕様なので、番号が付いていません。
もともとは、W3C という団体が番号付きの版の HTML を管理していました。2019年に両者が1つの仕様にまとめることで合意し、2021年に W3C は WHATWG の HTML Living Standard を正式な HTML の仕様として認めました。今は、HTML の仕様は HTML Living Standard の1つだけです。
第3章で、HTML の1行目に <!DOCTYPE html> と書きます。ここにバージョンの番号が無いのは、HTML の仕様が1つだけで、番号で区別する必要がないためです。
【知識メモ】「HTML5」という呼び方
書籍や求人などでは、今でも「HTML5」という呼び方をよく見かけます。多くの場合、今の HTML（HTML Living Standard）のことを指しています。
CSS のバージョン
この教材で使う CSS は、一般に 「CSS3」 と呼ばれるものです。CSS3 は正式な版の名前ではなく、CSS 2.1 より後に、機能ごとに追加・更新されてきた CSS をまとめた呼び名です。CSS では、どのバージョンを使うかを書く必要はありません。
| 今の仕様 | よく使われる呼び名 | |
|---|---|---|
| HTML | HTML Living Standard | HTML5 |
| CSS | 機能ごとの仕様（CSS 2.1 より後に追加・更新されたもの） | CSS3 |
Chrome は、これらの最新の仕様に沿ってページを表示します。最新版の Chrome を使っていれば、この教材で使うタグや CSS はすべて正しく表示されます。
1.5 タグ・要素・属性
HTML を学ぶうえで、まず覚えておきたい用語が タグ・要素・属性 の3つです。
図1-5 タグ・要素・属性
| 用語 | 意味 | 例 |
|---|---|---|
| タグ |
< と > で囲んだ印。意味を表す部分を、開始タグ と 終了タグ ではさむ。終了タグには、名前の前に / が付く |
<p>、</p>
|
| 要素 | 開始タグから終了タグまでの全体。開始タグと終了タグの間にあるものを、要素の 内容 という | <p>HTML で書いたページです。</p> |
| 属性 | 開始タグの中に書く、要素についての追加の情報。属性名="値" の形で書く |
href="ch02.html" |
図1-5 の下の例は、リンクを作る <a> タグです。href 属性で、リンク先のファイル（ch02.html）を指定しています。画面には内容の「第2章へ」だけが表示され、それをクリックすると ch02.html に移動します。
要素の名前は、タグの名前で呼びます。たとえば、<p> タグで囲んだ要素は「p 要素」です。終了タグを書かないタグもあります。これらは第4章で学びます。
1.6 この教材の進め方
この教材で使う道具
この教材では、次の3つのソフトウェアを使います。インストールと設定は、第2章で行います。
| ソフトウェア | この教材での役割 |
|---|---|
| Eclipse（Pleiades All in One） | HTML や CSS のファイルを作って書く。Tomcat の起動と停止も Eclipse から行う |
| Tomcat | 作ったファイルを、リクエストに応じて Chrome に送るサーバー。Eclipse に同梱されている |
| Google Chrome | URL を開いて、ページの表示を確かめる |
Eclipse は、統合開発環境（IDE：Integrated Development Environment）と呼ばれるソフトウェアです。ファイルの作成と編集、サーバーの起動と停止などを、1つの画面でまとめて行えます。Eclipse は Java の開発でよく使われていて、Spring入門 でも使います。
ファイルの置き方
第2章で、Eclipse に html という名前のプロジェクトを作ります。第3章からは、プロジェクトの中に章ごとのフォルダー（ch03、ch04 …）を作り、その中にファイルを作っていきます。たとえば、第3章で ch03 フォルダーに作る hello.html は、http://localhost/html/ch03/hello.html という URL で開けます。
各章の進め方は、目次ページの「各章の進め方」のとおりです。
1.7 まとめと確認問題
まとめ
- ブラウザがサーバーに リクエスト を送り、サーバーが レスポンス（HTML）を返すことで、Web ページが表示される
- この教材では、自分のパソコンで動かす Tomcat がサーバーになる。URL の
localhostは自分のパソコンを表す - HTML はページの内容と構造を、CSS はページの見た目を書く言語である
- 今の HTML は HTML Living Standard。番号の付いた版は無い。CSS は一般に CSS3 と呼ばれるものを使う
-
タグ は
<と>で囲んだ印、要素 は開始タグから終了タグまでの全体、属性 は開始タグの中に書く追加の情報である
確認問題
問1 ブラウザからサーバーへの頼みごとと、サーバーからブラウザへの返事を、それぞれ何と呼びますか。
解答を見る
頼みごとは リクエスト、返事は レスポンス です。
問2 URL http://localhost/html/ch05/index.html を開きました。localhost と html は、それぞれ何を表していますか。
解答を見る
localhost は、サーバーの場所が自分のパソコンであることを表します。html は、Eclipse で作ったプロジェクトの名前です。この URL は、html プロジェクトの ch05 フォルダーの中の index.html を指しています。
問3 HTML と CSS の役割の違いを説明してください。
解答を見る
HTML はページの内容と構造（見出し、段落、表など）を表し、CSS はページの見た目（文字の大きさ、色、罫線、余白など）を決めます。
問4 今の HTML の仕様は何と呼ばれていますか。また、バージョンの番号が付いていないのはなぜですか。
解答を見る
HTML Living Standard です。版を区切らずに少しずつ更新し続ける仕様なので、番号が付いていません。
問5 <a href="ch02.html">第2章へ</a> について、次のものを答えてください。
（a）開始タグ （b）終了タグ （c）属性名 （d）属性の値 （e）要素の内容
解答を見る
（a）<a href="ch02.html"> （b）</a> （c）href （d）ch02.html （e）第2章へ