28  はじめに

HTML（HyperText Markup Language）は，ハイパーテキストを記述するためのマークアップ言語です．

HTMLファイルは，*.htmlという拡張子を持ちます．

ハイパーテキストとマークアップ言語とは？

ハイパーテキスト（HyperText）とは，ハイパーリンク（hyperlink）を通じて，他の文書やファイルへアクセスできるテキストのことです．例えば，「こちら」というリンクをクリックすると，Googleのウェブページに移動します．

マークアップ言語（Markup Language）とは，マークをつけて文書の構造や修飾などを記述する言語のことです．例えば，<b>Example</b>は，Exampleというテキストを太字で表示することを指示します．マークアップという言葉は，印刷物の作成時に，赤ペンやハイライトで文書にマークをつけることに由来します．

Markdown（マークダウン）は，軽量なマークアップ言語である．Plain Text形式で文書を記述し，HTMLなどのフォーマットに変換することができます．Markdownは，readmeファイル，ドキュメント、ブログ記事などの作成に広く使用されています．この講義資料もMarkdown言語で記述されています．

28.1 VS CodeでのHTMLファイルの作成

Visual Studio Code（VS Code）はMicrosoftが開発している統合開発環境（Integrated Development Environment, IDE）です。C、Python、Javaなどのプログラミング言語をサポートしており、HTML、CSSなどのウェブ開発にも対応しています。

28.1.1 HTMLファイルを作成する手順

  1. 作業フォルダー「my_website」を作成します。
  2. VS Codeを起動します。
  3. 「ファイル」メニューから「フォルダーを開く」を選択し、「my_website」フォルダーを開きます。
  4. 「ファイル」メニューから「新しいファイル」を選択し、index.htmlという名前でファイルを保存します。
  5. 作成したindex.htmlファイルに内容を入力します。
  6. Ctrl + Sを押して保存します。
  7. エクスプローラーからindex.htmlをダブルクリックしてブラウザで開くと、ウェブページが表示されます。

28.2 練習

以下の内容をindex.htmlファイルに入力して、ブラウザで表示して、結果を確認しましょう。

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <title>Page Title</title>
</head>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph.</p>
</body>

</html>

28.3 もっと学びたい方へ

以下のリンクからHTMLの基本を体系的に学べます。