HTML

演習１

次の条件のもとで「解答例」のように表示するHTMLファイルを作成せよ．

ブラウザのタイトルバーに「セミナー演習１」と表示する．
1行目の「田中・・・」はヘッダーとする（headerタグを用いる）．
3行目の「HTML5で・・・」は大きい見出しとする．
5行目からの「HTMLは5に・・・で検索」は一つの段落とする（h1タグを用いる）．
「15パズル」をアンカーとして，http://www.tntetsu.com/html5-samples/10-puzzle15.html にリンクをはる．「サンプルはWebで」をアンカーとして，https://goo.gl/ssHjXp にリンクを張る．「HTML5 勉強部屋」をアンカーとして，https://www.google.co.jp/search?q=HTML5+勉強部屋にリンクをはる
画像ファイルは，http://www.tntetsu.com/html5-seminar/images/samples-qr.png にあるので，これをダウンロードして，Webサーバ配下に保存し，カレントディレクトリからの相対パスで指定する．更に，画像をhttps://goo.gl/ssHjXp へのアンカーとする．
画像の次の「セミナーの内容」は小さい見出しとする（h2タグを用いる）．
「セミナーの内容」の下は箇条書きとする．
最後の行「田中哲雄研究室」はフッターとする（footerタグを用いる）．また，http://www.tntetsu-lab.cs.kanagawa-it.ac.jp/ へのアンカーとする．

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>セミナー演習１</title>
</head>
<body>
<header>田中(哲)セミナー情報工学セミナーⅠ&Ⅱ</header>
<h1>HTML5でゲームやスマホアプリを作ろう!</h1>
<p>HTMLは5になり，いろいろな機能が追加されました．例えばFlashやJavaを使わずに<a href="http://www.tntetsu.com/html5-samples/10-puzzle15.html">15パズル</a>を作ることが出来ます．<a href="https://goo.gl/ssHjXp">サンプルはWebで</a>．「<a href="https://www.google.co.jp/search?q=HTML5+%E5%8B%89%E5%BC%B7%E9%83%A8%E5%B1%8B">HTML5 勉強部屋</a>」で検索．</p>
<a href="https://goo.gl/ssHjXp"><img src="images/samples-qr.png" width="100" height="100" alt="サンプルページのQRコード" title="サンプルページのQRコード" /></a>
<h2>セミナーの内容</h2>
<ul>
<li>前半は，解説記事の輪講と演習で基礎体力増強
<ul>
<li>HTMLとは，CSSとは，Javascriptとは</li>
</ul></li>
<li>後半は，何か新しい or 何か役に立つ or 何か面白いコンテンツを各自で作成．</li>
</ul>
<footer><a href="http://www.tntetsu-lab.cs.kanagawa-it.ac.jp/">田中哲雄研究室</a></footer>
</body>
</html>

title要素の内容がブラウザのタイトルバーに表示される．
- 06行目：<title>セミナー演習１</title>
ヘッダーをheader要素で表現
- 09行目：<header>田中(哲)セミナー定員8名情報工学セミナーⅠ&Ⅱ</header>
&を表示するには，実体参照「&」を用いる
大きい見出しをh1要素で表現
- 11行目：<h1>HTML5でゲームやスマホアプリを作ろう!</h1>
段落はp要素で表現
- 13行目：<p>HTMLは5になり，…</p>
リンクはa要素で表現
- 13行目：<a href="http://www.tntetsu.com/html5-samples/10-puzzle15.html">15パズル</a>
小さい見出しをh2要素で表現
- 17行目：<h2>セミナーの内容</h2>
箇条書きはul要素で表現，各項目はli要素で表現
- 18行目～24行目
フッターをfooter要素で表現
- 26行目：<footer>このコンテンツの…</footer>

Google Sites

Report abuse