HTML5課題09〜14

HTML5 課題

【HTML5課題09】

面積の単位を表示させなさい。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML5課題09</title>
<link rel="stylesheet" href="">
<script src=""></script>
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/html5.js">
</script>
<![endif]-->
<!--[if lte IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
</head>
<body>
<h1>面積の単位を表示</h1>
<p>1辺の長さが1メートルの正方形の面積は、1m<sup>2</sup>と表します。</p>
</body>
</html>

【HTML5課題10】

引用を表示させなさい。

  • cite要素：引用元の作品名を表す
  • q要素：フレーズの引用を表す
  • quote（引用）
  • blockquote要素：まとまったかたまりの引用を表す

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML5課題10</title>
<link rel="stylesheet" href="">
<script src=""></script>
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/html5.js">
</script>
<![endif]-->
<!--[if lte IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
<style>
article, aside, dialog, figure, footer, header, hgroup, menu, nav, section { display: block; }
body {
	width: 500px;
}
</style>
</head>
<body>
<h1>読書メモ</h1>
<p>本のタイトルや気になったフレーズなどをメモしていきます。</p>
<cite>引用：グスコーブドリの伝記</cite>
<p>グスコーブドリは、<q>イーハトーヴの大きな森のなかに生まれました。</q></p>
<blockquote>
グスコーブドリは、イーハトーヴの大きな森のなかに生まれました。おとうさんは、グスコーナドリという名高い木こりで、どんな大きな木でも、まるで赤ん坊を寝かしつけるようにわけなく切ってしまう人でした。
ブドリにはネリという妹があって、二人は毎日森で遊びました。ごしっごしっとおとうさんの木を挽ひく音が、やっと聞こえるくらいな遠くへも行きました。二人はそこで木いちごの実をとってわき水につけたり、空を向いてかわるがわる山鳩の鳴くまねをしたりしました。するとあちらでもこちらでも、ぽう、ぽう、と鳥が眠そうに鳴き出すのでした。
</blockquote>
</body>
</html>

【HTML5課題11】

日付を表示させなさい。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML5課題11</title>
<link rel="stylesheet" href="">
<script src=""></script>
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/html5.js">
</script>
<![endif]-->
<!--[if lte IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
</head>
<body>
<h1>上野動物園のパンダに赤ちゃんが生まれる</h1>
<time datetime="2012-07-06" pubdate="pubdate">2012年7月6日</time>
</body>
</html>

【HTML5課題12】

話している部分を区別して表示させなさい。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML5課題12</title>
<link rel="stylesheet" href="">
<script src=""></script>
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/html5.js">
</script>
<![endif]-->
<!--[if lte IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
</head>
<body>
<h1>日記内で人が話している部分を区別</h1>
<p>今日はとても暑い日だった。日陰を歩いていたら、近くに居た人の声が聞こえてきた<br>
<i>「わあ！キレイ…！」</i><br>
思わず声のする方に目をやると、とてもキレイなひまわりが咲いていた。</p>
</body>
</html>

【HTML5課題13】

本来の文章の意図から離れて強調したい部分を区別して表示させなさい。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML5課題12</title>
<link rel="stylesheet" href="">
<script src=""></script>
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/html5.js">
</script>
<![endif]-->
<!--[if lte IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
<style>
article, aside, dialog, figure, footer, header, hgroup, menu, nav, section { display: block; }
body {
	width: 500px;
}
</style>
</head>
<body>
<h1>蛍光ペンである部分を区別</h1>
<p>先生はしばらく困ったようすでしたが、目を<mark>カムパネルラ</mark>の方へ向けて、「では<mark>カムパネルラ</mark>さん。」と名指ししました。するとあんなに元気に手をあげた<mark>カムパネルラ</mark>が、やはりもじもじ立ち上がったままやはり答えができませんでした。<br>
先生は意外なようにしばらくじっと<mark>カムパネルラ</mark>を見てましたが、急いで「では。」「よし。」と云いながら、自分で星図を指しました</p>
</body>
</html>

HTML5課題14】

コピーライトを表示させなさい。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML5課題14</title>
<link rel="stylesheet" href="">
<script src=""></script>
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/html5.js">
</script>
<![endif]-->
<!--[if lte IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
</head>
<body>
<h1>コピーライトを表示</h1>
<p>コピーライトとは著作権という意味です。</p>
<p><small>Copyright &copy; studio felica inc. All Rights Reserved.</small></p>
</body>
</html>