ホームページの作り方

当サイトでは初心者向けにホームページの作り方の解説をしています。

当サイトはPRを含むページがあります。

7.作ったホームページ用ファイルをブラウザで見てみる

ヤミー「今回は、前回(6.ホームページ用のファイルを作る)作ったホームページ用のファイルをブラウザで見てみます」

サイトウ君「ブラジャーで?」

ヤミー「ブラウザです。ブラウザって言うのはインターネットを見るためのソフトのことです」

ヤミー「まずデスクトップ画面に作成したhtmlフォルダを覚えてます?覚えて無いなら5.デスクトップにフォルダを作るを確認してみてください」

サイトウ君「5.デスクトップにフォルダを作るを見て思い出しました」

ヤミー「ありがとう。デスクトップ画面のhtmlフォルダをダブルクリックして中身を見てみてください。前回(6.ホームページ用のファイルを作る)作ったa.htmlというファイルがあるはずです」

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.レンタルサーバーを借りよう