Microsoft Word doc

Transcription

1 情 報 基 礎 実 習 第 6 回 HTML の 仕 組 み 2009 年 5 月 日 長 谷 川 秀 彦 逸 村 裕 本 日 のメニュー HTML ( Hyper Text Markup Language ) を 使 って 箇 条 書 き 画 像 他 のファイルへ のリンクなどを 組 み 込 んだ Web ページを 作 成 する Word, Excel や 専 用 の Web ページ 作 成 ソフトウェアを 使 って Web ページを 作 成 する 最 後 に HTML の 検 証 と Search Engine Optimization についてもふれる 画 像 を 埋 め 込 む リンクをつける Word, Excel を 使 って Web ページを 作 る Word を 使 って 図 式 画 像 リンクの 入 った Web ページを 作 る Dreamweaver を 使 って Web ページをつくる(オプション) 正 しい HTML ファイルが 書 けたかを 検 証 して 署 名 する サーチエンジンの 上 位 にヒットさせる(チャレンジ!) 作 業 の 前 に プリントをよく 読 んで 作 業 の 全 体 像 を 把 握 しておこう! < 出 席 > 前 回 の 実 習 で 作 成 した first.html に (1) 画 像 を 埋 め 込 み (2) 他 のページへの リンクをつけなさい (1) と(2) のステップをこなして ファイルを 壊 さなければよい! < 課 題 > 以 下 の 条 件 をすべて 満 たす Web ページ(1 枚 以 上 )を 作 り トップページの URL を として Web に 公 開 しな さい 課 題 のページには id ( 下 3 桁 )または 氏 名 を 明 記 してほしい なお 住 所 電 話 番 号 などは 絶 対 に 書 かないこと <title>タイトル</title>が 入 っていること 画 像 を 含 むこと 他 の Web ページへのリンクを 含 むこと 箇 条 書 きを 含 むこと ブラウザのサイズを 変 えても 表 示 が 乱 れないこと メモ 帳 での 出 力 (HTML ソースファイル)と Web ブラウザでの 表 示 ( 整 形 後 )を 印 刷 し レポートとともに 次 回 の 授 業 開 始 時 に 提 出 しなさい レポートには 1 Web ページ 作 成 に 当 たって 工 夫 を 凝 らした 点 2 Word や Dreamweaver で 生 成 した HTML ファイ 1

2 ルと 自 分 で HTML タグを 埋 め 込 みながら 作 った HTML ファイルの 特 徴 やメリット デ メリット( Web ページの 修 正 が 可 能 か PDF で 公 開 するのと 何 が 違 うか という 観 点 で 考 えてみよう) 3 印 象 に 残 った 点 感 想 などを 書 き 添 えなさい 今 回 に 限 り レポー トは 手 書 きでもよい 1. 画 像 を 埋 め 込 む HTML 文 書 中 に 画 像 イメージを 埋 め 込 みたい 場 合 は 画 像 ファイルが abcd.gif なら <IMG SRC="abcd.gif"> という1 文 を HTML ファイル たとえば first.html に 挿 入 する この 場 合 abcd.gif と first.html は 同 じフォルダ(ディレクトリ)になくてはならない HTML ファイルがある フォルダ 中 にあるフォルダ Pic にある 画 像 ファイル xyz.jpg を 埋 め 込 む 場 合 は <IMG SRC="Pic/xyz.jpg"> とする 大 きさを 指 定 したい 場 合 は pixel 数 または 縮 小 率 を 用 いて <IMG SRC=" 画 像 ファイル 名 " WIDTH="123" HEIGHT="456"> <IMG SRC=" 画 像 ファイル 名 " WIDTH="60%"> のようにする 参 照 元 の HTML ファイルが 置 かれている 場 所 から HTML の 記 述 にした がって 画 像 ファイルにアクセスできることが 重 要 である HTML ファイルの 場 所 が 移 動 し たら 参 照 しているファイルも 移 動 させる 必 要 がある 作 者 が 使 用 を 許 している 画 像 の 場 合 その 画 像 を 使 用 している Web ページ 中 で 画 像 の 近 くに 出 所 出 典 を 明 示 する しかし 実 習 ではそんなもの 使 わなくてもいいだろう 画 像 の 入 力 には 写 メ を 利 用 してもよい 携 帯 で 撮 った 写 真 ( 画 像 )を 教 育 用 計 算 機 システムの s @u.tsukuba.ac.jp に 送 れば 画 像 はメールの 添 付 ファイルとして 送 られるはずである ファイルの 名 称 形 式 などは 電 話 会 社 機 種 などで 異 なるが 多 くは JPEG だろう 画 像 ファイルを Web ページ first.html 中 に 表 示 させてみよう 2. リンクをつける <A HREF="URL またはファイル 名 "> 見 出 しとなる 文 </A> という 命 令 は ブラウザで 見 たときに アンダーライン 付 きで 色 が 変 わって 見 出 しとなる 文 となる ここをクリックすれば 指 定 した URL (Uniform Resource Locator) またはファ イルへ 移 動 できる このように 複 数 の 文 書 が 密 接 に 関 連 した 文 書 を Hyper Text という URL またはファイル 名 は 以 下 のように 指 定 する: 2

