HTMLファイルのソースコードは<html>で始まり、</html>で終わるように記述するのが基本です。
この<html>タグの間に、<head>タグや<title>タグ、<body>タグなどを入力します。
<html>
<head>
<title>ページのタイトル</title>
</head>
<body>
</body>
</html>
<head>~</head>は【Headセクション】と呼ばれ、ページのタイトルや仕様、スタイルシートなどを記述する領域です。
<body>~</body>は【Bodyセクション】と呼ばれ、ページの内容や文書・画像、リンクなどホームページの内容について記述する領域です。
[Headセクションの記述例]<head>
<meta charset="utf-8">
<title>ページのタイトル</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>ホームページを作ってみよう!</h1>
<p>ホームページを作るには、HTMLの知識は欠かせません。<br>覚えるまでチョット大変ですが、頑張りましょう!</p>
<h2>HTMLは難しくありません</h2>
<p>HTMLは決して難しいものではありません。落ち着いて文書構成を見てみましょう。<br>どうですか?意外と単純な構成だと思いませんか?</p>
</body>
これらの例をまとめると、下記のようなソースコードになります。
[タイトル]<html>
<head>
<meta charset="utf-8">
<title>ページのタイトル</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>ホームページを作ってみよう!</h1>
<p>ホームページを作るには、HTMLの知識は欠かせません。<br>覚えるまでチョット大変ですが、頑張りましょう!</p>
<h2>HTMLは難しくありません</h2>
<p>HTMLは決して難しいものではありません。落ち着いて文書構成を見てみましょう。<br>どうですか?意外と単純な構成だと思いませんか?</p>
</body>
</html>
パッと見た感じでは、英語ばっかりで難しそう!な印象を受けますが、よくよく見てみると、結構単純な構成をしているのがわかります。
ちなみに、今はまだ理解できる必要はありませんので安心してください。なんとなく、HTMLの基本構成ってこうなんだ~と思っていただければOKです!
では早速、簡単なページを作ってみましょう!
覚えておきたいポイント
Headセクションの内容は表示されない
Headセクションに記述された内容は、実際にホームページを見る際には表示されません。
ここにはホームページの設定や言語、HTMLのバージョン、スタイルシートなど、技術的な内容が含まれています。
CSS(スタイルシート)とは
スタイルシートとは、ホームページの見栄えを担当するプログラムです。HTMLだけではページの装飾に限界があり、どうしてもキレイなページを制作することができません。見た目に美しいページを制作するには、スタイルシートは欠かせません。なお、スタイルシートについては2章で詳しく解説しています。