情報基礎実習2013第8回テキスト

情 報 基 礎 実 習 第 8 回 2014 年 6 月 12 日 ( 木 ) 6 月 13 日 ( 金 ) 担 当 教 員 : 逸 村 裕 高 久 雅 生 TF: 池 田 光 雪 普 段 我 々がアクセスする Web サイトは ほぼ 全 てが 様 々な 言 語 や 技 術 を 併 用 して 運 用 さ れている その 中 でも 最 も 基 礎 的 な 言 語 である Hyper Text Markup Language(HTML) の 仕 組 みを 今 回 は 学 ぶ カリキュラムの 制 約 上 HTML 以 外 の 言 語 は Cascading Style Sheets(CSS)のみ 9 章 で 軽 く 触 れるに 留 める 第 7 回 の 授 業 では HTML を 使 って 簡 単 な Web ページを 作 ったが 今 回 は 画 像 他 のフ ァイルへのハイパーリンクなどを 組 み 込 んだ Web ページを 作 成 する また Word などで も Web ページを 作 成 し 自 身 がメモ 帳 で 作 成 したものとどう 違 うかも 比 較 する さらに HTML の 妥 当 性 の 検 証 も 扱 う 今 回 の 内 容 第 7 回 の 授 業 で 扱 った 内 容 を 理 解 していることを 前 提 としている また テキストには いくつかの 演 習 問 題 を 載 せているが やや 発 展 的 な 演 習 には 発 展 的 な 演 習 には 非 常 に 発 展 的 な 演 習 には を 付 与 した 取 り 組 む 順 序 などの 参 考 にすること また この 分 野 における 専 門 用 語 はゴシック 体 の 太 字 で 表 した Web ページに 画 像 を 埋 め 込 む Web ページにハイパーリンクを 張 る Microsoft Word 2010, Microsoft Excel 2010 から Web ページを 作 る Microsoft Word 2010 を 使 いデザイン 文 字 数 式 画 像 ハイパーリンクの 入 った Web ページを 作 る 正 しい HTML ファイルが 書 けたかを 検 証 する CSS を 使 ってレイアウトなどを 変 える 出 席 確 認 課 題 第 7 回 の 出 席 課 題 で 作 成 した first.html を 次 の 条 件 (1)~(4)を 満 たすように 修 正 し Internet Explorer 9 から Web 経 由 で 閲 覧 印 刷 して 用 紙 の 左 上 に 学 籍 番 号 と 氏 名 を 記 入 して 提 出 せよ なお ファイルの 位 置 は www フォルダ 直 下 のまま 変 更 しないこと (1) 画 像 が 埋 め 込 んであること ただし 出 典 の 表 示 は 第 5 回 レポートに 準 ずるものとする (2) ul 要 素 を 使 った 箇 条 書 きがあること (3) 他 の Web サイトへのハイパーリンクがあること (4) title 要 素 の 内 容 が 情 報 基 礎 実 習 第 8 回 出 席 課 題 であること 1

今 回 のレポート 課 題 締 め 切 り 木 曜 クラス:6 月 18 日 ( 水 )15:00 金 曜 クラス:6 月 19 日 ( 木 )15:00 内 容 最 低 限 次 の 条 件 (1)~(6)をすべて 満 たす ファイル 名 を welcome.html とする 1 つの HTML ファイルを 作 成 し http://www.u.tsukuba.ac.jp/~s14xxxxx/welcome.html のよ うな URL から 閲 覧 できるよう Web に 公 開 せよ(14xxxxx の 部 分 は 各 自 の 学 籍 番 号 下 7 桁 である) また The W3C Markup Validation Service で Passed 判 定 が 出 る さら には Another HTML-lint gateway で 100 点 満 点 となる Web ページは 加 点 対 象 とする Passed 判 定 や 100 点 満 点 となる Web ページを 作 成 した 場 合 は それぞれ 達 成 できた ことがわかるような 記 述 を Web ページ 中 に 入 れよ (1) 内 容 を 情 報 基 礎 実 習 第 8 回 レポート 課 題 とする title 要 素 を 含 む (2) ul 要 素 を 使 った 箇 条 書 きを 含 む (3) 写 真 が img 要 素 で 埋 め 込 まれている( 出 典 の 表 示 は 第 5 回 レポートに 準 ずるもの とする) (4) PowerPoint で 自 身 が 作 成 したイラストが img 要 素 で 埋 め 込 まれている (5) 他 の Web ページへのハイパーリンクを 含 む (6) ブラウザにおいてページの 拡 大 縮 小 さらにはブラウザのウィンドウの 高 さ 幅 を 変 えても 表 示 が 大 きく 崩 れない 提 出 物 次 の(A)~(C)を A4 片 面 モノクロ 印 刷 し この 順 で 左 上 1 箇 所 をステイプラー( 針 無 しは 不 可 )で 左 上 1 箇 所 を 綴 じたもの A) Lab2014-1.docx を 元 に 次 の(ア)~(ウ) 全 てを 記 した Word 文 書 (ア) Web ページ 作 成 に 当 たって 工 夫 を 凝 らした 点 (イ) Word などで 生 成 した HTML ファイルと 自 分 で HTML タグを 打 ち 込 み 作 成 した HTML ファイルそれぞれの 特 徴 や 長 所 短 所 等 の 比 較 (ウ) 第 8 回 の 授 業 内 容 で 印 象 に 残 った 点 及 び 感 想 またもしあれば 残 りの 授 業 における 要 望 B) welcome.html をメモ 帳 で 開 き 印 刷 したもの ただし 表 示 設 定 は 初 期 設 定 (フォ ントの MS ゴシックの 標 準 12 ポイント)のままとせよ C) welcome.html を Internet Explorer 9 で 開 き 印 刷 したもの 提 出 先 春 日 エリア 7B 棟 2 階 学 務 前 レポートボックス 備 考 レポートの 採 点 は Web ページにおいてどのような 技 術 を 使 っているか および 使 いこなしているかに 重 点 を 置 く レポート 課 題 の 採 点 対 象 は welcome.html の HTML ファイルのみとする たとえ ば CSS を 外 部 参 照 している 場 合 CSS 部 分 は 採 点 の 対 象 としない この 場 合 は 2

