メディア芸術基礎 Ⅰ 第2回 html入門
DESCRIPTION
TRANSCRIPT
メディア芸術基礎 Ⅰ第2回 HTML入門2013年4月22日 (Aクラス)、5月6日 (Bクラス)多摩美術大学 情報デザイン学科 メディア芸術コース担当：田所淳
HTML入門
先週の復習：WWWのしくみ‣ 3つのしくみ(URI, HTTP, HTML) について確実に理解する
HTTP
HTTP
HTML
URI
HTMLとは?‣ 今日は3つの仕組みのひとつ、HTMLを実際に書いていきます
‣ HTML (Hypertext Markup Language) とは何か?‣ それぞれのパーツごとに意味を理解する
HTMLとは?‣ Hyper Text‣ 「テキストを越える」‣ 複数の文書を相互に関連付け、結び付ける仕組み
HTMLとは?‣ Markup (マークアップ)‣ 文書の中に目印 (マーク) を付けていくこと‣ HTMLでは、文書の構造をマークアップする‣ 今日の授業内容のメイン
HTMLとは?‣ Language‣ 言語
HTMLとは?‣ つまりHTMLとは
‣ 「文書の要素に目印がつけられた、ハイパーテキストを記述するための言語」
マークアップ = 文書の構造の記述‣ 例えば以下のような文書があったとする
2009年4月23日運動会実行委員会
運動会開催のお知らせ
来る、5月14日に第20回運動会を挙行いたします。皆様におかれましては、ふるってご参加くださいますようお願いいたします。
なお雨天の場合は翌週に延期します。中止の際の連絡は、ホームページに記載しますので、そちらをご参照ください。
○○大学××学部 (http://hoge.com/)tel: 12-345-6789
マークアップ = 文書の構造の記述‣ この文書の構造
2009年4月23日運動会実行委員会
運動会開催のお知らせ
来る、5月14日に第20回運動会を挙行いたします。皆様におかれましては、ふるってご参加くださいますようお願いいたします。
なお雨天の場合は翌週に延期します。中止の際の連絡は、ホームページに記載しますので、そちらをご参照ください。
○○大学××学部 (http://hoge.com/)tel: 12-345-6789
ヘッダー
大見出し
段落
段落
フッター
マークアップ = 文書の構造の記述‣ HTMLを書くということは、文書の構造を書くということ‣ 文書のどの部分がどの要素なのかを目印 (マークアップ) によって示す‣ タイトル‣ 見出し‣ 段落‣ 引用‣ リスト ...etc.
マークアップ = 文書の構造の記述‣ どこからどこまでがその要素なのかを「タグ」と呼ばれる目印で記述していく
‣ 文書の部分ごとの意味に応じて、タグを適切に使っていくことが、HTML作成の主な作業となる
マークアップ = 文書の構造の記述‣ 「タグ」と呼ばれる目印を記述していく
‣ 記述する内容は3つ1.どこから = 開始タグ2.どこまで = 終了タグ3.要素の種類 = 要素タイプ
‣ 文書の部分ごとの意味に応じて、要素に適切なタグを適用することが、HTML作成の主な作業となる
マークアップ = 文書の構造の記述‣ マークアップの記述例
<h1> はじめに </h1><h1> はじめに </h1>
マークアップ = 文書の構造の記述‣ マークアップの記述例
<h1> はじめに </h1>開始タグ
マークアップ = 文書の構造の記述‣ マークアップの記述例
<h1> はじめに </h1>開始タグ 終了タグ
マークアップ = 文書の構造の記述‣ マークアップの記述例
<h1> はじめに </h1>開始タグ 終了タグ要素内容
マークアップ = 文書の構造の記述‣ マークアップの記述例
<h1> はじめに </h1>開始タグ 終了タグ要素内容
h1要素
マークアップ = 文書の構造の記述‣ 開始タグ、終了タグの詳細‣ 開始タグ
‣ 終了タグ
< h1>タグの始点 タグの終点
要素タイプの種類
</ h1>タグの始点 タグの終点
要素タイプの種類
マークアップ = 文書の構造の記述‣ 開始タグで要素の始点を指定したら、必ず終了タグで閉じる‣ <p> この要素は段落を意味しています。</p>
‣ 開始タグと終了タグがひとつになった特殊なタグが存在する‣ <br /> 改行‣ <img src=”hoge.jpg” alt=”hoge” /> 画像
‣ タグは、必ず半角英数文字の小文字で!
HTMLの骨組み‣ 骨組みとなるHTML文書に含まれる3つの要素‣ html要素、head要素、body要素
html 要素
head 要素
body 要素
HTMLの骨組み‣ html要素‣ HTML文書の始まりと終わりを指定している‣ 全てのHTML文書は、html要素で囲まれている
HTMLの骨組み‣ head要素‣ 文書自身の情報を記述する要素‣ タイトル、文字コード、言語、CSSファイルの場所など‣ head要素に記述した内容は、Webブラウザ内には表示されない
HTMLの骨組み‣ body要素
‣ HTML文書の内容を記述する‣ ここに記述した部分がWebブラウザに表示される
ページにタイトルを付ける‣ head要素内にtitle要素として記述する‣ 「無題ドキュメント」を書き換える‣ ブラウザで確認してみる
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>初めて作成するHTML</title></head><body></body></html>
ページにタイトルを付ける‣ ウィンドウのタイトルが変化してるはず
大見出し‣ 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>
大見出し‣ ブラウザで確認してみる
見出しの種類‣ 見出しは、h1からh6まで段階がある‣ 試してみる!!
... 前略 ...
<body><h1>これはh1</h1><h2>これはh2</h2><h3>これはh3</h3><h4>これはh4</h4><h5>これはh5</h5><h6>これはh6</h6></body></html>
見出しの種類‣ h1からh6をブラウザで表示してみる
段落‣ 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>
段落‣ ブラウザで確認してみる
a要素 - ハイパーリンク、アンカー‣ ハイパーリンク、HTMLの最重要機能
a要素 - ハイパーリンク、アンカー‣ a要素は要素内のリンクを貼りたい範囲をマークアップする‣ リンク先は開始タグに href=”〈URL〉” という属性で指定
‣ 例：http://yoppa.org/ ヘのリンクを作成する‣ 詳しくは田所淳のホームページを参照してください。
<p> 詳しくは<a href=”http://yoppa.org/”>田所淳のホームページ</a>を参照してください。 </p>
画像を貼りつける – img要素‣ WWWに載せられるのは、ハイパーテキストだけでない‣ 画像や動画、音声など‣ 様々なメディアを効果的に用いることでページを魅力的に
画像を貼りつける – img要素‣ 画像をWebページに貼りつけるには、img要素を使用‣ img要素は画像そのものではなく、外部の画像ファイルの位置
(URL)を指定して読み込む‣ br要素と同様に、終了タグのない内容をもたない空要素なので末尾は「/>」で閉じる
‣ 画像ファイルのURLは、絶対パス or 相対パスで (後述)
‣ alt属性には画像を説明する内容を入れる‣ 画像が見えないブラウザやダウンロードできなかった時のためにかならず入れる!
<img src="画像ファイルのURL" alt="画像の説明" />
画像を貼りつける – img要素‣ 相対URLと絶対URL‣ src属性には画像ファイルの場所(URL)を指定します。‣ 例えば、yoppa.org のトップの画像
‣ 画像のURLは、http://yoppa.org/wp-content/uploads/2010/09/fetured_img2.jpg
‣ これは「絶対パス」
<img src="http://yoppa.org/wp-content/uploads/2010/09/fetured_img2.jpg" alt="yoppa.orgトップ画像" />
画像を貼りつける – img要素‣ 相対パス - HTMLファイルからの場所を指定する‣ 例えば、下記のようなファイル構造の場合‣ スラッシュ「/」がフォルダの階層構造を表現している
画像を貼りつける – img要素‣ 相対パス - もう少し複雑な例‣ 「../」は自分のファイルからみてひとつ上の階層を表現‣ 例えば2つ上の階層は「../../」3つ上の階層は「../../../」
画像を貼りつける – img要素‣ 携帯電話で自分の写真(もしくはなにか自分のもの)を撮影‣ メールで送付‣ 画像をページに追加してみる!
情報を箇条書きで整理 - リスト‣ リストの効果‣ リスト - 箇条書きで情報を表現する手段‣ 短い文字量で表現したい論旨を的確にわかり易く表現できる‣ また、視覚的にも読みやすい
情報を箇条書きで整理 - リスト‣ 三種類のリスト
‣ 並列列挙リスト - ul要素‣ 項目の順番にはあまり大きな意味を持たず、並列的に列挙する
‣ 順序付きリスト - ol要素‣ 項目の順番が意味を持たせたり、もしくは項目をあとで参照するための番号をつける
‣ 定義型リスト - dl 要素‣ 辞書のように用語とその定義から構成される
情報を箇条書きで整理 - リスト‣ 並列列挙リスト (ul要素) の例<ul> <li>ドはドーナッツのド</li> <li>レはレモンのレ</li> <li>ミはみんなのミ</li> <li>ファはファイトのファ</li> <li>空を仰いで</li> <li>ラララララ</li> <li>シは幸せよ</li></ul>
情報を箇条書きで整理 - リスト‣ 順序付きリスト (ol要素) の例<ol> <li>一本でも人参</li> <li>二足でもサンダル</li> <li>三艘でもヨット</li> <li>四粒でもごま塩</li> <li>五台でもロケット</li> <li>六羽でも七面鳥</li> <li>七匹でも蜂</li> <li>八頭でもクジラ</li></ol>
情報を箇条書きで整理 - リスト‣ 定義型リストの例 (dl, dd要素)<dl> <dt>HTML</dt> <dd>Hyper Text Markup Languageの略。Webページを記述するためのマークアップ言語。</dd> <dt>HTTP</dt> <dd>Hyper Text Transfer Protcol。Webサーバとクライアントがデータを送受信するのに使われるプロトコル。</dd> <dt>URL</dt> <dd>Uniform Rosource Locator。インターネット上の情報の場所を指定する。</dd></dl>
情報を箇条書きで整理 - リスト‣ 実習：‣ リストを使用して、Bookmarkページをつくってみる‣ 自分の好きなアーティストや好きなWebページ‣ よく利用しているサイトなど
参考：細かな記述の意味‣ テンプレートから作成された記述の意味
<!DOCTYPE HTML><html><head><meta charset="UTF-8"><title>初めて作成するHTML</title></head><body><h1>こんにちは、HTML</h1></body></html>
参考：細かな記述の意味
‣ !DOCTYPE - ｢文書型の定義｣を意味する‣ HTMLには様々なバージョンが存在する‣ HTML4.1, XHTML 1.0, XHTML 2.0, HTML5 ...etc
‣ <!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">
参考：細かな記述の意味
‣ この部分は文字コード「UTF-8」を指定している
‣ 文字コードとは? - PCで文字を表現するための体系‣ 日本語の文字コードは少し複雑‣ ISO-2022-JP、EUC-JP、Shift_JIS、UTF-8、UTF-16...
‣ Webではどの文字コードを用いるべきか?‣ これからのWebは多言語対応のUTF-8がお勧め‣ HTML5では、UTF-8が推奨されている
<meta charset="UTF-8">
HTMLは構造の記述に徹する‣ HTMLは文書の構造の記述に専念すること
‣ 現状 - フォントの大きさ、色、フォントフェイス、行間、文字間隔などの文書の体裁は、デフォルトのまま
‣ ちょっと気のきいたデザインにしてみたい…
‣ しかし、今の段階ではぐっと堪えてそのままで‣ 文書の体裁(デザイン)の指定には、CSSという別の言語を使用します
HTMLは構造の記述に徹する‣ なぜ、構造と体裁を分離するべきなのか?
‣ 文書は常にPCのWebブラウザで閲覧されるわけではない‣ 携帯、スマートフォン、カーナビ、音声読み上げ...‣ どのメディアでも正しく意味構造が表現されるべき‣ 正しい構造を記述する必要性
‣ サーチエンジンへの最適化 (SEO)‣ プログラムから意味構造を判別できる‣ サーチエンジンに検索され易いサイト
‣ 他のサイトへの引用や転載
次回までの課題！‣ 自己紹介のWebページを作成する‣ HTMLの基礎練習として、簡単なページを作成してみましょう
‣ 使用するタグは、以下のものを使用してください‣ h1要素～h6要素‣ p要素‣ ul -li要素‣ img要素
‣ タイトルをつけるようにしてください - title要素
次回までの課題！‣ 完成イメージ