今回からは実際にHTMLファイルを作成してコードを入力していきます。
HTMLファイルの作成
まずは「Visual Studio Code」（以下VSCode）を開き、「メニュー」から「ファイル」、「新しいテキストファイル」をクリックする。
次に、「言語の選択」を選択し、開いたポップアップから「HTML」を選択する。
今回はデスクトップに作成した「HTML」というフォルダに、「index.html」というファイルを作成し、「保存」をクリックする。
これでHTMLファイルを作成することができました。今後同じサイトのファイルを作成していく際には、この「HTMLファイル内に作成していくこととします。
HTMLの基本構文
ファイルを作成したら、以下のようにコードを入力してください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>MY HOMEPAGE</title>
<meta name = "description" content="私のホームページです">
</head>
<body>
<h1>ここは私のホームページです</h1>
</body>
</html>上記のように、HTMLは<>で囲まれたタグと呼ばれるコードを組み合わせることで作成していきます。
<!DOCTYPE html>
<!DOCTYPE html>は、Doctype（ドックタイプ）宣言といい、HTMLのバージョンを指定します。今回のようにhtmlと記載した場合は、現在の最新である「html5」を使用していることを示しています。
<html>～</html>
この<html>タグで囲まれた部分は、HTMLの文書だということを表しています。また、lang=”ja”と表記することで、日本語の文書であることを示しています。
<head>～</head>
この<head>タグは、ホームページに何かを表示するためのものではなく、ホームページ自体の設定を行う場所となっています。上記コード内では、表示する際の文字コード、検索したときに表示されるタイトルや説明を定義しています。
<body>～</body>
<body>タグには、実際にホームページに表示される内容を記載していきます。見本のコードを実行すると、ブラウザ（Internet Exploler、FireFox、Chrome、Edgeなど、ホームページを見るためのアプリケーション）に「ここは私のホームページです」と表示されます。
作成したHTML文書を実行する
フォルダ内にあるファイルをダブルクリックするか、開いたブラウザにドラッグすることで作成したHTMLをブラウザに表示することができます。
文書が正確に記述できていれば、以下のように表示されるはずです。（ブラウザにより多少の誤差はあります）
きちんと表示することはできましたでしょうか？
次回は<head>タグの作成方法について解説させていただきます。
コメント