初心者ホームページ作成講座ちぃ助の部屋

次はちょいと難しい画像だぉぉ。(うそ・そんなに難しくないw)

画像には形式があります。

○○.gifとか○○.jpgとか○○.bmpなどです。

.jpgとか.gifというのは拡張子です。これが分らないと
画像名を書いても、表示されないのだ。

例えばosau.gifなのに、osaruしか書かなくて表示されない・・とかねっ。

よくある質問
Q:真似して書いたのに、そのままの文字(タグ)が出てきてしまう
A:英数字全角ではなくて、半角で書いてね^^

Q:ホームページが出来たけどメモ帳閉じてしまったんですけどどこにありますか??
A:ホームページを開いて、ソースを表示すれば自分で書いたメモ帳が出てきます。


【↓続き5】 【↓解説】

ほいほいー。画像ねっ
 

 ホームページに画像をのせたい場合。

その場合は、画像を用意しなくてはいけません。

  1. 自分で作れるようだったらつくる。
  2. デジカメ画像をPCに取り込む。
  3. 素材サイトから画像をダウンロードする

まずは、ここで練習だ。


この画像名はsaru_ani.gifですが、自分の好きな名前に
変えてもいいですっ

↑これをあなたのPCに取り込む。
 

WINDOWSの場合は画像の上にマウスを当てて、右クリックすると
「名前をつけて画像を保存」って出てくるから、
それを選択して、保存すれば、画像のダウンロードおっけー。(^ー^)

MACの場合は、画像を選択してドラックコピーして保存しよう 

 

 保存先は、さっき作ったindex.htmlと同じフォルダー

必ず入れてください。

 

注意事項
画像はあなたが、作ってるファイルと同じ場所に保存だす!

画像の入手方法は、雑誌などについてる場合もあるし、
フリー素材のサイトがいっぱいあるから、
そこから、画像を持ってくる方法もあります。

検索エンジンで
「ホームページ作成」とか「素材」って検索すれば、
ホームページ作成用の画像の
無料提供してくれるページがたくさんあるから
そこからダウンロードしてきてね。



画像はindex.htmlフォルダーと同じ場所に保存してねって
書きましたが、画像専用フォルダーに入れてやる
方法があります。が、
ここでは、ホームページの簡単な作り方を趣旨に
掲載していますので、
同じフォルダーに保存した場合を説明しています。
ほい。画像準備おーけー


【↓続き6】 【↓解説】

<img src="画像名">
これは画像のHTMLタグです。

 

んでもって、この画像をホームページに載せよう。
ちなみにさっき保存してくれた画像は

saru_ani.gif というファイル名です

<html>
<head>
<title>お試し作成</title>
</head>

<body>

<center><font size="7">タイトル</font><br>

<img src="saru_ani.gif"></center>


<center><font size="5" color="blue">はじめて挑戦!
</font></center><br>
こんばんは!


</body>

</html>

↑さっき作ったファイルにこれを追加して保存!!!!!!!

見てみよう。フフフっ
あなたのつくったものと同じもの(4)

【ここに出てきたタグ一覧】

<img src="画像名">
んと、この画像タグは、
終了タグはないです^^
</img>なんて書く必要はありません^^


←このタグを文字で説明↓

<html>これはホームページだぞ!

<head>頭脳部分を書くぞ!
<title>・・・</title>タイトル書くぞ!
</head>ここで終わりだぞ!

<body>見える部分を書くぞ!

<center>真中だぞ!
<font size=7>文字の大きさだぞ!
</font>文字の大きさを閉じるぞ!
<br>改行だぞ!

<img src="saru_ani.gif">画像タグだぞ!

</center>真中にするのはここで終わりだぞ!

</body>見える部分はここで終わりだぞ!

</html>ホームページはここで終わりだぞ!
画像の表示の大きさを変えたい!
<html>
<head>
<title>お試し作成</title>
</head>

<body>

<center>
<font size="7">タイトル</font><br>
<img src="saru_ani.gif">
<img src="saru_ani.gif" width="94" height="72">
</center>
<br>
<br>
<br>
<center><font size="5" color="blue">はじめて挑戦!
</font></center><br>
こんばんは!

</body>

</html>

あなたのつくったものと同じもの(5)


画像の表示の大きさ

  <img src="saru_ani.gif" width="50" height="50">  

width=これは、横の大きさ 

height=これは、縦の大きさ

大きさのサイズは、センチメートルではなくて、ピクセルです。 
適当に数字を変えていけば自然に分かるよ;;

ちなみにね、
この画像は、

width(横)は88
height(高さ)は31 です;;

画像のつけ方わかったぁ?


【↓続き7】 【↓解説】

背景の色を変えたい場合・・・。


<body>このbodyタグのかっこのなかに、背景の指定を入れるのです!!

<html>
<head>
<title>お試し作成</title>
</head>

<body bgcolor="#ff80ff" text="#000000">


<center>
<font size="7">タイトル</font><br>
<img src="saru_ani.gif">
<img src="saru_ani.gif" width="94" height="72">
</center>
<br>
<br>
<br>
<center><font size="5" color="blue">はじめて挑戦!
</font></center><br>
こんばんは!



</body>

</html>

あなたと作ったものと同じ物(6)

BODY bgcolor="色の数字を書く"これは、背景色です。(ボディーカラー:体の色)

text="色の数字を書く"これは、標準の文字色です。
例は#000000黒です。

一番最初にね、
<body>
</body>

ここはホームページのデザインをかきますよっていう命令だす。


って書いたでしょ??

今までは、<body>と</body>の間に書いたけど、

壁紙とか壁色を追加指定するのは、
この、<body>の中にに追加挿入するのです。

【ここに出てきたタグ一覧】

bgcolor="#FFFFCC" 
これは背景の色の命令文

text="#000000" 
 ホームページで標準の色を指定しておくのだ。
文字色の命令文だす。

このtext=は、書かなくてもいいです。
書かない場合、標準の黒で表示されます。

色は、色のイロイロページを参照

色ではなくて、壁紙を使いたい場合。

壁紙のダウンロード

→この壁紙でやろう。

 <body>に上のタグを追加するのだす

<html>
<head>
<title>お試し作成</title>
</head>

<body background="test_kabe.gif" bgcolor="#ff80ff" text="#000000">


<center>
<font size=7>タイトル</font><br>
<img src="saru_ani.gif">
<img src="saru_ani.gif" width="94" height="72">
</center>
<br>
<br>
<br>
<center><font size="5" color="blue">はじめて挑戦!
</font></center><br>
こんばんは!


</body>

</html>


あなたと作ったものと同じ物(7)

壁紙のHTMLは、background="ファイル名"です。
(これも、bodyのかっこの中に入れます。)

完成!


次のページ

この時点で、分からない部分がでてきたら、掲示板にカキコして、ちぃ助にきいてね。