Webページプログラミング Dr. Anna Yamaguchi Course URL: http://www2.obirin.ac.jp/annay/ 1
Dr. Anna Yamaguchi 工 学 博 士 : 東 京 都 立 大 学 大 学 院 ( 現 首 都 大 学 東 京 ) 工 学 研 究 科 電 気 工 学 博 士 号 Internet Packet Loss Recovery Using Convolutional Codes and Its Application for Multicast 畳 み 込 み 符 号 化 をパケットレベルで 適 用 し パケット 損 回 復 を 行 う 手 法 ユニキャスト 通 信 マルチキャスト 通 信 へ 適 応 した 場 合 の 回 復 能 力 及 び 性 能 評 価 ポーランド 国 立 ヤギェウォ 大 学 数 学 修 士 (ダブルメージャーで 東 洋 学 部 日 本 学 科 に 在 籍 ) 東 欧 のポーランド 出 身 日 本 に 来 て 今 年 で25 年 になります 古 都 クラクフにあるポーランド 最 古 の 大 学 です コペルニクスなども 卒 業 生 職 歴 株 式 会 社 CSK ソフトウェア 開 発 桜 美 林 大 学 オープン カレッジ ポーランド 語 とロシア 語 講 師 国 立 東 京 外 国 語 大 学 ロシア 東 欧 学 科 ポーランド 語 非 常 勤 講 師 東 京 都 立 大 学 大 学 院 工 学 研 究 科 客 員 研 究 員 慶 應 義 塾 大 学 理 工 学 部 情 報 工 学 科 助 手 現 在 : 玉 川 大 学 工 学 部 メディアネットワーク 学 科 非 常 勤 講 師 桜 美 林 大 学 言 語 コミュニケーション 学 科 非 常 勤 講 師 オープンカレッジ ポーランド 語 講 師 2
Today s plan 4/11 授 業 計 画 コースの 目 標 など Webサイト 作 成 の 基 礎 知 識 インターネットとWWW 教 科 書 : WebサイトとWebページとは 12p.~24p. 読 む HTML/CSS/JavaScript 3
Objectives (1) 目 標 - HTML/CSS/JavaScriptを 理 解 すること このコースで 習 得 したWEB 制 作 の 知 識 をベー スにして 自 らWEBサイトを 作 成 するスキルを 身 に 着 けること いまから 自 分 が 作 るサイトのテーマを 考 えておいて 下 さい 自 分 のWEBサイトをアピールするプレゼンテ ーションをしてもらいます いまからテーマを 考 えておいて 下 さい 4
ルールとお 願 い Rule 自 己 努 力 分 からないことはそのままに しない 自 分 で 調 べる 聞 く! 自 習 - 予 習 復 習 Request for students 私 の 母 語 は 日 本 語 ではありません 説 明 がわかりにくいときには 授 業 中 に 私 かTAに 質 問 してください また 理 解 が 足 りない 部 分 があると 感 じたら 気 軽 にメールで 質 問 してく ださい 休 んだから 分 かりません は 禁 句 です 質 問 は 日 本 語 でも 英 語 でも 構 いません (ポーランド 語 ロシア 語 も 可 ) email: annay@obirin.ac.jp 5
授 業 計 画 Webサイトとは? インターネットとWWW HTMLとCSSの 基 礎 構 造 と 応 用 の 方 法 JavaScriptを 使 用 したWEB 上 の 動 作 ( 教 科 書 とは 別 に 教 材 を 配 ります ) FTPを 使 ったWEBページのアップロード 自 分 のWebサイト 作 成 6
Web Page Programming Webサイトの 基 礎 知 識 インターネットとWWW Webサイト 制 作 の 基 本 と 流 れ HTML HTMLの 役 割 と 記 述 方 法 HTMLを 使 い 基 本 的 なWEBページ 制 作 CSS スタイルシートの 役 割 と 記 述 方 法 スタイルシートを 使 ったWEBデザイン JavaScript オブジェクト 指 向 プログラミングとは JavaScriptを 使 った 動 的 なWEBサイト 構 築 FTP ファイル 転 送 と 制 作 したWEBサイトのアップロード 7
Objectives (2) 目 標 - HTML/CSS/JavaScriptを 理 解 すること このコースで 習 得 したWEB 制 作 の 知 識 をベー スにして 自 らWEBサイトを 作 成 するスキルを 身 に 着 けること いまから 自 分 が 作 るサイトのテーマを 考 えておいて 下 さい 自 分 のWEBサイトをアピールするプレゼンテ ーションをしてもらいます 短 期 間 で 出 来 る 限 り 多 くの 知 識 を 習 得 してもらいたいと 思 います 授 業 を 効 率 よく 進 めるためにも 学 生 一 人 ひとりの 努 力 が 大 切 です 8
授 業 のホームページ http://www2.obirin.ac.jp/annay/ 課 題 授 業 内 容 やその 補 足 などを 毎 週 授 業 のホ ームページにアップロードします 毎 週 チェックするように! 9
Webサイトとは World Wide Web 上 でひとつのドメイン 名 の 下 にあるWebページの 集 まりがWebサイト Webサイト Webページ(main) Webページ(sub) Webページ(sub) Webページ(sub) 10
World Wide WebとInternet WWWとはIP(インターネットプロトコル) にて 用 いられるアプリケーションである 重 要! WWW インターネット 複 数 のコンピュータが 互 いに 情 報 をやりとりするしくみがネッ トワーク 個 々のネットワーク 同 士 を 外 のネットワークとつな いだものがインターネット インターネットアプリケーション email(smtp) ファイル 転 送 (FTP) チャット(IRC) World Wide Web(HTTP) など では WWWとはどのようなアプリケーションなのか 11
World Wide Webとは World Wide Web は マシンやソフトの 違 いを 超 え て 情 報 を 共 有 するためのドキュメントシステムとし て 誕 生 しました HTMLという 言 語 を 使 うことによって ハイパーリン クで 文 書 同 士 をつなげることができ 文 書 の 中 に 画 像 などのデータをうめこめる 12
World Wide Web の 誕 生 WWWは 1989 年 に Tim Berners-Lee によっ て スイスのCERN( 欧 州 原 子 核 研 究 機 関 )にて 各 国 に 散 らばっている 研 究 者 が 瞬 時 に 情 報 に アクセスできるように 生 み 出 された 1991 年 以 降 一 般 に 復 旧 し 現 在 はインターネットでも 最 も 利 用 されているアプリケーションである 13
Webページを 構 成 する 言 語 World Wide Web 上 で 公 開 されるドキュメントがWeb ページと 呼 ばれる 静 的 サイトの 構 築 HTML 構 造 テキスト リンク 画 像 などの 構 成 CSS(スタイルシート) 装 飾 ページのデザイン スタイルの 構 成 動 的 サイトの 構 築 JavaScript 動 作 ページに 動 きを 与 える 要 素 14
HTMLは 国 際 言 語? WWWの 基 礎 である 文 書 同 士 をリンクさせるHyper-Text や 文 字 の 書 式 埋 め 込 むファイル( 画 像 など)の 情 報 な どを 定 義 する 言 語 がHTML(Hyper-Text Markup Language) タグ というコンピュータ 言 語 を 使 用 タグの 例 <p> </p> <br> <href> <name> タグは<> 山 カッコ の 中 に 書 きます 15
WebブラウザとHTML 私 たちがウェブページを 見 るため のツールがウェブブラウザです ( 下 )ブラウザで 表 示 されたWebページ 上 )HTMLソースで 書 かれたWebページ 16
HTML 文 書 を 開 いてみましょう Internet Explorer 11(IE11)では [ 右 クリック]-[ソースの 表 示 ] Fire Fox: [Web 開 発 ] - [ 開 発 ツールを 表 示 ] Chrome: [ 右 クリック] - [ページのソースを 表 示 ] 17
マークアップ 方 式 とタグ 開 始 タグ <XXX> と 終 了 タグ </XXX> で 要 素 をマークアップするのがHTMLのマーク アップ 方 式 である 18
NEXT WEEK~ Webページの 基 本 なぜHTML/CSSと 分 けて 使 うのか HTMLとタグの 基 礎 Webページのデザイン レイアウトを 指 定 す るCSS(スタイルシート)とはなにか? 予 習 : 教 科 書 25p.~45p. 19
Today s KEY WORDS Webページ Webサイト World Wide Web アプリケーション ドキュメントシステム ハイパーリンク HTML (Hyper-text Markup Languge) タグ < > ヤマカッコ ブラウザ HTMLソース マークアップ 方 式 20
H.W. 授 業 のウェブページに 自 宅 でログインする http://www2.obirin.ac.jp/annay/ 課 題 1 復 習 問 題 (スライド22の 質 問 とその 答 えを 書 く A4 用 紙 ) 教 科 書 : 12p.~24p.を 読 む 授 業 で 制 作 する 自 分 独 自 のホームページのテー マを 考 える 21
復 習 問 題 1 1. Webページを 作 成 する 言 語 にはどのようなものがあるか? 2. Webページにデザインを 適 用 する 言 語 にはどのようなものが あるか? 3. Webページの 製 作 を 行 うとき 製 作 の 流 れとして 一 般 的 に 初 め に 決 めることは 何 か? 4. HTMLやCSSファイルを 作 成 するにはどのようなソフトウェアが あると 便 利 か? 5. HTMLやCSSファイルがインターネット 上 でどう 表 示 するには どのようなソフトウェアが 必 要 か? 授 業 で 制 作 する 自 分 のホームページのテーマを 考 えておいて 下 さい 22