クリックで懸賞やお小遣い: ノウハウ習得でインカム増やそう! ネット収入への道に踏み出しませんか?
ホームページの作成 〜原稿作成からHTMLまで〜

HPを作る場合、まず最初にしなければならないのは、テーマに合わせた作成方針の決定と、それに沿ったコンテンツ(中味)の収集・作成です。

作成方針と云うと何か堅苦しいですが、例えば「解説を中心にする」、「日記風にする」、「広告チラシ風にする」、「リンク集やデータ提供を中心にする」と云ったようなことです。
すぐに思い浮かばない場合には、HPの目的、どんな層の読者がターゲットか?などを頭の片隅に止めながら、ネットサーフィンをして見たら良いかも知れません。

これを決めたうえで、HPに掲載したい内容をリストアップし、本文、補足/解説、データ、画像などに分けて、まずは書きたいことを書きなぐって見て下さい。
書いているうちに、段々と自分のHPのイメージが出来てくると思います。

なお、書きたい内容についての考えを整理する方法としては、構成表(目次)を作るやり方やKJ法などがありますが、HPを作るのにはスケッチ・ノート法と呼ばれている方法が一番向いていると思います。

 ※スケッチ・ノート法
書きたい内容を、短い文または句(スケッチ・ノート)にまとめてテキストファイルなどに書き貯め、どういう順序に並べれば解り易い記述になるかを検討する方法。
構成表を作るやり方が項目主体なのに対して、この方法はパラグラフ(段落)主体のまとめ方になります。

この辺の作業は、本や雑誌を作るのと同じですから、参考データの収集などを含めて結構時間が掛かります。 あまり焦らずに、お小遣い系のサイト巡りでもしながら、充分に時間を掛けて中味の濃いものにして行って下さい。(仕事の片手間だと、2〜3ヶ月は掛かると思います)
HPを作っても、誰も見てくれないようなものだと骨折り損だし、哀しくなりますから。б(TεT;)

HP全体構成の枠決め
HPに載せるコンテンツ原稿がある程度貯まってきたら、次はHP全体の構成(サイトマップ)と段組(ページ上のレイアウト)を決めましょう。
細かいところはあとで修正出来るので、おおまかな枠組みだけでOKです。
気に入ったHPを参考に、構想を練って下さい。 勿論、このHPを参考にしても・・・( ̄▽ ̄;A

それから、この辺のタイミングで、登録する[ホームページスペース]をどこにするか、ある程度まで絞った方がやり易いです。
特に、無料のホームページスペースを利用する場合には、以下のような項目について事前に調べておいて下さい。 これが適当だと、HP作成の最後の段階で修正作業が発生します。

広告スペースの有無、大きさ/形態、表示場所
無料ホームページスペースを使う場合の一番の制約事項です。
HPのレイアウトを考える時に、これを押さえておかないとイメージが固めにくいし、場合によっては大幅な手直しが必要になったりします。

ディレクトリ構成、ディレクトリ名などの自由度
無料ホームページスペースでは、勝手にディレクトリ構成を決められないところがあります。
また、指定されたディレクトリに全部のファイルを格納するところもあるので、これを調べたうえで、HPコンテンツを作成する時に設定する自分のPC上でのHTMLファイル格納用のディレクトリ構成を決めて下さい。
(後々の更新作業を考えると、カテゴリ毎にディレクトリを分けたくなりますが・・・)

CGI(Common Gateway Interface)の利用可否
CGIの利用が不可の場合には、フリーソフトの掲示板などが使えません。
別途、レンタルの掲示板を準備する必要がありますが、無料のレンタル掲示板だと、やはり広告が表示されます。

あと、独自のドメイン名が持ちたい(独自ドメイン名で登録出来るホームページスペース)場合には、HPが作成出来るメドが立ち次第、出来るだけ早めに登録して下さい。  登録商標と同じで、ドメイン名は早いもの勝ちです。
ドメイン名の取得可否の確認や登録は、お名前.comなどのドメイン取得サイトで出来ます。
ジュチは、ホームページスペースを借りたロリポップでやっているムームードメインでドメインを取得しました。
・・・1年で770円+振込み手数料; 多分一番安い (^ ε ^)o

HPコンテンツ(HTMLファイル)の作成
ここまで準備出来たら、いよいよHTMLによるHPコンテンツの作成開始です。
[HP作成支援ツール]やテキスト・エディタなどによって、適当なページ単位毎にHTMLファイルを作ることになります。
ツールの具体的な使い方や、HP(HTMLファイル)を作る方法などについては、それぞれの解説書やHTMLを解説した専門のサイトを参考にして下さい。 申しわけないですが、Webデザインや細かいテクニックを含めて、ジュチ@管理人ではまだまだ力不足です。m(-_-。)m

なお、以下のことを覚えておくと、全体を理解し易いかと思います

HTMLの基本は「タグ付け」
「タグ付け」とは、例えば、文章の内容を、大見出し(H1)、小見出し(H2)、段落(P)リスト(Li)引用(Q)などの構成要素に分類し、それぞれの要素毎に該当する「しるし(タグ)」を付けることを云います。
つまり、作成したコンテンツ原稿を、HTMLで規定された要素に分類して、コンピュータに理解させるための「タグ」を付け、タグを付けた要素に対して、大きさ・色・書体などの「属性」を指定するのが基本です。
なので、リファレンスブックさえあれば、すぐに理解出来ると思います。

段組(レイアウト)は「TABLEタグ」で行なうのが簡単
「タイトル」、「ナビゲーションバー」、「左側枠」、「真ん中(本文)」、「右側枠}などの段組は、TABLEタグで行なえます。 特に、「列」のレイアウトは、TABLEタグを使わないと難しいですが、最初はそれが解りにくいと思います。
HTMLの規格団体であるW3Cが、TABLEEタグによる段組は好ましくない(スタイルシートで行なうべき)としていることもあって、この説明が無いのかも知れませんが、TABLEタグの方が使い易い(ツールのサポート有り)し、大抵のサイトではこの方法で段組しています。

良く似た方法として、FRAMEタグを使う方法がありますが、アクセスアップの点でのデメリットがあり、使っているHPはわりと少ないです。

細かい見栄えの調整はCSS(Cascading Style Sheets)で
HTMLだけでもHPは作れますが、HTMLは文章の構造を示すための言語であり、その構造に一番適切と思われる表記(例えば見出しは文字を大きくするなど)にはなりますが、汎用的すぎるため、おおまかな見栄えの調整はともかくとして、きめ細かな見栄えの調性には向きません。

これを補うものがスタイルシートであり、その代表的なものがCSSです。 HTMLでラフにHPを作ったあと、仕上げにCSSを使うのが一般的な使い方なので、必要に応じて覚えて行けば良いと思います。
なお、ブラウザによって、サポートの範囲に差があるうえ、バグレベルの仕様差異があるので HTMLだけで済ませられれば、無理にCSSを使う必要は無いです。 (でも、ヤッパリ使っちゃうと思います^^; スタイルシートを外部ファイルで定義しておくと、そこを修正するだけで、全体の見栄えを変えることが出来るので便利ですから)