
2008年10月03日
ホームページの作り方
こんにちは、はしです。
前回からだいぶあいてしまいました。
マイペースで進んでいきますのが
おつきあいのほど
よろしくお願いします。
さて、前回は、もっとも簡単にホームページに
してしまう方法を書きましたが
実は、これは正規な表現ではないのです。
これでも、表示できないことはないのですが、
(むしろ表示できてしまうことがおかしいので)
ホームページを作るとき
いくつか決まり事があります。
それは、どのページにも共通です。
その前に、これを知ってもらいたいです。
パソコンはプログラムで動いています。
「えっ?」
と驚かれる方もいるかもしれませんが
パソコンというのは基本的に命令しないと
何もしてくれません。
あなたのパソコンが何もしないのに
音が鳴り出すとか、走り出したら
奇妙でしょう?
「命令なんてしてないよ」
と思われるかもしれませんが
よーく一つ一つ、細かく見てみると
プログラムが見え隠れします。
まず電源を押さないといけません。
これは、当たり前で、どんな家電も電源を入れないと
電気がとおりませんので
これはプログラムではありません。
問題はその次なんです。
電源ボタンを押してから
パソコンが使えるようになるまで
えらい時間がかかります。
「なんで、こんな遅いんだろう?」と
思ったことはないですか?
実は、パソコンが簡単に使えるようになる為の
準備をしているのです。
パソコンの中に、書き込まれているプログラムを
読んでいるのです。
私達にわからないように
スタートボタンを押したら、メニューを開きなさい、、とか
この場所に時計を表示しなさいとか、、
音を鳴らしなさいとか。
いまでこそ、ウインドウズなんて、マウスをかちかちしたり
ダブルクリックしたりして、いろんなゲームを楽しんだり
ワード、エクセルができるようになっていますが
一昔前は、みんなプログラムを手書きしていたのです。
for i=1 to 5
print "aaaaa"
next i
みたいな、(わはは)
まあ、その名残みたいなものが
ホームページかなあと思ったりしますが
ホームページは、htmlという、(ところでこれプログラムなのかなあ)
命令言語で表します。
はまぞーさんのブログもhtmlで作られています。
yahooジャパンも、グーグルも、みんなそうです。
(厳密にいえば、ちょっと違うのですが、ここでは大目にみてください)
あなたが、インターネットエクスプローラーを開いて
お目当てのページを見たときに、
ホームページとして見えているのは
このhtmlというプログラム言語を使って
命令の組み合わせをしているからなのです。
それは、ここに画像を配置しなさいとか。
ここにボタンを表示して、ここを押したら、新しいページを表示しなさい。
とか、そういうプログラムの集まりで
そう見えているだけなのです。
だから、私達がホームページをつくりたいたときに
パソコンに、「これはホームページの文書だよ」って
教えてあげないといけないわけです。
その基本形は
<html>~ </html>
であらわします。
この<html>ですが<>を
タグといいます。
なんで、タグというのかはよくわかりません。
もうちょっと、細かくすると
<html>
<head>~</head>
<body>~</body>
</html>
だいたい、これで、htmlの文章らしくなったと思います。
で、これが、複雑になって、あと2、3の記号が付け加わったりしますが
基本形はこれです。
そして、前回の「こんにちは」ですが
どこに入れるかというと
<body>~<body>の間に入れます。
<html>
<head>
</head>
<body>
こんにちは
</body>
</html>
これを前回作成した
konnnitiha.htmlに貼り付けます。
どのように貼り付けるかといいますと

をダブルクリックして

を選びます。
すると
konnnitiha.htmlがメモ帳で開くと思いますが
この”こんにちは”を
編集→すべて選択
編集→削除
をします。
何もない空白の状態になったら
<html>
<head>
</head>
<body>
こんにちは
</body>
</html>
※:注
上の<>は、ブログ用にかなで打ってあるので
そのまま使うときは,
お手数ですが,半角に直してください。
をマウスでドラッグして、反転させて
コピーをします。
そして、先ほどの空白の部分に
編集→貼り付け を
押して

