html入門 2 - ハイパーリンク、イメージ、リスト
TRANSCRIPT
情報編集 (web)第3回: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
‣ しっかり理解しましょう!