ホームページ作成技法

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

授 業 計 画 Webサイトとは? インターネットとWWW HTMLとCSSの 基 礎 構 造 と 応 用 の 方 法 JavaScriptを 使 用 したWEB 上 の 動 作 ( 教 科 書 とは 別 に 教 材 を 配 ります ) FTPを 使 ったWEBページのアップロード 自 分 のWebサイト 作 成 3

ルールとお 願 い Rule 自 己 努 力 分 からないことはそのままに しない 自 分 で 調 べる 聞 く! 自 習 - 予 習 復 習 休 んだから 分 かりません は 禁 句 です Request for students 私 の 母 語 は 日 本 語 ではありません 説 明 がわかりにくいときには 授 業 中 に 私 かTAに 質 問 してください また 理 解 が 足 りない 部 分 があると 感 じたら 気 軽 にメールで 質 問 してく ださい 質 問 は 日 本 語 でも 英 語 でも 構 いません (ポーランド 語 ロシア 語 も 可 ) email: annay@obirin.ac.jp 4

Today s plan 9/19 授 業 計 画 コースの 目 標 など Webサイト 作 成 の 基 礎 知 識 インターネットとWWW WebサイトとWebページと HTML/CSS/JavaScript 教 科 書 :12p.~24p. 本 日 教 科 書 の 無 い 学 生 は 次 の 授 業 までに 必 ず 準 備 してください 5

Objectives 目 標 - HTML/CSS/JavaScriptを 理 解 すること このコースで 習 得 したWEB 制 作 の 知 識 をベー スにして 自 らWEBサイトを 作 成 するスキルを 身 に 着 けること いまから 自 分 が 作 るサイトのテーマを 考 えておいて 下 さい 自 分 のWEBサイトをアピールするプレゼンテ ーションをしてもらいます 短 期 間 で 出 来 る 限 り 多 くの 知 識 を 習 得 してもらいたいと 思 います 授 業 を 効 率 よく 進 めるためにも 学 生 一 人 ひとりの 努 力 が 大 切 です 6

評 価 方 法 成 績 授 業 課 題 各 授 業 における 取 り 組 み 授 業 態 度 積 極 性 など Webページ 制 作 HTML/CSS 技 術 習 得 度 制 作 発 表 プレゼン 10% 40% 25% 25% 各 授 業 での 進 行 具 合 Webプログラミング 技 術 の 習 得 度 と 学 期 末 のプレゼンテーションを 主 に 評 価 します 7

授 業 のWebページ http://www2.obirin.ac.jp/annay/ 課 題 授 業 内 容 やその 補 足 などを 毎 週 授 業 のホ ームページにアップロードします 毎 週 チェックするように! 8

Webサイトとは World Wide Web 上 でひとつのドメイン 名 の 下 にあるWebページの 集 まりがWebサイト Webサイト Webページ(main) Webページ(sub) Webページ(sub) Webページ(sub) 9

インターネットアプリケーション インターネットを 介 して 利 用 できるソフトウェアの サービス アプリケーション ネットワークを 介 さない ローカルのコンピュータのみで 動 作 するソフトウェアや アプリケーションをデスクトップアプリケーションもしくはスタンドアローンと 呼 ぶ インターネットで 利 用 される アプリケーション: World Wide Web について 学 びます 引 用 :www.way-on.com.tw 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とは( 続 ) World Wide Webとは 簡 単 に 説 明 すると インターネットを 通 してWebページという ドキュメント( 文 書 ファイル)を 共 有 する ためのアプリケーションソフトです 13

World Wide Web の 誕 生 WWWは 1989 年 に Tim Berners-Lee によっ て スイスのCERN( 欧 州 原 子 核 研 究 機 関 )にて 各 国 に 散 らばっている 研 究 者 が 瞬 時 に 情 報 に アクセスできるように 生 み 出 された 1991 年 以 降 一 般 に 復 旧 し 現 在 はインターネットでも 最 も 利 用 されているアプリケーションである 14

Webページを 構 成 する 言 語 World Wide Web 上 で 公 開 されるドキュメントがWeb ページと 呼 ばれる 静 的 サイトの 構 築 HTML 構 造 テキスト リンク 画 像 などの 構 成 CSS(スタイルシート) 装 飾 ページのデザイン スタイルの 構 成 動 的 サイトの 構 築 JavaScriptなど 動 作 ページに 動 きを 与 える 要 素 15

HTMLは 国 際 言 語? WWWの 基 礎 である 文 書 同 士 をリンクさせるHyper-Text や 文 字 の 書 式 埋 め 込 むファイル( 画 像 など)の 情 報 な どを 定 義 する 言 語 がHTML(Hyper-Text Markup Language) タグ というコンピュータ 言 語 を 使 用 タグの 例 <p> </p> <br> <href> <name> タグは<> 山 カッコ の 中 に 書 きます 16

WebブラウザとHTML 私 たちがウェブページを 見 るため のツールがウェブブラウザです ( 下 )ブラウザで 表 示 されたWebページ 上 )HTMLソースで 書 かれたWebページ 17

HTML 文 書 を 開 いてみましょう Internet Explorer 11(IE11)では [ 右 クリック]-[ソースの 表 示 ] Fire Fox: [Web 開 発 ] - [ 開 発 ツールを 表 示 ] Chrome: [ 右 クリック] - [ページのソースを 表 示 ] 18

マークアップ 方 式 とタグ 開 始 タグ <XXX> と 終 了 タグ </XXX> で 要 素 をマークアップするのがHTMLのマーク アップ 方 式 である 19

Web Page Programming Webサイトの 基 礎 知 識 インターネットとWWW Webサイト 制 作 の 基 本 と 流 れ HTML HTMLの 役 割 と 記 述 方 法 HTMLを 使 い 基 本 的 なWEBページ 制 作 CSS スタイルシートの 役 割 と 記 述 方 法 スタイルシートを 使 ったWEBデザイン JavaScript オブジェクト 指 向 プログラミングとは JavaScriptを 使 った 動 的 なWEBサイト 構 築 FTP ファイル 転 送 と 制 作 したWEBサイトのアップロード Presentation 20

NEXT WEEK~ Webページの 基 本 なぜHTML/CSSと 分 けて 使 うのか HTMLとタグの 基 礎 Webページのデザイン レイアウトを 指 定 す るCSS(スタイルシート)とはなにか? 予 習 : 教 科 書 25p.~45p. 21

Today s KEY WORDS Webページ Webサイト World Wide Web アプリケーション ドキュメントシステム ハイパーリンク HTML (Hyper-text Markup Languge) タグ < > ヤマカッコ ブラウザ HTMLソース マークアップ 方 式 22

H.W. 授 業 のウェブページに 自 宅 でログインする http://www2.obirin.ac.jp/annay/ 課 題 1 復 習 問 題 (スライド22の 質 問 とその 答 えを 書 く A4 用 紙 ) 教 科 書 : 12p.~24p.を 読 む 授 業 で 制 作 する 自 分 独 自 のホームページのテー マを 考 える 23