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

■第二段階、ホームページの作り方・とにかくやってみよう!  背景色、背景画像、画像の入れ方

☆第一段階が、ぼんやりしておられる方のために、もう一度、復習をやっておきますね。この辺で文字と画像とHTMLの関係が分かった気分になってください。

それでは始めます。ホームページは画像と背景でかなり印象が変ってきます。この部分もあなたのセンスを発揮するところです。で、覚えることって殆どありません、というか たった一行で背景を、また、一行で画像を入れることができます。ここしっかりと抑えて下さい。
背景は「背景色」と「背景画像」を入れることができます。背景色の場合は一色の塗りつぶしとして表示されます。
■最終的には好みもありますが仕組みを勉強という事で、 こんなホームページを作ってみようと思います。

■ホームページ作成 まずは 背景色の入れ方・・・

文字だけのホームページ作成の続きです。まずは、hp.htmlを表示して下さい。

■ホームページhp.htmlに背景色を入れる・・・
メモ帳書き変え 矢印 文字だけのホームページ作成の続きです。左のように表示されていると思います。

これから 文字以外の白い背景のところに違う色をいれます。たった一行です。

背景色の白は背景色をコーディングしなかったら勝手にしろいろになります。これを「デフォルト」といいます。言い回しは デフォルトはこうなっています、とか デフォルトに戻してくださいとかです。管理人は 
「初期値」と理解してます。
今の状態を(上の画像)ブラウザで確認・背景はデフォルトで白のはずです。
矢印次のステップで背景色が変ります・・・

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

【HTML-2】

<html>
<head>
<title>初めてのホームページ作成</title>
</head>
<body bgcolor="#ccffcc">
がんばって 作り方をマスターします。きっと・・・
</body>
</html>

【ソースの解説】
全体のソースの解説はここでは行いません。後ほど説明させていただきます。
矢印 茶色の文字のコードが背景色を入れているところです。bodyとbgcolor="#ccffcc"の間には半角スペースがあります。これを忘れたらだめです。「bgcolor」背景で、「"#ccffcc"」は色の設定です。「背景色は#ccffcc色でお願いします」と伝えてるようなものです。 これだけで 背景色が変わります。hp.htmlに bgcolor="#ccffcc" を追記したらメモ帳の上書き保存をクリックして インターネットエクスプローラーの更新ボタンを押して更新して下さい。背景色が変るはずです。

矢印結果・・・
ホームページ作成 矢印背景の色が変りましたね。こうして背景色を変えるんです。サイトの雰囲気にあわせてです。この色の決定に時間をかけたりしますね。。。

ブラウザで確認
矢印次は 背景に画像をいれてみます、また雰囲気が変ります・・・

■ホームページに背景に画像をいれてみます。
☆背景を画像に変えるのも一行の追加でできてしまいます。
・準備するもの→背景用の画像一枚
背景画像 ※この画像を背景に使います。画像名 haikeigazou-2.gif です。
用意した背景画像はhp.htmlと同じフォルダ内においてください。
同じフォルダでないと解説のコードで表示されません。

【HTML-2】

<html>
<head>
<title>初めてのホームページ作成</title>
</head>
<body background="haikeigazou-2.gif">
がんばって 作り方をマスターします。きっと・・・
</body>
</html>

矢印 今度は背景に画像を入れます。背景色を入れるところでも解説しましたが body タグと backgroundの間に 半角スペースがあります。これを忘れないで下さい。さてbackground="haikeigazou.gif"ですが backgroundは、背景。遠景。の意味のようで 「バックグラウンドミュージック」の略だそうです。 "haikeigazou.gif"は 背景に使う画像名です。
※背景画像には 画像"haikeigazou.gif"使います。という意味です。
矢印結果は・・・