3 (1) http から 始 まり / で 終 わる (2) http から 始 まりファイル 名 で 終 わる (3) Page2.html http がつかず ファイル 名 だけ (4) Pictures/ULIS.html http がつかず フォルダ 名 とファイル 名 (1), (2) は URL による 指 定 であり 世 界 中 の URL が 指 定 できる (1) 多 くのサーバで / で 終 わる URL が 指 定 されたときは index.html を 表 示 するようになっている(このよう な 省 略 時 の 解 釈 を default という) 参 照 元 の 文 書 と 同 一 のフォルダに 移 動 先 のファイル Page2.html がある 場 合 は (3), フォルダ Pictures 内 にファイル ULIS.html がある 場 合 は (4) のような 記 述 になる フォルダ 名 とファイル 名 の 大 文 字 と 小 文 字 は 区 別 され Abc と abc は 別 の 名 前 とみなされる 日 本 語 ( 2 バイトコード)のファイル 名 は 使 わないこ と なお 参 照 先 は HTML 文 書 に 限 らず テキストファイル PDF ファイル 画 像 ファ イルなど 表 示 できるものなら 何 でもよい first.html から 他 の 人 の Web ページにリンクをつけよう 3. Word, Excel を 使 って Web ページを 作 る Web ページとして 公 開 するには HTML で 書 かれたファイルを 特 別 なフォルダ www におくだけでよい HTML で 書 かれたファイルは Web ページ 用 のファイル 形 式 ( 拡 張 子 が html または htm)である 必 要 がある Word の 場 合 は 適 当 な 文 書 ファイルを Word で 開 き Office ボタン 名 前 を 付 けて 保 存 (A), その 他 の 形 式 (O) とする このとき ファイルの 種 類 (T) を Web ページ (*.html, *htm ) Web ページ(フィルタ 後 ) 単 一 ファイルの Web ページ (mhtm, mhtml) として みよう www フォルダにはいくつかのファイルが 自 動 的 に 作 成 される ブラウザで をアクセスしてみよう Word 文 書 を Web ページとして 出 力 し どこにどのようなファイルが 作 られたか( 名 称 サイズなど)を 調 べなさい Word, Excel, Power Point などからは 手 軽 に Web ページが 生 成 できる 細 かいことに こだわらないなら Web ページとしての 文 書 公 開 はきわめて 簡 単 である Excel のシートを Web ページとして 出 力 しなさい その 際 タイトルが 今 日 はよ い 天 気 となるように 設 定 しなさい(オプション) 3

