*前回の復習 [#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="...", ...) **おさらい: HTML文書の構造 [#c024a8dc] HTML文書は、いくつかの基本的な要素で構成されています。 **第4回のポイント [#x60d9847] 第4回の課題としてHTMLファイルを作成してもらいましたが、 いくつか文法上・構造上の使い方で気になるところがありましたので、 改善ポイントとして紹介します。 まず最初に、HTMLのどのバージョンかを示す、DOCTYPE宣言があります。 そして、 全体をhtml要素で囲み、その中にhead要素とbody要素が含まれています。 head要素には、さらにmeta要素やtitle要素など、文書情報が入ります。 body要素には、h1要素やp要素など、文書の構造が入ります。 :見出しを段落に使ってませんか?| 「見出し」と「段落」は、同格の要素です。 次のように、 見出しの中に段落を設定したり、段落の中に見出しを設定するのはやめましょう。 <pre> <h4> <p>.....</p> </h4> </pre> つまり、 HTML文書は、html要素をルート(根源)とした、 木(ツリー)構造になっているのがわかります。 :コメントの使い方| 「<!--」の後や、「-->」の前にスペースを入れておきましょう。 <pre> <!-- こめんと --> </pre> また、次のように「--」が続くものは、文法違反になります。 <pre> <!-------------> </pre> ***ブロックレベル要素とインライン要素 [#kb62204c] 要素によっては、別要素の中に囲むことができるものとできないものがあります。 要素のタイプを大きく分けると、次の2つに分けることができます。 :水平線の使い方| 水平線は内容の区切りに使うのがよいでしょう。 見出しと本文の間に入れるよりも、コメントとコメントの間や、 課題と課題(つまり日付と日付の間)、本文と連絡先の間に入れるとよいでしょう。 :ブロックレベル要素| 文書の構造(骨格)を示す要素で、 内容をひとまとまりにします。 要素の前後が改行されます。 :連絡先の使い方| 連絡先は、ページの一番下に1回だけ使うようにしてください。 ページの作者への連絡方法を提示するのに使うためです。 各々のコメントに連絡先は必要ではありません。 |CENTER:|CENTER:|CENTER:|CENTER:|CENTER:|c |h1〜6|p|ul|ol|dl| |hr|pre|table|address|div| :「h1」を何回使ってますか?| h1要素は「大見出し」を意味します。 つまり、そのページの内容を表す見出しです。 そのような見出しは1回だけ使うのがいいでしょう。 :インライン要素| 単語や文章に意味を与える要素で、 文章に含まれます。 |CENTER:|CENTER:|CENTER:|CENTER:|CENTER:|c |a|b|br|em|font| |i|img|strong|sub|sup| ***番外 [#n36caf6a] 課題のメールを送るときに、 メールの署名、 メールの先頭に使ってませんか? 署名がメールの最後になるように、本文を入力しましょう。 それぞれの要素のタイプには、次のような原則があります。 -ブロックレベル要素は、 インライン要素を含むことができますが、 ほかのブロックレベル要素は基本的に囲むことができません。 -インライン要素は、 ほかのインライン要素を含むことができますが、 ブロックレベル要素は基本的に含むことができません。 -body要素の中で直接扱えるのは、 ブロックレベル要素だけである。 **第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/6th,next);進んで、 今回の内容を見てください。 ---- #navi2(Lecture/InfoDesignB2004/5th,toc,next) #navi2(Lecture/InfoDesignB2004/6th,toc,next) |