2016 年 度 メディアプロジェクト 演 習 1 HTML 講 座 基 礎 編 立 命 館 大 学 情 報 理 工 学 部 メディア 情 報 学 科 1 はじめに 本 演 習 の 最 初 の 4 回 では,HTML JavaScript を 用 いた Web ページ 作 成 の 基 礎 知 識 を 学 びます. Web ページを 作 成 するには, 次 の 2 通 りの 方 法 が 考 えられます. (1) Web のパブリッシングソフトを 使 う. (2) テキストエディタを 用 いて 直 接 HTML 文 書 を 作 成 する. 本 演 習 では,2 つ 目 の, 直 接 HTML 文 書 を 書 いて Web ページを 作 るという 方 法 を 採 用 して 進 めます.これは,Web ページがどのように 作 ら れているか,その 原 理 を 知 ることを 目 的 として いるためです.この 知 識 を 習 得 しておくと,Web ページ 作 成 用 ソフトウェアを 使 用 するときにも, その 利 用 方 法 の 理 解 やトラブル 解 決 などに, 必 ず 役 に 立 つことと 思 います. 本 演 習 を 行 うにあたり,テキストおよびサン プルデータ,Web ページを 作 成 する 上 で 参 考 と なるページへのリンクなどを 以 下 の Web ページ に 置 いておきますので, 参 考 にしてください. http://www.rm.is.ritsumei.ac.jp/lecture/mediap2016/ 2 インターネットに 関 する 基 礎 知 識 2.1 インターネットとは インターネットとは,ひとことで 言 うと, ネ ットワークのネットワーク であると 言 えます. たとえば,ある 学 校 にある 複 数 のコンピュータ が, 互 いに 接 続 されていると 仮 定 してみましょ う.この 状 態 では, 学 校 内 のコンピュータに 限 って,お 互 いに 情 報 をやりとりすることができ ます.このようなネットワークを,LAN (Local Area Network)と 言 います.さて, 隣 町 の 学 校 で も, 同 じようにネットワークを 組 んでいました. 図 1 小 さいインターネット そこで,この 2 つの 学 校 の 間 をネットワークで 繋 ぐことにしました.これで,この 2 つの 学 校 の 間 では, 自 由 に 情 報 のやりとりができるよう になります.このようしてできたネットワーク は, 小 さいながらも, インターネット の 1 つです( 図 1). 通 常 インターネット と 呼 ばれているもの は,このように 相 互 に 接 続 されたネットワーク のうち,アメリカの 国 防 省 の 高 度 研 究 計 画 局 (Advanced Research Projects Agency: ARPA) の 実 験 ネットワークであった,ARPANET が 母 体 と なって 誕 生 した, 世 界 最 大 の 相 互 接 続 ネットワ ークを 指 します. 英 語 では,これらはきちんと 区 別 できるようになっており, 前 者 が"internet" と 表 記 されるのに 対 し, 後 者 は"The Internet"と, 定 冠 詞 付 きで 表 現 されます. 以 後, インター ネット と 表 記 した 場 合 は,"The Internet"を 指 す ものとします. 2.2 インターネットで 何 ができるか このように,インターネットとは 相 互 に 接 続 されたネットワークの 総 体 を 表 す 言 葉 です.イ ンターネットに 接 続 された 機 器 は,IP (Internet Protocol) という 規 約 (プロトコル)に 基 づいて 情 報 をやりとりします. 実 際 には,IP を 用 いた さらに 高 度 なプロトコルである,TCP/IP (Transmission Control Protocol/Internet Protocol) を 用 いて 通 信 が 行 われることがほとんどです. そこで,インターネットのプロトコルは TCP/IP である,と 言 われることもあります.インター ネット 上 で,TCP/IP に 基 づいて 情 報 をやりとり することにより, 様 々なアプリケーションが 実 現 されています. 代 表 的 なものとしては, 電 子 メール ファイル 転 送 (FTP) World Wide Web (WWW) などが 挙 げられます. 3 WWW に 関 する 基 礎 知 識 3.1 World Wide Web とは? World Wide Web(WWW,W3,Web などと 略 されます)は,1989 年 に 欧 州 原 子 核 研 究 機 構 (CERN) の Tim Berners-Lee により 提 案 された, 広 域 情 報 閲 覧 システムです.WWW は,"Web" と 呼 ばれるように, 様 々な 情 報 が 蜘 蛛 の 巣 のよ うに 相 互 に 繋 がりあったもののことです. WWW では, 様 々な 情 報 の 間 を 自 由 にジャンプ -1-
して 閲 覧 することができます.このように, 他 の 情 報 にジャンプすること,あるいはジャンプ するためのインデックスのことを,WWW の 世 界 ではリンクと 呼 びます. 次 々にリンクを 辿 っ て 様 々な 情 報 にアクセスしている 様 子 を,Web と Wave( 波 )を 引 っ 掛 けて,ネットサーフィン と 呼 んだりもします.WWW 上 で 閲 覧 できる 情 報 のことを,Web コンテンツや Web ページ,あ るいは 単 にページなどと 呼 びます. 3.2 Web ページはこのようにできている WWW を 閲 覧 していると, 実 に 多 彩 な 見 かけ を 見 ることができます.これらは 体 裁 こそ 様 々 ですが,すべての Web ページは HTML (Hyper Text Markup Language) という 言 語 を 使 って 書 かれた HTML ファイル でできています. 言 語 というと 難 しいもののようですが,ルールは 決 して 難 解 なものではありません. 試 しに,どこかの Web サイトを 表 示 させて HTML ファイルの 内 容 を 見 てみましょう. Firefox を 起 動 して, 朝 日 新 聞 の Web ページ (http://www.asahi.com) を 開 いてみてください. Firefox の ツール メニューから Web 開 発 を 選 択 し,さらに ページのソース を 選 択 す ると, 現 在 表 示 されている Web ページを 構 成 し ている HTML の 内 容 が 表 示 されます( 図 2). Web ブラウザはこの HTML の 内 容 を 解 釈 し, 文 章 や 表 などを 指 定 されたとおりに 表 示 している のです. 図 2 メニューから ソース を 選 択 すると,Web ページ を 作 る HTML ファイルの 内 容 が 表 示 される HTML のルールは 何 度 か 改 正 されてきていま す.2014 年 には HTML 5 が 勧 告 されましたが, 現 在 は,HTML 4.01 が 主 に 利 用 されているので, この 演 習 では,HTML 4.01 Transitional に 従 って 演 習 を 進 めていくことにします. 3.3 HTML 先 ほど 表 示 させた HTML の 内 容 を 見 てみると, < > で 囲 まれた 文 字 がたくさんあることに 気 づくでしょう. や <p> など, < > で 囲 まれた 文 字 列 のことをと いいます. 既 に LaTeX の 講 義 で 習 ったように,は, 文 書 に 様 々な 意 味 づけをするために 使 われます. レポートや 書 類 を 作 るときのことを 考 えて 見 ましょう. 見 出 しは 太 字 にして 大 きくし,リス トは 番 号 を 振 るなど, 見 た 目 を 調 整 してそれぞ れの 部 分 がどういう 意 味 を 持 っているのかが 分 かるようにするでしょう.HTML のはこの 意 味 づけ のために 使 われるのです. HTML のは 数 十 種 類 あり,を 使 うこ とで ここからここまでが 本 文 ここに 画 像 を 挿 入 する これはリストの 項 目 これは 表 の 項 目 といった 意 味 づけができます. 4 Web ページ 作 成 に 必 要 なソフト 4.1 Web ブラウザ Web ページを 閲 覧 するためには,Web ブラウ ザ( 正 しくは User Agent)と 呼 ばれる 閲 覧 ソフ トウェアが 必 要 になります.ブラウザには Internet Explorer や Firefox,Chrome,Safari,Opera など, 様 々な 種 類 があり,その 表 示 能 力 (どん な 字 体 が 表 示 できるか,グラフィックが 表 示 で きるか 等 )は, 千 差 万 別 です. 演 習 室 のコンピュータには,Linux で 起 動 する と Firefox が,Windows で 起 動 すると Internet Explorer と Firefox が 入 っています. 4.2 テキストエディタ Web ページを 構 成 するファイルのうち HTML ファイルは 文 字 情 報 だけが 入 っている テキス トファイル の 一 種 です.テキストファイルの 作 成 や 編 集 には, テキストエディタ という ソフトウェアが 向 いています. Linux では, 演 習 などで 既 に 使 用 している emacs を 使 うとよいでしょう. 本 演 習 では,Linux 上 で emacs を 用 いて HTML ファイルの 作 成 編 集 を 行 います. Windows の 場 合 は, 標 準 添 付 されている メ モ 帳 といったテキストエディタを 使 うとよい でしょう.メモ 帳 などのテキストエディタは, 文 字 だけを 対 象 としており,その 属 性 を 扱 うこ とはできません. MS-Word や 一 太 郎 などのワープロソフトでも, テキストファイルの 編 集 はできますが, 単 に 文 字 を 扱 うだけではなく, 文 字 の 位 置, 形 (フォ ント), 大 きさ, 色,その 他 の 装 飾 ( 網 掛 など) といった 属 性 も 同 時 に 扱 うので, 不 向 きです. 文 字 を 扱 う という 視 点 から, 一 見 ワープロ もテキストエディタも 同 じように 見 えますが, -2-
ここから start メディアプロジェクト 演 習 1 属 性 を 扱 うか 否 かという 点 で 大 きな 違 いがあり ます. 4.4 FTP ソフト コンピュータ 上 で 作 成 編 集 した HTML ファ イルや 画 像 ファイルをインターネットで 公 開 す るためには,Web サーバ(HTTP サーバともい う)から 見 える 位 置 にそのファイルを 置 かなけ ればいけません. Web サーバに Linux のような UNIX 系 の OS が 入 っている 場 合 には, 各 ユーザがファイルを 置 いておく 場 所 が 用 意 されています.このよう な 場 所 を,ユーザのホームディレクトリと 呼 び ます. 立 命 館 大 学 の RAINBOW システムでは, 皆 さんが Linux を 使 った 演 習 でいつも 作 業 して いるディレクトリがホームディレクトリに 当 た ります. 公 開 する HTML ファイルや 画 像 ファイ ルの 置 き 場 所 は, 通 常 ホームディレクトリ 下 の public_html という 名 前 のディレクトリに 割 り 当 てられます. public_html ディレクトリ の 下 に index.html という 名 前 の HTML ファイ ルを 置 くことで,それが 自 分 の Web サイトのト ップページになります. 立 命 館 大 学 の RAINBOW システムでは,ホー ムディレクトリは, 皆 さんが 今 使 っているコン ピュータとは 別 の 場 所 に 置 かれたサーバ 上 にあ ります.RAINBOW では,Linux で 起 動 したとき には,サーバのホームディレクトリ 上 で 簡 単 に 作 業 ができるよう 設 定 されていますが, Windows の 場 合,そのような 設 定 はされていま せん.このため Windows 上 で HTML を 編 集 する 場 合 は,ホームディレクトリにファイルを 転 送 する 必 要 があります.このときネットワークを 介 してファイルを 転 送 するソフトを 使 わなけれ ばいけません.このようなソフトを FTP ソフト と 呼 びます.Windows で 利 用 できる 代 表 的 な FTP ソフトには FFFTP があります. 5 Web ページのひな 形 作 成 と 閲 覧 5.1 最 も 簡 単 な HTML ファイル 基 本 課 題 1: 以 下 の 手 順 に 従 って,ひな 形 とな る HTML ファイルを 作 成 してください. (1) UINX でログイン, 端 末 の 起 動 UNIX でログインし,GNOME 端 末 を 起 動 しま す (RAINBOW GUIDE 2016 Linux 操 作 入 門 編 p.22 24). (2) emacs の 起 動 GNOME 端 末 から emacs を 起 動 します. (3) HTML ファイルの 作 成 そして, 次 のように 打 ち 込 んで 下 さい. 日 本 -3- HTML 講 座 基 礎 編 語 の 部 分 は,UNIX 上 の 日 本 語 入 力 システム, Anthy, ibus などを 使 って 入 力 して 下 さい (RAINBOW GUIDE 2016 Linux 操 作 入 門 編 p.25, 35, 67 69). 4.01 Transitional//EN"> <title>タイトル</title> <p> 本 文 </p> そして,このファイルを 各 自 のホームディレ クトリ 以 下 の public_html ディレクトリに 保 存 します.ファイル 名 は index.html とします. (4) 作 った HTML ファイルの 確 認 それでは 早 速, 実 際 に WWW ブラウザを 用 い て, 作 成 した HTML 文 書 を 確 認 してみましょう. まずは,Firefox を 起 動 します. 作 成 したファイ ルをドラッグ&ドロップするか,ファイルメニ ューから, 作 成 したファイルを 開 いてください. 以 下 のような 画 面 が 出 てくると 思 います. 図 3 ひな 形 ページ (5) 自 分 の Web ページを 閲 覧 次 に,Web サーバを 通 して 皆 さんの 作 ったペ ージを 閲 覧 することができるか 確 認 してみまし ょう. Web ブラウザを 立 ち 上 げて,URL <http://www.ritsumei.ac.jp/~アカウント> を 開 きます. もし,エラーメッセージが 出 て 開 くことがで きなかったら,ファイル 名 が 間 違 っていないか, ディレクトリが 間 違 っていないかをチェックし てみて 下 さい. なお, 個 人 の Web ページは 学 内 からのみ 閲 覧 が 可 能 で, 学 外 に 公 開 するためには 申 請 が 必 要 です. 6 HTML の 基 本 6.1 開 始 と 終 了 ここで,さきほど 作 成 したひな 型 ページのソ
ースをもう 一 度 見 てみましょう. と など, 似 たが 対 になっていることに 気 づいたでしょうか. HTML では, ここからここまでが HTML 文 書 である といった 指 定 を,などの で 行 います. 指 定 する 範 囲 の 前 後 に 開 始 と 終 了 を 記 述 すれば, 指 定 は 完 了 です. 開 始 のに / を 足 したが の 終 了 です. また, 開 始 から 終 了 までの 範 囲 を 要 素 (エレメント) と 呼 び,で 囲 まれた 範 囲 を 内 容 と 呼 びます.たとえば, <title>html 講 座 </title> は 全 体 が title の 要 素 HTML 講 座 の 部 分 が title 要 素 の 内 容 にあたりま す. 一 方, 開 始 を 書 くだけで 指 定 が 完 了 する もあります. 例 えば 画 像 を 表 示 する<img> には 終 了 はなく,</img>などと 記 述 す る 必 要 はありません.この 場 合,<img>のみ が 要 素 のすべてであり, 内 容 はないことに なります. HTML では, 開 始, 終 了 を 入 れ 子 に するのがルールです.たとえば, ~ ~ と 2 つの 開 始 を 記 述 したら, 終 了 は ~~ の 順 で 記 述 しま す. ~~~ とい う 順 でを 書 くことはできません.また, 特 定 のはあるの 範 囲 にのみ 記 述 できる, といったルールや 特 定 のは HTML ファイル の 中 に 一 回 のみ 記 述 できる,といったルールも あります.これらのルールは,それぞれの の 説 明 に 合 わせて 紹 介 します. 6.2 属 性 と 属 性 値 の 中 には,<img src= ファイル 名 alt= 画 像 の 代 わりに 表 示 する 文 字 列 >のように img という 要 素 と,それに 関 する 細 かな 指 定 (src= ファイル 名 以 降 )から 成 り 立 っているものもあ ります. このように,の 中 に 書 かれる 細 かい 指 定 は 属 性 と 属 性 値 といいます. src= フ ァイル 名 という 部 分 は, src が 属 性, フ ァイル 名 が 属 性 値 です. 属 性 値 は, (ダ ブルコーテーション)でくくります. ここでは, src と alt という 2 つの 属 性 が 指 定 されています.このように 属 性 を 複 数 同 時 に 指 定 する 場 合 は, 属 性 = 属 性 値 どうし を 半 角 スペースで 区 切 って 記 述 します. 属 性 を 記 述 する 順 序 にはルールはなく,どの 順 に 記 述 してもかまいません. <img>は,10 章 で 説 明 します. 6.3 基 本 の まず, 先 ほどひな 型 ページで 書 いた HTML 文 書 の 内 容 を 解 説 していきます. (1) HTML のバージョン 宣 言 HTML で 記 述 する 文 書 では,その 文 書 がどの バージョンの HTML によって 記 述 されたものか を 記 述 しなくてはいけません.そこで, 文 書 の 最 初 には DTD (Document Type Definition) 宣 言 というおまじないを 記 述 します. 例 えば,HTML 4.01 Transitional を 用 いて 文 書 を 記 述 する 場 合, 文 書 の 最 初 に, 以 下 のような DTD 宣 言 を 入 れな くてはなりません. (sample1.html) 4.01 Transitional//EN"> (2) HTML 要 素 次 に,HTML で 書 かれた 文 書 であることを 示 すために, 文 章 全 体 をというで 囲 み, html の 要 素 にします. (sample2.html) (3) head 要 素 と body 要 素 html 要 素 は,head と body の,2 つの 要 素 を 含 まなくてはいけません.これらの 要 素 は とというで 囲 んで 示 します. head 要 素 にはその HTML 文 書 についての 情 報 を 記 述 し,body 要 素 には 本 文 を 記 述 します. もも,1 つの HTML ファ イルに 1 度 のみとの 間 に 記 述 しま す. (sample3.html) (4) title 要 素 head 要 素 には,title 要 素 を 含 まなくてはなり ません.title 要 素 は,<title>で 囲 んで,その 文 書 の 内 容 を 端 的 に 表 す 表 題 を 示 します.ここ に 示 された 内 容 は,Web ブラウザのタイトルバ ーの 文 字 列 や,ブックマークやお 気 に 入 り,あ -4-
メディアプロジェクト 演 習 1 るいはホットリストなどと 呼 ばれる 個 人 のリン ク 集 などの 見 出 しとして 使 用 されます.ですか ら,それを 見 ただけでページの 内 容 が 想 像 でき るような 表 題 を 付 けることが 肝 心 です. (sample4.html) <title>タイトル</title> 7 文 章 構 造 7.1 見 出 し 見 出 しを 付 けるためには,h1, h2, h3, h4, h5, h6 (Heading) 要 素 を 使 用 します. 通 常, 文 章 を 書 くときには, 大 節, 中 節, 小 節, 小 小 節 などのように, 内 容 が 細 分 化 される に 従 って 小 さな 見 出 しを 使 います.h 要 素 も 同 様 に,h の 後 に 続 く 数 字 によって 見 出 しの 大 き さを 指 示 します.この 数 字 は 見 出 しとしての 大 きさを 示 すものであって, 物 理 的 なフォントの 大 きさを 指 定 するものではないことに 注 意 して ください.h1 が 最 も 大 きい 見 出 しで,h6 が 最 も 小 さい 見 出 しとなります. <h1><h2><h3><h4><h5><h6>~</h1~/h6> h1~h6 で, 見 出 しの 大 きさを 指 定 します. (sample5.html) <title> 見 出 し</title> 以 下 の 様 に, 見 出 しを 用 いることで 見 出 しの 大 きさを 指 定 できます. <h1> 見 出 し 1</h1> <h2> 見 出 し 2</h2> <h3> 見 出 し 3</h3> <h4> 見 出 し 4</h4> <h5> 見 出 し 5</h5> <h6> 見 出 し 6</h6> HTML 講 座 基 礎 編 基 本 課 題 2: ひな 形 ページに, 見 出 しを 使 って, 名 前, 出 身 地, 出 身 高 校 を 書 き 加 え, 自 己 紹 介 のページを 作 ってください. 7.2 段 落 段 落 を 指 定 するには p (Paragraph) 要 素 を 使 用 します.ひとまとまりの 文 章 を 1 つの p 要 素 に すると,WWW ブラウザは 段 落 間 に 適 度 なスペ ースを 挿 入 するなどして 意 味 の 区 切 りが 解 り 易 くなるようなレイアウトを 施 します. <p>~</p> 段 落 の 範 囲 を 示 します (sample6.html) <title> 段 落 </title> このように 文 章 中 に 段 落 を 入 れること で<p>その 部 分 は 段 落 で 表 示 され</p> 本 文 中 にも 関 わらず 段 落 化 されます. 7.3 改 行 HTML のソースリストで 改 行 を 入 れても,ブ ラウザで 表 示 する 際 には 改 行 されません.そこ で, 強 制 的 に 改 行 を 行 いたい 場 合 には br (BReak) 要 素 を 用 います.ブラウザ 上 で 改 行 して 表 示 す るには, 改 行 したい 位 置 に<br>を 入 れます. <br>は 強 制 的 に 改 行 する 位 置 を 示 すための です.<br>には 終 了 はなく, 単 に <br>と 記 述 すればその 位 置 で 改 行 されます. <br> 改 行 を 入 れる 位 置 を 示 します. (sample7.html) <title> 改 行 </title> HTML では 改 行 キーを 入 力 しても その 部 分 で 改 行 されず 続 けて 文 章 が 表 示 されま す.<br> このように,HTML では 文 章 中 に 改 行 を 入 れ ることで<br> その 部 分 で 改 行 され 次 の 行 に 文 章 が 表 示 されま -5-
す. 7.4 水 平 線 <hr>は,web ページに 水 平 線 を 引 くため のです. 文 書 の 区 切 りによく 使 われます. <hr>は<br> 同 様 終 了 がありません. <hr>と 記 述 すれば 指 定 は 終 了 し,その 位 置 に 水 平 線 が 表 示 されます. <hr> 指 定 した 場 所 に 水 平 線 を 引 きます. (sample8.html) <title> 水 平 線 </title> 以 下 の 様 に, 水 平 線 を 用 いることで<hr> 上 の 様 に 表 示 されます. 基 本 課 題 3: 自 己 紹 介 のページの, 名 前, 出 身 地, 出 身 校 の 下 に 水 平 線 を 引 き,その 下 に 段 落 タ グと 改 行 を 使 って 自 分 の 趣 味 を 複 数 個 並 べ て 書 いてください. 8 文 字 の 修 飾 8.1 強 調,イタリック 体 文 字 ( 列 )を 強 調 する 要 素 として,em 要 素 と strong 要 素 があります. <em>~</em> 強 調 <strong>~</strong> さらに 強 い 強 調 ただし,これらの 要 素 の 内 容 中 に h 要 素 や p 要 素 を 入 れることはできません. (sample9.html) <title> 強 調 </title> 文 字 を 強 調 したいときは,<br> <em> 強 調 </em><br> <strong>さらに 強 い 強 調 </strong><br> など 指 定 できます. 8.2 色 文 字,または 文 字 列 の 修 飾 のために, 直 接 フ ォントの 大 きさや 色 を 指 定 する 要 素 があります. これが font 要 素 です. <font size= フォントサイズ color= 色 > フォントサイズと 文 字 色 を 指 定 します. size 属 性 の 属 性 値 は, 絶 対 値 または 相 対 値 で フォントサイズを 指 定 します. 絶 対 値 による 指 定 の 場 合 は,1 から 7 の 自 然 数 で 指 定 します. 相 対 値 による 指 定 の 場 合,その 時 のフォントの サイズに 対 して -3 や +2 等 のように 指 定 します. color 属 性 の 属 性 値 としては, 以 下 にあげる 色 の 中 から 1 色 を 指 定 します. black, silver, gray, white, maroon, red, purple, fuchsia, green, lime, olive, yellow, navy, blue, teal, aqua この 色 指 定 方 法 では 16 色 種 類 の 中 から 選 択 するしかありません.より 多 くの 色 を 指 定 する ための 方 法 については, 発 展 編 1 で 学 びます. (sample10.html) <title>フォント</title> 文 字 色 を 変 えたい 場 合 は <font color="red">このようにフォントで 色 を 指 定 することで</font> 色 を 変 更 することができる.<br> 色 の 指 定 は 色 々できますが, <font color="red"> 赤 </font>, <font color="blue"> 青 </font>, <font color="green"> 緑 </font>, <font color="yellow"> 黄 </font>, <font color="purple"> 紫 </font>, など 指 定 できます. -6-
メディアプロジェクト 演 習 1 基 本 課 題 4: 自 己 紹 介 ページのテキストの 重 要 箇 所 を 強 調 で 強 調 したり,フォントを 使 って 色 づけしたりして 目 立 つようにしてくださ い. 9 リスト( 箇 条 書 き) 箇 条 書 きのリストを 作 るには,<ul>~</ul>と <li>~</li>を 使 います.<ul>~</ul>の 中 に, 各 項 目 を<li>~</li>で 囲 んで 記 述 すると, 各 項 目 のまえに が 表 示 されます. なお,リストは,<p>~</p> 要 素 の 内 容 として は 記 述 できないというルールがありますので 注 意 してください. <ul>~</ul> 箇 条 書 きのリストを 定 義 します. <li>~</li> リストの 各 行 を 定 義 します. (sample11.html) <title>リスト</title> 幾 つかの 項 目 をリスト 表 示 するには, 以 下 の 様 に 記 述 します. <ul> <li>リスト 1</li> <li>リスト 2</li> <li>リスト 3</li> </ul> 基 本 課 題 5: 自 己 紹 介 のページの 趣 味 を 箇 条 書 き に 変 えてください. 10 画 像 文 書 中 に 画 像 を 埋 め 込 むための 要 素 は img (IMaGe) 要 素 です.img 要 素 には 終 了 はあ りません. 単 独 のだけの 要 素 です.img 要 素 にはいくつかの 属 性 があり,これにより img 要 素 に 情 報 を 与 えます. img 要 素 の 属 性 で 必 ず 与 えなければならない ものとして,src (SouRCe) 属 性 と,alt 属 性 があ ります.src 属 性 は,img 要 素 に, 文 書 に 埋 め 込 む 画 像 のファイル 名 を 指 示 するもので,ファイ ル 名,もしくは,インターネット 上 の 別 の 場 所 にあるファイルの 場 合 は,そのファイルの URL を 指 定 します.alt 属 性 は, 画 像 が 表 示 できない HTML 講 座 基 礎 編 環 境, 例 えばテキストベースの WWW ブラウザ やグラフィック 表 示 をオフにしてある WWW ブ ラウザの 場 合 に 画 像 の 代 わりに 表 示 する 文 字 列 を 指 定 します.また, 目 が 不 自 由 で 読 み 上 げソ フトを 使 用 して Web をブラウズしている 人 の 助 けにもなります. <img src= 画 像 のファイル 名 alt= 画 像 の 代 わりに 表 示 する 文 字 列 > ファイル 名 で 指 定 された 画 像 を 表 示 します. (sample12.html) <title>イメージ</title> HTML では 画 像 を 表 示 させることもできま す.<br> <img src="logo_rits.gif" alt="logo"> 基 本 課 題 6: 自 己 紹 介 のページに 画 像 を 貼 り 付 けてください. 画 像 は, 以 下 の URL にあります ので, 好 きなものをダウンロードして 使 ってくだ さい. http://www.rm.is.ritsumei.ac.jp/ lecture/mediap2016/img/ 注 ) 貼 り 付 けた 画 像 は, public_html ディレクト リに 保 存 する 必 要 があります. 11 表 表 を 作 るには, 最 低 でも<table>~</table>,<tr> ~</tr>,<td>~</td>の 3 つのを 使 います. <th>~</th>は 表 の 項 目 が 見 出 しである 場 合 に, <td>~</td>の 代 わりに 使 うです. HTML による 表 は, 表 全 体 (table 要 素 ) そ れぞれの 行 (tr 要 素 ) 行 の 中 の 項 や 見 出 し(td 要 素 や th 要 素 ) からなります. 表 を 構 成 する 項 目 の 1 つ 1 つを<td>~</td>や <th>~</th>で 定 義 し,それを 1 行 分 まとめて<tr> ~</tr>で 囲 みます. 表 の 行 数 だけ<tr>~</tr>を 集 めて<table>~</table>で 囲 めば,それが 1 つの 表 となって 表 示 されるというしくみです. <table> <tr> <td> 項 </td> <td> 項 </td> </tr> 1 <tr> <td> 項 3 </table> 2 </td> <td> 項 4 図 4 表 の 書 き 方 </td> </tr> -7-
<table>~</table> 表 を 定 義 します. <tr>~</tr> 表 の 行 を 定 義 します. <td>~</td> 表 の 各 項 目 を 定 義 します. <th>~</th> 表 の 各 項 目 が 見 出 しである 場 合 に 使 いま す. (sample13.html) <title>テーブル</title> 表 を 定 義 するには, 以 下 の 様 に 記 述 します. <table> <tr> <td> 一 行 一 列 目 </td> <td> 一 行 二 列 目 </td> </tr> <tr> <td> 二 行 一 列 目 </td> <td> 二 行 二 列 目 </td> </tr> </table> 基 本 課 題 7: 自 己 紹 介 のページに 2016 年 度 前 期 の 皆 さんの 時 間 割 表 を 追 加 してください. 12 HTML のルール HTML を 記 述 する 際 には,いくつかのルール があります.ここでは,HTML を 記 述 する 上 で 気 にするべきところ, 気 にしなくてもよいとこ ろを 紹 介 します. (1) は 大 文 字 で 書 いても 小 文 字 でもよい と 属 性 はともにアルファベットで 記 述 し ますが, 大 文 字 で 書 いても 小 文 字 で 書 いても 同 じものとして 解 釈 されます. (2) の 前 後 の 改 行 は 無 視 される の 前 後 で 改 行 しても, 表 示 結 果 は 変 わり ません. 改 行 を 連 続 して 入 れ,なにも 記 述 しな い 行 があっても 同 じです. (3) 本 文 中 の 改 行 はスペースに 置 き 換 えて 表 示 される 文 書 の 途 中 で 改 行 した 場 合 は, 半 角 スペース に 置 き 換 えられて 表 示 されます.これは, 英 文 を 行 の 途 中 で 改 行 した 場 合 に, 単 語 と 単 語 の 間 が 開 いて 表 示 されるようにするためです. (4) ウィンドウの 端 で 改 行 する 指 定 は 不 要 Web ブラウザではウィンドウの 端 で 自 動 的 に 行 が 折 り 返 して 表 示 されるため,1 行 が 長 い 段 落 であっても 改 行 を 指 示 する 必 要 はありません. (5) 複 数 の 半 角 スペースは 1 つのスペースとし て 表 示 される ブラウザに 表 示 される 文 章 の 中 に 複 数 の 半 角 スペースを 入 れると,1 つの 半 角 スペースに 置 き 換 えて 表 示 されます. 一 方 漢 字 入 力 モードで 入 力 したスペース( 全 角 スペース)はいくつ 入 力 しても 置 き 換 えられることはなく,すべて 表 示 されます. (6) ブラウザに 表 示 されないメモを 入 れるには HTML ファイルの 中 に,ブラウザには 表 示 さ れない 文 を 入 れることができます.ページ 作 成 に 当 たってのメモを 記 入 しておくと 便 利 です. 表 示 させたくない 部 分 を <!-- と --> で 囲 めば,その 部 分 はブラウザが 解 釈 しないコメ ントとして 扱 われ,ブラウザのウィンドウにも 表 示 されなくなります.コメントはソースリス トのどこにあってもかまいません.また, 複 数 行 にわたるコメントを 記 入 することもできます. (7) ブラウザがサポートしていないは 無 視 される ブラウザが 未 対 応 のや 属 性 があった 場 合, ブラウザはそれらのや 属 性 をまったく 無 視 して 表 示 します. (8) HTML 文 書 はブラウザごとで 見 え 方 が 異 な る HTML 文 書 はブラウザによって 見 え 方 は 異 な る 場 合 があります.どのようなブラウザでも 快 適 に 見 られるように 配 慮 することが, 沢 山 の 人 に 見 てもらうための 重 要 なファクターとなりま す.ですから,ページを 書 いたらできるだけ 沢 山 の WWW ブラウザで 見 栄 えのテストをするこ とをお 勧 めします. 参 考 文 献 [1] Raggett, D., H. L, Amaud., and Ian Jacobs, eds., HTML 4.01 Specification, W3C Recommendation, World Wide Web Consotium, 1999. [2] HTMLとスタイルシートによる 最 新 Webサイ ト 作 成 術 ホームページでなにを 伝 える?どう 作 る?,エクスナレッジ, 2002. -8-