情報編集 (web)第３回：HTML入門 2 - ハイパーリンク、イメージ、リスト

2013年4月23日東京藝術大学 芸術情報センター(AMC)担当：田所淳

今日の内容‣ ひきつづき、HTMLの様々な要素(タグ)の役割、使用法を解説します

‣ アンカー、ハイパーリンク - a要素‣ インラインイメージ - img要素‣ リスト (ul、ol、li)

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

a要素 - ハイパーリンク、アンカー‣ a要素は要素内のリンクを貼りたい範囲をマークアップする‣ リンク先は開始タグに href=”〈URL〉” という属性で指定

‣ 例：http://yoppa.org/ ヘのリンクを作成する‣ 詳しくは田所淳のホームページを参照してください。

<p> 詳しくは<a href=”http://yoppa.org/”>田所淳のホームページ</a>を参照してください。 </p>

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

画像を貼りつける – 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要素‣ Dreamweaverでインラインイメージを追加するには‣ 挿入 > イメージ を選択‣ 画像の場所を指定する

画像を貼りつける – img要素‣ 代替テキストも必ず指定

‣ 画像のプロパティでサイズを後から調整可能

画像を貼りつける – 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>

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

まとめ‣ 本日はここまで‣ これまで出てきた重要な要素

‣ HTMLの構造 - html, head, body‣ 文書の情報 - meta, title‣ 見出し - h1 ～ h6‣ 段落、改行 - p, br‣ ハイパーリンク - a‣ イメージ - img‣ リスト - ul, ol, li

‣ しっかり理解しましょう!