*前回の復習 [#t7fb0900] **前回の内容 [#zbad8c54] 第3回に続き、 ''HTML(Hyper Text Markup Language)''を使った、 Webページの作成をはじめました。 Webページの作成を行いました。 タグ(文書の構造を示すマーク)を、 新たにいくつか紹介し、使ってみました。 次に、HTMLを使ったWebページの作成として、 タグ(文書の構造を示すマーク)をいくつか使ってみました。 -[[HTMLファイルの「骨組み」をつくる>Lecture/InfoDesignB2004/3rd/head_body]] (html, head, title, body) -[[「見出し」をつくる>Lecture/InfoDesignB2004/3rd/heading]] (h1, h2, h3, h4, h5, h6) -[[「段落」と「改行」をつくる>Lecture/InfoDesignB2004/3rd/paragraph]] (p, br) -[[「リンク」をつくる>Lecture/InfoDesignB2004/3rd/link]] (hr) -[[「水平線」をつくる>Lecture/InfoDesignB2004/3rd/hr]] (a href) -[[メールを送れるようにする>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 ...) **第2回のポイント [#dfeaf76f] **前回の訂正 [#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"> }} 各自が作ったHTMLも変更しておいてください。 **第4回のポイント [#vf35f72b] 第4回の課題としてHTMLファイルを作成してもらいましたが、 いくつか文法上・構造上の使い方で気になるところがありましたので、 改善ポイントとして紹介します。 :見出しを段落に使ってませんか?| 「見出し」と「段落」は、同格の要素です。 次のように、 見出しの中に段落を設定したり、段落の中に見出しを設定するのはやめましょう。 #pre(novervatim){{ <h4> <p>.....</p> </h4> }} :コメントの使い方| 「<!--」の後や、「-->」の前にスペースを入れておきましょう。 #pre(novervatim){{ <!-- こめんと --> }} また、次のように「--」が続くものは、文法違反になります。 #pre(novervatim){{ <!-------------> }} :水平線の使い方| 水平線は内容の区切りに使うのがよいでしょう。 見出しと本文の間に入れるよりも、コメントとコメントの間や、 課題と課題(つまり日付と日付の間)、本文と連絡先の間に入れるとよいでしょう。 :連絡先の使い方| 連絡先は、ページの一番下に1回だけ使うようにしてください。 ページの作者への連絡方法を提示するのに使うためです。 各々のコメントに連絡先は必要ではありません。 :「h1」を何回使ってますか?| h1要素は「大見出し」を意味します。 つまり、そのページの内容を表す見出しです。 そのような見出しは1回だけ使うのがいいでしょう。 ***番外 [#ta645660] 課題のメールを送るときに、 メールの署名、 メールの先頭に使ってませんか? 署名がメールの最後になるように、本文を入力しましょう。 **第3回のポイント [#n67f26f1](再掲) [#h96e5240] :文字の大きさの調整に見出しを使ってませんか?| 「h1, h2, h3」要素は、「見出し」という構成要素をあらわしているものです。 文字の大きさを変えるために使ってはいけません。~ また、見出しにはレベルがあるので、次のように、 レベルの順番を入れ替えて使うようなことは、できるだけ避けましょう。 <pre> #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/4th,next);進んで、 &navi2(Lecture/InfoDesignB2004/5th,next);進んで、 今回の内容を見てください。 ---- #navi2(Lecture/InfoDesignB2004/4th,toc,next) #navi2(Lecture/InfoDesignB2004/5th,toc,next) }} |