復習(1)　HTML文書構造 - 東京脱出日記　＜WEB勉強篇＞

Q01

DTD HTML5で基本構造を記述しなさい。

A01

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>A01 [DTD HTML5で基本構造を記述]</title>
</head>
<body>
<h1>A01 [DTD HTML5で基本構造を記述]</h1>
</body>
</html>

Q02

池袋で猫カフェ「CatCafé」を開いてお客さんを呼びたいと思います。適切なtitle要素を記述しなさい。

A02

<title>池袋　猫カフェ | CatCafe</title>

Q03

以下の内容をマークアップして適切な文書構造にしなさい。

CatCaféのにゃんこ紹介
●あたる（白キジトラ・オス）
目と耳が大きくてすばらしくイケメン。鳴き声もなかなかかわゆい。性格はいたってマイペース。段ボール箱のかどや柱で爪とぎをするのが大好き。
［写真：幅200px 高さ200px］
特徴
大きな目と耳。まがったしっぽ。
性格
マイペース。

A03

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>池袋　猫カフェ | CatCafe</title>
</head>
<body>
<h1>CatCaf&#233;のにゃんこ紹介</h1>

<h2>あたる<small>（白キジトラ・オス）</small></h2>
<p>
目と耳が大きくてすばらしくイケメン。鳴き声もなかなかかわゆい。
<br>性格はいたってマイペース。 段ボール箱のかどや柱で爪とぎをするのが大好き。
</p>
<img src="kijitora.jpg" width=200 height=200 alt="キジトラ">
<dl>
<dt>特徴</dt>
<dd>大きな目と耳。まがったしっぽ。</dd>
</dl>

<dl>
<dt>性格</dt>
<dd>マイペース。</dd>
</dl>

</body>
</html>

Q04

Q03の内容に「もっと見る→」というテキストを追加して、クリックしたら「cat」フォルダー内の「ataru.html」に遷移するように記述しなさい。

A04

<body>
<dl>
<dt>性格</dt>
<dd>マイペース。</dd>
</dl>

<p><a href="cat/ataru.html">もっと見る→</a></span></p>
</body>

Q05

にゃんこの紹介を表組みで作りたいと思います。（大きさは適宜）
「名前」「オス・メス」「特徴」「性格」「写真」という項目で、
「あたる」を例に表示させなさい。

A05

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>あたる</title>
</head>
<body>
<table width= 400 border= 1>
<tr><th>名前</th><td>あたる</td></tr>
<tr><th>オス・メス</th><td>オス</td></tr>
<tr><th>特徴</th><td>大きな目と耳<br>まがったしっぽ</td></tr>
<tr><th>性格</th><td>マイペース</td></tr>
<tr><th>写真</th><td><img src="kijitora.jpg" alt="あたる"></td></tr>
</table>
</body>
</html>

Q06

以下の内容をマークアップして正しく表示させなさい。

Copyright © CatCafé. All Rights Reserved.

A06

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>池袋　猫カフェ | CatCafe</title>

<style>

#footer{
  border-top:1px solid gray;
  color:gray;
  text-align:center;
}

</style>
</head>

<body>

<div id="footer">
<p><small>Copyright &#169; CatCaf&#233;. All Rights Reserved.</small></p>
</div><!--/#footer-->
</body>
</html>

Q07

HTMLドキュメントと同一階層にある「cssフォルダー」内にある、「style.css」を読み込む記述をしなさい。

A07

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>池袋　猫カフェ | CatCafe</title>
<link rel="stylesheet" href="cssフォルダ/style.css">
</head>