ホームページをつくってみたいな。でも、面倒そうだな。と思ってる人はけっこういるでしょう。ホームページ入門というページや書籍もけっこうありますが、入門のくせして余計なこといっぱい書いてあってわからん!というの多いかと思います。
ここでは本当の最低限しか書きません。ブラウザに”字”が出て、”絵”が出て、”リンク”ができるところまで。ホームページはとりあえずこれでOKなのです!必要なツールはメモ帳(エディター)だけ。さあ、あなたもつくってみてください。
1)とっかかり
ホームページのファイルはテキストファイルです。つまり普通の文章のファイル。これの拡張子を htm (あるいは html)にすれば、ホームページ(html)のファイルとコンピュータが認識してくれます。htmの拡張子がついていて、中身がホームページの書式になっていればもうできあがり。開発環境も特別なツールもいらないのです。htmlのファイルができたらそれをダブルクリックするだけでブラウザが起動します。
例えばこのページのファイルは hptute.htm という名前です。ブラウザのアドレスを表示してあるところにもその名前が見えていますね。
ファイルの中身はどうなっているかと言えば ブラウザのメニューの表示から"ソース"(ネスケならページのソース)というのを選べば見えます。ソースとは聞きなれない言葉かもしれませんがプログラムの中身のことです(語源はsource)。ブルドッグソースのことではありません(^^;; このようにブラウザに表示しているページなら中身(ソース)が見えてしまうのです。
ホームページをつくる一番の近道はこのように人のつくったページを見て真似することです。
見ているページのソースは自分のパソコンに保存することもできます。ブラウザのファイルメニューから、"名前をつけて保存"で自分のパソコンの好きな場所に保存できます。あとはメモ帳などでこのファイルを開いて、修正してやれば、自分のつくったページにすることができます。(注:画像のファイルはこの操作では保存できません)
2)タグとは?
ホームページを書く言語をHTML言語と言いますが、覚えればいいことはそんなに多くありません。
ソースを見て気がつくでしょうが "< >" で区切られた部分がたくさんあります。これが"タグ"と呼ばれるもので、いろんな命令を出している部分です。
タグには2種類あって、単独で機能するタグと、はさんだ間の文字に機能するタグがあります。
例えば<TITLE>タイトルです</TITLE>というタグがあります。これは<TITLE>と</TITLE>が対になっていて2つセットで機能します。"/"スラッシュがその挟む部分の終端を示しています。ちなみにこの<TITLE>タイトルです</TITLE>というタグは間にはさんだ文字がそのページの題名になります(ブラウザの左上に表示)。
単独で機能するタグの代表としては<BR>があります。これは改行の命令を出すタグで、このタグがあれば改行が行われます。
難しいですか?以下具体的にやってきますので、たぶん読んでいけばわかると思いますが。
3)基本書式
まず基本書式としてのヒナ型のタグがあります。これは html のファイルに必須で、これらのタグが無いと html と認識してくれません。逆に言えば このタグさえ書いてあればホームページなのです。
<HTML> <HEAD> <TITLE>ホームページのだいめい</TITLE> </HEAD> <BODY> 本文 </BODY> </HTML> |
ちなみにこのページを表示するとこんなになります。<BODY>
</BODY>ではさんだ間がホームページの本文でブラウザに表示することができます。試しにソースを見てください。間違いありませんよね?
このヒナ型はお約束なので、使ってください。
4)必要最小限なタグ
では、以下で最低限必要な本文に使うタグを紹介します。
<BR>
これは改行を示すタグで単独で使います。<BR>を書いた数だけ改行します。10コ書けば10回改行します。
<CENTER>真ん中</CENTER>
これは文字をセンタリングするタグで、間にはさんだ文字をセンタリングします。ちなみに右よせ左よせは以下です。
<DIV ALIGN="left">左よせ</DIV>
<DIV ALIGN="right">右よせ</DIV>
ここまでで字をページに出してすきな位置に表示できるようになりましたね。字を大きくしたり太くしたり色を変えたりするタグについてはここでは省略します。これはタグリファレンスを見てください。
<HTML> <HEAD> <TITLE>5回改行</TITLE> </HEAD> <BODY> <BR> <BR> <BR> <BR> <BR> 5回改行してます <CENTER>真ん中</CENTER><BR> <BR> <DIV ALIGN="right">右よせ</DIV> </BODY> </HTML> |
ハイパーリンク
ホームページで一番の特長と言ってもよいのがこのハイパーリンクです。タグではさんだ文字を下線をつけて青色にしてブラウザに表示します。そして" "(ダブルクォーテーションといいます。じつは ' 'シングルクォーテーションでくくっても、くくらないでもちゃんとリンクはりますが、くくるのが正式のルール。HTMLとはこのように融通性が高く、同じことが違う命令でできたりもします。)のところに書いたページに青文字をクリックすると飛ぶのです。
ソフトのページへハイパー
上記のリンクのソースはこんなです。
<A HREF="soft.htm">ソフトのページへハイパー</A>
""の間に書くのは他のサイトでもかまいません。以下のようにURLを書いてやれば、そのサイトのページまで一気にジャンプします。
とほほWWW入門
このリンクのソースはこんな。
<A HREF="http://tohoho.wakusei.ne.jp/">とほほWWW入門</A>
ちなみにこのページはリファレンスにとてもいいページです。私の作文がわからなかったらこっちを読んで(^^;
画像
字が出て、リンクがつくれればあとは図ですね。
上の絵を出してるソースはこれです。
<IMG SRC="hx_a.gif">
これで図が出ます。" "の間に表示したい図のファイル名を書きます。この図もセンタリング、右寄せ、左寄せ、ハイパーリンク等できますがここでは省略。図のファイルについては、こちらの”画像を入れよう”を見てください。もう少し詳しい説明が。
<HR>
これはよく使う区切り線です。
これで区切り線が入ります。太さや長さも変えられますがここでは省略。
<TABLE> </TABLE>
あと、覚えておいた方がいいタグとして表のタグがあります。
これは説明するとめんどいので、ここでは省略しますが、ある程度上達したら使ってください。難しいことはありません。
ここまでくればもう立派なホームページです。何枚かページをつくってリンクでつなげばもうインターネットに出したってはずかしくありません。
最後にもう一回最低限覚えたほうがいいタグ(ヒナ型除く)をまとめると
改行: | <BR> |
ハイパーリンク: | <A HREF="tobuze.htm">ハイパー</A> |
図: | <IMG SRC="zudesu.jpg" > |
この3つ!どうです。簡単でしょう?
あとちょっとだけ補足しておくことがありますので、以下それも読んでみてくだい。
5)トップページ
決まり事の一つとして、トップページのファイル名があります。トップページとはそのアドレスに誰かがページを見にきたときに一番最初に見えるページです。
index.htm あるいは
index.html
というファイル名にするのが慣例です。
6)パスについて
パスというのはコンピュータ関連の文章を見ていてたまに目にする単語でしょう。つまりこれは階層構造のことです。ちょっとニュアンスは違いますが、フォルダやディレクトリと同義語の言葉です。
ホームページも大きくなってくればこの階層構造で分野毎にフォルダを分けるのが普通です。画像はまとめて別のフォルダに置くなんてともよくやります。そうしないとごちゃ混ぜで整理がつかなくなるからです。パソコン使ったことある人ならこのイメージはわかりますよね?
ホームページはUNIXがベースとなっているものなので、このパスを"/"で区切ります。一方パソコンの世界では"\"ですよね。これは同じ意味です。昔からの慣例で別の記号になっていますが。
何言ってるかわからんって?そういう人はここは読み飛ばしてください(^^;
7)タグ入力がめんどうなあなたに!
実際にホームページつくってみてどうですか?タグをいちいち手で入力するのが面倒であることに気がつくことでしょう。そういうあなたのために、HTMLタグエディターというものが存在します。私もこれを愛用していますが、便利ですよ。これを使えばタグをボタンで挿入してくれます。ホームページつくる時間も大幅に短縮できるでしょう。ちなみに私が使ってるのはこれ。他にもフリーのタグエディターたくさん出ていますから、窓の杜とかVectorなどのオンラインソフトのダウンロードサイトを見てお好きなのを使ってみてください。かえって市販のホームページエディタより使い易いと私は思います。
ホームページの作成の基本は既にあるものを修正して違うページにする作業です。ある程度定型の自分のヒナ型が決まってしまえば、あとは画像や文字を差しかえるぐらいのもので、タグなんてほとんど覚える必要がありません。
さて、そろそろしめようかと思いますが参考になりましたでしょうか?なんだかわからんですか(^^;そういうひとは別の入門ページを見てください。
ホームページをつくれるようになったら、ホームページづくりのコツも見てやってください。
ホームページがつくれるようになってもインターネットへの出し方がわからない!という人はホームページをインターネットに出すにはを見てください。
09 MAR 2000 wrote