ホームページ
(1)
• ホームページ
– 自由に作成・安価
– 世界中に公開
– 多彩な表現力
– 双方向性
-‐ 島根県立大学-‐島根県立大学短期大学部
h7p://www.u-‐shimane.ac.jp/
ホームページ
(2)
• さまざまなサービス
– 双方向性の利用
– 表現力の向上
–
CMSとしてシステム化
掲示板
: h7p://www.2ch.net/
チャット
: KentWebチャットシステム
h7p://www.kent-‐web.com/chat/sample/windy.cgi
Mixi: h7p://www.mixi.jp
Wikipedia: h7p://a.wikipedia.org/
ホームページ
(3)
• オンライン専業のニュースサイト
ハイパーテキスト
(1)
• ハイパーテキストとは
– 文書（テキスト）間に意味や連想などに基づいた関係性を
与える仕組みと実現機構
– 膨大な文書情報処理のための文書管理機構
•
Memex (1945) → 関連システム (1960~) → WWW (1990)
– 一次元的な「
紙の本
」に対する「
新しい文書
」の提案
• 例：
– 百科事典の注釈や関連項目の表記
ハイパーテキスト
(2)
• “As We May Think” (1945, Vannevar Bush)
– 夢の文書管理装置memex(MEMory Extension: 記憶拡張
装置
)の構想を提案
– マイクロフィルムやレコードの管理装置
– データ間に連想関係を与える
ハイパーテキスト
(3)
•
Douglas Carl Engelbart
– マウスを発明
– ハイパーテキストの概念を実現
•
NLS (oN-‐Line System)を実装 (1960年代)
– 文書管理システム
9
ハイパーテキスト
(4)
•
Theodor Holm Nelson
–
1960年 Project Xanaduを開始
• ハイパーテキスト機構の実現プロジェクト
• 活動継続中、
Xanadu公式サイト:
h7p://xanadu.com/
–
1965年 「ハイパーテキスト」という言葉を発明
–
1968年 HyperText EdiWng Systemを提案
Side-‐by-‐side connecWon as schemaWcally illustrated in 1965
h7p://www.xanadu.com.au/ted/XUsurvey/xuDaWon.html
10
余談
: マルチメディア
•
1990年代にパソコンマルチメディアブーム
– コンピュータの進化が背景
• マルチメディアとは
– 数値処理、文字処理、AV（音声、画像、ビデオ）処理を加
えた複合型メディアのこと
– コンピュータ、ソフトウェア、ゲーム、クリエイター業界の垣
根を越えたコンテンツ作り
世界初の
CDROMドライブ内蔵パソコン
富士通
FM-‐TOWNS
英会話学習ゲーム
EMIT
HTMLタグ
タグ： 基本・ヘッダ
• 基本タグ
– <html> HTMLの開始と終了を定義
– <head> ヘッダ要素を定義
– <body> ボディ要素を定義
• ヘッダ関連
– <title> ページのタイトルを定義
– <base> リンクのベースとなるパスを定義
– <meta> HTML/XHTML文書の情報を定義
– <link> 他の文書との関係を定義
– <style> 文書のスタイルを定義
タグ例： 基本・ヘッダ
• HTMLヘッダ（緑）
• head部とbody部の指定 （青）
• HTML本文（白）
<html>
<head>
<meta h7p-‐equiv="Content-‐Type" content="text/html; charset=Shij_JIS" />
<Wtle>
情報公開システム論
</Wtle>
</head>
<body>
<h1>XHTMLとは</h1>
<p>XHTMLとは・・・</p>
</body>
</html>
タグ： 文章構成
• <h1>~<h6> 見出しを定義
• <p> パラグラフ（段落）を定義
• <div> ディビジョン（1つのブロック）を定義
• <span> テキストの範囲を指定（何もしない）
• <br/> 強制改行
• <hr/> 罫線を表示
• <pre> 改行、スペース等を保ったまま表示
タグ例： 文章構成
• HTMLヘッダ ＋ HTMLボディ
（ヘッダ部省略）
<body>
<h1>
XHTMLとは1
</h1>
<h2>
XHTMLとは2
</h2>
<h2>
XHTMLとは3
</h2>
<p>
こんな感じで一段落を指定します。
</p>
<p>
さらに続けて、もう一段落です。
</p>
改行したいときは→
<br>
<hr>
仕切りの罫線を入れてみました
</body>
タグ： フォントスタイル
• <b> テキストをボールド体に指定
• <big> フォントサイズを大きく指定
• <i> テキストをイタリック体に指定
• <small> フォントサイズを小さく指定
• <sub> テキストを下付きに指定
• <sup> テキストを上付きに指定
• <tt> テレタイプ文字に指定
タグ： リンク
• <img> 画像を配置
タグ例： リンク
• 画像と外部リンク
– src, href属性にURLを指定
（赤字の部分）
（ヘッダ部省略）
<body>
島根県立大学ロゴ
<br>
<img src="
http://www.u-shimane.ac.jp/img/header/logo.gif
" />
<br>
島根県立大学への
<a href="
http://www.u-shimane.ac.jp/
">
リンク
</a>
</body>
参考： 画像
URLの確認方法
• 画像の上で右クリック → 「プロパティ」
• アドレス欄を確認、コピーペースト
タグ： リスト
• <ul> リスト形式を定義
• <ol> 番号付きリストであることを定義
– <li> リスト形式の各リストを定義
• <dl> 見出し付きリストであることを定義
– <dt> リストの見出しを定義
– <dd> リストの各項目を定義
タグ例： リスト
• リスト、数字つきリスト
– 「ul」,「ol」、項目は「li」で指定
<body>
<ul>
<li>
リスト
A
</li>
リストAの内容
<li>
リスト
B
</li>
リストBの内容
<li>
リスト
C
</li>
リストCの内容
</ul>
<ol>
<li>
リスト
1
</li>
リスト1の内容
<li>
リスト
2
</li>
リスト2の内容
<li>
リスト
3
</li>
リスト3の内容
</ol>
</body>
タグ： テーブル
• <table> テーブル（表）を定義
– <caption> テーブルの表題を定義
– <tr> テーブルに新しい行を定義
– <th> ヘッダセル（項目名のセル）を定義
– <td> データセル（通常のセル）を定義
– <thead> テーブルのヘッダ部を定義
– <tbody>
テーブルのボディ部を定義
– <tfoot> テーブルのフッタ部を定義
– <colgroup> テーブルの列グループを定義
• <col> 列グループの中で列を定義
演習
• 目的
–
HTML利用のイメージをつかむ
• すること
–
HTMLファイルの作成
–
HTMLファイルの閲覧
HTMLの書き方
• ① 全体構造の作成
– HTML文書の基本構成
– 形に合わせて用意、コピーでよい
• ② 文書の追加
– 文書を書き加える
– タグの利用
HTMLの基本構造
• ヘッダ
– HTML文書の設定
• タグ
– データ修飾
• 入れ子構造
– タグの入れ子
<name>
taro yamada
</name>
<users type="array">
<user>
<id>
99999
</id>
<name>
taro yamada
</name>
</user>
</users>
タグ構造： 赤字がタグ、白字がデータ
入れ子構造： タグが別のタグの中に入る
<user>
Teruaki
<id>
99999
</user></id>
入れ子
NG： タグが閉じる前に別のタグを開く
<user>
Teruaki
<id>
99999
</id>
入れ子
NG： タグが閉じていない
入れ子
NG
HTMLの構成
• HTMLヘッダ ＋ HTMLボディ
<html>
<head>
<Wtle>
情報公開システム論
</Wtle>
</head>
<body>
<h1>XHTMLとは</h1>
<p>XHTMLとは・・・</p>
</body>
</html>
HTML記述の注意
• タグの取り扱い
– タグ（要素タイプ名、属性名）は小文字で記述
– 属性の値は必ず引用符で囲む
• <xxx property=
"
属性値
"
>
– 終了タグを省略しない
• <xxx>~
</xxx>
• <yyy
/>
• 「&」の書き換え
– 「&」は「&」と記述
課題テンプレート
• 基本的な形、準備
– titleタグ内を書き換えてみる
– bodyタグ内にHTMLタグを書く
<html>
<head>
<Wtle>
情報公開システム論
</Wtle>
</head>
<body>
好きなことをここに書いてみる
</body>
</html>
課題：
HTMLの利用
• 本文を記述する
–
bodyタグ内に何でもいいので簡単な文書を書く
– 自己紹介とか？
• 利用するタグ
–
<h1>, <h2>, <p>, <br>
–
<img> <a>
–
<ul>か<ol>の一方
• 条件
–
<h1>, <h2>, <p>, <br>は1つ以上使う
– 画像
1つ以上、リストを1つ以上、リンクを1つ以上
• ファイル名
– 「
e学籍番号.html
」 例
：
e123456.html
30
CSSについて
CSSとは
• Cascading Style Sheets の略
• Webページの見た目を規定する言語
スタイルシートの例
<html>
<head>
<title>
情報公開システム論
</title>
<style type="text/css">
H1 { color: red; }
</style>
</head>
<body>
好きなことをここに書いてみる
</body>
</html>
<style type="text/css">～</
style>内に記述
簡単なスタイルシート
• 「タグ」への「スタイル」指定
– タグ（緑）にスタイル（赤）を指定
– 複数のタグを選択できる
– 複数のスタイルを記述できる
(
タグ
)
{
(スタイル): (指定);
(スタイル): (指定);
複数個を並べて記述
}
H1
{
border-‐color: red;
}
「
H1」タグの
「
border-‐color」を
「
red」に指定
（＝
H1タグに赤枠をつける）
スタイルシート命令
• 色
• フォントサイズ、フォント装飾
• マージン
• 枠
• （無数に存在）
CSS: 色の指定
• 「color:」
– 色を指定する
/* 名前で指定 */
H1
{
color: red;
}
/* 数値で指定（16進数）#RRGGBB */
H1
{
color: #ff0000;
}
/* 数値で指定（0~255）rgb(R, G, B) */
H1
{
color: rgb(255, 0, 0);
}
/* 数値で指定 (0~100%) rgb(R, G, B) */
H1
{
color: rgb(100%, 0%, 0%);
}
CSS: フォントの指定
• 「font-size:」
– 文字の大きさを指定する
/* 名前で指定 */
BODY, TH, TD
{
font-‐size: large;
}
/* 数値で指定 */
BODY, TH, TD
{
font-‐size: 16pt;
}
/* 文字サイズを指定するキーワード */
長さ・大きさの指定
• さまざまな単位で指定が可能
– 10em ... 文字の高さを基準とした1文字分の長さ
– 10px ... 10ピクセル
– 10in ... 10インチ（1in=2.54cm）
– 10cm ... 10センチメートル（1cm=10mm）
– 10mm ... 10ミリメートル（10mm=1cm）
– 10pt ... 10ポイント（1pt=1/72in）
CSS: フォント装飾
• 「text-decoration:」 装飾の指定
– 文字の飾りつけ
H1
{
text-‐decoraWon: blink;
}
underline（下線）
、
overline（上線）
、
line-‐through（打ち消し線）
、
blink（点滅）
CSS: 背景の指定
• 「background-color:」
– 背景色を指定する
• 「background-image:」
– 背景画像の URLを指定する
/* 背景色の指定 */
H1
{ background-‐color: #ccccff; }
/* 背景画像の指定 */
CSS: 枠の指定
• 「border-color:」 枠の色
• 「border-width:」 枠の太さ
• 「border-style:」 枠の線
H1
{
border-‐color: red;
border-‐width: 1px;
border-‐style: solid;
}
none（線無し）
、
do7ed（点線）
、
dashed（粗い点線）
、
solid（実線）
、
double（二重線）
、
groove（谷線）
、
ridge（山線）
、
inset（内線）
、
outset（外線）
42
スタイルシートの記法
• 基本は「タグ」に対して「スタイル」を指定
• タグ
– XHTMLのタグ（図中の緑）
– 複数指定も可能、「,」（カンマ）で区切る
• スタイル
– スタイル指定（図中の赤）
– 「(CSSキーワード):」と「(指定する値);」
– コロン(:)とセミコロン(;)に注意
(
タグ
)
{ /* コメント欄は無視される*/
(スタイル): (指定);
(スタイル): (指定);
複数個を並べて記述
}
H1
{
border-‐color: red;
border-‐width: 1px;
border-‐style: solid;
}
スタイルシートの指定例
スタイルシートの記法
スタイルシートの埋め込み
(1)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<title>
情報公開システム論
</title>
<style type="text/css">
H1 { color: red; }
</style>
</head>
<body>
好きなことをここに書いてみる
</body>
</html>
<style type="text/css">～
</style>内に記述
スタイルシートの埋め込み
(2)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<title>
情報公開システム論
</title>
<link rel="stylesheet" type="text/css" href="xxx.css">
</head>
<body>
好きなことをここに書いてみる
</body>
</html>
CSSを外部ファイルにて定義
外部ファイルから読み込み
H1 { color: red; }
CSSを定義したファイル
「
xxx.css」
CSSをここに記述
クラスや
IDの割り当て
• クラス
– タグを
グループ
化する仕組み
– 同一タグを種類分けしてデザインしたい場合に利用
• 同じH1でも違うデザインを使いたい
• ID
– タグに名前をつける仕組み
–
ひとつひとつ
のタグを区別して扱いたい場合に利用
• 個別の部分にデザインを指定したい
<h1 class="
midashi1
">
見出しとして扱う！
</h1>
<h1 class="
midashi2
">
見出しとして扱う！
</h1>
<h1 id="
special
">
IDで名前をつけた！
</h1>
同じ
H1でも、
クラスや
IDを用いることで
区別して指定できる
div, spanタグ
• divとspanタグは何もしないタグ
– 文章中で、クラスやIDを割り当てるために用いる
– スタイルシートのために用いられる
– spanタグは改行しない
– divタグはブロックとなる（改行する）
<span id="
myname
">
横山輝明
</span>
です。
<br/>
テストの
<span class="
keyword
">
文章
</span>
です。このようにして文章を
<span class="
keyword
">
記述
</span>
している途中で、一部を
divタグや
spanタグで囲んでクラスやIDを指定することができます。クラスやIDで、場
47
クラスや
IDの指定
• クラス: タグ名に「.」(ドット)で続けて指定
• ID: タグ名に「#」で続けて指定
H1.midashi
{
border-‐color: red;
}
タグを制限せずに指定
（
midashiクラスすべて）
.midashi
{
border-‐color: red;
}
H1タグのmidashiクラスすべて
H1#myname
{
border-‐color: red;
}
タグを制限せずに指定
（
myname IDすべて）
#myname
{
border-‐color: red;
}
H1タグのmyname IDすべて
スタイルシートの利点
• 見た目と構造を分離できる
• 見た目を一度に指定できる
• 見た目を一度に変更できる
• 好きな見た目に変更できる
参考サイト
• 検索してみる
– 「css 入門」など
• とほほのスタイルシート入門
–
http://www.tohoho-web.com/css/index.htm
–
http://www.tohoho-web.com/css/reference.htm
• - とほほのＷＷＷ入門
–
http://www.tohoho-web.com/www.htm
演習
• 目的
–
CSS利用のイメージをつかむ
• すること
–
HTMLファイルへのCSS追加
–
HTMLファイルの閲覧
スタイルシートの追加
(1)
• HTMLヘッダ内に直接記述
<html>
<head>
<title>
情報公開システム論
</title>
<style type="text/css">
H1 { color: red; }
</style>
</head>
<body>
好きなことをここに書いてみる
</body>
</html>
<style type="text/css">～</
style>内に記述
スタイルシートの追加
(2)
• 外部ファイルで指定
– 「.css」ファイルを作成、ファイルの中にCSSを記述
<html>
<head>
<title>
情報公開システム論
</title>
<link rel="stylesheet" href="
default.css
" type="text/css" />
</head>
<body>
好きなことをここに書いてみる
</body>
</html>
<style type="text/css">～</
style>内に記述
H1 { color: red; }
default.css ファイル
ファイル内に
CSSの指定を記述
課題：
CSSの追加利用
•
CSSの追加
– 先ほどのHTMLファイルにCSSでデザイン追加
– 文字サイズ、色、背景などを指定
– 余裕があればCLASS, IDを指定
• ファイル名
– 「
e学籍番号.html
」 例
：
e123456.html
• 「
e学籍番号.css
」 例
：
e123456.css
• 提出
–
[email protected] へメール
– タイトル：
情報公開システム論
HTML
–
宛先・ファイル名・タイトル厳守
– 本文には感想やコメントなども任意でどうぞ
54
インターネットの特徴
• 自由に利用可能な通信基盤
– 「通信」と「サービス」が分離
– インターネットは「通信」のみ提供
– 「サービス」は自由に作成できる
インターネットと
WWW
• インターネット
– 世界中に普及した通信基盤
•
WWW
– インターネット上の情報公開システム
•
WWWコンテンツ
–
WWW上で提供されるコンテンツ
– 動的なサービスも提供される
インターネット
WWW
コンテンツ
インターネット時代の幕開け
•
Windows 95 (1995/11/23)
– インターネットプロトコル内蔵
– ブラウザは含まず
•
Internet Explorer 1.0
– ブラウザ
– 追加ダウンロードして利用
→ WWWの一般化
Webページ表現力の変遷
Yahoo!トップページ (1995)
Yahoo!トップページ (2000)
Yahoo!トップページ (2008)
• 画像、動画、Flashの導入
•
HTMLの表現力向上
Images: Yahoo's steady home page transformation
http://news.cnet.com/2300-1032_3-6072801-1.html?tag=mncol
WWWの歴史
•
1989/3 T.B-‐LeeがWWWのアイデアを提案
– ”
InformaWon Management: A Proposal”
•
1990/11 WWW誕生
– “WorldWideWeb: Proposal for a HyperText Project” , T.B-‐Lee
– 欧州原子核研究機構(CERN)の膨大な文書管理のため
•
1991/8 WWW公開を広報
•
1992/9 日本初のWebページ
•
1992 Mosaicの誕生, Netscape
•
1992 W3C設立
–
CSS、HTMLやXML拡張の規格の標準化推進団体
HyperTextの実現
•
Tim Berners-‐Lee
– 欧州原子核研究機構
(CERN)の膨大な文書管理を目的
• ”
InformaWon Management: A Proposal” (1989/3)
–
WWWの基本的なアイデア
–
HyperTextを実装
• “
WorldWideWeb: Proposal for a HyperText
Project” (1990/11)
•
1991/8 WWWシステムを公開
–
h7p://groups.google.com/group/alt.hypertext/msg/
395f282a67a1916c
世界最初のWebページ
I promised to post a short summary of the WorldWideWeb project. Mail me with any queries.
WorldWideWeb - Executive Summary The WWW project merges the techniques of information retrieval and hypertext to make an easy but powerful global information system.
The project started with the philosophy that much academic information should be freely available to anyone. It aims to allow information sharing within internationally dispersed
teams, and the dissemination of information by support groups. 1991/8/7にTim Berners-Leeが ネットニュースへ投稿したメッセージ 1992/11/3時点のCERN Webページ 欧州核物理研究機構 スイスジュネーブ
出典： http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html
WWWのHyperText構造
•
HyperText構造：文書と文書の関係性
•
WWW文書構造
–
HTMLで記述された文書
– 他文書への参照をハイパーリンクとして設定
文書
（HTMLで記述された文書）
文書
（HTMLで記述された文書）
文書
（文書内に被リンク箇所を持
つ場合もある）
フラグメント箇所 アンカー アンカーWorld Wide Web
• 世界規模の文書共有システム
–
HyperText文書
– 世界中の文書間でのリンク構造
• 最も一般的なインターネットアプリケーション
– 情報公開/コミュニケーション/商用利用などさま
ざまなアプリケーションが登場
– 巨大なアプリケーションプラットホームへと変化
WWWの三大要素
•
URI: 住所の記載方法
•
HTTP: データのやりとりの方法
•
HTML: Webページの記述言語
66
URI書式
• スキーム部
– 対象リソースへのアクセス手段
– WWWではhttp/https (ファイル取得ではftpが利用されることも)
• リソース部
– 対象リソースの識別子
– WWWではHTML文書
– HTML文書を格納するサーバの所在とサーバ内のファイル格納場所
http
: //
www.cyber-u.ac.jp
/faculty/it/index.html
スキーム部
リソース部
ホスト所在
ファイルパス
HTTP
• Webサーバとブラウザ間での通信プロトコル
– HyperText Transfer Protocol
– HTML文書やその他のファイル伝送に利用
– 通信形態
• クライアントサーバ型
• リクエストレスポンス型
68
HTTP機構
• HTTP特徴
– リクエスト＆レスポンス
– クライアントとサーバで異なる機能を提供
インターネット
① HTTPリクエストの送信
③ HTTPレスポンスの送信
ブラウザ
Webサーバ
② 格納HTMLファイルの取出 ④ 取得HTMLファイルの表示 <HTML> <TITLE>⾃自⼰己紹介</TITLE> <BODY> <H1> 名前 </H1> <P>横⼭山輝明</P> <H1> 挨拶 </H1> <P> みなさん こんにちは。<A HREF="http://www.cyber-‐‑‒u. ac. jp/">
サイバー⼤大学 </A> の横⼭山です。 </P> </BODY> </HTML> ② 格納HTMLファイルの取出 <HTML> <TITLE>⾃自⼰己紹介</TITLE> <BODY> <H1> 名前 </H1> <P>横⼭山輝明</P> <H1> 挨拶 </H1> <P> みなさん こんにちは。
<A HREF="http://www.cyber-‐‑‒u. ac. jp/">
サイバー⼤大学 </A> の横⼭山です。 </P> </BODY> </HTML>
HTML
•
HTMLとは
–
Webページを記述するためのマークアップ言語
–
W3Cが規格策定
– 最新版はHTML 4.01
•
HTMLの特徴
– 文書の論理構造や見栄えなどを記述
– 文書中に画像や音声などを配置できる
– 他の文書へのハイパーリンクを設定できる
HTML構文
•
WWWの文書記述記法
• タグと呼ばれる命令文
– 「＜」「＞」で囲まれた命令文
– 「＜（開始タグ）＞」「＜／（終了タグ）＞」
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta name="keywords" content="サイバー大学,サイバー,CU,インターネット大学,吉村作治,吉村教授,世界遺産学部,世界遺産,エジプト,IT総合学部,ソフトバンク,ソ フトバンクのインターネット大学,オンデマンド,動画,大学,教育,学部,講座">
<meta name="description" content="サイバー大学。インターネットを使って学ぶ、日本で初めての大学、2007年4月開学。"> <title>IT総合学部 | サイバー大学</title>
HTMLの例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/ html4/loose.dtd">
<html lang="ja" dir="ltr"> <head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta name="keywords" content="サイバー大学,サイバー,CU,インターネット大学,吉村作治,吉村教 授,世界遺産学部,世界遺産,エジプト,IT総合学部,ソフトバンク,ソフトバンクのインターネット大学,オンデ マンド,動画,大学,教育,学部,講座">
<meta name="description" content="サイバー大学。インターネットを使って学ぶ、日本で初めての大 学、2007年4月開学。">
<title>サイバー大学</title>
<link rel="shortcut icon" href="/favicon.ico"> <link rel="start" href="/index.html" title="ホーム">
<link rel="contents" href="/sitemap/index.html" title="サイトマップ"> <link rel="stylesheet" href="/shared/css/common.css" type="text/css" media="screen,tv,projection">
<link rel="stylesheet" href="/shared/css/print.css" type="text/css" media="print"> <link rel="alternate stylesheet" href="/shared/css/fontsize_small.css" type="text/css" media="all" class="fontsize" id="fontsize-small" title="文字サイズ：小">
<link rel="stylesheet" href="/shared/css/fontsize_medium.css" type="text/css" media="all" class="fontsize" id="fontsize-medium" title="文字サイズ：標準">
<link rel="alternate stylesheet" href="/shared/css/fontsize_large.css" type="text/css" media="all" class="fontsize" id="fontsize-large" title="文字サイズ：大">
タグと呼ばれる命令と本文
表示される以外にも大量の情報
もともとは論理構造の記述
HTMLのレンダリング
<HTML> <TITLE>自己紹介</TITLE> <BODY> <H1> 名前 </H1> <P>横山輝明</P> <H1> 挨拶 </H1> <P> みなさん こんにちは。 <A HREF="http://www.cyber-u.ac.jp/"> サイバー大学 </A> の横山です。 </P> </BODY> </HTML>• HTMLの特徴
– テキストファイル
– タグの入れ子構造
– 冗長
– 意味構造のみを記述
• 体裁は別途CSS (Cascading Style Sheet)で指定
• 見出し、リンクなど
デザインの分離
•
CSS (Cascading Style Sheets)
–
HTML要素のデザイン指定
– レイアウト、文字種類、サイズ、色などの装飾を指定
–
W3Cが標準化
–
CSS 2.1が提案 (2008年現在)
•
CSSの利点
–
HTMLと独立したデザイン指定
–
CSSを切り替えることで多機種、多環境へ対応
– デザインとコンテンツの分業
p#id {
color: #ff3300;
font-size: 24px
}
pタグのid=「id」を持つタグの装飾指定
<div id="id">テストの文字列</div>
<div class="class">テストの文字列</div>
HTMLタグでのid, class指定
WWW
• 現在もっとも普及したハイパーテキスト実装
– ハイパーテキスト機能の簡単な実装
•
Webページとリンク
• ユーザーに文書の格納場所を意識させない
– サーバクライアントモデルでの文書管理
•
WWWを支える技術
– サーバクライアントの通信モデル
–
URI, HTTP, HTML
WWWの三大要素
•
URI
– 文書などの
情報の場所
を表す表記法
•
HTTP
– 文書などの
情報を転送
する通信プロトコル
•
HTML
–
文書を記述
するための表記法
– 簡単なハイパーテキスト構造を持つ
78
Trojan room Coffee-‐Pot
• コーヒー残量確認サービス
– 英ケンブリッジ大学
コンピュータ研究所内の
コーヒーポットの残量表示
–
WWW最初期のWebカメラアプ
リケーション
–
1993年～2001年
•
h7p://www.cl.cam.ac.uk/coffee/
coffee.html
インターネットと
WWW
• インターネット
– 世界中に普及した通信基盤
• WWW
– インターネット上の情報公開システム
• WWWコンテンツ
– WWW上で提供されるコンテンツ
– 動的なサービスも提供される
インターネット
WWW
コンテンツ
81
HTTP機構
• HTTP特徴
– リクエスト＆レスポンス
– クライアントとサーバで異なる機能を提供
インターネット
① HTTPリクエストの送信
③ HTTPレスポンスの送信
ブラウザ
Webサーバ
② 格納HTMLファイルの取出 ④ 取得HTMLファイルの表示 <HTML> <TITLE>⾃自⼰己紹介</TITLE> <BODY> <H1> 名前 </H1> <P>横⼭山輝明</P> <H1> 挨拶 </H1> <P> みなさん こんにちは。<A HREF="http://www.cyber-‐‑‒u. ac. jp/">
サイバー⼤大学 </A> の横⼭山です。 </P> </BODY> </HTML> ② 格納HTMLファイルの取出 <HTML> <TITLE>⾃自⼰己紹介</TITLE> <BODY> <H1> 名前 </H1> <P>横⼭山輝明</P> <H1> 挨拶 </H1> <P> みなさん こんにちは。
<A HREF="http://www.cyber-‐‑‒u. ac. jp/">
サイバー⼤大学 </A> の横⼭山です。 </P> </BODY> </HTML>
FTP概要
• FTP概要
– FTPはファイル転送のツール
– Webサーバへのファイル転送に利用
インターネット
ブラウザ
（Webクライアント）
Webサーバ
<HTML> <TITLE>⾃自⼰己紹介</TITLE> <BODY> <H1> 名前 </H1> <P>横⼭山輝明</P> <H1> 挨拶 </H1> <P> みなさん こんにちは。<A HREF="http://www.cyber-‐‑‒u. ac. jp/"> サイバー⼤大学 </A> の横⼭山です。 </P> </BODY> </HTML>
