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