HTML 入門
Webページ作成はじめの一歩
Visual Studio Code を使う
これまでは Web ページの作成に Windows の「メモ帳」アプリを利用しました．作業を効率的に行うためにはより高機能なテキストエディタを用いるべきでしょう．以降では IT 業界でデファクトスタンダートとなった Visual Studio Code を用いて作業を行います．まず，このページを参照して Visual Studio Code をインストールしてください．
Visual Studio Code のインストールができたら起動します．Visual Studio Code などのテキストエディタは「ファイルを開く」ではなく「フォルダを開く」という操作を行います（もちろん「ファイルを開く」ことも可能ですが）．下の画面のようにエクスプローラから「web」フォルダを Visual Studio Code 内にドラッグ＆ドロップしてフォルダを開きます．あるいは Visual Studio Code で「フォルダーを開く」ボタンやメニューを使っても構いません．
フォルダを開くことができたら Visual Studio Code のエクスプローラ（画面左側）に「WEB」フォルダの中身が表示されるので，この中に「index.html」というファイルがあることを確認できます．また「作成者を信頼しますか？」というメッセージが表示されますが，自身のファイルであれば「はい，作成者を信頼します」を選んで良いでしょう．
なお，Visual Studio Code のインストール時に「エクスプローラーのディレクトリコンテキストメニューに[Code で開く]アクションを追加する」設定をしておくと，「フォルダ」を右クリックして「Code で開く」というメニューを利用できるようになります．次の画面のように，右クリックしたあと「その他のオプションを確認」を開きます．
その中にある「Codeで開く」を選択します．これでフォルダを開くことができます．なお，右クリックしたあとのメニュー構造は Windows のバージョンによって異なる可能性があります．また，学内の情報処理実習室に設置された PC では「Visual Studio で開く」というメニューも表示されます．これは Visual Studio Code とは異なるソフトウェアなので，間違わないように注意してください．
Visual Studio Code の「エクスプローラ」で「index.html」をダブルクリックして開きます．（シングルクリックではプレビュー表示のみで，タブのファイル名がイタリックになることも確認してください．）
ここで説明した方法で Windows のエクスプローラから index.html をブラウザで開いても良いですが，Visual Studio Code から開くことも可能です．Visual Studio Code のエクスプローラから index.html をブラウザにドラッグ＆ドロップします．
すると，ブラウザでファイルを開くことができました．環境によってはアドレスが「C:/Users/...」ではなく「C%3A/Users/...」のようになるかもしれませんが，とくに気にする必要はないでしょう．
ブラウザと Visual Studio Code を並べて表示して中身を確認します．
Visual Studio Code で本文に新たな行を追加します．このとき，上書き保存をするまではエディタのタブに「丸印」が表示されていることに注意してください．
Visual Studio Code で上書き保存をするとエディタのタブが「X印」に変化します．当然ながら，まだ Web ブラウザの表示は更新されません．ブラウザの表示を更新するには「再読み込みボタン」をクリックします．あるいはショートカットキー Ctrl + R （macOS では⌘ + R）を使っても構いません．
再読込するとブラウザの表示内容が更新されました．
