トップページの編集(p.24〜)
Webページを作る手順
作成するサンプルサイトの構成と学習内容
サンプルサイトは、架空のフィットネスクラブのウェブサイト合計4ページ構成です。
▶ データは、FOM出版からダウンロードできます。
P.24参照
index.html
トップページのHTMLを作成する
→P.44参照
●文書型宣言を、HTML4.01からHTML5.0形式に変更
→P.46参照
●文字エンコード
【重要】 utf-8の前に、「”」ダブルクォテーションを一つ記述すること。
→P.47参照
●外部CSの読み込み
記述の一行・一部を削除する。
→P.48-52参照
●各タグを置き換える
HTML5には、いくつかの新しいタグが追加され、<div>タグよりもより具体的なコンテンツの意味付けができるようになりました。【例】<div id="header"> は、
<header>
<nav>
<section>
<aside>
<footer>
上記5箇所の部分を、正確に書き換えてください。
HTML5で追加されｔより具体的な意味をもつタグ
→P.55参照
●コピーライト表記
<small>は、コピーライト表記としての意味付けとなりました。
全体を確認する
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>HAPPINESS FITNESS CLUB</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <header> <h1><img src="images/logo.png" width="203" height="70" alt="ハピネスフィットネスクラブ"></h1> <nav> <ul> <li><a href="info.html"><img src="images/nav1.png" width="173" height="50" alt="施設のご案内"></a></li> <li><a href="fee.html"><img src="images/nav2.png" width="173" height="50" alt="料金プラン"></a></li> <li><a href="opinion.html"><img src="images/nav3.png" width="173" height="50" alt="ご意見・ご要望"></a></li> </ul> </nav> </header> <div id="contents"> <div id="main"> <p id="graphic"><img src="images/graphic.jpg" width="570" height="300" alt="ハピネスフィットネスクラブでは さまざまなプログラムをご用意しております。"></p> <section> <h2>今月のお知らせ</h2> <p>入会された方に、ミネラルウォーターをプレゼントいたします。<br>運動中の水分補給にお使いください。</p> </section> </div> <div id="sub"> <aside> <ul> <li><a href="info.html"><img src="images/bnr_info.png" width="200" height="80" alt="施設のご案内"></a></li> <li><a href="opinion.html"><img src="images/bnr_opinion.png" width="200" height="50" alt="ご意見・ご要望"></a></li> </ul> </aside> </div> </div> <footer> <p><small>Copyright 2014 HAPPINESS FITNESS CLUB All rights reserved.</small></p> </footer> </body> </html> |