上書き保存をします。
そして、konnnitiha.htmlを
ダブルクリックしてください。
見た目には何も変わっていないですが
ブラウザに
「こんにちは」
と表示されていると思います。
これが、基本のホームページの作り方です。
ホームページビルダーやドリームウェーバーなどの
ソフトをお持ちの方は、もっと簡単につくることができますが
そういうソフトを使わなくても
メモ帳で十分、それも、高度なページまで作れちゃうのです。
パソコンに分かるような命令を、順番どおりに
与えてあげるだけなので
家でいえば設計図みたいなものでしょうか。
設計図通りに組み立てれば、どんな複雑なビルディングも
完成してしまう。
その複雑なものを作り上げるには基礎をしらないといけない。
というわけで、もっとも簡単な説明を順番に追っていきたいと思います。
あっ、前回の色を変える方法ですが。
<FONT color=#000000>文字</FONT>
という記号を使います。
ためしに
<FONT color=#ff0000>こんにちは</FONT>
としてみます。
これを、先ほどの
「こんにちは」
に加えてみましょう。

こんな感じですね。
加えたら、上書き保存をして
メモ帳を閉じて
「konnnitiha.html」をダブルクリックします。
・
・
・
・
どうなりましたか?
先ほどの味気ない「こんにちは」
が燃えるような赤の
「こんにちは」
に変わったかと思います。
余談ですが、
僕が中学生のころ、マイコンというものがはやりまして
その当時は白黒のディスプレーが主流でしたが
カラーのパソコンが始めて出まして
この色がえで結構遊んだ記憶があります。
おっと、話を元に戻しまして
今は、赤でしたが、この#のあとの6文字
これをかえることで、様々な色を出すことができます。
#000000→黒
#ffffff→白
#0000ff→青
一例ですが、けっこう複雑な色も、この組み合わせでできたりします。
面倒くさい人は、<FONT color=blue>とかでも
できるので
いろいろ試して見るのもおもしろいですよ。
「こんにちは」だけじゃなくて
昔昔あるところにおじいさんとおばあさんがおりました。
おじいさんは川へ洗濯にいき
おばあさんは山へ芝刈りに行きました。
みたいな長文でもオーケーですので
いろいろやってみてください。
前回からだいぶあいてしまいました。
マイペースで進んでいきますのが
おつきあいのほど
よろしくお願いします。
さて、前回は、もっとも簡単にホームページに
してしまう方法を書きましたが
実は、これは正規な表現ではないのです。
これでも、表示できないことはないのですが、
(むしろ表示できてしまうことがおかしいので)
ホームページを作るとき
いくつか決まり事があります。
それは、どのページにも共通です。
その前に、これを知ってもらいたいです。
パソコンはプログラムで動いています。
「えっ?」
と驚かれる方もいるかもしれませんが
パソコンというのは基本的に命令しないと
何もしてくれません。
あなたのパソコンが何もしないのに
音が鳴り出すとか、走り出したら
奇妙でしょう?
「命令なんてしてないよ」
と思われるかもしれませんが
よーく一つ一つ、細かく見てみると
プログラムが見え隠れします。
まず電源を押さないといけません。
これは、当たり前で、どんな家電も電源を入れないと
電気がとおりませんので
これはプログラムではありません。
問題はその次なんです。
電源ボタンを押してから
パソコンが使えるようになるまで
えらい時間がかかります。
「なんで、こんな遅いんだろう?」と
思ったことはないですか?
実は、パソコンが簡単に使えるようになる為の
準備をしているのです。
パソコンの中に、書き込まれているプログラムを
読んでいるのです。
私達にわからないように
スタートボタンを押したら、メニューを開きなさい、、とか
この場所に時計を表示しなさいとか、、
音を鳴らしなさいとか。
いまでこそ、ウインドウズなんて、マウスをかちかちしたり
ダブルクリックしたりして、いろんなゲームを楽しんだり
ワード、エクセルができるようになっていますが
一昔前は、みんなプログラムを手書きしていたのです。
for i=1 to 5
print "aaaaa"
next i
みたいな、(わはは)
まあ、その名残みたいなものが
ホームページかなあと思ったりしますが
ホームページは、htmlという、(ところでこれプログラムなのかなあ)
命令言語で表します。
はまぞーさんのブログもhtmlで作られています。
yahooジャパンも、グーグルも、みんなそうです。
(厳密にいえば、ちょっと違うのですが、ここでは大目にみてください)
あなたが、インターネットエクスプローラーを開いて
お目当てのページを見たときに、
ホームページとして見えているのは
このhtmlというプログラム言語を使って
命令の組み合わせをしているからなのです。
それは、ここに画像を配置しなさいとか。
ここにボタンを表示して、ここを押したら、新しいページを表示しなさい。
とか、そういうプログラムの集まりで
そう見えているだけなのです。
だから、私達がホームページをつくりたいたときに
パソコンに、「これはホームページの文書だよ」って
教えてあげないといけないわけです。
その基本形は
<html>~ </html>
であらわします。
この<html>ですが<>を
タグといいます。
なんで、タグというのかはよくわかりません。
もうちょっと、細かくすると
<html>
<head>~</head>
<body>~</body>
</html>
だいたい、これで、htmlの文章らしくなったと思います。
で、これが、複雑になって、あと2、3の記号が付け加わったりしますが
基本形はこれです。
そして、前回の「こんにちは」ですが
どこに入れるかというと
<body>~<body>の間に入れます。
<html>
<head>
</head>
<body>
こんにちは
</body>
</html>
これを前回作成した
konnnitiha.htmlに貼り付けます。
どのように貼り付けるかといいますと

