1. 芸術情報演習デザイン (web)
第３回：HTML入門 2 - ハイパーリ
ンク、イメージ、リスト
2013年4月25日
東京藝術大学 芸術情報センター(AMC)
担当：田所淳

2. 今日の内容
‣ ひきつづき、HTMLの様々な要素(タグ)の役割、使用法を解説
します
‣ アンカー、ハイパーリンク - a要素
‣ インラインイメージ - img要素
‣ リスト (ul、ol、li)

3. a要素 - ハイパーリンク、アンカー
‣ ハイパーリンク、HTMLの最重要機能

4. a要素 - ハイパーリンク、アンカー
‣ a要素は要素内のリンクを貼りたい範囲をマークアップする
‣ リンク先は開始タグに href=”〈URL〉” という属性で指定
‣ 例：http://yoppa.org/ ヘのリンクを作成する
‣ 詳しくは田所淳のホームページを参照してください。
<p> 詳しくは<a href=”http://yoppa.org/”>田所淳のホームページ</a>を
参照してください。 </p>

5. a要素 - ハイパーリンク、アンカー
‣ 実習
‣ リンク集を作成してみる
‣ DreamweaverではリンクのURL作成は「ハイパーリンク」ボ
タンで作成

6. 画像を貼りつける – img要素
‣ WWWに載せられるのは、ハイパーテキストだけでない
‣ 画像や動画、音声など
‣ 様々なメディアを効果的に用いることでページを魅力的に

7. 画像を貼りつける – img要素
‣ 画像をWebページに貼りつけるには、img要素を使用
‣ img要素は画像そのものではなく、外部の画像ファイルの位置
(URL)を指定して読み込む
‣ br要素と同様に、終了タグのない内容をもたない空要素なの
で末尾は「/>」で閉じる
‣ 画像ファイルのURLは、絶対パス or 相対パスで (後述)
<img src="画像ファイルのURL" alt="画像の説明" />
‣ alt属性には画像を説明する内容を入れる
‣ 画像が見えないブラウザやダウンロードできなかった時のため
にかならず入れる!

8. 画像を貼りつける – 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トップ画像" />
‣ これは「絶対パス」

9. 画像を貼りつける – img要素
‣ 相対パス - HTMLファイルからの場所を指定する
‣ 例えば、下記のようなファイル構造の場合
‣ スラッシュ「/」がフォルダの階層構造を表現している

10. 画像を貼りつける – img要素
‣ 相対パス - もう少し複雑な例
‣ 「../」は自分のファイルからみてひとつ上の階層を表現
‣ 例えば2つ上の階層は「../../」3つ上の階層は「../../../」

11. 画像を貼りつける – img要素
‣ Dreamweaverでインラインイメージを追加するには
‣ 挿入 > イメージ を選択
‣ 画像の場所を指定する

12. 画像を貼りつける – img要素
‣ 代替テキストも必ず指定
‣ 画像のプロパティでサイズを後から調整可能

13. 画像を貼りつける – img要素
‣ 携帯電話で自分の写真(もしくはなにか自分のもの)を撮影
‣ メールで送付
‣ 画像をページに追加してみる!

14. 情報を箇条書きで整理 - リスト
‣ リストの効果
‣ リスト - 箇条書きで情報を表現する手段
‣ 短い文字量で表現したい論旨を的確にわかり易く表現できる
‣ また、視覚的にも読みやすい

15. 情報を箇条書きで整理 - リスト
‣ 三種類のリスト
‣ 並列列挙リスト - ul要素
‣ 項目の順番にはあまり大きな意味を持たず、並列的に列挙
する
‣ 順序付きリスト - ol要素
‣ 項目の順番が意味を持たせたり、もしくは項目をあとで参
照するための番号をつける
‣ 定義型リスト - dl 要素
‣ 辞書のように用語とその定義から構成される

16. 情報を箇条書きで整理 - リスト
‣ 並列列挙リスト (ul要素) の例
<ul>
<li>ドはドーナッツのド</li>
<li>レはレモンのレ</li>
<li>ミはみんなのミ</li>
<li>ファはファイトのファ</li>
<li>空を仰いで</li>
<li>ラララララ</li>
<li>シは幸せよ</li>
</ul>

17. 情報を箇条書きで整理 - リスト
‣ 順序付きリスト (ol要素) の例
<ol>
<li>一本でも人参</li>
<li>二足でもサンダル</li>
<li>三艘でもヨット</li>
<li>四粒でもごま塩</li>
<li>五台でもロケット</li>
<li>六羽でも七面鳥</li>
<li>七匹でも蜂</li>
<li>八頭でもクジラ</li>
</ol>

18. 情報を箇条書きで整理 - リスト
‣ 定義型リストの例 (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>

19. 情報を箇条書きで整理 - リスト
‣ Dreamweaverでは、HTMLのプロパティーで簡単にリストが
作成可能

20. まとめ
‣ 本日はここまで
‣ これまで出てきた重要な要素
‣ HTMLの構造 - html, head, body
‣ 文書の情報 - meta, title
‣ 見出し - h1 ∼ h6
‣ 段落、改行 - p, br
‣ ハイパーリンク - a
‣ イメージ - img
‣ リスト - ul, ol, li
‣ しっかり理解しましょう!