プログラミング基礎 I

第十一回 (2012年 6月18日)

XHTML の応用・SVG の初歩

http://www.sw.it.aoyama.ac.jp/2012/PB1/lecture10.html

Martin J. Dürst

AGU

© 2006-12 Martin J. Dürst 青山学院大学

今日の予定

前回の宿題: リンクを生かしたウェブページ

先週までに作った本格的な Web ページにスタイルとリンクを追加:

前回のまとめ

段落内 (<p> 内) の要素

XHTML の表の単純な例

<table>
  <caption>青山学院大学のキャンパス</caption>
  <tbody>
    <tr><th>&nbsp;</th><th>青山</th>
      <th>相模原</th></tr>
    <tr><th>最寄りの駅</th><td>表参道</td>
      <td>淵野辺</td></tr>
    <tr><th>歩行</th><td>5分</td>
      <td>10分</td></tr>
    <tr><th>住所</th><td>東京都渋谷区渋谷</td>
      <td>相模原市中央区淵野辺</td></tr>
  </tbody>
</table>

例の表示

青山学院大学のキャンパス
  青山 相模原
最寄りの駅 表参道 淵野辺
歩行 5分 10分
住所 東京都渋谷区渋谷 相模原市中央区淵野辺

表の主な要素

表の活用と悪用

活用
表の構造をしているデータの記述
悪用
Web ページの内容の配置

参考のため: Throwing Tables Out the Window
(日本語)

Web ページの内容の配置に使える CSS

応用例: 二段のウェブページ

解決案 1: float (前回参照)

解決案 2: position

これは例文です。これは例文です。これは例文です。これは例文です。これは例文です。これは例文です。これは例文です。これは例文です。これは例文です。

これは例文です。これは例文です。これは例文です。これは例文です。これは例文です。これは例文です。これは例文です。これは例文です。これは例文です。

position の解決案の構造

position の特性値

SVG の初歩の例

パンダの顔 (のつもり)

パンダの顔

SVG 用のインストール

SVG 文書の外枠

<?xml version='1.0' encoding='utf-8'?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
         "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns='http://www.w3.org/2000/svg'
    xmlns:xlink='http://www.w3.org/1999/xlink'
    version='1.1'
    width='500px' height='500px'>
  <title>This is a test of SVG</title>
  ..
</svg>

SVG の座標系

パンダの顔の図 (ベクトル)

 

SVG の初歩の形

SVG の簡単なスタイルの特性

演習 1: 本格的な Web ページの拡張

今まで作った Web ページに今日習った要素とスタイルを
追加してもっと充実なものにして下さい。

特に表と二段組みに挑戦してください。

アップロードの都合上、内部スタイルシートを使い、リンクは公開された絶対 URI/IRI にして下さい。

授業中の他の学生に見せてもいい内容にしてください。

投稿前には Validator でチェック

6月22日 (金曜日) の 22:00 までに Moodle に投稿。

演習 2: 簡単な SVG の図形

SVG の外枠と初歩の形を使って簡単な図形を作ってください。

6月22日 (金曜日) の 22:00 までに Moodle に投稿。

演習 3: 作りたい面白い図形

(提出不要)

作りたい面白い図を考えてください。

今日習った SVG の部品以外に欲しい部品や機能を考えてください。