商品選択ページの作成練習 2

←このボタンをクリックして表示するWebページと、同じように見えるHTMLを以下に作成してください。(htmlタグなど、小文字を使っても影響がない範囲で小文字を使ってください。)
input要素は5箇所で使っています。その属性は、type、 value、 name の順番に指定してください。 （name属性の名前は、目標の動作結果から判断できます。 次ページへ 見えないhidden要素で伝達していることに注意）
　なお、商品群へのリンクファイルは、goodsB.htmlまたは goodsA.htmlの名前で、 これらファイルは ex のディレクトリ内にあります。 そして、<br clear="both">を2箇所で使っています。
また、bbb.cssの名前で、以下の内容のスタイルファイルを 利用するようにしてください。このファイルは、作成HTMLと同じ位置にあります。 

 div { background-color: #CCFF00; padding: 5px; overflow: hidden;}
 h1,h2,p { text-align: center; font-size: small; color: blue; border: solid 1px green;}
 div#links { background-color: #FFCCFF; padding: 5px;
	width: 20%; height: 305px; float: left; }
 #cart, #goods { background-color: #FFFF00;}
 #cart { min-height: 80px;}
 #goods { margin-top: 5px; }
 div.item { margin: 10px; border: solid 1px blue;
	width: 170px; height: 180px; float: left;}

←上記で編集した内容を、ブラウザで確認するボタンです
上のボタンで確認した後、正しいと思ったら、下の評価ボタンをクリックください。

←目標と同じ結果が得られるように修正してからクリックください。（下の枠に出たメッセージの⇒をクリックすると、違うと判断される近辺の行が反転します）
←作り方はいろいろですが、わからない場合や正解しない場合は、答えを見て出題されるパターンを学習し、再度チャレンジしてください。

以下で、この問題で使われる画像ファイルを示します。 これらのファイルは、 出題されるHTMLの位置と同じディレクトリ内に位置するimgディレクトリ内に存在します。

gA1.png→ gA2.png→
gB1.png→ gB2.png→

なお出題パターンは、ブラウザの更新操作で 異なる問題にできます。更新操作によりさまざまな問題にチャレンジして、このパターンのどんな問題でも答えを見ないで出来るまで何回でも行ってみましょう。タグなどを完全に暗記する必要はありませんが、タグの意味が理解できて、 作ったものがブラウザでどう反映されるかを想像できるようにすることが大切です。