HTML ドキュメントの構造：基本的なウェブページの作成

はじめに

HTML の世界へようこそ！インターネット上で目にするすべてのウェブページは、基本的な構造の上に構築されています。この構造を理解することは、ウェブ開発における最初で最も重要なステップです。

この実験では、HTML ドキュメントの基本的な骨格を作成する方法を学びます。すべての HTML ページに必須の要素について説明します。

この実験が終わる頃には、ゼロから完全で有効なシンプルな HTML ページを構築できるようになります。

このステップでは、HTML ドキュメントの最初の部分であるDOCTYPE宣言を追加します。この宣言は、ウェブブラウザにページが HTML5 で記述されていることを伝えます。これは標準的な慣習であり、ブラウザがページを正しくレンダリングすることを保証します。

まず、WebIDE の左側にあるファイルエクスプローラーでindex.htmlファイルを見つけます。それをクリックしてエディタで開いてください。

ファイルは現在空です。index.htmlファイルの先頭に以下のコード行を追加してください。

<!DOCTYPE html>

これで、index.htmlファイルは以下のようになります。

<!DOCTYPE html>

この一行が、すべてのモダンなウェブページの出発点となります。

このステップでは、<html>要素を追加します。この要素は、ページ上の他のすべての HTML 要素（<!DOCTYPE>宣言を除く）のルートコンテナです。

また、開いている<html>タグ内にlang属性を含めることはベストプラクティスです。この属性は、ドキュメントのコンテンツの言語を指定し、検索エンジンやスクリーンリーダーの助けとなります。英語の場合はlang="en"を使用します。

index.htmlファイルで、<!DOCTYPE html>宣言の直後に<html>タグと</html>タグを追加してください。

<!DOCTYPE html>
<html lang="en"></html>

ウェブページの他のすべての要素は、この 2 つのタグの間に配置されます。

このステップでは、<head>要素を追加します。<head>セクションには、HTML ドキュメントのタイトル、文字セット、スタイル、スクリプトなどのメタデータが含まれます。この情報はウェブページ自体には表示されませんが、ブラウザによって使用されます。

初心者にとって最も重要なメタデータは<title>タグです。<title>タグ内のテキストは、ブラウザのタブやウィンドウのタイトルバーに表示されるものです。

<html>要素内に<head>セクションを追加してください。<head>セクション内に、テキストを「My First Web Page」とした<title>タグを追加します。

index.htmlファイルを以下のように更新してください。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My First Web Page</title>
  </head>
</html>

このステップでは、<body>要素を追加します。ここには、見出し、段落、画像、リンクなど、ウェブページのすべての表示可能なコンテンツが配置されます。<body>要素は、<head>要素の後、ただし<html>要素内に配置する必要があります。

ブラウザで表示されるように、ページにメインの見出しを追加しましょう。ここでは「Heading 1」を意味する<h1>タグを使用します。

index.htmlファイルで、<body>セクションを追加してください。<body>内に、「Hello, World!」というテキストを持つ<h1>要素を追加します。

これで、index.htmlファイル全体は以下のようになります。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My First Web Page</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>

これは、完全で有効な HTML ドキュメント構造です。

このステップでは、作成したウェブページを表示します。WebIDE は変更を自動的に保存するため、手動でファイルを保存する必要はありません。

バックグラウンドでは、すでにシンプルな Web サーバーが実行されています。ページを表示するには、LabEx インターフェースで正しいタブを開くだけです。

画面左上の「Terminal」タブの隣にある「Web 8080」タブをクリックしてください。

「Web 8080」タブに切り替えると、ウェブページが表示されるはずです。そこには以下が表示されます。

これらが表示されない場合は、前のステップに戻り、index.htmlのコードが例と完全に一致していることを確認してください。

おめでとうございます！最初の有効な HTML ドキュメントを正常に作成しました。ウェブページのすべての骨格を形成する基本的な構成要素を学びました。

この実験では、以下のことを学びました。

この基本的な構造は、今後のすべてのウェブプロジェクトを構築するための基盤となります。