文書構造の練習

Webデザインの勉強

【HTML01】

  1. TeraPad（mi）を起動する
  2. 管理フォルダーにこの課題用のフォルダを作成し「index.html」として保存する
  3. HTMLドキュメントとして必要な要素を入力する
  4. 練習課題用テキストを「body」内に、コピー＆ペーストする（文字入力練習として入力してもOK）
  5. Firefoxでプレビュー
  6. HTML Vakidatorでチェック
  7. 完成形をブログに載せる
<html>
<head>
<title>【HTML01】文書構造の練習</title>
</head>
<body>
<h1>結論：大見出し</h1>
<p>要約</p>
<h2>結論：検証</h2>
<p>解説</p>
<ul>
<li>検証の項目</li>
<li>検証の項目</li>
<li>検証の項目</li>
</ul>
<p>解説</p>
<ol>
<li>順序のある検証の項目</li>
<li>順序のある検証の項目</li>
<li>順序のある検証の項目</li>
</ol>
<p><img src="#" width="100" height="100" alt=""></p>
<dl>
<dt>9月25日</dt>
<dd>フェリカテクニカルアカデミーWeb実践講座開講</dd>
<dt>9月26日</dt>
<dd>HTMLの基本構造の入力練習</dd>
<dt>9月27日</dt>
<dd>定義型リストと表組みの練習</dd>
</dl>
<table border="1" summary="Web実践講座のカリキュラム">
<tr>
<th>科目</th>
<td>内容</td>
</tr>
<tr>
<th>Webサイト構築</th>
<td>正しい文書構造を理解する（パラグラフの概念）</td>
</tr>
<tr>
<th>プログラミング</th>
<td>JavaScript、ActionScript、PHPなどでプログラミングの考え方を理解する</td>
</tr>
<tr>
<th>Web画像</th>
<td>力学からコンピュータの描画を理解する</td>
</tr>
</table>
</body>
</html>



リスト

行頭記号付きリスト

内容が並列で、順序が入れ替わっても問題のないものに使います。

番号付きリスト

順序があるものに使います。

定義型リスト

dl：definition list
dt：definition term
dd：definition description
本文内容を解説する箇条書きではなく、語句の説明の場合に使用します。
日付で明示する更新情報にも、利用されます。

表組み

table：table
tr：table row
th：table head
td：table description

<table border="1" summary="">

CSSで指定しない場合、便宜上borederを表示させます。
summaryで、テーブルの目的・内容と、テーブルがどのように構成されているかの概略を提供します。