TOP BACK NEXT

Cool Down Site
-目的のないホームページのために-


ホームページの基礎

とっとと作りましょう

 画像の扱い方が基礎編に載っていることが多いのですが、ホームページの基本、王道は、このページのレイアウト。画なし、JAVAなし、音なしが基本中の基本、基本から入り、基本へ戻るのが王道。

 世の中で一番好まれるレイアウトをHTMLの発案者は考えています。彼らはプロの中のプロ、素人の私たちよりも、多くのページを見ています。そのプロフェッショナルが標準で用意したHTMLを見て、作ってみてください。

 「新しいプログラミング言語を習得するための唯一の方法は、その言語でプログラムを書くことである」という言葉を読んだことがあります。HTMLもまた同じです。とっとと作ってみましょう。
 下書きを書けとか、おおざっぱな設計をしろとか小うるさいマニュアルも多いのですが、気に入らなきゃ作り直せばすむこと、自分でそうしたいと思うまで、そんなことをする必要はありません。最初からまとまったサイトを作ろうなんて贅沢です。それは、いくつもサイトを作り慣れていて最初から全体のイメージを持つことができる目的のあるホームページにしか当てはまりません。少なくとも私は設計はしたことはありません。試行錯誤派です(だからこんなサイトなんだ)。


とりあえずHTMLの書き方

 ここは、作成方法ではなく、作成内容を云々するところですので、詳しいことは別な方のホームページを参考にしてください

 頭からタイプするのも面倒なのでこのページのソースでも改造してください。IEであれば右クリックで「ソースの表示」とかでてきますのでそれをローカルに保存して修正するのが簡単です。

 その辺の専用エディタやツールを使えば楽ですので、そうして下さい。ホームページビルダーとかは30日間の試用版がダウンロードできますよ。でも、ビルダーのどこでも配置モードは使わない方が無難。あとで慣れてからが大変。HTMLの中がとっても複雑に作られてしまいます。まあ、最初から作り直すハメになります。それでも、一度は試してみるのも経験ですけれど。

 HTMLというのは、ホームページをどう表示するかをコンピューターに教える言語です。コンピューターもブラウザも日本語を実は知らないのでコンピュータにわかる言葉が必要なのです。ファイルの拡張子がHTML(HTM)のファイルがHTMLで作られたホームページです。

まず、このファイルを読み込んだコンピュータがこのファイルのこの部分がHTMLだよと教える言葉(タグと呼びます)を書きます。
<HTML>・・・・</HTML>
この・・・・がホームページの内容になります。大抵のタグは、<????>・・・・</????>のようにタグの影響する範囲を決定しています。この間が長い場合は、見やすいように少し、内容を右にずらす場合があります。これをインデントと呼びます。また、タグの大文字と小文字は気にしなくてもかまいません。見やすい方で行ってください。

HTMLにはヘッダ部とボディ部があります。ヘッダにページの性質を書き、ボディに内容を書きます。

以下で、このページの作り方の説明をしてみましょう。これが王道です。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- コメントはこのように書きます。ちなみに上の行はたぶん、大抵のページでは、なくてもかまいません -->
<html>

<head>

<!-- ここからヘッダー部です。基本はTITLEタグだけで結構です。以下のMETAタグは検索ページ等が使いますので内容には直接には影響しません -->

<meta http-equiv="Content-Type" content="text/html; charset=shift_jis"><!-- 漢字コード等の説明、これ以外の場合は説明しなくても本人がわかっているでしょう -->
<meta http-equiv="Content-Language" content="ja">
<!-- 日本語のページだよ -->
<title>Cool Down Site 王道 ホームページの基礎</title>

<!-- タイトルの指定です。ブックマーク(お気に入り)や検索ページのタイトルにもなりますので必ず指定しましょう -->

<STYLE TYPE="text/css"><!--

 body{ line-height:200% } --></STYLE>

<!-- 標準だと行間がないので行間を指定します。日本語は画数が多いので標準では読みにくくなります -->

</head>

<body bgcolor="#B8F3C8">

<!-- ここからボディだよ bgcolorで背景色を指定しています #の後ろ6桁に0〜Fまでの文字で指定できます。好きな色を見つけてサイトカラーにしましょう -->

<p>

<!-- <P>〜</P>までが一つの段落になります -->

<a href="../../index.html">[ TOP INDEX ]</a>

<!-- リンクの指定です。インデックスページ、次ページ、前ページを頭でリンクするのが王道です。

ページの内容が長い場合は最後でも同じリンクをします。ここのリンク先は大文字と小文字を区別します。

..は一つ上のディレクトリ、/はフォルダ名のあとに付けます。 -->

</p>

 

<h1>Cool Down Site-王道のホームページの例</h1>

<!-- <H1>が標準の見出しの大きさになります -->

<p>HTMLを見てみましょう。</p>

<hr> <!-- 水平線を書きます -->

<h2>HTMLの書き方</h2>

<!-- <H2>が標準の副見出しの大きさになります -->

<p>まず、このファイルを読み込んだコンピュータがこのファイルのこの部分がHTMLだよと教える言葉(タグと呼びます)を書きます。

<p>HTMLにはヘッダ部とボディ部があります。<br>

<!-- <BR>が改行です -->

ヘッダにページの性質を書き、ボディに内容を書きます。</p>

</body>

</html>


 ホームページ用のフォルダは作ってますね。そこにindex.htmlファイル作りましたか。エディタによっては、index.htmというようにlをつけてくれないものがありますので、その場合にはファイル名を変更してhtmlに変更しておいた方がよいでしょう。デフォルトのインデックスファイル名にindex.htmが入っていないサーバーがあるようです(ファイル名を省略したときにフォルダの中が展開されたり、見つからなかったりします、詳しくはプロバイダ等のサーバー提供者の説明を読め)。またファイル名やフォルダは全て小文字にした方が無難です。混乱の元ですので、統一して小文字にしましょう(このサイトはそれで改築などが不便)。

 では、とっとと、フォルダも作りましょう。ホームページフォルダの一番上の場所にはindex.htmlだけにしてください。理由は特にありませんが、フォルダごとにコンテンツを作成しファイルを管理するのが私の好みですので、分かりやすいし。

 フォルダの名称は気にしなくてよいですから、自分でわかりやすい名前にしてください。日記コンテンツを作るなら、nikki、ぐらいにしましょう(日本人ならローマ字だ)。そこにまた、index.htmlファイルを作成します。index.htmlはフォルダごとに作ってください。ファイル名、フォルダ名に全角文字はやめてくださいね(全角はサーバーから読めなっかたりする)。

以上、簡単ではありますが説明は終わらせていただきます。

Cool Down Site ホームページの基礎の例

ついでに目的のないホームページを目指す王道を歩むものには無縁のページを紹介しておきます。

    「ホームページ」のウソ


TOP BACK NEXT