～目次～
ページ全体のコーディング
さて、前回の記事でHTMLのタグを紹介させていただきました。
今回は、タグを使用してbody内のコーディングをしていきます。
WEBページの内容としては、簡単な自己紹介サイトを作成していきたいと思います。
まずは、WEBページ全体のコーディングをしていきましょう。
大まかに「ヘッダー」「コンテンツ」「フッター」の３つのエリアに分けます。
コンテンツは「メイン」と「サブ」を作成します。
テンプレートを利用してbodyタグの中に記述したものが下記になります。
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>○○の自己紹介サイト</title>
<style>
</style>
</head>
<body>
<header>
<h1>○○の自己紹介サイト</h1>
<nav>
<ul>
<li>氏名</li>
<li>住所</li>
<li>自己アピール</li>
</ul>
</nav>
</header>
<article>
<section>
<h2>氏名</h2>
<p>○○</p>
<h2>住所</h2>
<p>●●</p>
<h2>自己アピール</h2>
<p>△△</p>
</section>
<section>
<h3>資格一覧</h3>
<table>
<caption>資格一覧表</caption>
<thead>
<tr>
<th>取得年月</th>
<th>資格名</th>
</tr>
</thead>
<tbody>
<tr>
<th>2020年9月</th>
<td>HTML5レベル1 取得</td>
</tr>
<tr>
<th>2020年9月</th>
<td>HTML5レベル2 取得</td>
</tr>
</tbody>
</table>
</section>
</article>
<footer>
<h3>サイトマップ</h3>
<nav>
<ul>
<li>氏名</li>
<li>住所</li>
<li>自己アピール</li>
</ul>
</nav>
<p>© 2020 ○○</p>
</footer>
</body>
</html>
テンプレートがいきなり長文になりましたね(;^ω^)
WEBページの中身は、こんな感じになります。基本テキストの羅列です。
ファイルを保存してブラウザで開いてみましょう。
下記のようにブラウザに表示されればOKです。
〇〇や●●、△△の部分はお好きな文章で置き換えてください。
ヘッダーエリアの説明
<header>
<h1>○○の自己紹介サイト</h1>
<nav>
<ul>
<li>氏名</li>
<li>住所</li>
<li>自己アピール</li>
</ul>
</nav>
</header>
ヘッダーエリアの記述です。
WEBページのタイトルとWEBページ内のナビゲーションを記載しています。
コンテンツエリアの説明
<article>
<section>
<h2>氏名</h2>
<p>○○</p>
<h2>住所</h2>
<p>●●</p>
<h2>自己アピール</h2>
<p>△△</p>
</section>
<section>
<h3>資格一覧</h3>
<table>
<caption>資格一覧表</caption>
<thead>
<tr>
<th>取得年月</th>
<th>資格名</th>
</tr>
</thead>
<tbody>
<tr>
<th>2020年9月</th>
<td>HTML5レベル1 取得</td>
</tr>
<tr>
<th>2020年9月</th>
<td>HTML5レベル2 取得</td>
</tr>
</tbody>
</table>
</section>
</article>
コンテンツエリアの記述です。
メインのセクションには「氏名」「住所」「自己アピール」の項目を記載しています。
サブのセクションには取得した資格の一覧表を記載しています。
フッターエリアの説明
<footer>
<h3>サイトマップ</h3>
<nav>
<ul>
<li>氏名</li>
<li>住所</li>
<li>自己アピール</li>
</ul>
</nav>
<p>© 2020 ○○</p>
</footer>
フッターエリアの記述です。
ヘッダーエリアと同じナビゲーションをサイトマップとして記載しています。
また、WEBサイトのコピーライトを記載しています。
まとめ
WEBページのコーディングとは、今回のようなタグによるマークアップが基本です。
WEBページとは、文字や画像が羅列されたものになりますので、装飾を何もしないでOKであればこれでWEBサイトが完成と言っても問題ありません。
ただ、これでは、見た目が寂しすぎるので画像を入れたり文字の装飾をして華やかにしたりしていきましょう。
次回の記事にて、画像の表示の仕方、ハイパーリンクの設定方法について記述したいと思います。
