HTML で画像を挿入する方法

画像を追加して、Web サイトにスパイスを加えます。 を使用して HTML ファイルに画像を挿入できます。 タグを使用して、インターネット上の画像の場所、画像の高さと幅、および画像が読み込まれない場合やスクリーン リーダーを使用してページを表示する場合に表示される代替テキストを指定します。 Web で使用される 3 つの一般的な画像ファイルの種類は、GIF、PNG、および JPEG です。

ステップ 1

メモ帳や Web 開発ソフトウェアなどのテキスト エディターで、画像を追加する Web ページの HTML ファイルを開きます。

ステップ 2

を追加 ファイルにタグ付けします。ブラウザで HTML ファイルを開いたときに画像を表示する要素の後にタグを配置します。タグには個別の終了タグがありません。タグ内で、src を使用してインターネット上の画像の場所を入力して、表示する画像のソースを指定する必要があります。 属性。画像が HTML ファイルと同じフォルダーに保存されている場合は、画像の名前と拡張子を入力します。画像が別の場所に保存されている場合は、画像の完全な URL を入力してください。

ステップ 3

代替を追加 属性をタグに追加します。 HTML5 では、alt 属性が必須です。画像を読み込めない場合に備えて、この属性を使用して画像を記述します。画像を読み込めない場合、ブラウザは alt 属性の後に入力したテキストを表示します。さらに、alt 属性は、視覚障害のある人が使用するスクリーン リーダー ソフトウェアにとって重要です。このソフトウェアは alt 属性のテキストを読み取り、Web サイトを閲覧している視覚障害のある人が画像を見ることができなくても、画像の内容を聞くことができるようにします。

ステップ 4

高さで画像のサイズをピクセル単位で指定します と幅 属性。寸法を指定しないと、ブラウザーは、ページの読み込み時に画像用にどれだけのスペースを残すかを認識できません。これにより、ページの読み込みが不安定になります。最初にテキストが読み込まれ、画像用に小さなスペースが残り、次に画像が読み込まれると離れてジャンプし、スペースが拡大します。寸法が指定されていると、ブラウザーはページ上の他の要素の間に正確に適切な量のスペースを残し、画像の読み込みが完了したときに画像を埋めます。

ステップ 5

HTML ファイルをブラウザーで開いて、コードをテストし、画像が正しい場所に表示されることを確認します。

ヒント

CSS を使用して、画像を画面の左側または右側に移動したり、テキストを回り込ませたりします。たとえば、style="float:left;" を使用できます。または style="float:right;"タグ内。

画像の高さと幅の両方がわからない場合は、高さまたは幅の属性を単独で使用しても問題ありません。 CSS を使用して高さと幅を指定することもできます。たとえば、100 x 100 ピクセルの画像の場合は、スタイル属性 style="height:100px;width:100px" を使用します。

「a href」タグ ペア内にタグを配置して、画像をクリック可能なリンクにします。たとえば、画像を Facebook にリンクする場合は、次のように入力します。

警告

ページの SEO を高めるために alt 属性を使用しないでください。検索エンジンは、一部の Web デザイナーが alt 属性に余分なキーワードを詰め込もうとしていることを長い間認識しており、そのため alt 属性のテキストを無視しています。