WebIDE で最初の HTML ページを作成する

はじめに

この実験では、Web 開発における強力で人気のあるコードエディタである WebIDE（VS Code と同様）を使って、最初の HTML ページを作成する方法を学びます。

この包括的なチュートリアルでは、WebIDE の設定、HTML5 のボイラープレートテンプレートの生成、Web ページに基本的なコンテンツを追加する方法、および Web ブラウザで結果をプレビューする方法などの重要な点がカバーされています。これらの手順を追うことで、Web 開発の基本に関する実践的な経験を得ることができ、インタラクティブで構造化された Web ページを作成するための堅牢な基礎を築くことができます。

新しい HTML ファイルを作成する

LabEx WebIDE は、コーディングタスクに対して現代的で VS Code と同様の開発環境を提供します。WebIDE は、HTML、CSS、JavaScript を含む Web 開発プロジェクトに最適です。

始めるには、LabEx インターフェイスの「WebIDE」タブをクリックして WebIDE を開きます。WebIDE は、左側にファイルエクスプローラーが表示され、右側にコードエディタが表示されます。また、画面下部にはターミナルやその他のいくつかのツールがあります。

LabEx WebIDE インターフェイスの概要

ファイルエクスプローラー：プロジェクトのディレクトリ構造を表示し、ここでファイルを作成、編集、管理できます。デフォルトの作業ディレクトリは ~/project です。
コードエディタ：コードを記述および編集するためのテキストエディタを提供します。新しいファイルを作成したり、既存のファイルを開いたり、コードの変更を確認したりできます。
ターミナル：シェルコマンドを実行したり、パッケージをインストールしたり、ファイルを管理したりするためのコマンドラインインターフェイスを提供します。ターミナルで直接コマンドを実行できます。デフォルトの作業ディレクトリは ~/project です。

このステップでは、WebIDE で新しい HTML ファイルを作成する方法を学びます。HTML（HyperText Markup Language）は、Web ページを作成するための標準マークアップ言語です。すべての Web ページは HTML ファイルから始まります。

WebIDE で新しい HTML ファイルを作成するには、次の手順に従います：

「ファイル」メニューをクリックします
「新規ファイル」を選択します
ファイルを index.html という名前で保存します

WebIDE で新しい HTML ファイルを作成する

あるいは、キーボードショートカット Ctrl+N を使用して新しいファイルを作成し、その後 index.html として保存することもできます。

HTML ファイルを命名する際には、次の重要なルールを覚えておきましょう：

小文字を使用する
.html ファイル拡張子を使用する
ファイル名にスペースを避ける
index.html、about.html などの説明的な名前を使用する

次に、ターミナルを使ってファイルが作成されたことを確認しましょう：

ls ~/project

出力例：

index.html

このファイルは、次のステップで HTML コンテンツを追加する準備ができています。.html 拡張子は、これが HTML ドキュメントであることを Web ブラウザに伝えます。

ターミナルに慣れている場合は、次のコマンドを使用してファイルを作成することもできます：

touch ~/project/index2.html

ターミナルのスキルを向上させるために、Linux コマンドに関する詳細を学びましょう。

HTML5 のボイラープレートテンプレートを生成する

このステップでは、WebIDE で標準的な HTML5 のボイラープレートテンプレートを生成する方法を学びます。ボイラープレートは、HTML ドキュメントの基本構造を提供する標準テンプレートです。

WebIDE では、組み込みのショートカットを使用して迅速に HTML5 テンプレートを生成できます。次の手順に従ってください：

index.html ファイルを開きます
!（感嘆符）を入力します
Tab キーを押します

これにより、すべての必須要素を備えた完全な HTML5 テンプレートが自動的に生成されます：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
</html>

HTML5 テンプレート生成のデモ

ヒント：ショートカットが機能しない場合は、テンプレートコードを index.html ファイルにコピーして貼り付けることができます。

この HTML5 テンプレートの主要なコンポーネントを解説しましょう：

<!DOCTYPE html> は、これが HTML5 ドキュメントであることを宣言します
<html lang="en"> は、言語指定付きのルート要素です
<head> には、ドキュメントに関するメタデータが含まれています
<meta charset="UTF-8"> は文字コードを指定します
<meta name="viewport"> は、モバイルデバイスでの適切なレンダリングを確保します
<title> は、ブラウザのタブに表示されるページのタイトルを設定します
<body> には、ページのコンテンツが追加されます

<title> を変更して、ページに意味のある名前を付けることができます。

HTML ページに基本コンテンツを追加する

このステップでは、さまざまな HTML 要素を使って HTML ページに基本的なコンテンツを追加する方法を学びます。HTML は、Web ページ上のコンテンツを構造化して表示するためにタグを使用します。

WebIDE で index.html ファイルを開き、空の <body> セクションを次のコンテンツに置き換えます。

ヒント：コードスニペットを index.html ファイルにコピーして貼り付けてコンテンツを追加します。既存の <body></body> コンテンツを置き換えます。次の実験で HTML 要素についてさらに学びます。

<body>
  <h1>Welcome to My First Web Page</h1>
  <p>
    This is a paragraph of text. HTML allows you to create different types of
    content easily.
  </p>

  <h2>My Favorite Hobbies</h2>
  <ul>
    <li>Coding</li>
    <li>Reading</li>
    <li>Traveling</li>
  </ul>

  <h2>Quick Links</h2>
  <a href="https://www.example.com">Visit Example Website</a>
</body>

使用した HTML 要素を解説しましょう：

<h1> と <h2> は見出しタグです（h1 は主要な見出し、h2 はサブ見出し）
<p> は文章の段落に使用されます
<ul> は順序なし（箇条書き）のリストを作成します
<li> はリスト項目を表します
<a> は別の Web ページへのハイパーリンクを作成します

これらの基本要素を使って、Web ページ上のコンテンツを構造化して提示できます。さまざまなタグを試して、コンテンツの外観とレイアウトがどのように変化するかを確認してみましょう。

初心者向けの追加ヒント：

HTML タグは必ず閉じましょう
意味のあり、説明的なコンテンツを使用しましょう
コードをインデントして読みやすさを向上させましょう

ブラウザで HTML をプレビューしてレンダリングする

このステップでは、Web ブラウザで HTML ページをプレビューしてレンダリングする方法を学びます。LabEx VM は WebIDE に組み込まれたブラウザプレビュー機能を提供しています。

HTML ファイルをプレビューするには：

WebIDE で、画面右下の「Go Live」ボタンをクリックします。
新しいブラウザタブが開き、HTML ページがレンダリングされます。
あるいは、「Web 8080」タブをクリックしてプレビューを開くこともできます。

これにより自動的に：

Web サーバーが起動します
プレビューウィンドウで HTML ページが開きます
コードを変更するとリアルタイムで更新されます

ヒント：LabEx VM は 8080 番ポートでプレビューをホストしています。他の人に自分の作業成果を見せるために、プレビューリンクを共有できます。実験用の VM を停止した後は、プレビューリンクはもはや機能しません。

確認すべき重要な点：

ページが異なる見出しサイズでレンダリングされます
リストが箇条書きとして表示されます
リンクがクリック可能です
ページのタイトルがブラウザのタブに表示されます

まとめ

この実験では、HTML 開発の初期段階を学習者に案内し、新しい HTML ファイルの作成と Web ページ作成の基本構造の理解に焦点を当てました。手順を追うことで、参加者は開発ツールとしての WebIDE の使用に関する実践的な経験を得るとともに、HTML5 を使って Web ページを構築するために必要な基本的なスキルを学びました。