<< 第2回：HTMLとは何か？ | top | 第４回：HTML(3) >>

第3回：HTML(2)

講義スライド

前回の復習：HTMLの基礎

先週の課題

課題：下記の文書をHTMLで表現してみましょう

解答例

<html>
  <head>
    <title>Web情報デザイン休講情報</title>
  </head>
  <body>
    <h1>休講情報</h1>
    <p>下記の講義を休講とします。
     この講義の補講に関する情報は追って掲示しますので、
     注意してください。</p>
    <h2>講義名</h2>
    <p>Web情報デザイン</p>
    <h2>担当教員</h2>
    <p>田所 淳</p>
    <h2>日時・時限</h2>
    <p>平成18年4月24日、1限<br />
      平成18年4月24日、3限</p>
    <p>不明な点は教務課まで。（担当：田所）</p>
    <hr />
    <p>平成18年4月24日、教務第１課</p>
  </body>
</html>

今日の内容

HTMLのツリー構造

HTML文書は常にHTML要素をルートとして小要素がそれに連なるツリー構造になっている

ハイパーリンクを作成する

<a href="URI">始点ノード</a>

例：「千葉商科大学」をhttp://www.cuc.ac.jp/へリンクさせる

<a href="http://www.cuc.ac.jp/">千葉商科大学</a>

アンカーのイメージ

URIの仕組み

インライン画像

<img src="画像ファイルのURI" alt="代替テキスト" />

箇条書きによる情報の表現

番号なしリストの例（ul要素）

<ul>
  <li>ドはドーナッツのド</li>
  <li>レはレモンのレ</li>
  <li>ミはみんなのミ</li>
  <li>ファはファイトのファ</li>
</ul>

番号付きリストの例（ol要素）

<ol>
  <li>一本でも人参</li>
  <li>二足でもサンダル</li>
  <li>三艘でもヨット</li>
  <li>四粒でもごま塩</li>
</ol>

定義型リスト

<dl>
  <dt>CUC</dt>
  <dd>千葉商科大学</dd>
 <dt>ICC</dt>
  <dd>Info City CUC</dd>
</dl>

リストの入れ子構造

<ul>
  <li>リスト１
    <ul>
      <li>リスト1.1</li>
      <li>リスト1.2</li>
      <li>リスト1.3</li>
    </ul>
  </li>
  <li>リスト2
    <ul>
      <li>リスト2.1</li>
      <li>リスト2.2</li>
      <li>リスト2.3</li>
    </ul>
  </li>
 <li>リスト3
    <ul>
      <li>リスト3.1</li>
      <li>リスト3.2</li>
      <li>リスト3.3</li>
    </ul>
  </li>
</ul>

課題（重要！）

posted by tado at 07:02 AM, 06 May 2006

<< 第2回：HTMLとは何か？ | top | 第４回：HTML(3) >>

Comments

コメントはありません

Add Comment

このアイテムは閉鎖されました。このアイテムへのコメントの追加、投票はできません。

トップページに戻る