30  はじめに

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

HTML（HyperText Markup Language）は，ハイパーテキストを記述するためのマークアップ言語です．HTMLファイルは，*.htmlという拡張子を持ちます．

ノートMarkup と Markdown

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

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

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

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

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

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

30.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>

30.3 もっと学びたい方へ

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