HTMLで画像を挿入する-仕組み
HTMLを使用してWebサイトに画像を挿入する場合は、imgタグを使用します。 正確にこれがどのように機能し、何に注意する必要があるかをここで読んでください。
HTMLで画像を挿入する方法-基本
- 日とともに
写真を挿入できます。 - 画像ソースはタグ内で提供されます:
Webサイトのサブフォルダー「pictures」からファイル「testbild.webp」を挿入します。 - URLを介した外部ソースも可能です。
サーバーのCHIPロゴを統合します。
埋め込み画像のHTML属性
imgタグ内に多数の属性を追加できます。
- 「幅」と「高さ」を使用して、Webサイト上の画像のサイズを決定します。画像
辺の長さが100ピクセルの正方形が表示されます。 - 「alt」を使用すると、それぞれの画像をロードできない場合に表示される代替テキストを定義します。 HTMLで画像を挿入するときは、常にこの属性を設定する必要があります。
- 「border」属性は、フレームの厚さをピクセル単位で指定します。 との写真
5ピクセルの比較的厚いフレームがあります。 - 「align」を使用してグラフィックを整列します。 この属性の値は、「bottom」、「top」、「middle」、「left」、「right」、および「center」です。
- 「hspace」と「vspace」を使用すると、画像までの距離を(水平および垂直に)設定できます。
どの形式を使用する必要がありますか?
HTMLコードに含めることができるさまざまな画像形式があります。
- JPG: JPG形式の画像は、Webページで最も一般的に使用されています。 この形式は1670万色を表し、さらにJPGは非常によく圧縮できます。 したがって、画像ファイルを非常に小さくすることができ、ロード時間を短縮できます。
- PNG: PNG形式は1, 670万色を表示でき、圧縮できます。 JPG形式よりも優れている点は、損失なしに圧縮できることです。
- PNG形式で定義された領域も透過的に表示できます。 ただし、非常に古いブラウザには透明度の表示に問題があります。
- GIF: HTMLで動画を挿入する場合は、GIF形式が適しています。 この形式では256色のみが表示され、設定オプションなしで圧縮が自動的に行われます。
- GIF形式は、小さなアニメーショングラフィックスまたはロゴに最適です。 ロゴがページに調和して収まるようにするために、PNGなどのGIF形式でOHPフィルムを使用できます。
HTMLの例
- これにより、当社WebサイトのCHIPロゴが統合されます。
- 高さ100ピクセル、幅200ピクセルで表示されます。
- ロードできない場合、「CHIP-Logo」が空白テキストとして表示されます。
- 画像は2ピクセルのフレームで囲まれています。
- 右揃えで、他のサイド要素から50ピクセル離れています。