style 要 素 や style 属 性 で 指 定 するなどの 方 法 を 採 ること レポート 中 のあらゆる 箇 所 において 手 書 きは 不 可 とする 提 出 先 を 間 違 った 場 合 原 則 として 採 点 の 対 象 外 とする 課 題 名 はふさわしいものを 各 自 で 考 案 し 記 述 すること 提 出 後 におけるいかなるレポートの 差 し 替 えも 認 めない レポートを 作 成 した 後 welcome.html はレポートが 返 却 されるまで 一 切 更 新 することを 禁 ずる もしファイルの 最 終 更 新 日 時 が 締 め 切 りを 超 過 していた 場 合 大 幅 な 減 点 をするか もしくは 採 点 の 対 象 外 とする また index.html のような ピリオドより 前 のファイル 名 が index となるファ イルは www フォルダ 以 下 には 置 かないこと 1. HTML の 構 造 Hyper Text Markup Language(HTML)は 文 書 を 構 造 化 するマークアップ 言 語 の 一 種 である 一 般 に 文 書 は 見 出 し 本 文 箇 条 書 き 斜 体 部 分 など 様 々な 単 位 に 分 割 可 能 であるが HTML ではこれらの 単 位 を 要 素 として 扱 う HTML では 要 素 を 表 すため にタグを 用 いている 要 素 は 通 常 開 始 タグと 終 了 タグで 内 容 を 挟 むことにより 表 現 される ただし img 要 素 ( 画 像 の 埋 め 込 み)など 内 容 を 持 たないため 終 了 タグを 必 要 としない 要 素 もある また HTML では p 要 素 のような 終 了 タグを 省 略 可 能 な 要 素 がある 省 略 不 可 能 なタグを 省 略 してもブラウザが 拡 張 解 釈 を 行 うため 大 抵 の 場 合 は 表 示 することは 可 能 だが 省 略 しな いことが 望 ましい(7 章 で 詳 しく 述 べる) 要 素 の 開 始 タグには その 要 素 の 性 質 などを 表 す 属 性 を 記 述 することができる 属 性 に は 他 の Web ページなどへのハイパーリンクの URL(a 要 素 の href 属 性 ) フォントの 色 (font 要 素 の color 属 性 )などを 指 定 するものがある 1 つの 要 素 に 複 数 の 属 性 を 記 述 する ことも 可 能 で その 場 合 は 半 角 スペースで 属 性 間 を 区 切 る 属 性 の 値 は 引 用 符 (" あるいは ) で 囲 む HTML では 値 によっては 引 用 符 を 省 略 可 能 だが 値 の 範 囲 を 明 確 に 定 めるために これも 省 略 しないことが 望 ましい HTML においては 一 部 の 属 性 値 を 除 き 要 素 名 属 性 名 属 性 値 に 大 文 字 小 文 字 の 区 別 をしない したがって どちらを 使 っても 構 わない(たとえば title 要 素 の 開 始 タグは <title> <TITLE>どちらの 表 記 でも 構 わない)が HTML の 後 継 にあたる XHTML では 全 て 小 文 字 で 記 述 しなければならない 制 約 が 加 わっているため HTML でも 小 文 字 を 使 う 事 が 望 ましい 以 下 本 テキストでは 全 て 小 文 字 で 記 述 する 3

図 1. フォルダとファイル 配 置 の 例 2. 相 対 パスと 絶 対 パス HTML においてファイルやフォルダの 場 所 を 表 すにはパスを 用 いる パスは 絶 対 パス( 絶 対 URL)と 相 対 パス( 相 対 URL)の 2 種 類 があり 絶 対 パスは http://から 始 まる URL を 書 き Web のどこに 対 象 とするファイルが 位 置 するのかを 指 定 する 方 法 相 対 パスはその 表 記 がある 箇 所 から 対 象 とするファイルが 相 対 的 にどこに 位 置 するのかを 記 述 する 方 法 であ る 筑 波 大 学 春 日 エリアの 住 所 を 表 すことにたとえれば 絶 対 パスは つくば 市 春 日 1-2 という 書 き 方 相 対 パスは つくば 駅 から 北 北 西 に 300m という 書 き 方 に 相 当 する 学 籍 番 号 201499999 の 学 生 が www フォルダに 図 1 のような 構 成 でファイルとフォルダ を 配 置 した 場 合 を 考 える このとき first.html から diary フォルダの 0612.html を 参 照 す るには 絶 対 パスでは http://www.u.tsukuba.ac.jp/~s1499999/diary/0612.html と 相 対 パ スでは diary/0612.html と 記 述 する 次 に 0612.html から 同 じフォルダにある lunch.png を 参 照 する 場 合 を 考 える このと き 相 対 パスでは./lunch.png あるいは lunch.png と 記 述 する 相 対 パスにおいて 同 じ フォルダは. /(ピリオド 1 つとスラッシュ 1 つ)で 表 すが これは lunch.png のように 省 略 可 能 である 最 後 に diary フォルダにある 0612.html から img フォルダにある icon.png を 参 照 する 場 合 を 考 える このとき 相 対 パスでは../img/icon.png と 記 述 する 相 対 パスにおいて.. /(ピリオド 2 つとスラッシュ 1 つ)はそのファイルやフォルダが 格 納 されているフォル ダ(1 つ 上 のフォルダ)を 意 味 する 絶 対 パスと 相 対 パスは 正 しく 記 述 できてさえすればどちらを 使 ってもよい ただしその 仕 組 み 上 他 の Web サイトにあるファイルは 絶 対 パスでしか 記 述 することができない これらの 記 法 間 で 大 きな 差 が 生 じるのは パスで 記 述 したファイルやフォルダを 移 動 し たときである ファイルやフォルダの 位 置 関 係 を 変 更 した 場 合 絶 対 パスでの 記 述 は 必 ず 書 き 換 えが 必 要 となる しかし 相 対 パスで 記 述 した 場 合 は 書 き 換 えが 必 要 ないことがある 1 例 として 図 1 において diary フォルダ 内 の 0612.html から 同 ファイルの lunch.jpg を 参 照 1 相 対 パスの 場 合 別 途 base 要 素 で 基 準 となる URL を 設 定 することでより 高 度 な 指 定 を することも 可 能 である 4

することを 考 える 前 述 の 通 り 絶 対 パスで 記 述 すれば http://www.u.tsukuba.ac.jp/~s1499999/diary/lunch.jpg 相 対 パスで 記 述 すれば lunch.jpg となる ここで 0612.html と lunch.jpg を www フォルダ 直 下 に 移 動 したとする この 場 合 絶 対 パスでは http://www.u.tsukuba.ac.jp/~s1499999/lunch.jpg のように 表 記 が 変 わる が 相 対 パスは lunch.jpg のままであり 変 更 の 必 要 はない 3. 画 像 を 埋 め 込 む HTML 文 書 中 に 画 像 を 埋 め 込 むには img 要 素 と src 属 性 を 用 いる たとえば 同 じフォル ダにある example.png という 画 像 を 相 対 パスを 使 って 埋 め 込 むには <img src="example.png"> と 記 述 する また img 要 素 は width 属 性 と height 属 性 を 使 って 表 示 する 大 きさを 変 える ことができる それぞれの 属 性 値 はピクセル 数 またはブラウザに 対 する 表 示 率 ( %)を 取 る たとえば example.png が 幅 400px 高 さ 300px の 画 像 の 場 合 縦 横 を 2 倍 にした 幅 800px 高 さ 600px の 画 像 として 表 示 するには <img src="example.png" width= 800 height= 600 > と 記 述 する ただし 属 性 値 として 200%を 指 定 しても それは HTML ファイルを 表 示 し ているブラウザのウィンドウサイズに 対 して 200%のサイズで 表 示 という 意 味 であり この 場 合 800px を 意 味 するわけではないということに 注 意 せよ width 属 性 と height 属 性 の 両 方 を 記 述 した 場 合 元 の 画 像 の 縦 横 比 と 異 なっていてもその 通 りに 表 示 されるが どちら か 一 方 を 省 略 した 場 合 は 縦 横 比 が 維 持 されるようにもう 片 方 が 自 動 で 計 算 される また 両 方 を 省 略 した 場 合 は 画 像 の 元 の 大 きさのまま 表 示 される なお 一 般 に HTML では 属 性 間 の 順 序 は 無 視 される したがって たとえば 上 記 の 例 において width, height, src の 順 で 属 性 を 記 述 したとしても 表 示 は 全 く 同 じとなる img 要 素 を 使 えば 技 術 上 はあらゆる 画 像 を 埋 め 込 むことが 可 能 であるが 画 像 を 技 術 的 に 埋 め 込 めるということと 法 律 的 ( 著 作 権 肖 像 権 等 )に 埋 め 込 みが 許 されるかは 別 問 題 であること 注 意 せよ 情 報 基 礎 実 習 で 作 成 する Web ページにおいては 画 像 を 埋 め 込 む 場 合 は 原 則 として 出 典 を 明 記 すること 演 習 1 画 像 を first.html 中 に 埋 め 込 め 4. ハイパーリンクを 張 る 他 の Web サイトやファイルへのハイパーリンクを 張 るには a 要 素 と href 属 性 を 使 って <a href= 相 対 パスもしくは 絶 対 パス > 見 出 しとなる 内 容 </a> と 記 述 する この 要 素 をブラウザで 見 るとアンダーラインがついて 色 が 変 わり 見 出 しとなる 内 容 5

と 表 示 される 2 このとき 見 出 しとなる 内 容 をクリックすれば 絶 対 パスか 相 対 パスで 指 定 した URL が 開 かれる 見 出 しとなる 内 容 は 自 由 に 設 定 可 能 であり この 中 に img 要 素 を 記 述 することで 画 像 をリンクとすることも 可 能 である 見 出 しとなる 内 容 に 何 も 書 かない ことも 可 能 ではあるが その 場 合 クリックできなくなることに 注 意 せよ 演 習 2 first.html から 他 の Web ページへのリンクを 張 れ 5. Word, Excel を 使 って Web ページを 作 る 全 学 計 算 機 システムで Web ページを 公 開 するには 所 定 の 手 続 きをした 後 HTML フ ァイルを www フォルダに 置 くだけでよい ここまでの 演 習 ではメモ 帳 を 使 って 自 分 自 身 で 要 素 を 打 ち 込 み HTML ファイルを 作 成 してきたが これまでの 授 業 で 扱 った Word や Excel でも Web ページを 作 成 することが 可 能 である Word と Excel の 場 合 は [ファイル]タブから[ 名 前 をつけて 保 存 ]を 選 択 し [ファイル の 種 類 (T):]を 単 一 ファイル Web ページ(*.mht;*mhtml) や Web ページ(*.htm; *.html) として 保 存 することで Web ページを 生 成 できる このとき ファイル 名 に 全 角 文 字 が 使 わ れているのであれば 全 て 半 角 文 字 にせよ たとえば 元 のファイル 名 が 情 報 基 礎 実 習 第 7 回.docx であれば jk13_07.html のようなファイル 名 にすることが 望 ましい 演 習 3 (1) Word 文 書 を Web ページとして 保 存 し どのようなファイルやフォルダが 作 られたか を 調 べ まとめよ (2) Excel の 1 シートを Web ページとして 保 存 せよ その 際 ページタイトルが Excel で Web ページ 作 成 となるように 設 定 せよ 6. Word を 使 いデザイン 文 字 数 式 画 像 リンクの 入 った Web ページを 作 る Word を 使 うことで HTML をよく 理 解 していなくとも Web ページを 作 ることができる 第 1 回 授 業 では 扱 わなかった Word の 機 能 を 含 んだ 様 々な 機 能 を 使 って Word 文 書 を 作 り それを Web ページにしてみよ 6.1 デザイン 文 字 (ワードアート)を 描 く( 実 習 の 手 引 き p.190) Word では 文 字 に 対 し 様 々なエフェクトを 付 与 することが 可 能 である 2 CSS で 明 示 的 に 設 定 していない 場 合 はブラウザの 設 定 に 依 存 するが 初 期 状 態 では リ ンク 先 がそのブラウザ 上 で 未 読 であれば 青 色 既 読 であれば 紫 色 になる 6

6.2 数 式 を 入 力 する( 実 習 の 手 引 き p.191-194) 数 式 エディタを 使 うことで 複 雑 な 数 式 でも 綺 麗 に 表 示 させることが 可 能 である Ψ + 2m (E 2 V)Ψ = 0 ħ 6.3 図 や 写 真 を 入 れる( 実 習 の 手 引 き p.183-184) 本 テキストのように 図 や 写 真 を 入 れることも 可 能 である また 図 表 番 号 を 自 動 で 振 ることも 可 能 なので Word で 長 い 文 書 を 作 成 するときは 積 極 的 に 活 用 せよ 6.4 ハイパーリンクを 張 る [ 挿 入 ]タブ 内 真 ん 中 やや 左 の リンク から[ハイパーリンク]を 選 択 する 表 示 文 字 列 (T): が 4 章 の a 要 素 でいう 見 出 しとなる 文 字 列 アドレス(E:) が href 属 性 の 属 性 値 にあたる 相 対 パスで 別 のファイルへのリンクを 作 成 するには 目 的 となるファイルをク リックして 選 択 すればよい すると 自 動 的 にアドレスが 設 定 される( 図 2) 他 の Web サイ トへのリンクを 作 成 するには アドレス(E:) に http://klis.tsukuba.ac.jp/jk14/ のように 絶 対 パスを 打 ち 込 めばよい また URL を Word に 貼 り 付 けると http://klis.tsukuba.ac.jp/jk14/ のようにその URL に 対 し 自 動 的 にハイパーリンクが 付 与 される 図 2. ハイパーリンクの 挿 入 ウィンドウ 演 習 4 デザイン 文 字 数 式 画 像 リンクなどが 入 った Word 文 書 を Web ページとして 保 存 し どのようなフォルダやファイルが 作 られたか Word での 表 示 と Web ページでの 表 示 に 相 違 があるかなどを 調 べ まとめよ 7

7. HTML ファイルが 正 しく 書 けたかを 検 証 し 署 名 する HTML ファイルをブラウザで 開 くと ブラウザは HTML 要 素 を 解 釈 し 整 形 して 表 示 す る この 解 釈 表 示 のことをレンダリングと 呼 び それを 行 うソフトウェアをレンダリン グエンジンと 呼 ぶ Internet Explorer には Trident Firefox には Gecko Google Chrome には Blink というレンダリングエンジンがそれぞれ 採 用 されている 世 の 中 には 数 多 くの ブラウザが 存 在 するが ブラウザによっては 複 数 のレンダリングエンジンを 採 用 している ものがあり 切 り 替 えることも 可 能 である HTML の 書 き 方 ( 構 文 と 呼 ばれる)が 本 来 定 義 されたものとは 違 った 誤 ったものであ ってもレンダリングエンジンが 拡 大 解 釈 を 行 うため ほとんどの 場 合 ブラウザ 上 では 何 ら かの 表 示 がされる しかし 人 によって 使 うブラウザやレンダリングエンジンは 異 なるた め 自 分 自 身 が 使 うブラウザでは 望 むように 表 示 されていても 他 の 人 が 使 うブラウザで は 全 く 異 なった 表 示 になる 可 能 性 がある そのため できる 限 り 構 文 は 正 確 に 省 略 せず 書 いてレンダリングエンジンが 拡 大 解 釈 をする 余 地 を 極 力 少 なくすることが 望 ましい な お 正 しい HTML の 構 文 で 書 かれた HTML ファイルは 妥 当 (Valid)と 呼 ばれ そうでな い HTML ファイルは 非 妥 当 (Invalid)と 呼 ばれる HTML ファイルが 妥 当 かどうかは HTML を 制 定 勧 告 3した W3C という 団 体 が 提 供 し ているサービス The W3C Markup Validation Service(http://validator.w3.org/)を 使 って 確 認 ( 検 証 )することができる Web ページであればその URL を 入 力 するだけでよく た とえ Web ページとして 公 開 していない HTML ファイルであってもファイルをアップロー ドする HTML ファイルの 内 容 (ソースともいう)を 貼 り 付 けるなどの 方 法 で 検 証 するこ とが 可 能 である 検 証 の 結 果 妥 当 であると 認 められれば Passed と 表 示 される また Another HTML-lint gateway(http://cetus.sakura.ne.jp/htmllint/htmllint.html) は HTML の 構 文 がどの 程 度 正 しい あるいは 望 ましい 記 述 をしているかを 100 点 からの 減 点 方 式 で 計 算 するサービスである Another HTML-lint gateway では The W3C Markup Validation Service よりさらに 細 かい 検 証 を 行 っているため The W3C Markup Validation Service で Passed となる HTML ファイルを 作 るより Another HTML-lint gateway で 100 点 を 取 れる Web ページを 作 ることの 方 が 真 に 難 しい The W3C Markup Validation Service で Passed となる さらには Another HTML-lint gateway で 100 点 を 取 ることができる HTML ファイルは 構 文 的 には 全 く 問 題 がない ただ し 構 文 的 に 正 しい Web ページは 人 間 が 見 やすい Web ページとは 限 らないことに 留 意 せよ 理 想 的 には Valid かつ 人 間 にも 見 やすい Web ページを 作 ることが 最 も 望 ましいが 実 際 に 運 用 されているほとんどの Web ページは Valid ではなく Invalid である The W3C Markup Validation Service で Passed と 表 示 される Web ページを 作 成 できた ら その 証 として W3C のアイコンが 入 った 署 名 をせよ 具 体 的 には 次 の 2 つの p 要 素 を body 要 素 の 終 了 タグ 直 前 に 入 れよ( 内 容 は 適 宜 変 えても 良 い) 3 規 格 として 批 准 することを 勧 告 (Recommendation)という 勧 告 されるまでには 作 業 草 稿 や 勧 告 候 補 勧 告 案 といったいくつかの 段 階 が 存 在 する 8

<p> 作 者 s14xxxxx<br> このページは 情 報 基 礎 実 習 の 課 題 として 作 成 しました </p> <p> <a href="http://validator.w3.org/check?uri=referer"> <img </a> </p> src="http://www.w3.org/icons/valid-html401" alt="valid HTML 4.01 Transitional" height="31" width="88"> 演 習 5 The W3C Markup Validation Service で Passed となる Web ページを 作 成 し W3C の 署 名 を 入 れよ なお body 要 素 内 に 多 くの 要 素 を 入 れれば 入 れるほど Valid な Web ページを 作 成 することは 難 しくなるため 単 に Valid にしたいだけであれば 内 容 を 極 力 削 ればよい 演 習 6 Another HTML-lint gateway で 100 点 となる Web ページを 作 成 せよ まず Valid なペ ージを 作 った 上 で 減 点 されている 箇 所 とその 説 明 をよく 確 認 して 1 つ 1 つ 改 善 すること で 比 較 的 早 く 100 点 のページを 作 ることができる 8. Web ページ 公 開 の 注 意 事 項 8.1 筑 波 大 学 における 情 報 システム 利 用 のガイドラインについて 筑 波 大 学 における 情 報 システム 利 用 のガイドライン (http://www.u.tsukuba.ac.jp/document/ja/univguideline.pdf)によると 全 学 計 算 機 シ ステムを 利 用 して Web ページを 公 開 する 際 は 偽 名 匿 名 を 用 いず 発 信 情 報 に 関 する 責 任 の 所 在 を 明 示 しなければならない しかし 本 演 習 で 扱 う 全 学 計 算 機 システムにおける Web ページの 公 開 では URL に 必 ず 学 籍 番 号 が 含 まれるため 改 めて 氏 名 等 を 書 く 必 要 は 無 いと 解 釈 している ただし このガイドラインは 掲 示 板 や SNS への 投 稿 にも 適 用 されるため 一 度 目 を 通 しておくこと 文 字 通 り 解 釈 すれば たとえば 宿 舎 から 大 学 の 回 線 を 使 って 掲 示 板 に 書 き 込 む 際 に 名 前 を 付 けないということは 許 されず 何 らかの 手 段 で 責 任 の 所 在 を 明 示 せねばならない 8.2 公 開 する Web ページの 内 容 について Web ページを 公 開 する 際 は その 内 容 が 外 部 へ 公 開 しても 問 題 がないものであるかどう かを 十 分 に 検 討 確 認 せよ 重 要 な 観 点 としては 著 作 権 を 侵 害 していない 表 現 や 内 容 に 問 題 がない 内 容 に 責 任 が 持 てるなどがある ただし 内 容 の 面 白 さや 有 用 性 は 読 み 手 が 判 断 することであり 法 令 や 学 内 規 則 に 反 さない 範 囲 であればどのような 内 容 のものを 9

公 開 してもよい 8.3 Web ページの 真 偽 について Web ページは 原 則 として 誰 でも 自 由 に 公 開 できる Web ページに 限 らず Web 上 の 情 報 を 参 照 する 際 は そこに 書 かれている 内 容 の 真 偽 を 自 身 で 判 断 しなければならない 本 や 雑 誌 などの 出 版 物 には 作 成 者 以 外 による 多 少 のチェックが 入 るが Web ページには 原 則 チェックが 入 らないため 閲 覧 者 の 判 断 力 が 必 要 とされる 8.4 Web ページの 表 示 について HTML は 文 書 の 構 造 を 規 定 する 言 語 であり PDF のようにいつでも 同 じような 見 た 目 に なるように 表 示 を 整 えることには 向 いていない したがって 文 書 の 見 た 目 を 整 えようと して 1 行 の 文 字 数 を 決 め 自 分 の 環 境 ではきれいに 表 示 されるようにしたとしても 違 う パソコンやブラウザでその 通 りに 表 示 されるという 保 証 は 一 切 無 い また 余 白 を 入 れたいがためだけに br 要 素 を 連 続 していれることは 構 造 を 表 記 すること とはかけ 離 れたナンセンスな 行 為 である 8.5 index.html について index.html というファイル 名 の HTML ファイルを www フォルダ 直 下 に 置 き ブラウザ の URL 欄 に http://www.u.tsukuba.ac.jp/~s14xxxxx/index.html と 入 力 した 場 合 と http://www.u.tsukuba.ac.jp/~s14xxxxx/ と 入 力 した 場 合 でそれぞれどのような 表 示 になる かを 試 してみよ 結 論 を 書 くと 全 く 同 じ 表 示 になるはずである その 理 由 は フォルダ にアクセスした 場 合 はファイル 名 のうち 拡 張 子 以 外 が index であるファイルにアクセス するという 決 まりがある 4 からである フォルダにアクセス(www フォルダであれば http://www.u.tsukuba.ac.jp/~s14xxxxx/)したとき フォルダ 内 に index ファイルが 無 けれ ばそのフォルダ 内 の 全 フォルダ ファイルの 一 覧 を 見 ることができる 場 合 がある 5 多 くの ファイルを 公 開 するために 意 図 的 に 見 せる 場 合 などは 除 き フォルダ ファイルの 一 覧 は セキュリティの 観 点 からできれば 見 せない 方 がよく index.html のようなファイルを 作 る ことが 望 ましい ただし 情 報 基 礎 実 習 第 8 回 のレポート 採 点 においてはファイルの 一 覧 を 見 る 必 要 があるため レポートが 返 却 されるまでは index ファイルは 作 成 してはいけな い index ファイルの 役 割 を 確 認 したあとは 必 ずファイル 名 を 変 更 するか 削 除 するかして フォルダ ファイルの 一 覧 が 閲 覧 できるような 状 態 にせよ 9. HTML と CSS 冒 頭 でも 述 べたように Web サイトは HTML だけでなく ほかの 様 々な 技 術 を 併 用 して 4 Web サイトの 設 定 にもよるが どのような 拡 張 子 でもよいというわけではない また index.html と index.htm のように 複 数 の index ファイルが 存 在 した 場 合 どれにアクセス するかも Web サイトの 設 定 に 依 存 する 5 見 せない 設 定 にしている Web サイトも 数 多 く 存 在 するが 全 学 計 算 機 システムは 初 期 状 態 では 表 示 する 設 定 となっている 10

構 成 されることが 一 般 的 である たとえば 図 3 左 に 示 す Amazon.co.jp では 次 のような 言 語 技 術 が 組 み 合 わされている(はずである) HTML :テキストや 画 像 の 表 示 CSS :レイアウトや 色 などの 装 飾 の 決 定 JavaScript : 最 近 チェックした 商 品 の 切 り 替 えなど データベース : 商 品 データや 最 近 チェックした 商 品 の 登 録 PHP や Perl Ruby など:データベースへデータの 問 合 せ 注 文 システムなど これらのうち 少 なくとも 最 後 の 2 つは 知 識 情 報 演 習 などの 今 後 の 授 業 で 必 ず 取 り 扱 う Cascading Style Sheets(CSS)は Web ページにおけるレイアウトや 色 など 装 飾 を 決 定 するための 言 語 である 図 3 左 に 示 した Amazon.co.jp で CSS を 無 効 にした 場 合 どの ような 表 示 になるかを 図 3 右 に 示 す フォントの 色 や 文 字 の 左 寄 せ 右 寄 せといったこと は HTML にも 対 応 する 要 素 があるが CSS を 使 えばより 詳 細 に 書 くことが 可 能 である CSS を 使 うことの 利 点 には 次 のようなものがある 構 造 と 装 飾 の 分 離 同 じ Web ページでも 表 示 デバイスによって 表 示 の 仕 方 は 異 なるべきである たと えば 全 学 計 算 機 のモニターは 比 較 的 大 きなものであるが この 大 きさだけを 前 提 と してレイアウトなどを 決 定 してしまうと ipad のような 画 面 が 小 さいサイズでその Web サイトを 表 示 する 際 に 問 題 となる iphone に 代 表 される より 画 面 が 小 さいスマ ートフォンであればなおさらである 6 このような 場 合 構 造 と 装 飾 が 分 離 されていれば 装 飾 を 変 えることで 様 々な 状 況 に 対 応 可 能 となる しかし HTML において 装 飾 までを 指 定 してしまった 場 合 変 更 が 困 難 になる したがって HTML では 構 造 のみを 記 述 し CSS で 装 飾 を 指 定 するこ とが 望 ましいとされている 複 数 の Web ページに 適 用 可 能 Web サイト 全 体 で 統 一 感 を 出 すため 各 Web ページのデザインは 原 則 として 一 緒 に することが 望 ましい しかし HTML で 装 飾 を 書 いてしまうと Web サイト 全 体 のデ ザインの 変 更 が 困 難 となる 一 方 CSS は 外 部 ファイルとして 記 述 することも 可 能 で あり 各 Web ページから 1 つの CSS ファイルを 参 照 することで 簡 単 にデザインを 共 有 することができる この 場 合 Web サイトのデザインを 変 更 するには CSS ファイル のみを 書 き 換 えればよく HTML ファイルを 編 集 する 必 要 はない また CSS は 複 数 ファイルを 同 時 に 適 用 することも 可 能 であり メニュー 用 の CSS 本 文 用 の CSS など 複 数 の CSS を 作 り それらを 組 み 合 わせるということもできる より 凝 ったデザイン CSS では HTML で 定 義 されているものより より 凝 った 指 定 (スタイル)が 多 く 定 義 されている CSS を 使 いこなすことができれば ほぼ 全 て Web 上 のデザインを 再 現 6 近 年 ではレスポンシブ Web デザインと 呼 ばれる ブラウザのサイズや 視 聴 している 機 種 によってレイアウトを 大 幅 に 変 更 する 技 法 が 流 行 している たとえば 日 本 マイクロソフト 社 の Web サイト(http://www.microsoft.com/)はブラウザの 横 幅 に 応 じて 4 回 大 きくレイ アウトが 変 更 される 他 フォントサイズや 画 像 の 大 きさも 細 かく 変 更 される 11

することが 可 能 である 図 3. ( 左 )Amazon.co.jp ( 右 )CSS を 無 効 にした Amazon.co.jp CSS の 記 述 方 法 は 実 習 の 手 引 き p.221-234 に 書 かれているため 興 味 を 持 った 人 は 熟 読 し 色 々と 試 してみよ ここでは CSS の 適 用 の 仕 方 のみを 述 べる CSS を 適 用 する 手 法 には 1. style 属 性 を 使 って 直 接 要 素 に 指 定 する 2. style 要 素 を 使 って HTML ファイル 全 体 に 指 定 する 3. 外 部 ファイルを 作 成 し それを link 要 素 で 読 み 込 む の 3 種 類 がある 実 習 の 手 引 き には 3 の 手 法 が 説 明 されている ここでは 1 の 手 法 を 説 明 する なお ある 要 素 に 対 し 1~3 の 複 数 の 手 法 で 異 なる 複 数 の 指 定 をした 場 合 1 での 指 定 が 最 も 優 先 され 1 でも 2 でも 指 定 がない 時 のみ 3 での 指 定 が 適 用 される したがって 外 部 ファイルで 包 括 的 な 定 義 を 行 い 個 別 に 変 更 したい 箇 所 だけ 直 接 HTML ファイル 上 で 細 かい 指 定 を 行 うということがよく 行 われている なお 各 手 法 内 でも 同 じ 要 素 に 対 し 複 数 の 指 定 がある 場 合 セレクタ 順 7 出 現 順 8の 順 序 で 優 先 度 を 決 定 する なお CSS を 本 格 的 に 学 ぶのであればどの 要 素 を 対 象 とするか(セレクタ)の 書 き 方 を 習 得 する 必 要 がある 詳 しくは 手 引 きなどを 参 照 せよ 9.1 style 属 性 を 使 った 装 飾 の 指 定 style 属 性 を 使 うことで 任 意 の 要 素 に 対 し 直 接 CSS のスタイルを 適 用 することが 可 能 で ある たとえば HTML 中 のある 段 落 の 文 字 色 を 赤 くすることを 考 える HTML 要 素 を 使 って 段 落 全 体 の 文 字 色 を 赤 くするには p 要 素 の 中 に font 要 素 を 書 き font 要 素 に color 属 性 を 記 述 すればよい 具 体 的 には <p><font color= red > 赤 くしたい 文 章 </span></p> 7 たとえば a 要 素 に 対 して 指 定 した 装 飾 よりも body 要 素 中 の a 要 素 に 対 して 指 定 した 装 飾 が 優 先 されるように より 詳 細 に 指 定 したものが 優 先 される 8 手 法 の 違 いやセレクタでも 優 先 度 に 差 がつかない 場 合 後 に 指 定 した 記 述 が 優 先 される 12

とする 同 じことを CSS で 表 現 するには p 要 素 に style 属 性 を 記 述 し その 値 の 中 で color というスタイルを 記 述 する 具 体 的 には <p style= color:red; > 赤 くしたい 文 章 </p> とすればよい 演 習 7 いくつかの Web サイトで CSS を 無 効 にし 表 示 がどのように 変 わるのかを 試 せ なお 全 学 計 算 機 システムにプリインストールされたブラウザでは Firefox であれば[Alt]キー 押 しメニューバーを 表 示 [ 表 示 ] [スタイルシート] [スタイルシートを 使 用 しない]と 順 に 選 択 することで 簡 単 にスタイルシートを 無 効 化 できる 演 習 8 CSS を 使 って 文 書 を 装 飾 してみよ その 際 HTML 要 素 でも 表 現 可 能 なこと( 文 字 色 背 景 色 中 央 寄 せの 設 定 など)と HTML 要 素 では 困 難 あるいは 不 可 能 なこと( 余 白 文 字 の 回 り 込 み 設 定 など)の 両 方 を 試 せ 演 習 9 同 じ 要 素 に 対 し 複 数 のスタイルを 指 定 した 場 合 どのような 優 先 規 則 で 適 用 されるかを 実 感 し 使 いこなせるようにせよ 9.2 HTML と XHTML HTML は 現 在 HTML4.01 まで 勧 告 されており 2014 年 6 月 現 在 では HTML5 が 策 定 さ れている またそれとは 別 に 人 間 だけでなくコンピュータにも 処 理 しやすい 形 式 として XHTML が 1.1 まで 勧 告 されている XHTML は 前 述 した 構 造 と 装 飾 の 分 離 を 念 頭 に 設 計 されており HTML にあった font 要 素 のようなデザインに 関 する 要 素 は 一 切 無 い そのた め レイアウト 等 は 全 て CSS で 記 述 する 必 要 がある 10. 自 学 自 習 のために HTML 要 素 の 書 き 方 については 多 くの Web サイトや 書 籍 で 紹 介 されているため 適 宜 参 考 にするとよい 入 門 用 の Web サイトとして 最 も 有 名 なものは 杜 甫 々. とほほの WWW 入 門.とほほの WWW 入 門. http://www.tohoho-web.com/www.htm, ( 参 照 2014-06-10). である また 有 名 な 書 籍 として 株 式 会 社 アンク.HTML タグ 辞 典 :XHTML 対 応. 第 6 版, 翔 泳 社,2007,386p. 株 式 会 社 アンク.スタイルシート 辞 典. 第 4 版, 翔 泳 社,2007,401p. などがある ただし Web サイトや 書 籍 を 参 照 するにあたっては 特 にその 内 容 の 正 誤 について 注 意 13

すること HTML は 今 後 習 得 するはずのプログラミング 言 語 に 比 べればかなり 適 当 な 記 述 が 許 される 言 語 であること 2000 年 前 後 は 今 と 比 べブログや 掲 示 板 Wiki といった 仕 組 み が 今 ほどは 当 たり 前 のものとして 存 在 せず 個 人 で Web ページを 作 成 するのが 一 般 的 だっ た 時 代 であり 特 にその 頃 の Web サイトや 書 籍 は 主 観 を 元 にした かなり 適 当 であるもの が 多 い 9 また HTML にも 9 章 2 節 で 触 れたように 複 数 のバージョンがあるため 古 いバ ージョンを 元 に 作 成 された Web サイトや 書 籍 ということもありうる( 古 いバージョンでは 存 在 した 属 性 や 要 素 が 新 しいバージョンでは 廃 止 されているということがある) このよう な 理 由 から とりわけ HTML の 学 習 ではあまり 1 つの 情 報 を 鵜 呑 みにせず 複 数 の 情 報 源 をあたるべきである HTML の 学 習 にあたり 最 も 信 頼 できる 情 報 源 は HTML を 策 定 した W3C の Web ページ(http://www.w3.org/TR/html401/)である この Web ページに 関 して は 有 志 が 日 本 語 に 翻 訳 した (http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/cover.html)ものもある HTML や CSS 上 達 のコツはいくつかあるが 次 のような 段 階 を 踏 むことをお 勧 めする 1. 上 記 Web サイト 書 籍 などを 参 考 にあらゆる 要 素 スタイルを 1 度 ずつ 試 す 2. 1.で 得 た 知 識 を 生 かし 実 際 の Web ページがどのような 要 素 スタイルで 表 現 されて いるかを 分 析 する 3. デザインが 気 に 入 った Web サイトのデザインを 真 似 る 再 現 する ただし HTML や CSS の 記 述 にはそのデザインなどに 創 作 性 がみられる 場 合 著 作 権 が 発 生 することには 留 意 せよ HTML 要 素 の 習 得 にあたっては Another HTML-lint gateway で 100 点 を 取 ることを 目 指 すことも 上 達 の 近 道 の 一 つである 興 味 を 持 った 場 合 は 色 々と 試 して 欲 しい 9 たとえば 要 素 (Element) タグ(Tag) 内 容 (Content)は HTML においてはそれぞれ 明 確 に 区 別 されるべき 用 語 であるが エレメントの 要 素 のような 本 来 の 意 味 からではあ り 得 ない 使 用 をしている 書 籍 も 数 多 くある また h1 要 素 のh はヘッダ( 正 しくは heading) とするような 誤 用 も 散 見 される 14