ネットで稼ぐ! パソコンでサイドジョブ!

検索エンジン登録代行/上位表示でアクセスアップ!
検索エンジン登録代行・検索エンジン上位表示でアクセスアップ! 1980円〜!





ネットで稼ぐ! パソコンでサイドジョブ!中級編ホームページの基礎



ホームページの基礎


 ホームページはパソコンがあれば簡単に作れます。 基礎からわかるように説明していきたいと思います。 ホームページは「HTML」(HyperText Markup Language)という言語で作られています。

01. プログラムを理解しよう 02. HTMLタグの基本
03. 試しに一回作ってみよう 04. タグの意味を理解しよう
05. トップページは「index.html」で! 06. 無理なら作成ソフトを使用しよう


● プログラムを理解しよう

 「HTML」はタグと呼ばれる < > で仕切られる書式で命令をしています。 インターネットでホームページを見ていると分かりませんが、改行するにも色を付けるにも「HTML」のプログラム にそって作らなければなりません。 インターネット上で情報を公開・閲覧するには、このHTMLという言語が必要なのです。 例えば次のような表示をする場合は

パソコンでサイドジョブ!
ホームページの基礎

「HTML」言語では、こうなっています。

<CENTER>
パソコンでサイドジョブ!
<BR>
<FONT COLOR="BLUE">
ホームページの基礎
</FONT>
</CENTER>


 文字は文字として認識しますが、それ以外の表や図、色などは全てタグで指定してあげないといけません。 タグには「開始」と「終了」があり、上記の例でいくと <CENTER> が開始で </CENTER> が終了です。 終了タグは頭にスラッシュ(/)が付きます。 (ちなみに <CENTER> は中央揃えの意味のタグです) つまり、<CENTER> 〜 </CENTER> で囲った間は全て中央揃えになる訳です。

↑ このページのトップへもどる

● HTMLタグの基本

HTML言語は全て <HTML> 〜 </HTML> で囲んだ中で作られます。
ホームページの基本的な構造は次のようになっています。

<HTML>
<HEAD>
<TITLE>
ここにホームページのタイトルを入れます。
</TITLE>
</HEAD>
<BODY>
ここに本文(ホームページ)を書いていきます。
</BODY>
</HTML>

<HTML>〜</HTML>は、その文書がHTML文書であることを指定するもので、ブラウザ(インタネットエクスプローラー等)に反映されるようになります。
<HEAD>〜</HEAD>は、その文書の基本情報を記述します。 このタグの間には、<TITLE>〜</TITLE>という、その文書のタイトルを指定するタグを記述します。
<BODY>〜</BODY>は、その文書をブラウザで開いたときに、実際に画面に表示される内容を記述するスペースです。

↑ このページのトップへもどる

● 試しに一回作ってみよう

このあたりで、流れを覚える為に一回自分で作ってみましょう。

まずはテキストエディターを用意する。
 ウィンドウズには標準でテキストドキュメント(メモ帳)が付いています。
ディスプレイ上の何もないところで右クリック→[新規作成]→[テキストドキュメント]
または、[スタート]→[すべてのプログラム]→[アクセサリ]→[メモ帳]
で起動して下さい。

次にHTML言語を書き込んでみる。
 とりあえず、上記の「HTMLタグの基本」のソース(HTML言語)をコピーして貼り付けてみましょう。 そして、<TITLE>〜</TITLE> の間に好きなタイトルを入力して下さい。 
そうしたら次は <BODY>〜</BODY> の間に上記の「プログラムを理解しよう」のソースをコピーして貼り付けてみましょう。 

HTML形式で保存する。
 ここまでできたら、ツールバーから[ファイル]→[名前を付けて保存]で、保存する場所とファイル名、ファイルの種類を選択します。 保存場所はとりあえず、デスクトップに、 ファイル名は 練習.html に、 ファイルの種類は[すべてのファイル]を選択しましょう。  ところで、.html  (ドットエッチティーエムエル)とはいったい何でしょう?

 これは、拡張子といって、パソコン上のデータは全てこの拡張子が付いています。 ウィンドウズでは標準で見えないように設定されていますが、データを右クリックして、プロパティを選択するとわかります。 例えば、メモ帳なら .txt ワードデータなら .doc エクセルデータなら .xls です。 メモ帳でHTMLを入力したら、必ず名前の後に .html  を付けるようにしましょう。   → 関連情報:拡張子とは

