HTML

演習1

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

  • ブラウザのタイトルバーに「セミナー 演習1」と表示する.
  • 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/ へのアンカーとする.

別ウィンドウで開く

ソース

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>セミナー演習1</title>
  6. </head>
  7. <body>
  8. <header>田中(哲)セミナー 情報工学セミナーⅠ&amp;Ⅱ</header>
  9. <h1>HTML5でゲームやスマホアプリを作ろう!</h1>
  10. <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>
  11. <a href="https://goo.gl/ssHjXp"><img src="images/samples-qr.png" width="100" height="100" alt="サンプルページのQRコード" title="サンプルページのQRコード" /></a>
  12. <h2>セミナーの内容</h2>
  13. <ul>
  14. <li>前半は,解説記事の輪講と演習で基礎体力増強
  15. <ul>
  16. <li>HTMLとは,CSSとは,Javascriptとは</li>
  17. </ul></li>
  18. <li>後半は,何か新しい or 何か役に立つ or 何か面白いコンテンツを各自で作成.</li>
  19. </ul>
  20. <footer><a href="http://www.tntetsu-lab.cs.kanagawa-it.ac.jp/">田中哲雄研究室</a></footer>
  21. </body>
  22. </html>

解説

  • title要素の内容がブラウザのタイトルバーに表示される.
    • 06行目:<title>セミナー演習1</title>
  • ヘッダーをheader要素で表現
    • 09行目:<header>田中(哲)セミナー 定員8名 情報工学セミナーⅠ&amp;Ⅱ</header>
  • &を表示するには,実体参照「&amp;」を用いる
  • 大きい見出しを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>