作成ページ(index.html) <HTML> <HEAD> <TITLE>ちょうちん祭りトップ</TITLE> </HEAD> <BODY> <P>受験番号　名前</P> <H1>ちょうちん祭り</H1> <P><IMG src="pic1,jpg" width="700" height="300" border="0"></P> <H2>祭りについて</H2> <P>豊作を願うためにちょうちんをかかげたことが始まりといわれています<BR> <A href="page.html">祭りの詳細はこちら</A></P> <HR> <H2>イベント</H2> <TABLE border="1"> <TR> <TD> <H3>よさこい</H3> </TD> <TD> <H3>和楽器演奏</H3> </TD> </TR> <TR> <TD><IMG src="pic2.jpg" width="343" height="200" border="0"></TD> <TD><IMG src="pic3.jpg" width="343" height="200" border="0"></TD> </TR> <TR> <TD>青山商店街にて</TD> <TD>噴水広場にて</TD> </TR> </TABLE> </BODY> </HTML> ＜作成ページ例＞作成ページ(index.html) <HTML> <HEAD> <TITLE>森田バドミントン教室トップ</TITLE> <LINK rel="stylesheet" href="style.css" type="text/css"> </HEAD> <BODY> <P>受験番号名前</P> <TABLE border="0"> <TR> <TD colspan="2"> <H1>森田バドミントン教室</H1> </TD> </TR> <TR> <TD> <UL> <LI><A href="page1.html">教室について</A> <LI><A href="page2.html">アクセス</A> <LI><A href="page3.html">指導者紹介</A> <LI><A href="mailto:morita@goukaku.ne.jp">お問い合わせ</A></UL> </TD> <TD> <IMG src="pic1.png" width="500" height="375" border="0" alt="選手のイラスト"><BR>室内競技なので一年中プレーできるスポーツです<BR> ー緒に楽しみましょう♪ <H2>準備する物</H2> <OL> <LI>運動しやすい服装と室内シューズ<LI>飲み物とタオル</OL> <H2>使用する道具</H2> <TABLE border="1"> <TR> <TD>ラケット<BR>シャトル<BR>貸し出しも行っています</TD> <TD><IMG src="pic2 jpg" width="180" height="135" border="0" alt="道具の写真"></TD> </TR> <TR> <TD colspan="2"><A href="page4.html"><IMG src="icon.png" width="340" height="40" border="0"></A></TD> </TR> </TABLE> </TD> </TR> </TABLE> </BODY> </HTML>作成ページ(index.html) <HTML> <HEAD> <TITLE>イラストコンテストトップ</TITLE> <LINK rel="stylesheet" href="style.css" type="text/css"> </HEAD> <BODY> <P>受験番号名前</P> <TABLE border="0"> <TR> <TD colspan="4"> <H1>イラストコンテスト</H1> <IMG src="pic1.png" width="730" height="250" border="0" alt="コンテストイメージ"></TD> </TR> <TR> <TD><A href="page1.html"><IMG src="icon1.png" width="180" height="50" border="0"></A></TD> <TD><A href="page2.html"><IMG src="icon2.png" width="180" height="50" border="0"></A></TD> <TD><A href="page3.html" target="_blank"><IMG src="icon3.png" width="180" height="50" border="0"></A></TD> <TD><A href="mailto:con@goukaku.ne.jp"><IMG src="icon4.png" width="180" height="50" border="0"></A></TD> </TR> <TR> <TD colspan="4">皆様のご応募をお待ちしています<H2>募集期間</H2> 8月1日〜8月31日<H2>テーマ：季節</H2>春夏秋冬の中からーつ選びイラストを描いてください<BR>アナログ作品はスキャンをしてデジタルデータでご応募ください<BR>入賞者には豪華賞品が贈られます<TABLE border="1"> <TR> <TD> <H3>賞品例</H3> <UL> 〈LI〉液晶ペンタブレット<LI>ギフト券3万円分〈LI〉大型ワイド液晶モニター </UL> </TD> <TD><IMG src="pic2 png" width="300" height="120" border="0" alt="賞品イラスト"></TD> </TR> </TABLE> </TD> </TR> </TABLE> </BODY> </HTML>スタイルシート(style.css) BODY { background-color : #ffcc66; background-image : ur l (back.png) ; background-repeat : repeat-y; H1 { font-size : 320%; text-align : right: H2 { border-bottom-width : 5px; border-bottom-style : dotted; border-bottom-color : #996666; UL ( line-height : 1.5em; background-color : #99cc66; list-style-type : square; }作成ページ１（index.html） <HTML> <HEAD> <TITLE>白井バーベキュー場トップ</TITLE> <LINK rel="stylesheet" href="style.css" type="text/css"> </HEAD> <BODY> <P>受験番号名前</P> <TABLE border="0"> <TR> <TD colspan="2" id="top"> <H1>白井バーベキュー場</H1>手ぶらで気軽にバーベキューを楽しもう！<BR> <IMG src="pic1.jpg" width="670" height="200" border="0" alt="バーベキュー場"> </TD> </TR> <TR> <TD id="navi"> <UL> <LI><A href="index.html">トップ</A> <LI><A href="page1.html">営業時間</A> <LI><A href="map.html">エリアマップ</A> <LI><A href="mailto:shira@goukaku.ne.jp">お問い合わせ</A> </UL> <A href="pam.pdf" target="_blank"><IMG src="icon1.png" width="180" height="80" border="0"></A></TD> <TD> <H2>イベント</H2>お子様も楽しめる内容になっております。 <TABLE border="1"> <TR> <TD>8月6日</TD> <TD>木工教室</TD> <TD rowspan="2"><A href="page2.html"><IMG src="icon2.png" width="265" height="80" border="0"></A></TD> </TR> <TR> <TD>8月20日</TD> <TD>自然体験ツアー</TD> </TR> </TABLE> <H2>バーベキューメニュー</H2>ご利用に応じてお選びください。 <TABLE border="1"> <TR> <TD> <OL> <LI>ライトプラン<LI>レギュラープラン<LI>デラックスプラン</OL> </TD> <TD><IMG src="pic2.jpg" width="265" height="170" border="0" alt="肉の写真"></TD> </TR> <TR> <TD colspan="2"><A href="page3.html"><IMG src="icon3.png" width="440" height="60" border="0"></A></TD> </TR> </TABLE> </TD> </TR> </TABLE> </BODY> </HTML>作成ページ2 （map.html）内容を変更した部分
<TITLE>エリアマップ</TITLE>
③ <H2>エリアマップ</H2>広々とした芝生は開放感いっぱい！水遊びもできます。<BR> <IMG src="map.png" width="448" height="250" border="0" usemap="#map" alt="エリアマップ"> <MAP name="map"> <AREA href="page4.html" shape="rect" coords="5,31,132,70" target="_blank"> <AREA href="page5.html" shape="rect" coords="298,151,425,193" target="_blank"> </MAP>
スタイルシート(style.css)
BODY { background-image : ur l (back1.png); background-repeat : repeat-y: #top { color : #ffffff: background-color : #66cc33; #navi { vertical-align : top; border-right-width : 6px; border-right-style : double: border-right-color : #663300; H1 { font-size : 340%; text-align : center; H2 ( font-size : 200%; text-decoration : underline; ol { font-style : italic: font-size : 120%; line-height : 2.5. color : #cc6633; UL { font-weight : bold: | ine height  : 2; background-image : ur I (back2 png) ; list-style-type : square: A  HOVER { position : relative; left : 2px; top : 2px; }