プログラミング基礎 I

略語の展開 (14 点)

次の略語の正式名称 (英語) を書き、その技術を簡単に説明しなさい。

XML: Extensible Markup Language, データや文書の記述に使える、要素名やざく生命が自分で決められる簡単な言語。
CSS: Cascading Style Sheets, XHTML, XML, SVG の見栄えをスタイルシートで多様に指定できる。
DTD: Document Type Definition, XML 文書の構造を定義するもの。どの要素にどの要素がどの順番で含まれるかなど。
URI: Universal/Uniform Resource Identifier, ウェブページなどを特定する識別子。リンクなどに使う。
IRI: Internationalized Resource Identifier, URI の国際版。URI には漢字などが使えないが、IRI ではつかえる。
HTTP: Hypertext Transfer Protocol, ウェブページなどを取り寄せるためのコンピュータの間のやり取りの取り決まり。
SVG: Scalable Vector Graphics, XML で拡大縮小可能な図を記述できるようなフォーマット

要素の仕分け (10点)

次の要素について、XHTML で使える要素の場合に XHTML の欄に○、そうでない場合に×、SVG で使える要素の場合に SVG の欄に○、そうでない場合に×を書きなさい。

番号	要素	XHTML	SVG	番号	要素	XHTML	SVG
例	`<p>`	○	×	例	`<circle>`	×	○
	`<h1>`	○	×		`<book>`	×	×
	`<body>`	○	×		`<a>`	○	○
	`<line>`	×	○		`<link>`	○	×
	`<ol>`	○	×		`<g>`	×	○
	`<div>`	○	×		`<animate>`	×	○

箱モデル関係の特性 (8点)

次の CSS の特性が存在する場合はその特性の説明を、存在しない場合は - を書きなさい。

番号	特性	説明及び -
	`border-style`	上右下左の枠の線の種類 (例: 点線) の設定
	`margin-size`	-
	`padding`	実際の内容の周り (枠の内側) に背景を上下左右にどのぐらい取るのか
	`padding-top`	実際の内容の周り (枠の内側) に背景を上側にどのぐらい取るのか
	`margin-left`	左の枠の線の外にの余白の幅
	`border-width-right`	-
	`border-right`	枠の線の右側の指定 (幅、種類 (style)、色)
	`padding-top-style`	-

XHTML と XML の比較 (6点)

XHTML は XML であり、XML も CSS によって見栄えを決めることができる。ウェブページにはなぜ単なる XML ではなく XHTML を使った方がよいか、その理由を三つ挙げなさい。

単なる XML ではリンクは作れない。

共通の要素名などを使うと色々ツールなどが作りやすい。

スタイルシートを一から全部指定する必要がない。

XML の文字符号化 (4点)

ある XML 文書の XML 宣言は <?xml version='1.0' encoding='UTF-8'?> となっているが、XML を読めるブラウザで文字化けする。文字化けの理由と対処法を述べなさい。

XML 宣言で宣言した文字符号化と実際の文字符号化は合わないといけないが合ってないみたいです。 XML 文書を文字化けなしに読めるプレインテキストエディタで読み込んで、UTF-8 として書き出す。

XML の修正 (15点)

次の XML の文書に 15 個の間違えがある。 (囲みの場合に両端の間違いは一個と数えられる。) 除去、追加、もしくは変更で修正しなさい。分かりやすいように直接文書の中に書き込みなさい。説明する必要はない。

<?xml verzion='1.1' encoding='utf_8'?>
<?xmlstylesheet href="book.css" type="test/css"?>
<!-- information about a book ->
<book year=2000>
  <title>Programming Perl, Third Edition</title>
  <authors>
    <author>Larry Wall</author>
    <author>Tom Christiansen</author>
    <author>Jon Orwant</authors>
  </authors>
  <publisher>O&apas;Reilly</publisher>
  <isbn>0-596-00027-8</isbn>
  <price currency='USD">49.95</price
  <評価><作者>Martin J. D&xFC;rst<作者>
    <文書>
     <段落>第一版は1991年に出ましたので、長年の定番。
       プログラム言語の Perl と一緒に成長しました。</段落>
     <段落>日本語版は何と<ﾋﾞｯｸﾘ>二冊で計1300ページ</ﾋﾞｯｸﾘ>になっています。
    </文書>
  </評価>
</Book>

DTD の内容モデル (20点)

次の DTD で ***** のところがまだ未定です。下のテーブルの上端に記載されている内容モデルをそれぞれ ***** に代入し、DTD を完成します。テーブルの左端にある実際の XML の文書の一部がそれぞれの DTD に合っているときに○、合ってないときにxを記入しなさい。

<!ELEMENT a EMPTY>
<!ELEMENT b EMPTY>
<!ELEMENT c EMPTY>
<!ELEMENT t ***** >

	`EMPTY`	`(#PCDATA)`	`(#PCDATA\|a\|b)*`	`(a\|b)`	`(a,b)`	`(a+)`	`(a*)`	`(a\|b)*`	`(a,b)+`
