プログラミング基礎 I

第十回 (2011年 6月13日)

XHTML の応用・SVG の初歩

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

Martin J. Dürst

今日の予定

先週の宿題とまとめ
段落内の要素
XHTML の表 (活用と悪用)
CSS の二段組み
SVG の初歩

これからの予定

6月13日: XHTML の応用・SVG の初歩
6月20日: SVG の基礎
6月27日: SVG の応用
7月4日: 40分ぐらいの平常試験、SVG の応用

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

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

ページ外へのハイパーリンク
素片識別子によるページ内のハイパーリンク
画像 (アップロードの都合上、特別の例外として他者の画像も使っていいが、必ずページ内に出所を明記のこと)
ページ内の画像の色々な配置
各種のリンクを一つのではなく、複数

前回のまとめ

class 属性や id 属性によってスタイルは細かく指定可能
- class は要素の種類の小分け
- id はページ内の一個の要素の特定
CSS で .class と #id でクラスや識別子ごとにスタイル指定が可能
(X)HTML では Web アドレスがよくつかわれる
ハイパーリンク: a 要素の href 属性、 img 要素の src 属性など
Web アドレスは URI (Uniform Resource Identifier) 又は IRI (Internationalized Resource Identifier) で指定
Web アドレスの部分としてはスキーム、ドメイン名、パス等がある

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

<span>: 一般の要素、属性 (class, lang/xml:lang) で区別
例: 東京は中国語で<span lang='zh' xml:lang='zh'>东京</span>と書く
<em>: 強調
<strong>: 強く強調
<code>: プログラムなど
<var>: 変数
<ins>/<del>: 導入/削除
<abbr>/<acronym>: 略語; 例: <abbr title='青山学院大学'>青学</abbr>
<sup>/<sub>: 上付き^添字、下付き_添字

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分
住所	東京都渋谷区渋谷	相模原市中央区淵野辺

表の主な要素

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

表の活用と悪用

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

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

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

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

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

解決案 2: position

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

`position` の解決案の構造

<div>: position: relative
(これがないと absolute でページ全体が基本)
- <div>: width: 50%
  (両方とも absolute だと高さが取れない)
- <div>: width: 50%; position: absolute; left: 50%;
  (left: 50%; により右半分に移動)

`position` の特性値

static: 従来通り
relative: 従来通り場所を確保、その後移動
(例: <span style='position: relative; top: -1em'>これは例文です。</span>)
absolute: 場所は確保しない
fixed: ページに対してではなくウィンドウに対しての配置
場所の詳細の指定のための特性: top, bottom, left, right, width, height

XHTML の検証

W3C の Validator (http://validator.w3.org) で
Validate by File Upload を使う

必ず忘れないように!

SVG の初歩の例

パンダの顔 (のつもり)

SVG 用のインストール

最近の Opera, Firefox, Safari, Internet Explorer 9以降などに内蔵

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 の座標系

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

SVG の初歩の形

長方形: <rect x=左のx座標 y=上のy座標 width=幅 height=高さ />
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"円: <circle cx=中心のx座標 cy=中心のy座標 r=半径 />
多角形: <polygon points='x₁ y₁ x₂ y₂ x₃ y₃...'/>

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

xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"fill: (形の内部の) 色、初期値は black
stroke: (形の周りの) 線の色、初期値は none (透明)
stroke-width: 線の幅、初期値は 1

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

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

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

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

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

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

演習 2:

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