A030 HTMLファイルの保存と表示

HTMLファイルの基本

今回はエディタを用いて、HTMLファイルの保存方法と完成したHTMLファイルをブラウザで表示する方法を紹介します。

※手順の画像はMacBookProを用いております。また、エディタはVisual Studio Codeを使用しております。

Visual Studio Codeのダウンロードはこちら

HTMLファイルの保存と表示の手順

①ダウンロードしたVisual Studio Codeを開き、画面左上の新しいファイルをクリック

②新しいファイルが開き、保存コマンドを押すと下記表示が出るので、拡張子をhtmlにして保存。今回は、index.htmlという名前でデスクトップに保存

③保存後、ファイル内に表示用のコードを記載する。今回は<h1>タグにHello World!と記載

④保存されたファイルをブラウザで新しいタブにドラッグ & ドロップする

⑤ブラウザへ表示される

エンジニアからのアドバイス

今回は、エディタを開きそこからファイルを作成しましたが、作成済みのファイルでも拡張子がhtmlとなっており、表示できる内容が記載されていれば表示されます。今回は手順は一例として使いやすいエディタや手順を自分なりに試してみましょう。

---