`<t/>`	○	○	○	×	×	×	○	○	×
`<t>hello</t>`	×	○	○	×	×	×	×	×	×
`<t><a/><b/></t>`	×	×	○	×	○	×	×	○	○
`<t><b/>hello` `</a></t>`	×	×	○	×	×	×	×	×	×
`<t><b/></t>`	×	×	○	○	×	×	×	×	×
`<t><a/></t>`	×	×	○	○	×	○	○	○	×
`<t><b/><a/></t>`	×	×	○	×	×	×	×	○	×
`<t><a/><a/></t>`	×	×	○	×	×	○	○	○	×
`<t><b/><c/></t>`	×	×	×	×	×	×	×	×	×
`<t><b/></b></t>`	×	×	○	×	×	×	×	○	×

HTML の要素 (10点)

次の HTML の要素の用途や役割を簡単に説明しなさい。

<head>: ウェブページ全体についての情報、大体表示されない

<title>: ウェブページのタイトル (ウィンドーバーに表示) 用の要素

<style>: <head> 内でスタイルを入れる要素

<div>: 複数の段落などを組み合わせる要素

<span>: 段落内用一般要素

<h2>: 中見出し、ウェブページの節の見出し

<dl>: 定義用箇条書き

<strong>: 強い強調

<abbr>: 略語; title 属性で発展@@@を入れられる

<sup>: 上付き添字

SVG による表示 (20点)

次の SVG で定義される図を下の方眼図に書き込みなさい。原点は左上で、一升の長さは縦横とも 20 である。黒い塗りつぶしは分かる程度でよい。線の幅は鉛筆の線一つでよい。

<?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='600' height='600'>
    <rect style='fill: black'
        x='200' y='100' height='40' width='80' />
    <rect style='fill: black'
        x='-100' y='200' height='20' width='400' />
    <rect style='fill: white'
        x='100' y='150' width='40' height='80' />
    <rect style='fill: none; stroke: black; stroke-width: 5'
        x='250' y='170' width='100' height='100' />
    <rect style='fill: white;  stroke: black; stroke-width: 5'
        y='290' x='50' width='100' height='100' rx='20' ry='40' />
    <defs>
      <rect id='長方形' x='0' y='0' width='100' height='100' />
    </defs>
    <use transform='translate(400,20)' xlink:href='#長方形'
        style='fill: black' />
    <use transform='translate(200,400) scale(1.5,0.5)'
        xlink:href='#長方形' style='fill: black' />
    <polygon points='400 200 500 200 400 300' style='fill: black' />
    <circle cx='120' cy='500' r='20' fill='black' />
    <ellipse cx='480' cy='480' rx='20' ry='60' />
</svg>

整形検証と整合検証 (5点)

整形検証と整合検証の差を説明しなさい。

整形検証は XML の基本的な書き方のルールの検証です。例えば要素がきちんと入れ子になっているかどうかなど。整合検証はある DTD と実際の XML 文書が合っているかどうかをチェックします。整形検証の場合には要素名、属性名は自由ですが、整合検証はそうではありません。

HTML の `<table>` (5点)

HTML の <table> の正しい使い方と悪用について説明しなさい。

<table> 要素はデータなどの表 (例: 学生の成績) のための要素で、ウェブページのレイアウト (例: 二段組、三段組) に悪用すると例えば目の不自由な人がページを読み上げるときなどに問題になります。レイアウトには CSS を使った方がいい。

XHTML と SVG でのスタイルの指定 (6点)

一般の XML でも XHTML でも SVG でも、CSS を使ってスタイルを指定できる。要素にスタイルを結びつける方法が色々あるが、一般の XML ではできないが XHTML と SVG で共通やほぼ共通にできる結びつけの方法を三つ述べて説明しなさい。

style 属性を要素に付ける

class 属性と .class 選択子の使用

id 属性と #id 選択子の使用

青山学院大学

略語の展開 (14 点)

要素の仕分け (10点)

箱モデル関係の特性 (8点)

XHTML と XML の比較 (6点)

XML の文字符号化 (4点)

XML の修正 (15点)

青山学院大学

DTD の内容モデル (20点)

HTML の要素 (10点)

SVG による表示 (20点)

青山学院大学

整形検証と整合検証 (5点)

HTML の `<table>` (5点)

XHTML と SVG でのスタイルの指定 (6点)

青山学院大学

略語の展開 (14 点)

要素の仕分け (10点)

箱モデル関係の特性 (8点)

XHTML と XML の比較 (6点)

XML の文字符号化 (4点)

XML の修正 (15点)

青山学院大学

DTD の内容モデル (20点)

HTML の要素 (10点)

SVG による表示 (20点)

青山学院大学

整形検証と整合検証 (5点)

HTML の <table> (5点)

XHTML と SVG でのスタイルの指定 (6点)

HTML の `<table>` (5点)