1

情報コンテンツ・デザイン

Dr. Anna Yamaguchi

Course URL:

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

2

Today’s plan – ４/20

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

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

WebサイトとWebページとは

HTML/CSS/JavaScript

Webブラウザ

ルールとお願い

Rule

「自己努力」

分からないことはそのままにしない。自分で調べる、聞く！

自習- 予習・復習

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

Request for students

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

また、授業後に理解が足りないと自分で思ったらメールで連絡してください。

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

email: annay@obirin.ac.jp

3

授業計画 Webサイトとは？

インターネットとWWW

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

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

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

4

自分のWebサイト作成

Webサイトの基礎知識インターネットとWWWWebサイト制作の基本と流れ

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

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

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

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

5

JavaScriptの意味のみを勉強しJavaScriptを使った動的なWEBサイト構築を省きます。

そのかわり授業におけるWEBサイト制作の時間を増やします。

（その分この1限のクラスでは自宅にてWEB制作する時間が増えますがよりプロフェッショナルなWEB制作の勉強ができると考えています。）

Objectives –目標-

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

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

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

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

6

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

授業のホームページ

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

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

USER ID: webd

PASS： pagecon

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

Webサイトとは

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

8

WebサイトWebページ(main)

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

Webページ(sub)

World Wide WebとInternet

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

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

複数のコンピュータが互いに情報をやりとりするしくみがネッ

トワーク。個々のネットワーク同士を外のネットワークとつな

いだものがインターネット。

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

email(SMTP)、ファイル転送(FTP)、チャット(IRC)

World Wide Web(HTTP) など

9

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

World Wide Webとは

World Wide Web は、マシンやソフトの違いを超え

て情報を共有するためのドキュメントシステムとし

て誕生しました。

HTMLという言語を使うことによって、ハイパーリン

クで文書同士をつなげることができ、文書の中に画

像などのデータをうめこめる。

10

11

World Wide Web の誕生

WWWは、1989年に Tim Berners-Lee によっ

て、スイスのCERN（欧州原子核研究機関）にて

各国に散らばっている研究者が瞬時に情報に

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

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

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

静的サイトの構築

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

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

動的サイトの構築

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

12

動的サイトと静的サイト

13詳しくは教科書のHTML・CSSの勉強を終えてから…

14

HTMLは国際言語？

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

や文字の書式、埋め込むファイル（画像など）の情報な

どを定義する言語がHTML(Hyper-Text Markup Language)

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

タグの例

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

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

WebブラウザとHTML

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

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

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

AppleのSafari

GoogleのChrome

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

Internet Explorer 10（IE10）では、

［右クリック］－［ソースの表示］

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

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

16

マークアップ方式とタグ

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

17

NEXT WEEK～

Webページの基本（続き）

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

HTMLとタグの基礎

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

教科書: pp.12~28.

18

Today’s KEY WORDS

Webページ

Webサイト

World Wide Web

アプリケーション

ドキュメントシステム

ハイパーリンク

HTML (Hyper-text Markup Languge)

タグ

＜ ＞ ヤマカッコ

ブラウザ

HTMLソース

マークアップ方式

19

H.W.

授業のウェブページに自宅でログインする。

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

教科書: pp.12~28 を読む。

復習問題を解いてくる。

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

20

復習問題１

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

下さい。

2. Webページにデザインを適用する言語にはどのようなものが

あるか答えて下さい。

3. Webページの製作を行うとき、政策の流れとして一般的に初め

に決めることは何か答えてください。

4. HTMLやCSSファイルを作成するにはどのようなソフトウェアが

あると便利か答えてください。

5. HTMLやCSSファイルがインターネット上でどう表示するには

どのようなソフトウェアが必要か答えてください。

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

21