第4回 マークアップについて

| | コメント(0) | トラックバック(0)

第1回いきなりですが、、、で保存したhtmlファイル20080808_01.htmlをエディタで開いて見てください。

保存されたなかった方は 20080808_01.html をダウンロードしてエディタ開いてみてください。

(アイコンをダブルクリック等するとおそらくブラウザで表示されてしまうので、メモ帳等のエディタを起動しておいてそこから開くか、直接アイコンをドラッグしてください。)

開いたら、次のように<body>と</body>タグに挟まれた部分に注目してください。

----------------------------------------------------------------------
<body>
 <h1>はじめてのXHTML/CSS</h1>
 <h2>Webページはだれでも作れる!</h2>
 <p>Webページだれにでも作る事ができます。</p>
 <ol>
  <li>テキストエディタだけで作れるから。</li>
  <li>プログラミングのような難しい知識を必要としないから。</li>
 </ol>
 <h3>Menu</h3>
 <ul>
  <li>XHTML</li>
  <li>CSS</li>
  <li>Javascript</li>
 </ul>
</body>
----------------------------------------------------------------------

このように"<"と">"で囲まれた記述えおタグといい、h1やh2などの要素の名前を挟んで記述します。
<h1>と</h1>、<h2>と</h2>、<p>と</p>などタグに挟まれたテキスト部分をブラウザが文字を大きくしたり、一まとめの段落のしたり見た目を変えてくれます。
そして<要素>と</要素>で挟む事でテキストの意味をコンピュータの伝えます。
たとえば、<h1>はじめてのXHTML/CSS</h1>と伝えたら、コンピュータは「"XHTML/CSS"という文章は見出しの1レベル」と解釈します。そしてブラウザはそれに適した表示をしてくれるのです。
このようにテキストを<要素>と</要素>で挟む作業を、マークアップとかタグ打ちとかいいます。

  • h1要素の意味
    <h1>と</h1>で挟むとそのページで一番大きな見出しとなります。
    一番大きな見出しなのでブラウザでは文字も一番大きく表示されます。
  • h2要素の意味
    <h2>と</h2>で挟むとこれはそのページで二番大きな見出しとなります。
    表示は<h1></h1>よりは小さいですが大きな文字になります。
  • p要素の意味
    <p>と</p>で挟まれた部分は段落を意味します。
    本文に使用し、その段落ごとに毎回<p>と</p>で挟みます。
  • liとol要素の意味
    これまでのものと違って2種類セットで使います。
    <li>と</li>で挟んだところは箇条書きという意味になります。
    さらにその<li>と</li>で挟んだものらを<ol>と</ol>で挟む(囲む)ことで、順番を付けた箇条書きという意味になり自動的に1. 2. 3.・・・・と番号が表示されます。
  • h3要素の意味
    もうお分かりかと思いますが、h1やh2と同様に見出しを意味します。
    三番目の見出しなので、<h2></h2>よりは小さな文字で表示されます。
    また今回はh3までしか出てきませんでしたが、この要素はh6まであります。
  • liとul要素の意味
    先ほどのli,olと似ていますが、今度は<li>と</li>を挟む(囲む)役割が<ul></ul>に変わります。
    これは順番を重視しない箇条書きを意味し、番号ではなくリストマーク(黒い丸)が先頭に付きます。

注意:<h1>と</h1>でで挟むと文字が大きくなります。しかしこれを単に文字を大きくする目的で悪用してはいけません。
もしそんなことをしてしますとコンピュータに誤った情報を伝えてしまうことになり、手段と目的が逆転してしまします。
文字を大きくしたい場合は次回にお話するCSSという技術を使います。

今回のマークアップしたものをブラウザで見ても見出し文字が大きくなったり、箇条書きになったりしているだけでバックは白のままで文字も黒いままです。
CSSはこれらの文字に色を付けたり、背景に画像を用いたりと見栄えを良くししていくのもの技術です。

次回につづく。

トラックバック(0)

このブログ記事を参照しているブログ一覧: 第4回 マークアップについて

このブログ記事に対するトラックバックURL: http://kumao.net/mt/mt-tb.cgi/40

コメントする

KUMAOの押入TOPへ

カウンタ

アーカイブ

ウェブページ

ブログランキング・にほんブログ村へ

このブログ記事について

このページは、kumaoが2008年8月12日 20:00に書いたブログ記事です。

ひとつ前のブログ記事は「第3回 HTMLの基本構造」です。

次のブログ記事は「第5回 いよいよCSS」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

books