背景画像 矢印 左の画像のように表示されましたか?もし、できなかったらもう一度やり直してみて下さい。
背景の画像は 上記のコードでは 画面いっぱいにタイル上に敷き詰められます。これがデフォルト(初期設定)です。背景画像は並べ方を変えることができるんですよ。スタイルシート(CSS)を使うと実現できます。左側の縦だけに並べる、一番上の横一列、又は真ん中に一枚だけというふうにできます。余裕ができたらスタイルシートも勉強してください。 このサイトも 初心者むけのスタイルシートの解説を近いうちに書かせて頂きます。

ブラウザで確認

矢印次は 画像をいれてみます・・・

■ホームページに画像をいれてみますね。
☆ホームページに画像を入れるのも一行の追加でできてしまいます。簡単です。
・準備するもの、ホームページに入れる画像一枚です。
背景画像 ※管理人のパソコンの画像ですみません。この画像を使います。
画像名は my-pc.jpg です。
用意した画像はhp.htmlと同じフォルダ内においてください。
同じフォルダでないと解説のコードで表示されません。

【HTML-2】

<html>
<head>
<title>初めてのホームページ作成</title>
</head>
<body background="haikeigazou-2.gif">
<img src="my-pc.jpg" width="150" height="116" alt="パソコンの写真です。"><br>
がんばって 作り方をマスターします。きっと・・・
</body>
</html>

矢印 今度は画像を入れてみます。茶色のコードを見てください。<img src="my-pc.jpg" width="150" height="116" alt="パソコンの写真です。"><br>コードの意味を解説致します。まず img src="my-pc.jpg" は img(画像を使います)  src(ソース・素は "my-pc.jpg"です。) 画像情報は(幅 width="150"  高さ height="116"です)  画像が表現しているものは→(alt="パソコンの写真です。")という意味です。 まとめると 「今から画像使います、ソース素の名前はmy-pc.jpgで幅150ピクセル高さ116ピクセル大きさで あらわしている情報は パソコンの画像です」というような意味です。その次の><br>は改行のいみです。
※画像はどんなに大きくても小さくても一文字として扱われます。ですので改行を入れなかったら画像の右下から文字が続いていきます。もちろん右下から文字が続くデザインならそれでいいのですが管理人は画像の下に文字がくるように 改行を入れてみました。
※画像は 向かって左端・中央・右端と置き換えることができます。デフォルト(初期値)は左寄せです。尚スタイルシートつかうと 画面(ディスプレイ)の好きなところに一ピクセル単位でおくことができます。これをホームページ作成ソフトなどでは 「どこでも配置モードといいます」。スタイルシートとは文章の見栄えをあつかう専門情報をひとまとめにしたものです。 平たく言うと 細かいデザインの設定ができるということですね。

矢印結果は・・・

背景画像 矢印 左の画像のように表示されましたか?もし、できなかったらもう一度やり直してみて下さい。
ちょっと画像と文字がくっつきすぎですね。すこしスペースをとりたいですね、もちろん出来るんですよ。他の項で解説致します。あなたの好きな文字や 画像に入れ替えていろいろといじってみてください。面白いですよ。覚えるより 慣れてくださいね。ブラウザで確認してみてください。

ブラウザで確認

 

【まとめ】
○ホームページは文字と画像とデザインでできています。上の手順を見ると文字と画像とは もう出来ているということですね。あとはデザインを覚えるとホームページを作られるようになります。

しかし、この辺まで進んでくるとそろそろ飽きてきたり眠たくなってきたりしてませんか?また、「この解説、ぜんぜん分からんやん」と思ってられませんか?そんな時は休憩ですよ休憩!30分でも一時間でも二日でも・・・、十分に休憩して やる気なって、進めて下さいね。管理人も大切に休憩をとってます。

■次では テーブルの感覚をつかんでいただきます。ぼや~としたままでもいいですよ。そのうちわかりますのでね。管理人も このテーブルで ぼや~っとしてましたよ。というか コードを観るのが いやでした。。。 それでも覚えなくて見栄えのいいものが出来なくて 仕方無しに見てたら わかってしまいました。どうかご安心を。。。 (^-^)/ テーブルの説明のページ
第一段階、背景色の設定のイメージ  ここは背景・画像設定のページです。  テーブルの説明のページ


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