KAWANO's PukiWiki Plus! - Lecture/InfoDesignB2004/5th/review のバックアップ(No.2)

• バックアップ一覧
• 差分 を表示
• 現在との差分 を表示
• 現在との差分 - Visual を表示
• ソース を表示
• Lecture/InfoDesignB2004/5th/review へ行く。
  • 1 (2004-10-28 (木) 04:33:36)
  • 2 (2007-02-24 (土) 07:05:44)
  • 3 (2007-02-24 (土) 07:10:26)

前回の復習

前回の内容

第3回に続き、 HTML(Hyper Text Markup Language)を使った、 Webページの作成を行いました。 タグ（文書の構造を示すマーク）を、 新たにいくつか紹介し、使ってみました。

• メールを送れるようにする （a href="mailto:..."）
• 連絡先をつくる （address）
• リストをつくる （ul, ol, li, dl, dt, dd）
• 特殊な記号を表示する （＆lt;, ＆gt;, ＆amp;, ＆quot;, ＆nbsp;, ＆copy;, ＆trade;）
• コメントをつくる （<!-- ... -->）
• 文字を強調をする （em, strong）
• 文字を整形する （b, i, sup, sub, pre）
• HTMLのバージョンと文字コードを指定する （DOCTYPE, html lang="..", meta ...）

前回の訂正

前回の内容に間違いがありました。訂正をお知らせします。

「HTMLのバージョンと文字コードを指定する」 で、HTMLのバージョンの設定を紹介しましたが、 その中に間違いがありました。 「REC-html4」が間違いで、「html4」が正しくなります。 （説明のページは訂正済みです）

pre> （訂正前）

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http：//www.w3.org/TR/COLOR(red):REC-html4COLOR(black):/loose.dtd">

（訂正後）

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http：//www.w3.org/TR/COLOR(red):html4COLOR(black):/loose.dtd">

/pre>

各自が作ったHTMLも変更しておいてください。

第4回のポイント

第4回の課題としてHTMLファイルを作成してもらいましたが、 いくつか文法上・構造上の使い方で気になるところがありましたので、 改善ポイントとして紹介します。

見出しを段落に使ってませんか？

「見出し」と「段落」は、同格の要素です。 次のように、 見出しの中に段落を設定したり、段落の中に見出しを設定するのはやめましょう。

pre>

 <h4>
 <p>.....</p>
 </h4>

/pre>

コメントの使い方

「<!--」の後や、「-->」の前にスペースを入れておきましょう。

pre>

!-- こめんと -->

/pre> また、次のように「--」が続くものは、文法違反になります。

pre>

!------------->

/pre>

水平線の使い方

水平線は内容の区切りに使うのがよいでしょう。 見出しと本文の間に入れるよりも、コメントとコメントの間や、 課題と課題（つまり日付と日付の間）、本文と連絡先の間に入れるとよいでしょう。

連絡先の使い方

連絡先は、ページの一番下に1回だけ使うようにしてください。 ページの作者への連絡方法を提示するのに使うためです。 各々のコメントに連絡先は必要ではありません。

「h1」を何回使ってますか？

h1要素は「大見出し」を意味します。 つまり、そのページの内容を表す見出しです。 そのような見出しは1回だけ使うのがいいでしょう。

番外

課題のメールを送るときに、 メールの署名、 メールの先頭に使ってませんか？ 署名がメールの最後になるように、本文を入力しましょう。

第3回のポイント （再掲）

文字の大きさの調整に見出しを使ってませんか？

「h1, h2, h3」要素は、「見出し」という構成要素をあらわしているものです。 文字の大きさを変えるために使ってはいけません。
また、見出しにはレベルがあるので、次のように、 レベルの順番を入れ替えて使うようなことは、できるだけ避けましょう。

pre> <h1>自己紹介</h1> <h4>プロフィール</h4> <h2>リンク集</h2>

/pre>

リンクに使う文字は、具体的ですか？

前回の課題ではとくに指示はしませんでしたが、 リンクを作るときに、そのリンクに使う文章はとても重要です。 リンク先の内容がわかるような、具体的な文章にしましょう。
よく使われる表現には、次のようなものがあります。

• ページの役割
  • 例: トップページ、ヘルプ
• リンク先のページのタイトル
  • 例: 日付の表記に関するノート
• リンク先のページのタイトル + サイトの名前
  • 例: 日付の表記に関するノート(The Web KANZAKI)

次へ進んで、 今回の内容を見てください。