伝統的工芸と生活デザインを結ぶデザイン教育について-1kiyou/2018/pdf/21.pdf伝統的工芸と生活デザインを結ぶデザイン教育について−1 タイ山岳民族の主な種族のテキスタイルデザインの特
芸術情報演習デザイン(web) 第2回:HTML入門
-
Upload
atsushi-tadokoro -
Category
Documents
-
view
1.042 -
download
4
Transcript of 芸術情報演習デザイン(web) 第2回:HTML入門
![Page 1: 芸術情報演習デザイン(web) 第2回:HTML入門](https://reader036.fdocument.pub/reader036/viewer/2022082223/55844ebdd8b42a6a6d8b4c4d/html5/thumbnails/1.jpg)
芸術情報演習デザイン (web)第2回:HTML入門
2013年4月18日東京藝術大学 芸術情報センター(AMC)担当:田所淳
![Page 2: 芸術情報演習デザイン(web) 第2回:HTML入門](https://reader036.fdocument.pub/reader036/viewer/2022082223/55844ebdd8b42a6a6d8b4c4d/html5/thumbnails/2.jpg)
WWWを支える3つのしくみURL, HTTP, HTML
![Page 3: 芸術情報演習デザイン(web) 第2回:HTML入門](https://reader036.fdocument.pub/reader036/viewer/2022082223/55844ebdd8b42a6a6d8b4c4d/html5/thumbnails/3.jpg)
‣ 自分のPCでWebページを見ているとき、何が起っているのか
2.閲覧したいWebページのアドレスを入力‣ 例:http://www.geidai.ac.jp/facilities/infocenter.html
WWWを支える3つのしくみ
![Page 4: 芸術情報演習デザイン(web) 第2回:HTML入門](https://reader036.fdocument.pub/reader036/viewer/2022082223/55844ebdd8b42a6a6d8b4c4d/html5/thumbnails/4.jpg)
‣ 自分のPCでWebページを見ているとき、何が起っているのか1. Webブラウザは、アドレスからサーバの場所を探しだす‣ “http://www.geidai.ac.jp” の部分がこれに相当
WWWを支える3つのしくみ
http://www.geidai.ac.jp
![Page 5: 芸術情報演習デザイン(web) 第2回:HTML入門](https://reader036.fdocument.pub/reader036/viewer/2022082223/55844ebdd8b42a6a6d8b4c4d/html5/thumbnails/5.jpg)
‣ 自分のPCでWebページを見ているとき、何が起っているのか
‣ アドレスの残りの部分から、サーバ内の該当データを特定‣ “/facilities/infocenter.html” の部分がこれに相当
WWWを支える3つのしくみ
/facilities/infocenter.html
![Page 6: 芸術情報演習デザイン(web) 第2回:HTML入門](https://reader036.fdocument.pub/reader036/viewer/2022082223/55844ebdd8b42a6a6d8b4c4d/html5/thumbnails/6.jpg)
WWWを支える3つのしくみ‣ 自分のPCでWebページを見ているとき、何が起っているのか
3. Webページのデータをサーバから手元のPCに送信
![Page 7: 芸術情報演習デザイン(web) 第2回:HTML入門](https://reader036.fdocument.pub/reader036/viewer/2022082223/55844ebdd8b42a6a6d8b4c4d/html5/thumbnails/7.jpg)
WWWを支える3つのしくみ‣ 自分のPCでWebページを見ているとき、何が起っているのか
4. PC側で受信した情報から、Webページを生成し表示
![Page 8: 芸術情報演習デザイン(web) 第2回:HTML入門](https://reader036.fdocument.pub/reader036/viewer/2022082223/55844ebdd8b42a6a6d8b4c4d/html5/thumbnails/8.jpg)
WWWを支える3つのしくみ‣ URL (もしくは URI)‣ Uniform Resource Locator ‣ ネットワーク上の情報を一意に特定するアドレス指定方法
‣ HTTP ‣ HyperText Transfer Protocol ‣ コンピュータ同士が情報をやりとりするルール
‣ HTML ‣ HyperText Markup Language ‣ 環境にかかわりなくWWWを記述するための文書記述言語
![Page 9: 芸術情報演習デザイン(web) 第2回:HTML入門](https://reader036.fdocument.pub/reader036/viewer/2022082223/55844ebdd8b42a6a6d8b4c4d/html5/thumbnails/9.jpg)
WWWを支える3つのしくみ‣ 先ほどの例でいうと‣ 3つのしくみ(URL, HTTP, HTML) について理解する
HTTP
HTTP
HTML
http://www.idd.tamabi.ac.jp/art/index.phpURL
![Page 10: 芸術情報演習デザイン(web) 第2回:HTML入門](https://reader036.fdocument.pub/reader036/viewer/2022082223/55844ebdd8b42a6a6d8b4c4d/html5/thumbnails/10.jpg)
HTMLとは?
![Page 11: 芸術情報演習デザイン(web) 第2回:HTML入門](https://reader036.fdocument.pub/reader036/viewer/2022082223/55844ebdd8b42a6a6d8b4c4d/html5/thumbnails/11.jpg)
HTMLとは?
‣ 今日は3つの仕組みのひとつ、HTMLを実際に書いていきます
‣ HTML (Hypertext Markup Language) とは何か?‣ それぞれのパーツごとに意味を理解する
![Page 12: 芸術情報演習デザイン(web) 第2回:HTML入門](https://reader036.fdocument.pub/reader036/viewer/2022082223/55844ebdd8b42a6a6d8b4c4d/html5/thumbnails/12.jpg)
HTMLとは?
‣ Hyper Text‣ 「テキストを越える」‣ 複数の文書を相互に関連付け、結び付ける仕組み
![Page 13: 芸術情報演習デザイン(web) 第2回:HTML入門](https://reader036.fdocument.pub/reader036/viewer/2022082223/55844ebdd8b42a6a6d8b4c4d/html5/thumbnails/13.jpg)
HTMLとは?
‣ Markup (マークアップ)‣ 文書の中に目印 (マーク) を付けていくこと‣ HTMLでは、文書の構造をマークアップする‣ 今日の授業内容のメイン
![Page 14: 芸術情報演習デザイン(web) 第2回:HTML入門](https://reader036.fdocument.pub/reader036/viewer/2022082223/55844ebdd8b42a6a6d8b4c4d/html5/thumbnails/14.jpg)
HTMLとは?
‣ Language‣ 言語
![Page 15: 芸術情報演習デザイン(web) 第2回:HTML入門](https://reader036.fdocument.pub/reader036/viewer/2022082223/55844ebdd8b42a6a6d8b4c4d/html5/thumbnails/15.jpg)
HTMLとは?
‣ つまりHTMLとは‣ 「文書の要素に目印がつけられた、ハイパーテキストを記述するための言語」
![Page 16: 芸術情報演習デザイン(web) 第2回:HTML入門](https://reader036.fdocument.pub/reader036/viewer/2022082223/55844ebdd8b42a6a6d8b4c4d/html5/thumbnails/16.jpg)
マークアップ = 文書の構造の記述‣ 例えば以下のような文書があったとする
2009年4月23日運動会実行委員会
運動会開催のお知らせ
来る、5月14日に第20回運動会を挙行いたします。皆様におかれましては、ふるってご参加くださいますようお願いいたします。
なお雨天の場合は翌週に延期します。中止の際の連絡は、ホームページに記載しますので、そちらをご参照ください。
○○大学××学部 (http://hoge.com/)tel: 12-345-6789
![Page 17: 芸術情報演習デザイン(web) 第2回:HTML入門](https://reader036.fdocument.pub/reader036/viewer/2022082223/55844ebdd8b42a6a6d8b4c4d/html5/thumbnails/17.jpg)
マークアップ = 文書の構造の記述‣ この文書の構造
2009年4月23日運動会実行委員会
運動会開催のお知らせ
来る、5月14日に第20回運動会を挙行いたします。皆様におかれましては、ふるってご参加くださいますようお願いいたします。
なお雨天の場合は翌週に延期します。中止の際の連絡は、ホームページに記載しますので、そちらをご参照ください。
○○大学××学部 (http://hoge.com/)tel: 12-345-6789
ヘッダー
大見出し
段落
段落
フッター
![Page 18: 芸術情報演習デザイン(web) 第2回:HTML入門](https://reader036.fdocument.pub/reader036/viewer/2022082223/55844ebdd8b42a6a6d8b4c4d/html5/thumbnails/18.jpg)
マークアップ = 文書の構造の記述‣ HTMLを書くということは、文書の構造を書くということ‣ 文書のどの部分がどの要素なのかを目印 (マークアップ) によって示す‣ タイトル‣ 見出し‣ 段落‣ 引用‣ リスト ...etc.
![Page 19: 芸術情報演習デザイン(web) 第2回:HTML入門](https://reader036.fdocument.pub/reader036/viewer/2022082223/55844ebdd8b42a6a6d8b4c4d/html5/thumbnails/19.jpg)
マークアップ = 文書の構造の記述‣ どこからどこまでがその要素なのかを「タグ」と呼ばれる目印で記述していく
‣ 文書の部分ごとの意味に応じて、タグを適切に使っていくことが、HTML作成の主な作業となる
![Page 20: 芸術情報演習デザイン(web) 第2回:HTML入門](https://reader036.fdocument.pub/reader036/viewer/2022082223/55844ebdd8b42a6a6d8b4c4d/html5/thumbnails/20.jpg)
マークアップ = 文書の構造の記述‣ 「タグ」と呼ばれる目印を記述していく
‣ 記述する内容は3つ‣ どこから = 開始タグ‣ どこまで = 終了タグ‣ 要素の種類 = 要素タイプ
‣ 文書の部分ごとの意味に応じて、要素に適切なタグを適用することが、HTML作成の主な作業となる
![Page 21: 芸術情報演習デザイン(web) 第2回:HTML入門](https://reader036.fdocument.pub/reader036/viewer/2022082223/55844ebdd8b42a6a6d8b4c4d/html5/thumbnails/21.jpg)
マークアップ = 文書の構造の記述‣ マークアップの記述例
<h1> はじめに </h1><h1> はじめに </h1>
![Page 22: 芸術情報演習デザイン(web) 第2回:HTML入門](https://reader036.fdocument.pub/reader036/viewer/2022082223/55844ebdd8b42a6a6d8b4c4d/html5/thumbnails/22.jpg)
マークアップ = 文書の構造の記述‣ マークアップの記述例
<h1> はじめに </h1>
![Page 23: 芸術情報演習デザイン(web) 第2回:HTML入門](https://reader036.fdocument.pub/reader036/viewer/2022082223/55844ebdd8b42a6a6d8b4c4d/html5/thumbnails/23.jpg)
マークアップ = 文書の構造の記述‣ マークアップの記述例
<h1> はじめに </h1>開始タグ
![Page 24: 芸術情報演習デザイン(web) 第2回:HTML入門](https://reader036.fdocument.pub/reader036/viewer/2022082223/55844ebdd8b42a6a6d8b4c4d/html5/thumbnails/24.jpg)
マークアップ = 文書の構造の記述‣ マークアップの記述例
<h1> はじめに </h1>開始タグ 終了タグ
![Page 25: 芸術情報演習デザイン(web) 第2回:HTML入門](https://reader036.fdocument.pub/reader036/viewer/2022082223/55844ebdd8b42a6a6d8b4c4d/html5/thumbnails/25.jpg)
マークアップ = 文書の構造の記述‣ マークアップの記述例
<h1> はじめに </h1>開始タグ 終了タグ要素内容
![Page 26: 芸術情報演習デザイン(web) 第2回:HTML入門](https://reader036.fdocument.pub/reader036/viewer/2022082223/55844ebdd8b42a6a6d8b4c4d/html5/thumbnails/26.jpg)
マークアップ = 文書の構造の記述‣ マークアップの記述例
<h1> はじめに </h1>開始タグ 終了タグ要素内容
h1要素
![Page 27: 芸術情報演習デザイン(web) 第2回:HTML入門](https://reader036.fdocument.pub/reader036/viewer/2022082223/55844ebdd8b42a6a6d8b4c4d/html5/thumbnails/27.jpg)
マークアップ = 文書の構造の記述‣ 開始タグ、終了タグの詳細‣ 開始タグ
‣ 終了タグ
< h1>タグの始点 タグの終点
要素タイプの種類
</ h1>タグの始点 タグの終点
![Page 28: 芸術情報演習デザイン(web) 第2回:HTML入門](https://reader036.fdocument.pub/reader036/viewer/2022082223/55844ebdd8b42a6a6d8b4c4d/html5/thumbnails/28.jpg)
マークアップ = 文書の構造の記述‣ 開始タグで要素の始点を指定したら、必ず終了タグで閉じる‣ <p> この要素は段落を意味しています。</p>
‣ 開始タグと終了タグがひとつになった特殊なタグが存在する‣ <br /> 改行‣ <img src=”hoge.jpg” alt=”hoge” /> 画像
‣ タグは、必ず半角英数文字の小文字で!
![Page 29: 芸術情報演習デザイン(web) 第2回:HTML入門](https://reader036.fdocument.pub/reader036/viewer/2022082223/55844ebdd8b42a6a6d8b4c4d/html5/thumbnails/29.jpg)
DreamWeaverでHTML作成‣ 早速、HTMLを作成してみましょう!‣ この授業では、Adobe Dreamweaver を使用します
![Page 30: 芸術情報演習デザイン(web) 第2回:HTML入門](https://reader036.fdocument.pub/reader036/viewer/2022082223/55844ebdd8b42a6a6d8b4c4d/html5/thumbnails/30.jpg)
DreamWeaverでHTML作成‣ Dreamweaverを起動‣ まずは、環境設定‣ Dreamweaver > 環境設定 > 新規ドキュメント‣ 初期設定ドキュメントタイプ (DTD) を「HTML5」に‣ エンコード初期設定を「Unicode 5.1 UTF-8」に
![Page 31: 芸術情報演習デザイン(web) 第2回:HTML入門](https://reader036.fdocument.pub/reader036/viewer/2022082223/55844ebdd8b42a6a6d8b4c4d/html5/thumbnails/31.jpg)
DreamWeaverでHTML作成‣ 環境設定
![Page 32: 芸術情報演習デザイン(web) 第2回:HTML入門](https://reader036.fdocument.pub/reader036/viewer/2022082223/55844ebdd8b42a6a6d8b4c4d/html5/thumbnails/32.jpg)
DreamWeaverでHTML作成‣ 新規作成 > HTML を選択
![Page 33: 芸術情報演習デザイン(web) 第2回:HTML入門](https://reader036.fdocument.pub/reader036/viewer/2022082223/55844ebdd8b42a6a6d8b4c4d/html5/thumbnails/33.jpg)
DreamWeaverでHTML作成‣ 「分割」表示を選択
![Page 34: 芸術情報演習デザイン(web) 第2回:HTML入門](https://reader036.fdocument.pub/reader036/viewer/2022082223/55844ebdd8b42a6a6d8b4c4d/html5/thumbnails/34.jpg)
DreamWeaverでHTML作成‣ ツールバーの地球のマークを押すと、Webブラウザで表示
![Page 35: 芸術情報演習デザイン(web) 第2回:HTML入門](https://reader036.fdocument.pub/reader036/viewer/2022082223/55844ebdd8b42a6a6d8b4c4d/html5/thumbnails/35.jpg)
DreamWeaverでHTML作成‣ なにやら既に記述が…‣ HTML5の基本のテンプレートが自動作成されている!!
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>無題ドキュメント</title></head><body></body></html>
![Page 36: 芸術情報演習デザイン(web) 第2回:HTML入門](https://reader036.fdocument.pub/reader036/viewer/2022082223/55844ebdd8b42a6a6d8b4c4d/html5/thumbnails/36.jpg)
HTMLの骨組み‣ 骨組みとなるHTML文書に含まれる3つの要素‣ html要素、head要素、body要素
html 要素
head 要素
body 要素
![Page 37: 芸術情報演習デザイン(web) 第2回:HTML入門](https://reader036.fdocument.pub/reader036/viewer/2022082223/55844ebdd8b42a6a6d8b4c4d/html5/thumbnails/37.jpg)
HTMLの骨組み‣ html要素‣ HTML文書の始まりと終わりを指定している‣ 全てのHTML文書は、html要素で囲まれている
![Page 38: 芸術情報演習デザイン(web) 第2回:HTML入門](https://reader036.fdocument.pub/reader036/viewer/2022082223/55844ebdd8b42a6a6d8b4c4d/html5/thumbnails/38.jpg)
HTMLの骨組み‣ head要素‣ 文書自身の情報を記述する要素‣ タイトル、文字コード、言語、CSSファイルの場所など‣ head要素に記述した内容は、Webブラウザ内には表示されない
![Page 39: 芸術情報演習デザイン(web) 第2回:HTML入門](https://reader036.fdocument.pub/reader036/viewer/2022082223/55844ebdd8b42a6a6d8b4c4d/html5/thumbnails/39.jpg)
HTMLの骨組み‣ body要素‣ HTML文書の内容を記述する‣ ここに記述した部分がWebブラウザに表示される
![Page 40: 芸術情報演習デザイン(web) 第2回:HTML入門](https://reader036.fdocument.pub/reader036/viewer/2022082223/55844ebdd8b42a6a6d8b4c4d/html5/thumbnails/40.jpg)
ページにタイトルを付ける‣ head要素内にtitle要素として記述する‣ 「無題ドキュメント」を書き換える‣ ブラウザで確認してみる
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>初めて作成するHTML</title></head><body></body></html>
![Page 41: 芸術情報演習デザイン(web) 第2回:HTML入門](https://reader036.fdocument.pub/reader036/viewer/2022082223/55844ebdd8b42a6a6d8b4c4d/html5/thumbnails/41.jpg)
ページにタイトルを付ける‣ ウィンドウのタイトルが変化してるはず
![Page 42: 芸術情報演習デザイン(web) 第2回:HTML入門](https://reader036.fdocument.pub/reader036/viewer/2022082223/55844ebdd8b42a6a6d8b4c4d/html5/thumbnails/42.jpg)
大見出し‣ body要素内に、h1要素として記述する‣ ブラウザで確認してみる<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>初めて作成するHTML</title></head><body><h1>こんにちは、HTML</h1></body></html>
![Page 43: 芸術情報演習デザイン(web) 第2回:HTML入門](https://reader036.fdocument.pub/reader036/viewer/2022082223/55844ebdd8b42a6a6d8b4c4d/html5/thumbnails/43.jpg)
大見出し‣ ブラウザで確認してみる
![Page 44: 芸術情報演習デザイン(web) 第2回:HTML入門](https://reader036.fdocument.pub/reader036/viewer/2022082223/55844ebdd8b42a6a6d8b4c4d/html5/thumbnails/44.jpg)
見出しの種類‣ 見出しは、h1からh6まで段階がある‣ 試してみる!!
... 前略 ...
<body><h1>これはh1</h1><h2>これはh2</h2><h3>これはh3</h3><h4>これはh4</h4><h5>これはh5</h5><h6>これはh6</h6></body></html>
![Page 45: 芸術情報演習デザイン(web) 第2回:HTML入門](https://reader036.fdocument.pub/reader036/viewer/2022082223/55844ebdd8b42a6a6d8b4c4d/html5/thumbnails/45.jpg)
見出しの種類‣ h1からh6をブラウザで表示してみる
![Page 46: 芸術情報演習デザイン(web) 第2回:HTML入門](https://reader036.fdocument.pub/reader036/viewer/2022082223/55844ebdd8b42a6a6d8b4c4d/html5/thumbnails/46.jpg)
段落‣ body要素内に、p要素として記述する‣ p要素は、”paragraph” の略<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>初めて作成するHTML</title></head><body><h1>こんにちは、HTML</h1><p>このページは、はじめて作成したWebページです。きちんと表示されているでしょうか?</p></body></html>
![Page 47: 芸術情報演習デザイン(web) 第2回:HTML入門](https://reader036.fdocument.pub/reader036/viewer/2022082223/55844ebdd8b42a6a6d8b4c4d/html5/thumbnails/47.jpg)
段落‣ ブラウザで確認してみる
![Page 48: 芸術情報演習デザイン(web) 第2回:HTML入門](https://reader036.fdocument.pub/reader036/viewer/2022082223/55844ebdd8b42a6a6d8b4c4d/html5/thumbnails/48.jpg)
参考:細かな記述の意味‣ テンプレートから作成された記述の意味
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>初めて作成するHTML</title></head><body><h1>こんにちは、HTML</h1></body></html>
![Page 49: 芸術情報演習デザイン(web) 第2回:HTML入門](https://reader036.fdocument.pub/reader036/viewer/2022082223/55844ebdd8b42a6a6d8b4c4d/html5/thumbnails/49.jpg)
参考:細かな記述の意味
‣ !DOCTYPE - 「文書型の定義」を意味する‣ HTMLには様々なバージョンが存在する‣ HTML4.1, XHTML 1.0, XHTML 2.0, HTML5 ...など‣ <!DOCTYPE HTML> は HTML5の文書であることを意味
‣ ちなみに、XHTML1.1の場合は…
<!DOCTYPE HTML>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
![Page 50: 芸術情報演習デザイン(web) 第2回:HTML入門](https://reader036.fdocument.pub/reader036/viewer/2022082223/55844ebdd8b42a6a6d8b4c4d/html5/thumbnails/50.jpg)
参考:細かな記述の意味
‣ この部分は文字コード「UTF-8」を指定している
‣ 文字コードとは? - PCで文字を表現するための体系‣ 日本語の文字コードは少し複雑‣ ISO-2022-JP、EUC-JP、Shift_JIS、UTF-8、UTF-16...
‣ Webではどの文字コードを用いるべきか?‣ これからのWebは多言語対応のUTF-8がお勧め
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
![Page 51: 芸術情報演習デザイン(web) 第2回:HTML入門](https://reader036.fdocument.pub/reader036/viewer/2022082223/55844ebdd8b42a6a6d8b4c4d/html5/thumbnails/51.jpg)
HTMLは構造の記述に徹する‣ HTMLは文書の構造の記述に専念すること‣ 現状 - フォントの大きさ、色、フォントフェイス、行間、文字間隔などの文書の体裁は、デフォルトのまま
‣ ちょっと気のきいたデザインにしてみたい…‣ しかし、今の段階ではぐっと堪えてそのままで‣ 文書の体裁(デザイン)の指定には、CSSという別の言語を使用します
![Page 52: 芸術情報演習デザイン(web) 第2回:HTML入門](https://reader036.fdocument.pub/reader036/viewer/2022082223/55844ebdd8b42a6a6d8b4c4d/html5/thumbnails/52.jpg)
HTMLは構造の記述に徹する‣ なぜ、構造と体裁を分離するべきなのか?
‣ 文書は常にPCのWebブラウザで閲覧されるわけではない‣ 携帯、スマートフォン、カーナビ、音声読み上げ...‣ どのメディアでも正しく意味構造が表現されるべき‣ 正しい構造を記述する必要性
‣ サーチエンジンへの最適化 (SEO)‣ プログラムから意味構造を判別できる‣ サーチエンジンに検索され易いサイト
‣ 他のサイトへの引用や転載