勉強部屋‎ > ‎HTML5‎ > ‎

HTML

演習1

次の条件のもとで「解答例」のように表示するHTMLファイルを作成せよ.
  • ブラウザのタイトルバーに「セミナー演習1」と表示する.
  • 1行目の「田中(哲)セミナー・・・」はヘッダーとする(headerタグを用いる).
  • 2行目の「HTML5で・・・」は大きい見出しとする.
  • 3行目からの「HTMLは5に~N4dKK」は一つの段落とする.
  • 「http://goo.gl/N4dKK」にそのURIへのリンクを張る.
  • QRコードの画像も上記URLへのアンカーとする.
  • QRコードの画像ファイルが,Webサーバの
        /var/www/html/u/429437/html5/images/sample-qr.png
    にあるものとする.これを絶対パスで指定して,画像を表示する.
    なお,WebサーバのHTML文書のルートは /var/www/html/ とする.
  • 画像の次の「セミナーの内容」は小さい見出しとする.
  • 「セミナーの内容」の下の3行は箇条書きとする.
  • 最後の行「このコンテンツのPDFファイル」はフッターとする(footerタグを用いる).
  • PDFファイルが
         /var/www/html/u/429437/html5/images/seminar.pdf
    にあるので,これを相対パスで指定する.
    なお,このHTMLファイルは,サーバの次のディレクトリに置くものとする.
        /var/www/html/u/429437/html5/seminar/

解答例

ソース

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <title>セミナー演習1</title>
  6. </head>
  7. <body>
  8.     <header>田中(哲)セミナー 定員8名 情報工学セミナーⅠ&amp;Ⅱ</header>

  9.     <h1>HTML5でゲームやスマホアプリを作ろう!</h1>

  10.     <p>HTMLは5になり,いろいろな機能が追加されました.例えばFlashやJavaを使わずに15パズルを作ることが出来ます.サンプルはWebで.<a href="http://goo.gl/N4dKK">http://goo.gl/N4dKK</a></p>

  11.     <a href="http://goo.gl/N4dKK"><img src="/u/429437/html5/images/sample-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="../images/seminar.pdf">PDFファイル</a></footer>
  21. </body>
  22. </html>

解説

  • title要素の内容がブラウザのタイトルバーに表示される.
    • 05行目:<title>セミナー演習1</title>
  • ヘッダーをheader要素で表現
    • 08行目:<header>田中(哲)セミナー 定員8名 情報工学セミナーⅠ&amp;Ⅱ</header>
  • &を表示するには,実体参照「&amp;」を用いる
  • 大きい見出しをh1要素で表現
    • 10行目:<h1>HTML5でゲームやスマホアプリを作ろう!</h1>
  • 段落はp要素で表現
    • 12行目:<p>HTMLは5になり,…</p>
  • リンクはa要素で表現
    • 12行目:<a href="http://goo.gl/N4dKK">http://goo.gl/N4dKK</a>
  • 絶対パスでは,ドキュメントルート以下のパスを指定
    • 14行目:src="/u/429437/html5/images/sample-qr.png
  • 小さい見出しをh2要素で表現
    • 16行目:<h2>セミナーの内容</h2>
  • 箇条書きはul要素で表現,各項目はli要素で表現
    • 17行目~23行目
  • フッターをfooter要素で表現
    • 25行目:<footer>このコンテンツの…</footer>
  • このHTMLファイルが置かれているディレクトリからの相対パスを指定する.
    • 25行目:<a href="../images/seminar.pdf">PDFファイル</a>