TITLE:前回の復習 *前回の復習 [#p0e1af7a] **前回の内容 [#v9c68ab3] ''HTML(Hyper Text Markup Language)''を使った、 Webページの作成をはじめました。 まず、次のような概念を説明しました。 -[[World Wide Webとハイパーテキスト>Lecture/JouhouC2007/2nd/Hypertext]] -[[World Wide WebとHTML>Lecture/JouhouC2007/2nd/HTML]] -[[Webページの作成>Lecture/JouhouC2007/2nd/WebWork]] -[[HTMLの書き方>Lecture/JouhouC2007/2nd/HowToHTML]] 次に、HTMLを使ったWebページの作成として、 タグ(文書の構造を示すマーク)をいくつか使ってみました。 -[[HTMLファイルの「骨組み」をつくる>Lecture/JouhouC2007/2nd/head_body]] (html, head, title, body) -[[「見出し」をつくる>Lecture/JouhouC2007/2nd/heading]] (h1, h2, h3, h4, h5, h6) -[[「段落」と「改行」をつくる>Lecture/JouhouC2007/2nd/paragraph]] (p, br) -[[「リンク」をつくる>Lecture/JouhouC2007/2nd/link]] (hr) -[[「水平線」をつくる>Lecture/JouhouC2007/2nd/hr]] (a href) **前回のポイント [#ea45e96b] 提出された課題を見て、 いくつか気になるポイントがありました。 自分が提出した課題をチェックしてみましょう。 ちなみに、前回の課題のサンプルを[[こちら>./kadai_sample]]に載せておきます。 ***(1) 文書の構造がわかりやすいですか? [#sf5a6de3] 「h1、h2」や「p」などの要素を上手く使い分けていますか?~ HTMLでは、タグを使うことで、文書の構造(かたち)を表現します。 「(大きな)見出し」「(小さな)見出し」「段落」など、 人間ならとくに意識しなくても区別できるものを、 コンピュータにも区別できるようにするのです。 文書の構造がコンピュータにわかるようになると、 文書中のどの情報が重要なのか、 「''情報の優先順位(プライオリティ)''」をコンピュータが判断できるようになります。 このような技術は「''検索サイト''」でよく用いられており、 検索結果で上位に表示されるためには重要になります。 ***(2) 見出しをきちんと使えていますか? [#v7fba5ba] 「h1」要素は、本来、1回だけ使うものなので注意してください。~ 「h1」は最も大きな(重要な)見出しです。本でいえばタイトルにあたります。 その大きな見出しが、2回以上使われている場合があります。 ***(3) 文字を大きくするために見出しを使ってませんか? [#h646eee7] 「h1, h2, h3」要素は、「見出し」という構成要素をあらわしているものです。 文字の大きさを変えるために使ってはいけません。~ 「h1→h2→h3…」の順に、見出しの優先順位があり、h1は最も大きなレベルの見出しとなります。 次のように、 レベルの順番を入れ替えて使うようなことは、できるだけ避けましょう。 ただし、「h1→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> }} ***(4) 段落をきちんと使えていますか? [#pc71209d] 段落を示す「p」要素の使い方は、ちょっと難しいかもしれません。 段落とは、その中に伝えたい内容を一つだけ書くものです。 文章が1つだけの場合もあれば複数ある場合もあります。 ある程度まとまった文章を書いたら、「p」要素で段落にしておきましょう。 また、「p」要素を忘れている場合もあります。 見出しなのか段落なのかわからなくなりますから、 忘れずに段落に指定しておきましょう。 ***(5) へんな入れ子になっていませんか? [#c62de684] 次のように、見出しの中に段落を指定したりしていませんか? 「見出し」と「段落」は、文書を構成する部品として、同等のものです。 タグの使い方には注意しましょう。 #pre(novervatim){{ COLOR(red):<h3> 見出し COLOR(blue):<p> あいうえおかきくけこ… …… COLOR(blue):</p> COLOR(red):</h3> }} ***(6) リンクに使う文字は、具体的ですか? [#h453d8d1] 前回の課題ではとくに指示はしませんでしたが、 リンクを作るときに、そのリンクに使う文章はとても重要です。 リンク先の内容がわかるような、具体的な文章にしましょう。~ よく使われる表現には、次のようなものがあります。 --ページの役割 ---例: トップページ、ヘルプ --リンク先のページのタイトル ---例: [[日付の表記に関するノート:http://www.kanzaki.com/docs/html/dtf.html]] --リンク先のページのタイトル + サイトの名前 ---例: [[日付の表記に関するノート(The Web KANZAKI):http://www.kanzaki.com/docs/html/dtf.html]] &br; &navi2(Lecture/JouhouC2007/3rd,next);進んで、 今回の内容を見てください。 ---- #navi2(Lecture/JouhouC2007/3rd,toc,next) |