
HTML要素

	→
[図] レイアウトデザインの例

と，属性値として intro を書き込むことで，このブロックが導入部分であることを明示することができる．このように，適時，属性値を持たせることで，そのブロックが導入部や結論部であるなどの情報を与えることができる．

いろいろなタグを使ってみる

演習

「簡単なWebページを作る」で作成した mypage.html を以下の指示に従って書き換え，ブラウザでの表示を確認せよ．

背景色をつける
<body>タグのbgcolor属性に背景色を指定する．
```
    <body bgcolor="#ccffff">
        ...
    </body>
  
```

中央揃え

<div>タグのalign属性に"center"を指定する．


    <div align="center">
     学籍番号:  9918999<br>
     氏名:    ○○　○○<br>
    </div>

水平線
<hr>タグを用いて水平線(Holizontal Line)を引く．このタグには終了タグはない．

リンク

<a>タグを用いて他のWebページへのリンクを張る

以下の赤色で示した部分を追記せよ．


     ...
 初めて作成した
 私のホームページ
 </p>

    <hr>

    <a href="http://www.cs.t-kougei.ac.jp/">
    コンピュータ応用学科へ
    </a>

    <hr>

  </body>
</html>

箇条書き

<ul>, <ol>, <li>タグを用いて箇条書きを追加する．
以下の赤色で示した部分を追記せよ．


    ...
    <a href="http://www.cs.t-kougei.ac.jp">
    コンピュータ応用学科へ
    </a>

    <hr>

    番号なしの箇条書き(unordered list)
    <ul>
      <li> ulタグ(unordered list)を用いて箇条書する </li>
      <li> liタグ(list)に項目を記述する </li>
    </ul>
    番号付き箇条書き(順序付リスト，ordered list)
    <ol>
      <li> olタグ(ordered list)を用いて番号を付けて箇条書する </li>
      <li> liタグ(list)に項目を記述する </li>
    </ol>

  </body>
</html>

表(テーブル, table)

<table>	表（テーブル, table）
<tr>	列 (table row)
<th>	見出し要素(table header)
<td>	要素(table data), セル

以下の赤色で示した部分を追記せよ．


     ...
    <ol>
      <li> olタグ(ordered list)を用いて番号を付けて箇条書する </li>
      <li> liタグ(list)に項目を記述する </li>
    </ol>

    <table border="1">
      <caption> 時間割表 </caption>
      <tbody>
        <tr>
          <th>  </th>
          <th> 1時限目 </th>
          <th> 2時限目 </th>
          <th> 昼休み </th>
          <th> 3時限目 </th>
          <th> 4時限目 </th>
          <th> 放課後 </th>
        </tr>
        <tr>
          <th> 月曜日 </th>
          <td> 微分積分学 </td>
          <td> 自己分析と行動計画 </td>
          <td>  </td>
          <td> 電気回路解析</td>
          <td>  </td>
        </tr>
      </tbody>
    </table>

  </body>
</html>

タグ

Webページの構造化

いろいろなタグを使ってみる

演習