Lecture/InfoDesignB2004/5th/review の変更点

追加された行はこの色です。
削除された行はこの色です。
Lecture/InfoDesignB2004/5th/review へ行く。
*前回の復習 [#t7fb0900]

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

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

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

「[[HTMLのバージョンと文字コードを指定する>Lecture/InfoDesignB2004/4th/definition]]」
で、HTMLのバージョンの設定を紹介しましたが、
その中に間違いがありました。
「''REC-html4''」が間違いで、「''html4''」が正しくなります。
（説明のページは訂正済みです）
#pre(novervatim){{
（訂正前）
<!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回のポイント [#vf35f72b]
第4回の課題としてHTMLファイルを作成してもらいましたが、
いくつか文法上・構造上の使い方で気になるところがありましたので、
改善ポイントとして紹介します。

:見出しを段落に使ってませんか？|
「見出し」と「段落」は、同格の要素です。
次のように、
見出しの中に段落を設定したり、段落の中に見出しを設定するのはやめましょう。
#pre(novervatim){{
  <h4>
  <p>.....</p>
  </h4>
</pre>
}}

:コメントの使い方|
「<!--」の後や、「-->」の前にスペースを入れておきましょう。
#pre(novervatim){{
<!-- こめんと -->
</pre>
}}
また、次のように「--」が続くものは、文法違反になります。
#pre(novervatim){{
<!------------->
</pre>
}}


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

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

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

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

**第3回のポイント [#n67f26f1]（再掲）
**第3回のポイント [#n67f26f1]（再掲） [#h96e5240]

:文字の大きさの調整に見出しを使ってませんか？|
「h1, h2, h3」要素は、「見出し」という構成要素をあらわしているものです。
文字の大きさを変えるために使ってはいけません。~
また、見出しにはレベルがあるので、次のように、
レベルの順番を入れ替えて使うようなことは、できるだけ避けましょう。
#pre(novervatim){{
COLOR(red):<h1>COLOR(black):自己紹介COLOR(red):</h1>
COLOR(blue):<h4>COLOR(black):プロフィールCOLOR(blue):</h4>
COLOR(green):<h2>COLOR(black):リンク集COLOR(green):</h2>
</pre>
}}


:リンクに使う文字は、具体的ですか？|
前回の課題ではとくに指示はしませんでしたが、
リンクを作るときに、そのリンクに使う文章はとても重要です。
リンク先の内容がわかるような、具体的な文章にしましょう。~
よく使われる表現には、次のようなものがあります。
--ページの役割
---例: トップページ、ヘルプ
--リンク先のページのタイトル
---例: [[日付の表記に関するノート:http://www.kanzaki.com/docs/html/dtf.html]]
--リンク先のページのタイトル + サイトの名前
---例: [[日付の表記に関するノート(The Web KANZAKI):http://www.kanzaki.com/docs/html/dtf.html]]


&br;
&navi2(Lecture/InfoDesignB2004/5th,next);進んで、
今回の内容を見てください。
----
#navi2(Lecture/InfoDesignB2004/5th,toc,next)

}}
KAWANO's PukiWiki Plus! - Lecture/InfoDesignB2004/5th/review の変更点

メニュー

大学関係リンク

今日の5件

最新の5件