をダブルクリックして

を選びます。
すると
konnnitiha.htmlがメモ帳で開くと思いますが
この”こんにちは”を
編集→すべて選択
編集→削除
をします。
何もない空白の状態になったら
<html>
<head>
</head>
<body>
こんにちは
</body>
</html>
※:注
上の<>は、ブログ用にかなで打ってあるので
そのまま使うときは,
お手数ですが,半角に直してください。
をマウスでドラッグして、反転させて
コピーをします。
そして、先ほどの空白の部分に
編集→貼り付け を
押して

上書き保存をします。
そして、konnnitiha.htmlを
ダブルクリックしてください。
見た目には何も変わっていないですが
ブラウザに
「こんにちは」
と表示されていると思います。
これが、基本のホームページの作り方です。
ホームページビルダーやドリームウェーバーなどの
ソフトをお持ちの方は、もっと簡単につくることができますが
そういうソフトを使わなくても
メモ帳で十分、それも、高度なページまで作れちゃうのです。
パソコンに分かるような命令を、順番どおりに
与えてあげるだけなので
家でいえば設計図みたいなものでしょうか。
設計図通りに組み立てれば、どんな複雑なビルディングも
完成してしまう。
その複雑なものを作り上げるには基礎をしらないといけない。
というわけで、もっとも簡単な説明を順番に追っていきたいと思います。
あっ、前回の色を変える方法ですが。
<FONT color=#000000>文字</FONT>
という記号を使います。
ためしに
<FONT color=#ff0000>こんにちは</FONT>
としてみます。
これを、先ほどの
「こんにちは」
に加えてみましょう。

こんな感じですね。
加えたら、上書き保存をして
メモ帳を閉じて
「konnnitiha.html」をダブルクリックします。
・
・
・
・
どうなりましたか?
先ほどの味気ない「こんにちは」
が燃えるような赤の
「こんにちは」
に変わったかと思います。
余談ですが、
僕が中学生のころ、マイコンというものがはやりまして
その当時は白黒のディスプレーが主流でしたが
カラーのパソコンが始めて出まして
この色がえで結構遊んだ記憶があります。
おっと、話を元に戻しまして
今は、赤でしたが、この#のあとの6文字
これをかえることで、様々な色を出すことができます。
#000000→黒
#ffffff→白
#0000ff→青
一例ですが、けっこう複雑な色も、この組み合わせでできたりします。
面倒くさい人は、<FONT color=blue>とかでも
できるので
いろいろ試して見るのもおもしろいですよ。
「こんにちは」だけじゃなくて
昔昔あるところにおじいさんとおばあさんがおりました。
おじいさんは川へ洗濯にいき
おばあさんは山へ芝刈りに行きました。
みたいな長文でもオーケーですので
いろいろやってみてください。
Posted by はし@ウェブ屋さん at 17:04│Comments(0)