ホームページの作り方:さきちんうぇぶ

ホームページの作り方を基礎から学べるウェブサイト。
わかりやすい説明で初心者も安心!

HTMLの基本構成

基本的な構成

HTMLファイルのソースコードは<html>で始まり、</html>で終わるように記述するのが基本です。
この<html>タグの間に、<head>タグや<title>タグ、<body>タグなどを入力します。

[HTMLの基本構成]

<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セクションの記述例]

<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章で詳しく解説しています。

【STEP.3】簡単なページを作ってみよう!
« 前のページへ HTMLって一体?

コンテンツの一覧

学習ページの一覧ナビ

快適なサイト運営のために

セキュリティソフトを導入しよう
ウィルス対策について

安心してホームページを運営するための心がけ。

HTMLの特殊文字一覧
HTMLの特殊文字一覧

よく使う、HTMLの特殊文字・記号の一覧表。

カラーコードの一覧表
カラーコードの一覧

HTML・CSSで使えるカラーコードの一覧表。

規約やお問い合わせなど

ご利用案内
ご利用案内

当サイトをご利用になる前に、必ずご確認ください。

FAQ
FAQ

よくあるご質問など。

お問い合わせ
お問い合わせ

さきちんWEBについてのお問い合わせはこちらから。

プライバシーポリシー
プライバシーポリシー

個人情報管理とWeb広告配信について。

運営者情報
運営者情報

さきちんWEBの管理・運営者、さきちんについて。

サイトマップ
サイトマップ

さきちんWEBのサイトマップ。