ブラウザで表示してみる。
アイコン
 保存したら、右の様なアイコンができたとおもいます。 これをダブルクリックしたら、ブラウザ(インターネットエクスプローラー)が立ち上がります。  ちゃんと表示されていますか? さらにここからHTML言語の編集もできます。 表示されたブラウザ上で右クリックし[ソースの表示]を選択します。 そ うすると先ほど入力したHTML言語が表示されます。 あとは、このHTML言語を自分で好きなように編集し、上書き保存します。 そして、ブラウザに戻 り、ツールバーから[更新]をクリックすると編集した内容に更新されます。 いかがでしょう? これでだいたいの流れが分かりましたでしょうか。
↑ このページのトップへもどる


● タグの意味を理解しよう

 だいぶ流れが掴めてきたと思いますのでここからは、よく使用する基本的なタグの説明をしたいと思います。 タグの入力は小文字でも大文字でも構いませんが、必ず半角で入力して下さい。

タグ意味
<TITLE> </TITLE>ページのタイトル
<BODY BGCOLOR="***"> </BODY>背景の色を指定 (***はRED,BLUE,YELLOW等のほか、6桁のカラーコードも可)  → カラーコード表
<BODY BACKGROUND="***"> </BODY>背景に画像を使う (***は画像の保存場所を指定)
<BR>改行する(単独タグなので終了はいりません)
<FONT SIZE="1〜7"> </FONT>文字の大きさを指定 (1から順に大きくなる)
<FONT COLOR="***"> </FONT>文字の色を指定 (***はRED,BLUE,YELLOW等のほか、6桁のカラーコードも可) → カラーコード表
<B> </B>文字を強調 (太字)
<I> </I>文字を強調 (斜体文字)
<U> </U>文字を強調 (下線)
<CENTER> </CENTER>中央揃え
<HR SIZE="1〜7" COLOR="***">横線 (太さ、色など指定できます。サイズとカラーは省略しても可 単独タグなので終了はいりません)
<IMG SRC="***">画像を表示 (***は画像の保存場所を指定)
単独タグなので終了はいりません
<A HREF="***"> </A>リンクする (***はURLを指定)
<TABLE> <TR> <TD>
</TD> </TR> </TABLE>
表を作る (<TABLE>は全体の枠、<TR>は行、<TD>は列を指す)

 これだけあれば、一通りホームページが作れます。 当ホームページもほとんど、上記のタグだけで作られています。(ソースをご覧になって見て下さい) もっと詳しく知りたい方は、 みんなのタグ辞書 さんや HTMLタグで遊ぼう さんが詳しく説明していますよ。

↑ このページのトップへもどる


● トップページは「index.html」で!

 ホームページの顔といえばトップページです。 トップページの名前は「index.html」が一般的です。 この名前にしておくとサーバー側でトップページと判断します。(例外もあり) それ以外のファイルは自分の好きな名前で大丈夫ですが、必ず半角英数字にしておかなければいけません。 HTMLを作成するコツはマメに保存して、ブラウザで確認しながら作るという事です。 それとトップページ以外はフォルダに分けておいたほうが管理しやすいです。 
階層の概念

 このように分けて作る際に気を付ける事は、階層の概念があります。 例えば、トップページ(index.html)からAのフォルダのa.htmlをリンクする場合のHTMLタグは
<A HREF="A/a.html"> となります。 また、Aのフォルダの a.html にBのフォルダの画像 a.jpg を貼り付ける場合は <IMG SRC="../B/a.jpg"> となります。 フォルダを介する場合はスラッシュ(/)を入れます。 ../(ドットドットスラッシュ)は階層をまたぐ際に使用します。 ややこしいですが、フォルダを介す場合は ../ を入れれば良いと覚えておけば良いと思います(^^)。 テキトーですいません(笑)
↑ このページのトップへもどる


● 無理なら作成ソフトを使用しよう

 ここまでで、「うーん・・自分には難しいなぁ・・」と思ったら、市販のホームページ作成ソフトを使用するのも手です。 有名なソフトでは ホームページビルダー や ホームページNINJA 等があります。 私はどちらも使ったことがないので詳細は分かりませんが(汗)、多くの人が「使いやすい」「手放せない」「簡単!」と評価していますので、自信の無い方や面倒臭いと思う方は利用してみてはいかがでしょうか?



次は「 ホームページスペースを選ぼう 」 へ行きましょう →





このページのトップへ | HOME | 準備編 | 初級編 | 中級編 | 上級編 | 番外編


copyright 2005 -ネットで稼ぐ! パソコンでサイドジョブ!- all rights reserved



inserted by FC2 system