4 4. Word を 使 って 図 式 画 像 リンクの 入 った Web ページを 作 る Web ページ 作 成 の 道 具 としても Word は 使 える これまで 使 わなかったいくつかの 機 能 を 使 った Word 文 書 を 作 り それを Web ページにしよう Word を 使 って 図 を 描 く( 情 報 処 理 実 習 用 手 引 き p. 180 ) Word を 使 って 数 式 を 入 力 する( 情 報 処 理 実 習 用 手 引 き p. 184 ) f ( x) 1 = + F ( ω ) e 2π j ω t d ω 画 像 を 入 れる リンクをつける 図 式 画 像 リンクの 入 った Word 文 書 を Web ページとして 出 力 し どこにどのよ うなファイルが 作 られたか( 名 称 サイズなど)を 調 べなさい 5. Dreamweaver を 使 って Web ページをつくる(オプション) 実 習 用 手 引 きを 参 照 しながら Dreamweaver で 簡 単 な 文 書 (Web ページ)を 作 り HTML ファイルとして 出 力 してどこにどのようなファイルが 作 られたか( 名 称 サイズなど)を 調 べなさい まず ブラウザでこの HTML ファイルがどのように 見 えるかを 確 認 し 次 にメモ 帳 でどのような HTML タグが 入 っているかをよく 観 察 しなさい 文 書 に 絵 ( 画 像 ) 表 リンクを 挿 入 する 表 は Dreamweaver で 直 接 書 く 場 合 ( 表 4

5 挿 入 と 進 んで 書 く)と Excel で 作 成 しそのセルをコピー&ペーストで Dreamweaver に 貼 り 付 けた 場 合 の2 通 りを 試 してみよう 以 下 のページにリンクを 張 ってみよう: 1 Web ページ 2 自 分 のファイル たとえば PDF ファイル PDF ファイルの 場 合 は セキュリティの 設 定 を 忘 れないように セルフチェックポイント 1 背 景 を 設 定 する 2フォントの 大 きさ 種 類 を 変 える 3 箇 条 書 きを 入 れる 4 画 像 を 挿 入 する 5 表 を 入 れる 6. HTML ファイルが 正 しく 書 けたかを 検 証 して 署 名 する HTML が 文 法 に 合 っているかをチェックするには: Another HTML-lint gateway HTML Validation Service などが 役 立 つ HTML-lint で 100 点 になるとか HTML Validation Service で No errors になれば ( 内 容 はともかく) 文 法 的 には 文 句 なしである 多 くの 場 合 文 法 的 に 問 題 があ ってもうまく 動 作 するが ブラウザの 親 切 ( 拡 張 解 釈 )をアテにせず なるべく 文 法 に 沿 って 記 述 することを 心 がけよう そうしないと どこからでも 読 める というメリットを 生 かせなくなる 正 しく 書 けたら その 証 として W3C のアイコンが 入 った 署 名 をしよう <address>タ グを 使 って 以 下 のように 入 力 する: <address> 作 者 ******<br> このページは 情 報 基 礎 実 習 の 課 題 として 作 成 しました <br> 作 成 日 2009/5/27<br> 最 終 更 新 日 2009/**/** <p> 5

6 <a href=" border="0" src=" alt="valid HTML 4.01!" height="31" width="88"></a> </p> </address> 100 点 満 点 あるいは No errors の Web ページを 作 り W3C の 署 名 を 入 れなさい 7. サーチエンジンの 上 位 にヒットさせる(チャレンジ) 自 社 の 商 品 ページなどがサーチエンジンで 上 位 にヒットするかどうかは 企 業 にとって 死 活 問 題 である( サーチエンジンの 利 用 者 はせいぜい 結 果 の3ページ 目 までしか 見 ない 4ページ 目 以 降 にしか 現 れないページは 存 在 しないに 等 しい と 言 われているらしい 本 当?) サーチエンジンは 入 力 されたキーワード X に 対 して 以 下 のようなページを 上 位 に 出 力 する 傾 向 がある: 多 くの Web ページからリンクされている 重 要 な Web ページ( 公 的 機 関 go.jp や.ac.jp )からリンクされている <TITLE> タグ 中 にキーワード X が 含 まれている <H1> タグ 中 にキーワード X が 含 まれている 文 書 中 にキーワード X が 頻 出 している リンク 先 を 表 す 文 言 <a href>...</a> 中 に X が 含 まれている またそのような 文 言 で 他 の Web ページからリンクが 張 られている 頻 繁 に 更 新 されている このような 傾 向 を 利 用 して 検 索 順 位 が 上 がるようページに 工 夫 を 凝 らすことを SEO (Search Engine Optimization) という たとえば 自 分 のページが Google でトップに 出 力 されるよう 工 夫 してみよう もしレポート 提 出 時 点 で Google Yahoo! の 上 位 にヒット するようになった 場 合 は キーワードと 共 にその 旨 を 報 告 すれば 加 点 する ただし これ は Google や Yahoo! のインデックス 更 新 のタイミングに 依 存 するので ヒットしなくて も 落 ち 込 まないこと(なかなかうまくはいかない) 逆 にサーチエンジンでヒットしてほしくない 場 合 は <head></head>の 間 に 以 下 の1 文 を 入 れる: <meta name="robots" content="noindex, NOFOLLOW"> ただ ヒットしないようにしてくれるかはサーチエンジン 次 第 である 6

