■第三段階・ファイルの転送(FFFTP)つかい方↓

■ホームページの作り方・とにかくやってみよう!  背景色の設定・第一段階終了

☆このページでは、いよいよホームページ作っていきます。初めてのホームページにしてはちょっと難しいかも分かりませんが がんばって、「こうなるもんだ」と思って下さい。 今から 作るホームページのレイアウト(デザイン)は 一番利用されているデザインだと思います。この先いろいろと利用できる事をおりまぜていますので楽しみにしていただけたらと思います。


■最終的には好みもありますが仕組みを勉強という事で、 こんなホームページを作ってみようと思います。

■ホームページ作成!それでは はじめましょう。。。

■ソースも最小構成で書いていきます。また<html>の上に書くDTDがありますが、 これはも割愛させて頂きます。HTMLファイル hp.htmlをメモ帳で開いてください。このソースより作っていきます。※下の【メモ帳を開く】は前のページの【書き変え】のページの復習です。

■メモ帳を開く
メモ帳のファイルメニューから開くをクリックしてhp.htmlを探してダブルクリックしてソースを開いてください。下のコードです。

【HTML-2】

<html>
<head>
<title>初めてのホームページ作成</title>
</head>
<body>
これが ホームページです。。。
</body>
</html>

【ソースの解説】
矢印 まず、<html>から一番下の</html>までが 検索エンジンに対して、「この書類はhtmlでかかれていますよ」という意味です。
矢印<head>から</head>の間に、このHTMLファイルの情報を書きます。※メタタグというものやら外部プログラムの場所、外部スタイルシートの場所などです。 その中に このHTMLファイルの題名を書きます<title>タイトル</title>イメージ的には本屋さんで並んだ本を見たときに見えるタイトルですね、これです。これを検索エンジンが探して順位付けして表示してくれます。
次に<body>から</body>ですが、この間に表示させたいものを書きます。例えば、文章や画像等です。画像の書き方は後ほどでてまいりますのでお楽しみに。
※メタタグとは、スパイダーとよばれる検索エンジンロボットの巡回を制御するためのタグです。
矢印結果・・・
ホームページ作成 矢印上記のHTMLをファイル名をつけて保存して、今保存したHTMLファイルをダブルクリックで開くと左の画像のようになります。どうですか?うまく表示されましたか?表示できなかったらもう一度繰り返してみてください。
次は 背景を入れて見ますね。
矢印次へ・・・

 

■いよいよホームページ作成 レイアウト!(背景)
☆分からなかったら 下記ソースをコピーしてお使い下さいね。進めて行くうちに 必ず分かってきます。・・・と願います。

【HTML-3】

<html>
<head>
<title>初めてのホームページ作成</title>
</head>
<body background="img-hp/haikei-grd.gif">
これが ホームページです。。。
</body>
</html>

【ソースの解説】
矢印bodyタグの中にbackground="img-hp/haikei-grd.gif"を間違わないように書いて下さい。(bodyとbackgroundの間の半角スペースを忘れないで下さい)コピーしてもいいです。
矢印 background=は「背景を指定しますよ」という意味です。
矢印 img-hp/haikei-grd.gifはhp.htmlからみてimg-hpフォルダーの中の(この「中の」という意味がスラッシュ「/」です)haikei-grd.gif画像を指定しています。
書けましたら メモ帳のファイルの保存をクリックしてインターネットエクスプローラーの更新ボタンをクリックして下さい。以下のようになりましたか?
矢印結果・・・
ホームページ作成 矢印 背景が入りましたね。背景が入るだけでホームページらしくなってきたと思いませんか?この背景は単なる色指定もできます。色指定は bgcolor="#000000"を body タグの後に半角スペースを入れて書くと 背景色が黒色になります。色々な色に変えて遊んでみてください。
【まとめ】
○背景が入るとなんとなくホームページらしくなってきました。この次は、いきなりですが【table】テーブルタグ を使用したページのデザインを行っていきます。本来のtableは 表として用いるのですがデザインとして使うこともできます。複雑そうに見えますがなれると意外と理解しやすいです。といいながら tableタグを使ったレイアウトは推奨されていません。おい!おい!つっこまないでくださいね。本当のレイアウトにはスタイルシートというものをつかいます。ですが 初めのうちはスタイルシートは難解です。。。管理人も詳しくは分かっていません。 推奨されないテーブルレイアウトをご案内するのは、後にスタイルシートに入っていく時に 理解しやすいからです。テーブルのココがスタイルシートのここかぁ!?という感じです。ですので今のうちは推奨されないテーブルレイアウトで話をすすめてまいります。※今でもテーブルレイアウトのホームページが沢山存在するのも事実です。

■ 以上で 文字だけのホームページ作成、第一段階は おしまいです。お疲れ様でした。
なんだか大変だったと思いませんか?
でもね ここを皆さんとおっておられますので楽しみに、少しずつやっていきましょうね。。。
次の第二段階からは もっとホームページらしくしていきますのでよろしくお願いします。

※ 早くインターネットで見てみたいと思われる方は・・・ 実は、この文字だけのホームページですが、あとちょっと作業するだけで世界中から見ることができるんですよ。
お急ぎの方は FFFTPのダウンロードとインストールへすすんで下さい。


tableは 表として用いるのですがデザインとして使うこともできます。
 
■次は第二段階のホームページ作成・ちょっとだけ第一段階の復習のページへどうぞ。。。
HP作成書き変えへ戻る  ここはHPの背景色の設定です。  以上で第一段階、終了で御座います。
■次は第二段階でホームページ作成・第一段階の復習と背景画像、画像(写真の貼り方)へお進み下さい。


■第三段階・ファイルの転送(FFFTP)つかい方↓