1

Webページプログラミング

Dr. Anna Yamaguchi

Course URL:

http://www2.obirin.ac.jp/annay/

2

工学博士：東京都立大学大学院（現首都大学東京）工学研究科 電気工学博士号

“Internet Packet Loss Recovery Using Convolutional Codes and Its Application for Multicast”

畳み込み符号化をパケットレベルで適用し、パケット損回復を行う手法

ユニキャスト通信、マルチキャスト通信へ適応した場合の回復能力及び性能評価

ポーランド国立ヤギェウォ大学 数学修士 （ダブルメージャーで東洋学部日本学科に在籍）

東欧のポーランド出身。日本に来て今年で26年になります。

職歴株式会社 ＣＳＫ ソフトウェア開発桜美林大学 オープン・カレッジ ポーランド語とロシア語講師国立東京外国語大学 ロシア東欧学科 ポーランド語 非常勤講師東京都立大学大学院 工学研究科 客員研究員慶應義塾大学 理工学部、情報工学科 助手

現在:

玉川大学工学部メディアネットワーク学科 非常勤講師

桜美林大学 言語コミュニケーション学科 非常勤講師

オープンカレッジ ポーランド語講師

Dr. Anna Yamaguchi

学期末には理解して頂けると思います☺

古都クラクフにあるポーランド最古の大学です。コペルニクスなども卒業生。

授業計画

Webサイトとは？

インターネットとWWW

HTMLとCSSの基礎構造と応用の方法

JavaScriptを使用したWEB上の動作（教科書とは別に教材を配ります。）

FTPを使ったWEBページのアップロード

3

自分のWebサイト作成

ルールとお願い

Rule

「自己努力」 分からないことはそのままに

しない。

→自分で調べる、聞く！

自習- 予習・復習

休んだから分かりません、は禁句です。

Request for students

私の母語は日本語ではありません。説明がわかりにくいときには授業中に私かTAに質問してください。

また、理解が足りない部分があると感じたら気軽にメールで質問してください。

質問は日本語でも英語でも構いません。（ポーランド語・ロシア語, ドイツ語も可☺）

email:

annay@obirin.ac.jp

4

5

Today’s plan – 9/1６

授業計画・コースの目標など

Webサイト作成の基礎知識 インターネットとWWW

WebサイトとWebページと

HTML/CSS/JavaScript

教科書：12p.～29p.

本日教科書の無い学生は次の授業までに必ず準備してください

Objectives –目標-

HTML/CSS/JavaScriptを理解すること。

このコースで習得したWEB制作の知識をベースにして自らWEBサイトを作成するスキルを身に着けること。

いまから自分が作るサイトのテーマを考えておいて下さい。

自分のWEBサイトをアピールするプレゼンテーションをしてもらいます。

6

★短期間で出来る限り多くの知識を習得してもらいたいと思います。授業を効率よく進めるためにも学生一人ひとりの努力が大切です。

評価方法

7

成績

10%

40%

25%

25%

授業態度積極性など

Webページ制作

授業課題各授業における取り組み

HTML/CSS技術習得度

制作発表プレゼン

各授業での進行具合、Webプログラミング技術の習得度と

学期末のプレゼンテーションを主に評価します。

授業のWebページ

http://www2.obirin.ac.jp/annay/

課題・授業内容やその補足などを毎週授業のホームページにアップロードします。

※毎週チェックするように！

8

Webサイトとは

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

9

WebサイトWebページ(main)

Webページ(sub)Webページ(sub)

Webページ(sub)

インターネットアプリケーション

インターネットを介して利用できるソフトウェアのサービス、アプリケーション。

10

ネットワークを介さない、ローカルのコンピュータのみで動作するソフトウェアやアプリケーションをデスクトップアプリケーションもしくはスタンドアローンと呼ぶ。

引用：www.way-on.com.tw

インターネットで利用されるアプリケーション：

