芸術情報演習デザイン (web) 第3回:HTML入門 2 -...
-
Upload
atsushi-tadokoro -
Category
Documents
-
view
730 -
download
1
Transcript of 芸術情報演習デザイン (web) 第3回:HTML入門 2 -...
![Page 1: 芸術情報演習デザイン (web) 第3回:HTML入門 2 - ハイパーリンク、イメージ、リスト](https://reader034.fdocument.pub/reader034/viewer/2022050907/559c0a5b1a28ab846a8b46a8/html5/thumbnails/1.jpg)
芸術情報演習デザイン (web)第3回:HTML入門 2 - ハイパーリンク、イメージ、リスト
2013年4月25日東京藝術大学 芸術情報センター(AMC)担当:田所淳
![Page 2: 芸術情報演習デザイン (web) 第3回:HTML入門 2 - ハイパーリンク、イメージ、リスト](https://reader034.fdocument.pub/reader034/viewer/2022050907/559c0a5b1a28ab846a8b46a8/html5/thumbnails/2.jpg)
今日の内容‣ ひきつづき、HTMLの様々な要素(タグ)の役割、使用法を解説します
‣ アンカー、ハイパーリンク - a要素‣ インラインイメージ - img要素‣ リスト (ul、ol、li)
![Page 3: 芸術情報演習デザイン (web) 第3回:HTML入門 2 - ハイパーリンク、イメージ、リスト](https://reader034.fdocument.pub/reader034/viewer/2022050907/559c0a5b1a28ab846a8b46a8/html5/thumbnails/3.jpg)
a要素 - ハイパーリンク、アンカー‣ ハイパーリンク、HTMLの最重要機能
![Page 4: 芸術情報演習デザイン (web) 第3回:HTML入門 2 - ハイパーリンク、イメージ、リスト](https://reader034.fdocument.pub/reader034/viewer/2022050907/559c0a5b1a28ab846a8b46a8/html5/thumbnails/4.jpg)
a要素 - ハイパーリンク、アンカー‣ a要素は要素内のリンクを貼りたい範囲をマークアップする‣ リンク先は開始タグに href=”〈URL〉” という属性で指定
‣ 例:http://yoppa.org/ ヘのリンクを作成する‣ 詳しくは田所淳のホームページを参照してください。
<p> 詳しくは<a href=”http://yoppa.org/”>田所淳のホームページ</a>を参照してください。 </p>
![Page 5: 芸術情報演習デザイン (web) 第3回:HTML入門 2 - ハイパーリンク、イメージ、リスト](https://reader034.fdocument.pub/reader034/viewer/2022050907/559c0a5b1a28ab846a8b46a8/html5/thumbnails/5.jpg)
a要素 - ハイパーリンク、アンカー‣ 実習‣ リンク集を作成してみる‣ DreamweaverではリンクのURL作成は「ハイパーリンク」ボタンで作成
![Page 6: 芸術情報演習デザイン (web) 第3回:HTML入門 2 - ハイパーリンク、イメージ、リスト](https://reader034.fdocument.pub/reader034/viewer/2022050907/559c0a5b1a28ab846a8b46a8/html5/thumbnails/6.jpg)
画像を貼りつける – img要素‣ WWWに載せられるのは、ハイパーテキストだけでない‣ 画像や動画、音声など‣ 様々なメディアを効果的に用いることでページを魅力的に
![Page 7: 芸術情報演習デザイン (web) 第3回:HTML入門 2 - ハイパーリンク、イメージ、リスト](https://reader034.fdocument.pub/reader034/viewer/2022050907/559c0a5b1a28ab846a8b46a8/html5/thumbnails/7.jpg)
画像を貼りつける – img要素‣ 画像をWebページに貼りつけるには、img要素を使用‣ img要素は画像そのものではなく、外部の画像ファイルの位置
(URL)を指定して読み込む‣ br要素と同様に、終了タグのない内容をもたない空要素なので末尾は「/>」で閉じる
‣ 画像ファイルのURLは、絶対パス or 相対パスで (後述)
‣ alt属性には画像を説明する内容を入れる‣ 画像が見えないブラウザやダウンロードできなかった時のためにかならず入れる!
<img src="画像ファイルのURL" alt="画像の説明" />
![Page 8: 芸術情報演習デザイン (web) 第3回:HTML入門 2 - ハイパーリンク、イメージ、リスト](https://reader034.fdocument.pub/reader034/viewer/2022050907/559c0a5b1a28ab846a8b46a8/html5/thumbnails/8.jpg)
画像を貼りつける – 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トップ画像" />
![Page 9: 芸術情報演習デザイン (web) 第3回:HTML入門 2 - ハイパーリンク、イメージ、リスト](https://reader034.fdocument.pub/reader034/viewer/2022050907/559c0a5b1a28ab846a8b46a8/html5/thumbnails/9.jpg)
画像を貼りつける – img要素‣ 相対パス - HTMLファイルからの場所を指定する‣ 例えば、下記のようなファイル構造の場合‣ スラッシュ「/」がフォルダの階層構造を表現している
![Page 10: 芸術情報演習デザイン (web) 第3回:HTML入門 2 - ハイパーリンク、イメージ、リスト](https://reader034.fdocument.pub/reader034/viewer/2022050907/559c0a5b1a28ab846a8b46a8/html5/thumbnails/10.jpg)
画像を貼りつける – img要素‣ 相対パス - もう少し複雑な例‣ 「../」は自分のファイルからみてひとつ上の階層を表現‣ 例えば2つ上の階層は「../../」3つ上の階層は「../../../」
![Page 11: 芸術情報演習デザイン (web) 第3回:HTML入門 2 - ハイパーリンク、イメージ、リスト](https://reader034.fdocument.pub/reader034/viewer/2022050907/559c0a5b1a28ab846a8b46a8/html5/thumbnails/11.jpg)
画像を貼りつける – img要素‣ Dreamweaverでインラインイメージを追加するには‣ 挿入 > イメージ を選択‣ 画像の場所を指定する
![Page 12: 芸術情報演習デザイン (web) 第3回:HTML入門 2 - ハイパーリンク、イメージ、リスト](https://reader034.fdocument.pub/reader034/viewer/2022050907/559c0a5b1a28ab846a8b46a8/html5/thumbnails/12.jpg)
画像を貼りつける – img要素‣ 代替テキストも必ず指定
‣ 画像のプロパティでサイズを後から調整可能
![Page 13: 芸術情報演習デザイン (web) 第3回:HTML入門 2 - ハイパーリンク、イメージ、リスト](https://reader034.fdocument.pub/reader034/viewer/2022050907/559c0a5b1a28ab846a8b46a8/html5/thumbnails/13.jpg)
画像を貼りつける – img要素‣ 携帯電話で自分の写真(もしくはなにか自分のもの)を撮影‣ メールで送付‣ 画像をページに追加してみる!
![Page 14: 芸術情報演習デザイン (web) 第3回:HTML入門 2 - ハイパーリンク、イメージ、リスト](https://reader034.fdocument.pub/reader034/viewer/2022050907/559c0a5b1a28ab846a8b46a8/html5/thumbnails/14.jpg)
情報を箇条書きで整理 - リスト‣ リストの効果‣ リスト - 箇条書きで情報を表現する手段‣ 短い文字量で表現したい論旨を的確にわかり易く表現できる‣ また、視覚的にも読みやすい
![Page 15: 芸術情報演習デザイン (web) 第3回:HTML入門 2 - ハイパーリンク、イメージ、リスト](https://reader034.fdocument.pub/reader034/viewer/2022050907/559c0a5b1a28ab846a8b46a8/html5/thumbnails/15.jpg)
情報を箇条書きで整理 - リスト‣ 三種類のリスト
‣ 並列列挙リスト - ul要素‣ 項目の順番にはあまり大きな意味を持たず、並列的に列挙する
‣ 順序付きリスト - ol要素‣ 項目の順番が意味を持たせたり、もしくは項目をあとで参照するための番号をつける
‣ 定義型リスト - dl 要素‣ 辞書のように用語とその定義から構成される
![Page 16: 芸術情報演習デザイン (web) 第3回:HTML入門 2 - ハイパーリンク、イメージ、リスト](https://reader034.fdocument.pub/reader034/viewer/2022050907/559c0a5b1a28ab846a8b46a8/html5/thumbnails/16.jpg)
情報を箇条書きで整理 - リスト‣ 並列列挙リスト (ul要素) の例<ul> <li>ドはドーナッツのド</li> <li>レはレモンのレ</li> <li>ミはみんなのミ</li> <li>ファはファイトのファ</li> <li>空を仰いで</li> <li>ラララララ</li> <li>シは幸せよ</li></ul>
![Page 17: 芸術情報演習デザイン (web) 第3回:HTML入門 2 - ハイパーリンク、イメージ、リスト](https://reader034.fdocument.pub/reader034/viewer/2022050907/559c0a5b1a28ab846a8b46a8/html5/thumbnails/17.jpg)
情報を箇条書きで整理 - リスト‣ 順序付きリスト (ol要素) の例<ol> <li>一本でも人参</li> <li>二足でもサンダル</li> <li>三艘でもヨット</li> <li>四粒でもごま塩</li> <li>五台でもロケット</li> <li>六羽でも七面鳥</li> <li>七匹でも蜂</li> <li>八頭でもクジラ</li></ol>
![Page 18: 芸術情報演習デザイン (web) 第3回:HTML入門 2 - ハイパーリンク、イメージ、リスト](https://reader034.fdocument.pub/reader034/viewer/2022050907/559c0a5b1a28ab846a8b46a8/html5/thumbnails/18.jpg)
情報を箇条書きで整理 - リスト‣ 定義型リストの例 (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>
![Page 19: 芸術情報演習デザイン (web) 第3回:HTML入門 2 - ハイパーリンク、イメージ、リスト](https://reader034.fdocument.pub/reader034/viewer/2022050907/559c0a5b1a28ab846a8b46a8/html5/thumbnails/19.jpg)
情報を箇条書きで整理 - リスト‣ Dreamweaverでは、HTMLのプロパティーで簡単にリストが作成可能
![Page 20: 芸術情報演習デザイン (web) 第3回:HTML入門 2 - ハイパーリンク、イメージ、リスト](https://reader034.fdocument.pub/reader034/viewer/2022050907/559c0a5b1a28ab846a8b46a8/html5/thumbnails/20.jpg)
まとめ‣ 本日はここまで‣ これまで出てきた重要な要素
‣ HTMLの構造 - html, head, body‣ 文書の情報 - meta, title‣ 見出し - h1 ~ h6‣ 段落、改行 - p, br‣ ハイパーリンク - a‣ イメージ - img‣ リスト - ul, ol, li
‣ しっかり理解しましょう!