ＨＴＭＬ編集方法 画像編
このページでは、ＨＴＭＬ基本構造を製作した後、様々な装飾をつけていくための編集方法をご紹介
画像とは…画像ファイルとは、写真やイラストなどの画像情報をデータとしてファイル化されたものを指します。 また、形式（種類）によって扱う画像が異なり、その画像に合った形式で作成することで、より鮮明な画像として表示させることができます。 画像形式の種類 ◆ＧＩＦ
ＧＩＦは、ホームページで最も使われる画像形式です。256色までの画像を保存でき、イラストやアイコンなどに向いています。 他にも、動く絵（アニメーション）や透明色を指定することで背景と重ねる事ができます。
拡張子は「.gif」として保存されます。 主に、アイコン、バナー、文字画像、アニメーション画像などに使われます。
◆ＪＰＥＧ
ＧＩＦ形式と並び、ホームページで使われる画像形式をＪＰＥＧといいます。
写真画像やグラデーションなどの複雑な色を使う際に向いています。 ＧＩＦとの違いは、背景を透明色に指定することができないこと、また、重ねて表示させることができません。
拡張子は「.jpg」「.jpeg」として保存されます。
主に、写真画像、デジタル画像などに使われます。
ＰＮＧは、インターネットで使われることを目指し、開発された形式です。 主に使われる画像形式の中で最も多くの色を使用できることが特徴で、自然画像や多色画像に向いています。 ＧＩＦと同様、背景を透明色に指定して重ねて表示させることができます。しかし、上の二つに比べ、画像の表示に時間が掛かってしまうため、あまりホームページの素材としては適していないようです。
拡張子は「.png」として保存されます。 主に、自然画像、多くの色を使う画像などに使われます。 画像探し まずは、ホームページに貼り付ける画像を手に入れましょう。ホームページに載せたい画像や写真などは、自分で作成しても良いのですが ネット上には、無料で素敵な画像や写真などを配布している「素材屋さん」がたくさんあります。まずは、自分好みの素材を配布している素材屋さんを探しましょう。気に入った素材が見つかったら、早速お借りしましょう!!借りる際、必ず注意事項に目を通しましょう。そこには、いろいろと素材に対しての規約などが書かれていますので、同意した上で素材をお借りしましょう。
【素材の借り方】
1.好みの素材の上にマウスカーソルを重ねる
2.右クリックし、名前を付けて画像を保存
※注意点として、素材は必ず自分のパソコンにダウンロードしましょう。コピー＆ペースト、またはドラッグして素材を持ち帰る「直リンク」はほとんどの素材屋さんで禁止事項となっていますから注意しましょう。
画像を貼り付ける 【画像を挿入する方法】画像を表示させたい時は、<img>というタグを使用します。 そして、<img>タグの属性を利用して、表示の大きさや画像に枠を付けたりする事もできます。
◆ＨＴＭＬ記入例
<body>
<img src="homepage.gif" width="69" height="66" alt="ホームページを製作しよう">
<body>
◆ブラウザ表示
◆ＨＴＭＬ
<body background="画像 GIFやJPG>
</body>
<html>
<head>
<title>楽しいホームページ製作</title>
</head>
<body background="homepage.gif">
</body>
</html>