HTML5課題15〜20

HTML5 課題

【HTML5課題15】

地図のPDFを表示させなさい。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML5課題15</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>地図のPDFを表示</h1>
<object data="image/ireland.pdf" width="600" height="700">
<p><img src="image/map.gif" alt="地図PDFのサムネイル"></p>
<p><a href="image/ireland.pdf">PDFのダウンロード</a></p>
</object>
</body>
</html>

【HTML5課題16】

動画を表示させなさい。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML5課題16</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>
<video src="image/sample.mp4" controls>
<p><img src="image/sample.jpg" alt="動画のサムネイル"></p>
<p><a href="image/sample.mp4">動画のダウンロード</a></p>
</video>
<p>※サンプル動画は無音です。</p>
</body>
</html>

【HTML5課題17】

音声を再生させなさい。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML5課題17</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>
<audio src="image/sample.mp3" cotrols>
<p>ブラウザ上で再生できない方は<a href="image/sample.mp3">音声のダウンロード</a>をどうぞ。</p>
</audio>
</body>
</html>

【HTML5課題18】

文章を内容でわけて表示させなさい。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML5課題18</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; }
</style>
</head>
<body>
<header>
<h1>クリスマスオーナメント</h1>
<p>クリスマスツリーに飾られるオーナメントをご紹介します。</p>
</header>

<section>
<h2>ツリートップ</h2>
<p>クリスマスツリーの先端に飾られるオーナメントで、星型をしていることが多い。地域によっては天使が使用されることもある。</p>
</section>

<section>
<h2>クリスマスボール</h2>
<p>光沢のあるボール型のオーナメントで、カラーが豊富。好みにあわせて選ぶことができる。</p>
</section>
</body>
</html>

【HTML5課題19】

ブログのエントリー記事を表示させなさい。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML5課題19</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>
<header>
<h1>カフェランチブログ</h1>
</header>
<article>
<h2>7月1週目ランチ</h2>
<p>ランチ特製ロコモコ丼が人気です。ボリューム満点のハンバーグに特製ソースで味付け！ぜひ食べに来てくださいね。</p>
<p><img src="image/locomoco.jpg" width="481" height="319" alt="ハンバーグ、目玉焼き、トマト、サニーレタスがのったロコモコ丼"></p>
</article>
</body>
</html>

【HTML5課題20】

見出しをまとめて表示させなさい。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML5課題20</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>
<header>
<hgroup>
<h1>七夕</h1>
<h2>日本五節句の一つ</h2>
</hgroup>
</header>
<section>
<h3>七夕の語源</h3>
<p>｢古事記｣または、日本書紀に登場する。</p>
</section>
</body>
</html>