7.作ったホームページ用ファイルをブラウザで見てみる
ヤミー「今回は、前回(6.ホームページ用のファイルを作る)作ったホームページ用のファイルをブラウザで見てみます」
サイトウ君「ブラジャーで?」
ヤミー「ブラウザです。ブラウザって言うのはインターネットを見るためのソフトのことです」
ヤミー「まずデスクトップ画面に作成したhtmlフォルダを覚えてます?覚えて無いなら5.デスクトップにフォルダを作るを確認してみてください」
サイトウ君「5.デスクトップにフォルダを作るを見て思い出しました」
ヤミー「ありがとう。デスクトップ画面のhtmlフォルダをダブルクリックして中身を見てみてください。前回(6.ホームページ用のファイルを作る)作ったa.htmlというファイルがあるはずです」
サイトウ君「あります!」
ヤミー「その a.html ファイルを、一回左クリックして選んで、右クリックして「プログラムから開く」を選んでください」
ヤミー「自分がいつもインターネットを見るときに使っているソフトを選んでください。私はいつもMicrosoft Edgeを使ってインターネットを見ているのでMicrosoft Edgeを選びますが、例えばChromeを使っている人はChromeを選んでも大丈夫です」
ヤミー「お分かりでしょうか!!なんと!!あなたが作成したホームページ用のファイルがインターネットを見るソフトで表示できるのです!!」
サイトウ君「…………」
ヤミー「…………」
サイトウ君「…………」
ヤミー「…………」
サイトウ君「……地味」
ヤミー「せやけど!!」
ヤミー「駄目だ。最近の子は。甘やかされて。感動も何もあったもんじゃない」
サイトウ君「だって地味やん」
ヤミー「初めてのホームページってこんなもんじゃない?」
ヤミー「というわけで、前回のコードを覚えてる?」
<html>
<head>
<title>こんにちは</title>
</head>
<body>
元気かな
</body>
</html>
ヤミー「これ、ものすごくざっくり説明すると」
<html>
<head>
headタグの中にはメタ情報を記述するよ
</head>
<body>
bodyタグの中にはホームページに表示したい情報を記述するよ
</body>
</html>
ヤミー「みたいな感じです。」
サイトウ君「確かにbodyタグの中に書いた「元気かな」が表示されているのは分かるけど」
サイトウ君「『headタグの中にはメタ情報を記述するよ』って何?headタグの中のtitleタグの中に書いた「こんにちは」はどこにあるの?」
ヤミー「ここにあります」
サイトウ君「ここかよっ!!」
ヤミー「というわけで、ホームページ用のファイルって言うのは、基本的にはhtmlタグで全体を挟んで記述します。headタグにはメタ情報を。bodyタグにはサイトに表示したい情報を記述します。ちなみに補足するとtitleタグにはそのページのタイトルを記述する、というルールになっています。」
ヤミー「このホームページ用のファイルを作るための言語をHTML言語と言います。HTMLとはHyper Text Markup Language(ハイパーテキストマークアップランゲージ)の頭文字です」
ヤミー「つまりこのサイトでは基本的にはHTML言語を教えることになります」
サイトウ君「なるほど」
ヤミー「じゃあ私たちが作ったこのホームページ用のファイル、インターネットの世界から見れるの?と聞かれると見られません」
サイトウ君「見られないの?」
ヤミー「はい。過去記事の2.レンタルサーバーっていうのがありますでも説明しましたが「ホームページ用のファイルをインターネットの世界に公開するための場所に置く」ということをしないとインターネットの世界から見れるようにならないのです」
ヤミー「ちょっとアドレスバーに注目してみてください」
ヤミー「私の場合は「C:/Users/ebisu/OneDrive/Desktop/html/a.html」みたいに表示されています。これは人によって違うアドレスになっていると思います。つまり、私はこれだけど、あなたは違うはず」
ヤミー「そして、これ「C:」で始まってるじゃないですか?(人によっては「D:」で始まってる人もいるかも)。これは「このパソコンのCドライブの中の」「Usersフォルダの中の」「ebisuフォルダの中の」「OneDriveフォルダの中の」「Desktopフォルダの中の」「htmlフォルダの中の」「a.htmlファイル」っていう意味なのだけど、一番最初が「このパソコンのCドライブの中の」で始まってるの分かります?」
サイトウ君「うん」
ヤミー「「このパソコン」……つまり「あなたのパソコン」の「/Users/ebisu/OneDrive/Desktop/html/a.html」の場所にはa.htmlファイルがあるから表示できる」
ヤミー「でも、「他人のパソコン」の「/Users/ebisu/OneDrive/Desktop/html/a.html」の場所にはa.htmlファイルは無いから表示できない」
ヤミー「だから、「他人のパソコン」のブラウザ(インターネットを見るソフト)でアドレスバーに「C:/Users/ebisu/OneDrive/Desktop/html/a.html」って書いてもあなたの作ったこのホームページは見れない」
ヤミー「というわけで、この a.html ファイルを「ホームページ用のファイルをインターネットの世界に公開するための場所に置く」ために、次回、8.レンタルサーバーを借りよう」