作成ページ(index.html) <HTML> <HEAD> <T I TLE>和小物の店はなトップ</T I TLE> </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>1階丸テーブル</TD> <TD>2階アトリエ</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:ao@goukaku.ne.jp">お問い合わせ</A> </UL> </TD> <TD> <IMG src="pic1.png" width="500" height="375" border="0" alt="イベント会場"><BR> 11月3日から5日まで開催<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="342" height="40" border="0"></A></TD> </TR> <</TABLE> </TD> </TR> </TABLE> </BODY> </HTML>作成ページ(index.html) <HTML> <HEAD> <T I TLE>登山講習会トップ</T I TLE> <LINK rel="stylesheet" href="style.css" type="text/css"> </HEAD> <BODY> <P>受験番号　名前</P> <TABLE border="0"> <TR> <TD col span="4"> <H1><A name="top">登山講習会</A></H1> </TD> </TR> <TR> <TD><A href="page1.html">講習一覧</A></TD> <TD><A href="page2.html">講師養成</A></TD> <TD><A href="page3.html">登山ツアー日程</A></TD> <TD><A href="mailto:tozan@goukaku.ne.jp">お問い合わせ</A></TD> </TR> <TR> <TD colspan="4"><IMG src="pic1.jpg" width="640" height="425" border="0" alt="山lに登る人"><BR>登山を楽しむために技術と知識を身に付けましょう<BR>正しい知識を持った経験者からしっかりと指導を受けられます<H2>11月の講習</H2> <TABLE border="1"> <TR> <TD> <H3>テーマ</H3> <OL> 〈LI〉地図を読む<Li>テント泊</OL> </TD> <TD><IMG src="pic2.jpg" width="200" height="200" border="0" alt="テントの写真"></TD> </TR> <TR> <TD colspan="2">安全に無理なく実施します</TD> </TR> </TABLE> <H2>クラブ新規入会について</H2>ツアーの優先予約ができ、料金が会員価格となります。<BR> <A href="page4.html"><IMG src="icon.png" width="255" height="40" border="0"></A> <HR> <A href="#top">ページの先頭へ</A></TD> </TR> </TABLE> </BODY> </HTML>スタイルシート(style.css) BODY { background-image : url (back.png); background-repeat : repeat-x; H1 { font-size : 340%; text-align : center; color : #003300; H2 { font-style : italic; color : #ffffff; background-color : #99cc66; A { font-weight : bold; line-height : 2:作成ページ1  (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="300" 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:iwai@goukaku.ne.jp">お問い合わせ</A> </UL> <A href="chi.pdf" target="_blank"><IMG src="icon1.png" width="180" height="80" border="0"></A></TD> <TD> <H2>イベント</H2>学びながら楽しめる内容を企画しました<TABLE border="1"> <TR> <TD>10月29日</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>11月5日</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="425" 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="473" height="250" border="0" usemap="#map" alt="展示室のマップ"> <MAP name="map"> <AREA href="page4.html" shape="rect" coords="46,60,184,124" target="_blank"> <AREA href="page5.html" shape="rect" coords="288,60,427,124" target="_blank"> </MAP>
スタイルシート(style.css)
BODY { background-image : url (back1 png); background-repeat : repeat-y: #top { color : #ffffff: background-color : #009cc; #navi { vertical-align : top; border-right-width : 3px; border-right-style : dotted: border-right-color : #003366; H1 { font-size : 360%; text-align : center; H2 ( font-size : 150%; text-decoration : underline; OL { font-style : italic; |ine-height : 2em; color : #663366; UL ( font-weight : bold; line-height : 2.5em; background-image : url (back2 png); A hover { position : relative; left : 2px; top : 2px; J