World Wide Webについて学びます。

World Wide WebとInternet

WWWとはIP（インターネットプロトコル）にて用いられるアプリケーションである。

※重要！ WWW ≠インターネット

複数のコンピュータが互いに情報をやりとりするしくみがネットワーク。個々のネットワーク同士を外のネットワークとつないだものがインターネット。

インターネットアプリケーションemail(SMTP)、ファイル転送(FTP)、チャット(IRC)

World Wide Web(HTTP) など

11

では、WWWとはどのようなアプリケーションなのか

World Wide Webとは

World Wide Web は、マシンやソフトの違いを超えて情報を共有するためのドキュメントシステムとして誕生しました。

HTMLという言語を使うことによって、ハイパーリンクで文書同士をつなげることができ、文書の中に画像などのデータをうめこめる。

12

World Wide Webとは（続）

World Wide Webとは、簡単に説明すると…

インターネットを通してWebページというドキュメント（文書ファイル）を共有するためのアプリケーションソフトです。

13

14

World Wide Web の誕生

WWWは、1989年に Tim Berners-Lee によって、スイスのCERN（欧州原子核研究機関）にて各国に散らばっている研究者が瞬時に情報に

アクセスできるように生み出された。 １９９１年以降一般に普及、現在はインターネットでも最も利

用されているアプリケーションである。

Webページを構成する言語World Wide Web上で公開されるドキュメントがWebページと呼ばれる。

静的サイトの構築

HTML…「構造」テキスト・リンク・画像などの構成

CSS（スタイルシート）…「装飾」ページのデザイン・スタイルの構成

動的サイトの構築

JavaScriptなど…「動作」ページに動きを与える要素

15

16

HTMLは国際言語？

WWWの基礎である文書同士をリンクさせるHyper-Text

や文字の書式、埋め込むファイル（画像など）の情報などを定義する言語がHTML(Hyper-Text Markup Language)

「タグ」というコンピュータ言語を使用

タグの例

<p> </p> <br><href> <name>

※タグは<>山カッコの中に書きます

WebブラウザとHTML

私たちがウェブページを見るためのツールがウェブブラウザです。

17（上）HTMLソースで書かれたWebページ

（下）ブラウザで表示されたWebページ

HTML文書を開いてみましょう

Internet Explorer 11（IE11）では、［右クリック］－［ソースの表示］

Fire Fox: [Web開発] - [開発ツールを表示]

Chrome: [右クリック] - [ページのソースを表示]

18

マークアップ方式とタグ

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

19

Web Page Programming

Webサイトの基礎知識インターネットとWWW

Webサイト制作の基本と流れ

HTMLHTMLの役割と記述方法HTMLを使い基本的なWEBページ制作

CSSスタイルシートの役割と記述方法スタイルシートを使ったWEBデザイン

JavaScriptオブジェクト指向プログラミングとはJavaScriptを使った動的なWEBサイト構築

FTPファイル転送と制作したWEBサイトのアップロード

Presentation 20

NEXT WEEK～

Webページの基本

なぜHTML/CSSと分けて使うのか

HTMLとタグの基礎

Webページのデザイン・レイアウトを指定するCSS（スタイルシート）とはなにか？

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/

課題１

復習問題 (スライド24の質問とその答えを書く、

A4用紙、ホッチキスでとめる）

教科書: 31p.まで読む。

授業で制作する自分独自のホームページのテーマを考える。 23

宿題１

1. Webページを作成する言語にはどのようものがあるか答えてください。

2. Webページにデザインを適用する言語にはどのようなものがあるか答えてください。

3. Webページの制作を行うとき、制作の流れとして一般的にはじめに決めることは何か答えてください。

4. HTMLやCSSファイルを作成するにはどのようなソフトウェアがあると便利か答えてください。

5. HTMLやCSSファイルがインターネット上でどの表示されるか確認するにはどのようなソフトウェアが必要か答えてください。

24