メモ帳やWeb開発ソフトウェアなどのテキストエディタで、画像を追加するWebページのHTMLファイルを開きます。
ファイルにタグを追加します。 HTMLファイルをブラウザで開いたときに画像を表示する要素の後にタグを配置します。 タグには個別の終了タグはありません。 タグ内で、インターネット上の画像の場所を次のように入力して、表示する画像のソースを指定する必要があります。 src 属性。 画像がHTMLファイルと同じフォルダに保存されている場合は、画像の名前と拡張子を入力します。 画像が他の場所に保存されている場合は、画像の完全なURLを入力します。
追加します alt タグの属性。 HTML5では、alt属性が必要です。 この属性を使用して、画像を読み込めない場合に備えて画像を記述します。 画像を読み込めない場合、ブラウザはalt属性の後に入力したテキストを表示します。 さらに、alt属性は、視覚障害を持つ人々が使用するスクリーンリーダーソフトウェアにとって重要です。 ソフトウェアはalt属性のテキストを読み取るため、視覚障害のある人がWebサイトを表示している場合でも、画像が見えなくても画像の内容を聞くことができます。
画像のサイズをピクセル単位で指定します 高さ と 幅 属性。 サイズを指定しない場合、ブラウザは、ページが読み込まれるときに画像用に残しておくスペースを認識しません。 これにより、テキストが最初に読み込まれ、画像用の小さなスペースが残り、画像が読み込まれるときに離れてジャンプし、スペースが拡大するため、ページが途切れ途切れに読み込まれます。 指定されたサイズで、ブラウザは、画像の読み込みが完了したときに画像を入力するために、ページ上の他の要素の間に正確に適切な量のスペースを残します。
コードをテストして、ブラウザでHTMLファイルを開いて、画像が正しい場所に表示されることを確認します。
CSSを使用して、画像を画面の左側または右側に移動するか、テキストを折り返します。 たとえば、style = "float：left;"を使用できます。 またはstyle = "float：right;" タグ内。
画像の高さと幅の両方がわからない場合は、height属性またはwidth属性のいずれかを単独で使用することをお勧めします。 CSSを使用して高さと幅を指定することもできます。 たとえば、100 x 100ピクセルの画像では、style属性を使用します。style= "height：100px; 幅：100px。」
「ahref」タグペア内にタグを配置して、画像をクリック可能なリンクにします。 たとえば、画像をFacebookにリンクする場合は、次のように入力します。
ページのSEOを向上させるためにalt属性を使用しないでください。 検索エンジンは、一部のWebデザイナーがalt属性に追加のキーワードを詰め込もうとしていることを長い間認識していたため、alt属性のテキストを無視します。
