まずは、コードエディターをインストールしよう
まず、Visual Studio Codeの公式ウェブサイトからVSCodeをインストールします。
Visual Studio Code - Code Editing. Redefined
Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications...
code.visualstudio.com
Windows,linux,macの各OSごとにバージョンがあるので、指示に従ってダウンロードして下さい。
フォルダーを作成する
デスクトップ上に新しいフォルダーを作成してください。
フォルダーの名前は何でも構いませんが、ここでは「MyWebsite」という名前のフォルダーを作成します。
そのフォルダーをVSCode内にドラッグ＆ドロップをするとコードの保存先となります。
このファイル内にコードを追加していきます。
〇〇〇〇.htmlでファイルを命名
新しいファイルを作成して、index.htmlという名前をつけます。
“index.html” は、ウェブサイトのトップページを指定するデフォルトのファイル名です。
HTMLファイルをVSCode上で作成する方法：
- メニューの「ファイル (File)」から「新規ファイル (New File)」を選択。
- ファイル名を「index.html」と入力。
文字を表示させるコード
以下のHTMLコードをindex.html内に入力して保存(ctrl+S)します。
<h1>Hello, World!</h1><h1>文字</h1>で真ん中にある「Hello, World!」というテキストがウェブページ上に表示される文字です。
日本語入力で全角で＜／＞だとエラーになります。
ブラウザ上で閲覧しよう
デスクトップ上の「MyWebsite」フォルダー内からindex.htmlを見つけます。
その後、index.htmlをダブルクリックして開くと、ウェブブラウザでファイルが表示され、ページ上に「Hello, World!」という文字が表示されるはずです。
これで、VSCodeを使用してHTMLファイルを作成し、文字を表示させる手順が完了しました。