7 8. Web ページの 注 意 事 項 1 センターの 利 用 規 程 では Web ページに 作 成 者 名 を 明 記 することになっている いっ ぽう 世 間 の 流 れはプライバシーをさらさせないという 考 えのようである しかし 実 習 としての 都 合 上 id ( 下 3 桁 でよい)と 氏 名 は 記 入 してほしい( 情 報 基 礎 実 習 の 評 価 が 確 定 するまで) なお 住 所 電 話 番 号 などは 絶 対 に 書 かないこと 2 Web ページは 外 部 へ 公 開 しても 大 丈 夫 であることをじゅうぶんに 確 認 してほしい 著 作 権 を 侵 害 していない 表 現 や 内 容 に 問 題 がない 内 容 に 責 任 が 持 てる 大 学 生 として 恥 ずかしくないなどは 重 要 なポイントである テストとして つまらない 内 容 のものを 公 開 するのは 別 に 恥 ずかしいことではない 3 Web ページは 誰 でも 自 由 に 公 開 できる Web ページを 閲 覧 する 場 合 は そこに 書 かれ ている 内 容 が 適 切 かどうかを 自 分 で 判 断 する 必 要 がある 本 や 雑 誌 などの 出 版 物 には 多 少 のチェックが 入 るが Web ページはノーチェックであり 閲 覧 者 の 判 断 力 が 求 めら れている もちろん 作 成 者 の 立 場 で 何 が 重 要 かもよく 考 えてほしい 4 HTML は 文 書 の 論 理 的 な 構 造 を 規 定 する 文 書 の 見 てくれを 整 えようとして1 行 の 文 字 数 を 決 めたりしても HTML 文 書 を 見 る 人 のブラウザやパソコンの 画 面 サイズが 同 じだという 保 証 はない 細 かな 体 裁 を 決 めるのは 多 くの 場 合 ナンセンスだというこ とがわかるだろう また 行 ごとに <BR> を 入 れるのは 文 の 構 造 を 示 すことに なっているのかをよく 考 えること 5 index.html という 名 前 の HTML ファイルを www フォルダに 置 いて ブラウザに と 入 力 した 場 合 と index.html まで 入 力 した 場 合 (すなわち と 入 力 した 場 合 ) は 同 じ 画 面 が 表 示 されるはずである index.html はそのフォルダ(ディレクトリ)の default であり いわば 顔 として 機 能 するようになっている index.html がない フォルダはファイルの 一 覧 を 外 にさらしてしまう(サイトによって 異 なるが 教 育 用 計 算 機 センターの 設 定 はそうなっている) これはあまり 格 好 よくないので フォルダを 作 ったら index.html も 作 っておく 方 が 良 い ただし 採 点 が 終 わってから! 付 録 :HTML タグの 書 き 方 については Web サイトを 参 考 にするとよい たとえば: とほほの WWW 入 門 ( HTML タグ 一 覧 ( などがある また: ZSPC( では 必 要 最 小 限 の HTML が 入 ったテンプレート( 型 枠 )を 作 成 してくれる 7