プログラミング基礎 I

第十一回 (2006年 7月 3日)

XHTML の表、SVG の基礎

http://www.sw.it.aoyama.ac.jp/2006/PB1/lecture11.html

Martin J. Dürst

duerst@it.aoyama.ac.jp, O 棟 529号室

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

目次

• これからの予定
• XHTML の表 (活用と悪用)
• SVG の基本

これからの予定

来週二回の授業:

1. 7月10日 (月曜日) 3限
2. 7月11日 (火曜日) 5限 (補講)

期末試験: 7月18日から7月31日まで、60分間

全体のスケジュール

先週の宿題: 本格的な Web ページの拡張

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

スタイルシートも合わせて拡張してください。

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

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

7月 2日 (日曜日) の 23:55 までに Moodle に投稿。

先週のまとめ

• XHTML の検証には W3C の Validator を使用
• 段落内の要素 (span 等)
• リンク: <a href='リンク先'>リンクのテキスト</a>
• ページ内の画像: <img src='画像ファイルの URI' alt='代行文章' />
• Web ページなどの指定には URI を使用
• URI の国際化版は IRI
• 箇条書きには <ul> (番号無し)、<ol> (番号付き)、<dl> (定義用) がある

XHTML の表の単純な例

<table>
  <caption>This is a table</caption>
  <tbody>
    <tr><th>青学キャンパス</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>

表の主な要素

• <table>: 表全体
• <caption>: 表の見出し
• <tbody> (table body): 表の本体
• <tr> (table row): 表の一行
• <th> (header table cell): 見出し用表のコマ
• <td> (data table cell): データ用の表のコマ

表の活用と悪用

活用

表の構造をしているデータの記述

悪用

Web ページの内容の配置

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

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

• float: left など: Web ページの一部を左寄せ
• position: absolute

SVG の例

パンダの顔 (のつもり)

SVG の名前

• Scalable 拡大縮小可能
• Vector ベクトル (反対: ラスタ)
• Graphics グラフィクス (図形、図)

ベクトル対ラスタ

(CSS で float と clear でページを配置する例でもある)

SVG 用のインストール

• Opera 8.5 の場合に内蔵 (Opera 9 で実装の更新)
• Internet Explorer, Firefox など:
  Adobe の 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-basic.dtd">
<svg xmlns='http://www.w3.org/2000/svg'
    xmlns:xlink='http://www.w3.org/1999/xlink'
    version='1.1'
    width='200px' height='200px'>
    <title>This is a test of SVG</title>
</svg>

SVG の座標系

• 左上が原点
• 右方向が +x、左方向が -x
• 下が +y、上が -y
• 単位が指定されてない場合はピクセル

SVG の基本形

• 長方形: <rect x=左のx座標 y=上のy座標 width=幅 height=高さ />
• 円: <circle cx=中心のx座標 cy=中心のy座標 r=半径 />
• 楕円: <ellipse cx=中心のx座標 cy=中心のy座標 rx=x方向の半径 ry=y方向の半径 />
• 線: <line x1='出発点のx座標' x2='...' y1='...' y2='...'/>
• 多角形: <polygon points='x1 y1 x2 y2 x3 y3...'/>

SVG の仕様書 (日本語)

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

• fill: (形の内部の) 色
• stroke: (形の周りの) 線の色
• stroke-width: 線の幅

SVG のスタイル付け

• 外部スタイルシート: 一般の XML と同様 (Opera 8.5 で使用不可)
• 内部スタイルシート: XHTML と似ている (Opera 8.5 で使用不可)
• style 属性: XHTML と同様
• 特性を属性として使用: SVG 独特
• class 属性: XHTML と同様
• id 属性: XHTML と同様
• 任意の形の組み合わせ: <g> (XHTML: <div>)

演習 1: 簡単な SVG の図

長方形、円、楕円などを使って簡単な SVG の図を作って下さい。

図に意味は必要ない。提出不要。

演習 2: 面白い SVG の図

長方形、円、楕円などを使って面白い SVG の図を作って下さい。

簡単でもいいですが、何か意味のあるものを作って下さい。

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

7月 9日 (日曜日) の 23:55 までに Moodle に投稿。