Of ChaichanPapa-World !

Home/Menu

ストリクトなHTMLの基礎講座

はじめてのホームページの作り方

◆ はじめに

ここに来られたからには、ホームページ(ウェブページ)を作ってみたいと思いましたよね...。 今、あなたの頭の中にあるイメージは、どのようなものでしょうか...。 それは、本当に公開すべき価値があるものですか? もちろん!って方は、以下をお読み下さい!

そして、私と一緒にホームページ(ウェブページ)作成の勉強をしていきましょう! では、まず、プロバイダとの契約から...。

◆ まず、サンプル(叩き台)を見てみましょう!

PC上でメモ帳(Notepad.exe:テキストエディッター)を使って以下の文字(HTML)を入力(カットアンドペースト)します。(メモ帳がわからない人は、Notepad.exeをPC上で検索して、みつけたらクリックしてみてください。また、Macの人は、それなりに...)

そして、ファイル名はsample.htmとします。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>MY HOME PAGE</title>
</head>
<body>
<h1>MY HOME PAGE</h1>
<p>
あなたで、
<img src="http://www.parkcity.ne.jp/~chaichan/bin/gcnt.cgi?idname=chaichan.cnt&amp;cntgif=V&mode=1" alt="カウンタ">
人目の訪問です。
</p>
<p>
ご意見は
<a href="http://www.parkcity.ne.jp/~chaichan/bin/chaichan2.cgi?inzfg=1&amp;modfg=1">ゲストブック</a>へお願いします。
</p>
</body>
</html>

ソースの説明

<html>等をタグといいます。また、タグ付けすることをマークアップといいます。

ウェブページは、テキスト文書の内容がどのような要素で構成されているかを分別し、そこに適切なタグを付加して、文の要素を明示したテキスト文書です。

はじめの4行

はじめの4行はおまじないと思って必ず記述してください。どうしても知りたい人は「HTMLの基礎知識」です。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
タイトル(title要素)

次の行は、文書のタイトルです。文書の内容を端的に表すタイトルを記述します。実は、一番重要なHTMLの要素です。

<title>MY HOME PAGE</title>

ウェブ上でいろいろなところに利用されます。たとえば、ブックマークとか、ロボット型検索サイトで利用されるとか。 とにかく、必ず記述しましょう。

次の2行

ヘッダーの終わりの明示とボディーの開始の明示です。おまじないのつづきと思ってください。

</head>
<body>
見出し(h1〜h6要素)

これから書くべき内容を端的に表す見出しを記述します。

<h1>MY HOME PAGE</h1>

普通、一つのウェブページで章が一つの時は、見出し(h1要素)は、タイトル(title要素)と同じになるはずですね。

段落(p要素)

これから書くべき内容を書いた後、段落の前と後ろに<p>と</p>を記述して段落を明示してください。

<p>
あなたで、
<img src="http://www.parkcity.ne.jp/~chaichan/bin/gcnt.cgi?idname=chaichan.cnt&amp;cntgif=V&mode=1" alt="カウンタ">
人目の訪問です。
</p>
<p>
ご意見は
<a href="http://www.parkcity.ne.jp/~chaichan/bin/chaichan2.cgi?inzfg=1&amp;modfg=1">ゲストブック</a>へお願いします。
</p>

尚、<img 〜〜>は、画像をブラウザに表示します。<a href 〜〜>は、ハイパーリンク(クリックするとリンク先を表示)です。

最後の2行

ボディー(body要素)の終わりの明示とhtml文書(html要素)の終わりの明示です。おまじないのつづきと思ってください。

</body>
</html>
最重要ポイント!

タグがあるからマークアップするのではなく。あくまでも、「はじめにテキストありき!」です。

テキスト文書の内容を各要素に分別し、それを適切なタグでマークアップして、文書を構造化します。この段階では、見栄えは気にしないでください。

そして、文書構造の明示ができたら、次のステップ、見栄えのスタイルシートの出番です。

とにかく、最低限以下のタグの使い方を理解してください。これで、80%は凌げます。

そして...

◆ ウェブページ運用とウェブページ作成のアドバイス

ウェブページ運用のアドバイスです。

サーバ内のディレクトリーは、初めから階層構造にしましょう。 ホームディレクトリーには index.htm と .htaccessぐらいにして、後は、HTMLソース、CGIソース、画像(GIF)ファイル、データファイル毎に別ディレクトリーすることをお勧めします。

ウェブページ作成のアドバイスです。

ウェブページには大きく分けて以下の3つがあります。

  1. デザイン  − 壁紙、タイトル、レイアウト、カラー、アクセサリー等。
  2. テクニック− HTMLCSSCGIJavaScriptJavaアプレット、Dynamic HTML、プラグイン等。
  3. コンテンツ− ウェブページ内容のテーマについての情報と創作物(絵、写真、音楽、小説)の発表等。

この3つの要素をバランスよく配置して素敵なウェブページを作りましょう。

また、インターネットの基礎知識もおさえておきましょう。

ウェブページ作りは意外と疲れます。しかし、それにあまりある楽しみがたくさんあります。 また、ウェブページがきっかけでメール友達ができるのも楽しいものです。 めげないで頑張りましょう。

また、先ほども書きましたが、ウェブページ作りは意外と疲れますので、 キーボードぐらいはタッチタイピングでやりましょう。

◆ おわりに

私は、ウェブページを開設して2年以上経ちますが、ウェブページ作成に関して結果的にかなり遠回りをしてしまいました...。 どういう事かというと、初心者対象の本やサイトで解説している「誤ったHTML」の説明を素直に受け取り、実践したからです。

ですから、皆さんには、同じ轍を踏んで欲しくないのです。
本サイトも徐々に「誤ったHTML」から「正しいHTML」へ書き換えています。

では、何が「誤ったHTML」で、「正しいHTML」とは何か?
まずは、「ストリクトなHTMLの基礎講座」をお勧めします。

Home/Menu/HTML概説リファレンス