復習(1) HTML文書構造
Q01
(meta要素 文字コード指定も含む)
- A
<!doctype html> <htmllang="ja"> <head> <metacharset="utf-8"> <title></title> </head> <body> </body> </html>
Q02
- 池袋で猫カフェ「CatCafé」を開いてお客さんを呼びたいと思います
適切なtitle要素を記述しなさい
- A
<title>猫カフェ 池袋|CatCafé</title>
Q03
- 以下の内容をマークアップして適切な文書構造にしなさい
CatCaféのにゃんこ紹介 ●あたる(白キジトラ・オス) 目と耳が大きくてすばらしくイケメン。鳴き声もなかなかかわゆい。性格はいたってマイペース。 段ボール箱のかどや柱で爪とぎをするのが大好き。 [写真:幅200px 高さ200px] 特徴 大きな目と耳。まがったしっぽ。 性格 マイペース。
- A
<h1>CatCaféのにゃんこ紹介</h1> <h2>●あたる(白キジトラ・オス)</h2> <p>目と耳が大きくてすばらしくイケメン。鳴き声もなかなかかわゆい。 性格はいたってマイペース。 段ボール箱のかどや柱で爪とぎをするのが大好き。 </p> <imgsrc=""width="200px"height="200px">[写真:幅200px 高さ200px] <dl> <dt>特徴</dt> <dd>大きな目と耳。まがったしっぽ。</dd> <dt>性格</dt> <dd>マイペース。</dd> </dl>
Q04
- Q03の内容に「もっと見る→」というテキストを追加して、クリックしたら「cat」フォルダー内の「ataru.html」に遷移するように記述しなさい
- A
<h1>CatCaféのにゃんこ紹介</h1> <h2>●あたる(白キジトラ・オス)</h2> <p>目と耳が大きくてすばらしくイケメン。鳴き声もなかなかかわゆい。 性格はいたってマイペース。 段ボール箱のかどや柱で爪とぎをするのが大好き。 </p> <imgsrc=""width="200px"height="200px">[写真:幅200px 高さ200px] <dl> <dt>特徴</dt> <dd>大きな目と耳。まがったしっぽ。</dd> <dt>性格</dt> <dd>マイペース。</dd> </dl> <ahref="cat/ataru.html">もっと見る→</a>
Q05
- にゃんこの紹介を表組みで作りたいと思います(大きさは適宜)
「名前」「オス・メス」「特徴」「性格」「写真」という項目で、「あたる」を例に表示させなさい
- A
<tableborder="1"> <tr> <th>名前</th> <th>オス・メス</th> <th>特徴</th> <th>性格</th> <th>写真</th> </tr> <tr> <td>あたる</td> <td>オス</td> <td>大きな目と耳。まがったしっぽ。</td> <td>マイペース。</td> <td><imgsrc=""width="200px"height="200px"></td> </tr> </table>
Q06
- 以下の内容をマークアップして正しく表示させなさい
Copyright © CatCafé. All Rights Reserved.
- A
<small>Copyright © CatCafé. All Rights Reserved.</small>
Q07
<linkrel="stylesheet"href="css/style.css">