ハローHTML初めての表示

HTMLの入門講座です｡このステップではHTMLファイルをブラウザで表示するところまで行います｡

更新： 2023-04-09
環境:windows10/Microsoft Edge/VS Code

PREPARATION

想定する読者と前提条件

基本的なパソコン操作ができること。HTMLを知らなくてもOKです。ただし、好奇心が必要です。

START

サンプルファイルのダウンロード

最初のHTMLに触れる為に簡単なサンプルファイルを用意しました｡まずは下記サンプルファイルをダウンロードしてください。ダウンロードが完了したら、デスクトップに解凍してください。

サンプルファイル(ZIP:49.0 KB)

hello_htmlのファイル構成

images
- bird.jpg
index.html

VS CodeでHTMLファイルを開く

この節では、VS CodeでHTMLファイルを開く方法を学びましょう｡

2-1VS Codeの起動

VS Codeを起動し、左メニューの上部にある「エクスプローラ」をクリックしてください。

2-2フォルダの選択

メニューより「ファイル」→「フォルダーを開く」をクリックします。

2-3hello_htmlフォルダの選択

フォルダ選択画面が表示されますので、以下の手順でhello_htmlフォルダを選択してください。

1.左側のメニューより「デスクトップ」を選択。
2.「hello_html」フォルダをクリック。
3.「フォルダーの選択」ボタンをクリック。

2-4サイドバーの表示確認

サイドバーにhello_htmlフォルダの内容が表示されます。

2-5index.htmlファイルの表示

サイドバーから「index.html」をクリックしてください。右側のウィンドウにindex.htmlの内容が表示されます。

初めてHTMLファイルに触れる

皆さんが初めて触れるHTMLファイルは以下のような文字が入力されています。では、早速このHTMLファイルをウェブブラウザで表示させてみましょう！

初めてのHTML

<!DOCTYPE html>
<html lang="ja-JP">
<head>
<meta charset="utf-8">
<title>ハローHTML</title>
</head>
<body>
<h1>初めてのHTML</h1>
<main>
<img src="images/bird.jpg" alt="鳥のイラスト">
<p>これからHTMLの世界に飛び出してみよう！</p>
</main>
</body>
</html>

3-1index.htmlをウェブブラウザで表示

デスクトップの「hello_html」フォルダ内の「index.html」ファイルをダブルクリックしてみましょう。

3-2おめでとうございます！

ブラウザが起動し初めてのHTMLファイルが表示されました！

PROBLEM

？？？？？

君は何を言っているんだ？何が起きたのか詳しく説明してくれ。
何がわからないっていうの！？

どこにも問題なんてないじゃない？
どうしてウェブブラウザが起動したんだい？
「拡張子」について知る必要があります。

今回使用したHTMLファイルの場合、拡張子は「.html」です｡
拡張子は、アプリケーションとファイルを関連付けるためのキーワードとして使用されています。つまり、「この拡張子の場合、このアプリケーションを起動しファイルを開いてください」と言った情報がWindows内に記録されています。
もちろん、この対応表に登録されていない拡張子が登場した場合、Windowsは困ってどうすればいいか尋ねてくるでしょう。

一般的な､HTMLファイルの拡張子は､｢.html｣または｢.htm｣となります｡
拡張子なんて表示されないんだけど？
拡張子が非表示になっているためです。

Windowsでは拡張子の表示がOFFになっていることが良くあります。
拡張子を表示するのに難しいステップは必要ありません。「hello_html」のフォルダを開き、表示タブを開いてください。リボンに「ファイル名拡張子」というチェックボックスがありますので、チェックを入れてください。
ブラウザが起動しないパソコンがあるんだけど？
拡張子の関連付けが異なるからです。

拡張子と関連付けられているアプリケーションが異なる場合があります。index.htmlファイルを右クリックし「プロパティ」を表示してください。そして、ファイルの種類の下にある「プログラム」を変更し、「Microsoft Edge」を選択してください。
もしそれが嫌な場合は、index.htmlを右クリックし「プログラムから開く」を選択後、「Microsoft Edge」を選択してください。（試してみてください)
そもそもHTMLの説明がないじゃないか！
心配ないわ

次のステップで詳しく解説してあげる。