KAWANO's PukiWiki Plus! - Lecture/JouhouC2007/3rd/review の変更点

• 追加された行はこの色です。
• 削除された行はこの色です。
• Lecture/JouhouC2007/3rd/review へ行く。

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)