HTMLによるWebページの作成#
HTML(HyperText Markup Language)は,ハイパーテキストを記述するためのマークアップ言語です.
HTMLファイルは,*.html
という拡張子を持ちます.
Note
ハイパーテキストとマークアップ言語とは?
ハイパーテキスト(HyperText)とは,ハイパーリンク(hyperlink)を通じて,他の文書やファイルへアクセスできるテキストのことです.例えば,「こちら」というリンクをクリックすると,Googleのウェブページに移動します.
マークアップ言語(Markup Language)とは,マークをつけて文書の構造や修飾などを記述する言語のことです.例えば,<b>Example</b>
は,Example
というテキストを太字で表示することを指示します.マークアップという言葉は,印刷物の作成時に,赤ペンやハイライトで文書にマークをつけることに由来します.
Markdown(マークダウン)は,軽量なマークアップ言語である.Plain Text形式で文書を記述し,HTMLなどのフォーマットに変換することができます.Markdownは,readmeファイル,ドキュメント、ブログ記事などの作成に広く使用されています.この講義資料もMarkdown言語で記述されています.
VS CodeでのHTMLファイルの作成#
Visual Studio Code(VS Code)はMicrosoftが開発している統合開発環境(Integrated Development Environment, IDE)です。C、Python、Javaなどのプログラミング言語をサポートしており、HTML、CSSなどのウェブ開発にも対応しています。
HTMLファイルを作成する手順#
作業フォルダー「my_website」を作成します。
VS Codeを起動します。
「ファイル」メニューから「フォルダーを開く」を選択し、「my_website」フォルダーを開きます。
「ファイル」メニューから「新しいファイル」を選択し、
index.html
という名前でファイルを保存します。作成した
index.html
ファイルに内容を入力します。Ctrl + Sを押して保存します。
エクスプローラーから
index.html
をダブルクリックしてブラウザで開くと、ウェブページが表示されます。
練習#
以下の内容を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>
もっと学びたい方へ#
以下のリンクからHTMLの基本を体系的に学べます。