HTML5 まとめ01/【HTML5課題01~06】

HTML 課題


【HTML5課題01】

ドキュメントタイプ宣言を記述し、エンコードタイプを「UTF-8」で記述しなさい。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="">
<script src=""></script>
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/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; }
</style>
</head>
<body>
	
</body>
</html>


【HTML5課題02】

「ソファーがあって」の部分を強調して記述しなさい。


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML5課題02</title>
<link rel="stylesheet" href="">
<script src=""></script>
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/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; }
</style>
</head>
<body>
<h1>重要なフレーズを強調</h1>
<p>好きなカフェの条件は、<em>ソファーがあって、</em>コーヒーが美味しいことです。</p>
</body>
</html>


【HTML5課題03】

「注意事項」の部分を、相対的に重要性な高いレベルとして記述しなさい。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML5課題03</title>
<link rel="stylesheet" href="">
<script src=""></script>
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/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; }
</style>
</head>
<body>
<h1>注意、Attentionを表示調</h1>
<p><strong>注意事項</strong><br>
誤って飲み込むおそれがありますので、<strong>お子様の手の届かない所で保管</strong>してください。</p>
</body>
</html>



【HTML5課題04】
「ロールケーキ」の部分を、他との違いを表して記述しなさい。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML5課題04</title>
<link rel="stylesheet" href="">
<script src=""></script>
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/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; }
</style>
</head>
<body>
<h1>重要性ではなく違いを表示</h1>
<p>最近コンビにで売っているケーキ類が美味しい。特に<b>ロールケーキ</b>が美味しい。</p>
</body>
</html>


【HTML5課題05】

TPOを定義語として表示させなさい。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML5課題05</title>
<link rel="stylesheet" href="">
<script src=""></script>
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/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; }
</style>
</head>
<body>
<h1>TPOを定義語として記述</h1>
<p><dfn title="Time,Place,Occasion">TPO</dfn>は、時と場所と場合にあった服装やふるまいをすることであると定義されています。</p>
</body>
</html>

【HTML5課題06】

USAを略語として表示させなさい。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML5課題06</title>
<link rel="stylesheet" href="">
<script src=""></script>
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/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; }
</style>
</head>
<body>
<h1>USAを略語として記述</h1>
<p><abbr title="United States of America">USA</abbr>はアメリカ合衆国の略称です。</p>
</body>
</html>