アーカイブ [2010年1月分] |
|
2010年1月8日(金) |
|
HTMLの構造【HTML】
後れ馳せながら、明けましておめでとうございます。
2010年に入り、サークルでは新たな講座として「※ホームページの作り方」講座を行っていく予定です。
つきましては、今回から特記する記事のないときは、ホームページに関する記事を中心に取り上げていくつもりです。
※ |
「ホームページ」とは通称であり、「Webページ」が世界共通の表記です。ここで、あえて、「ホームページ」と表記するのは、日本ではホームページの呼び名の方がより周知されているからです。(本来、ホームページはサイトのトップページの意)
ただし、トップページの意味ではないことを明確に表記するため、home
pageとは記述せず、homeとpageを連結したHomepageと1語で表記しました。 |
私がホームページの作り方を指導するときには、必ずHTMLでのページ作成法をまず覚えてもらうようにしています。
それはHTMLタグを用いたページ作りを常態にしてもらいたいがためではありません。あくまで、タグの記述法の基本を知っていただくためです。
当然、HTMLの基本を覚えてもらった後には、ホームページビルダーなどのページ編集ソフトの使い方に移行していただきます。
それなら、HTMLなど覚えるだけ時間の無駄と考える人もいるでしょう。
ただ、私の指導の経験上、HTMLを理解して編集ソフトを使っている人と、知らずに使っている人とでは、あるレベル以上のページを作る場合に大きな差が生じているように感じます。是非、無駄とは考えず、ページ作りの基礎知識としてしっかり学んでください。
なお、このような学習の流れを「時間の無駄」と考える人は、ページ作りなど学ばずに、ページはプロのWebデザイナーに依頼してください。(ページ作りに費やす時間を、別途、残業やアルバイトに向け、その賃金をプロの依頼料にあてた方が時間は短く、良いページができるというものです。ときによっては安上がりかもしれません。)
【HTMLの基本構造】
HTMLとはHyper Text Markup Languageの略で、ホームページを
作るための言語です。
この言語は基本的に「タグ」という他のプログラミング言語にはない特殊な記述法でページを作ります。
純粋なHTMLページ(JavaScriptなどを含まないページ)なら、宣言文の羅列で実行文がほとんど存在しないので、記述が誤っていても、JavaScriptのようなイリーガルエラーは出ません。(もちろん、思ったようにレイアウトができず、ページが崩れてしまうことはあります。が、とにかく、エラーは出ません。)
このようなことから、プログラミング初心者にも比較的、馴染みやすい言語といえます。(少なくとも私が経験した多くの言語の中では最も簡易な言語です。その簡素さはExcel関数以上です。)
とはいえ、htmlタグでそれなりのページを作ろうと思ったら根気は必要です。
タグとは
< 記号と >
記号に囲まれた命令のことです。(中の文字の大文字・小文字はどちらでもかまいませんが、統一しておいた方がいいでしょう。)
例 <HTML><HEAD><TITLE>...など
例では<HTML>、<HEAD>、<TITLE>の3つのタグをあげています。
これらすべて宣言文で<HTML>はここからHTMLページが始まること、<HEAD>はここからヘッダー部が始まること、<TITLE>はここにタイトルが記述されていることを宣言しています。
例外はありますが、各開始タグには対になった終了タグがあります。記述は</記号と
>記号で囲みます。上の例でいえば次のようなセットになります。
例 <HTML>.....</HTML>
<HEAD>....</HEAD>
<TITLE>......</TITLE>
ここで気をつけたいのが、タグの記述は基本的に「入れ子」で記述するということです。
「入れ子」とはロシアの人形、マトリョーシカのように、人形の中に人形が入っている状態、つまり、あるタグセットの中に他のタグセットが完全に入っている状態をいいます。
上の例ではHTMLの開始を表す<HTML>タグと、その終了タグ</HTML>がまずあり、その中に<HEAD>...</HEAD>を入れます。さらに<TITLE>...</TITLE>を<HEAD>...</HEAD>の中にいれます。
主なタグを記述すれば次のような構造になります。(記述は次のようにタグ毎に改行をしなくてもかまいませんが、ここでは構造がわかりやすいように改行しています。色や段落によるレベル付けは構造をわかりやすくするためのもので、記述上、意味はありません。とはいえ、特に段落はメンテナンス上、つけておいた方が便利です。)
これらを確認してほしいのですが、すべてタグの種類間で交差はしていません。
<HTML>
<HEAD>
<TITLE>タイトル名
</TITLE>
</HEAD>
<BODY>ここにページのコンテンツを細かく記述する
</BODY>
</HTML>
上のようなコードをテキストファイルに記述し、特定の形式(.htmlもしくは.htmなど)で保存の上、ブラウザで見ると※Webページのように見ることができます。
※ |
ただし、これはインターネット上のページではなく、断絶されたローカルパソコン上でのページです。
実際にインターネットを通して誰もが閲覧できるページにするには、Webサーバーというインターネット用のマシンにページ・画像一式をアップロードしなければなりません。 |
詳細はクラスで説明します。
※わかりにくいようであれば説明しますのでクラス開催日にお申し出ください。
|