*前回の復習 [#rc0706b3] **前回の内容 [#v7a87b12] 第3回、第4回に続き、 ''HTML(Hyper Text Markup Language)''を使った、 Webページの作成を行いました。 タグ(文書の構造を示すマーク)を、 新たにいくつか紹介し、使ってみました。 -[[同じページへのリンクをつくる>Lecture/InfoDesignB2004/5th/anchor]] (a name="...") -[[表をつくる>Lecture/InfoDesignB2004/5th/table]] (table, tr, th, td) -[[色を表現する >Lecture/InfoDesignB2004/5th/color]](body bgcolor="..." text="...", font color="...", table bgcolor="...", ...) -[[レイアウトをする >Lecture/InfoDesignB2004/5th/layout]](h1 align="...", p align="...", hr align="...", div align="...", ...) -[[色を表現する>Lecture/InfoDesignB2004/5th/color]](body bgcolor="..." text="...", font color="...", table bgcolor="...", ...) -[[レイアウトをする>Lecture/InfoDesignB2004/5th/layout]](h1 align="...", p align="...", hr align="...", div align="...", ...) **第4回のポイント [#x60d9847] 第4回の課題としてHTMLファイルを作成してもらいましたが、 いくつか文法上・構造上の使い方で気になるところがありましたので、 改善ポイントとして紹介します。 :見出しを段落に使ってませんか?| 「見出し」と「段落」は、同格の要素です。 次のように、 見出しの中に段落を設定したり、段落の中に見出しを設定するのはやめましょう。 <pre> <h4> <p>.....</p> </h4> </pre> :コメントの使い方| 「<!--」の後や、「-->」の前にスペースを入れておきましょう。 <pre> <!-- こめんと --> </pre> また、次のように「--」が続くものは、文法違反になります。 <pre> <!-------------> </pre> :水平線の使い方| 水平線は内容の区切りに使うのがよいでしょう。 見出しと本文の間に入れるよりも、コメントとコメントの間や、 課題と課題(つまり日付と日付の間)、本文と連絡先の間に入れるとよいでしょう。 :連絡先の使い方| 連絡先は、ページの一番下に1回だけ使うようにしてください。 ページの作者への連絡方法を提示するのに使うためです。 各々のコメントに連絡先は必要ではありません。 :「h1」を何回使ってますか?| h1要素は「大見出し」を意味します。 つまり、そのページの内容を表す見出しです。 そのような見出しは1回だけ使うのがいいでしょう。 ***番外 [#n36caf6a] 課題のメールを送るときに、 メールの署名、 メールの先頭に使ってませんか? 署名がメールの最後になるように、本文を入力しましょう。 **第3回のポイント (再掲) [#tbb70123] :文字の大きさの調整に見出しを使ってませんか?| 「h1, h2, h3」要素は、「見出し」という構成要素をあらわしているものです。 文字の大きさを変えるために使ってはいけません。~ また、見出しにはレベルがあるので、次のように、 レベルの順番を入れ替えて使うようなことは、できるだけ避けましょう。 <pre> 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) |