HTMLで画像を追加する

ビデオ: HTMLで書かれていない仮要素を追加するCSS擬似要素（before・after）とは？

コンテンツ

ステップに
方法1/1：HTMLで画像を挿入する
チップ
警告

Webサイトまたはソーシャルネットワークプロファイルに画像を追加することは、Webページをドレスアップするための優れた方法です。 HTML（HyperText Markup Language）には、Webページを作成するための多くの機能がありますが、幸いなことに、画像を追加するために必要なコードはそれほど難しくありません。

ステップに

方法1/1：HTMLで画像を挿入する

ホットリンクを可能にするPhotobucketやTinyPicなどの無料のホスティングウェブサイトに画像をアップロードします。 ホットリンクを使用すると、画像をWebサイトサーバーに直接リンクできます。一部のプロバイダーは、ホットリンクが帯域幅を使用し、サーバー上のスペースを占有するため、これを禁止しています。
- 有料のホスティングアカウントをお持ちの場合は、ウェブサイトが配置されているサーバーに画像を直接アップロードしてください。これは常に無料のサイトよりも信頼性が高く、高価である必要はまったくありません。
テキストエディタで新しいドキュメントを開きます（例：、メモ帳/メモ帳）または、HTMLコードを直接変更できるWebサイト/プロファイルのページを開きます。
から始めます img 鬼ごっこ。 ザ・ img タグは空です。つまり、終了タグは必要ありません。ただし、XHTML検証の場合は、その前にスペースとスラッシュを置くことができます。 より大きい 符号。
- img />
使用可能な属性は多数ありますが、必要なのは1つだけです。src。これは、画像の場所/アドレス、またはURLです。
- img src = "画像のURL" />
次にあなたがしなければならない alt 属性を追加します。 これは、画像の読み込みに失敗した場合の代替テキストを示しています。これは、スクリーンリーダーを使用する視覚障害者向けのサービスでもあります。
- 画像の上にカーソルを置くと、このテキストもツールチップとして表示されますが、これはInternetExplorerの場合のみです。すべてのブラウザで動作するソリューション（Firefox etal。）それへ 題名 に加えて使用する属性 alt。（画像にツールチップを付けたくない場合は、後者を省略できます。）

例として：img src = "画像のURL" alt = "念のため" title = "ツールチップ" />

これで、画像のサイズを 高さ そして 幅 属性、およびピクセルまたはパーセンテージを指定することによって。 この方法でサイズを変更すると、ビューのサイズのみが変更され、画像自体のサイズは変更されないことに注意してください。画像の読み込み時間を短縮するには、特に大きな画像の場合は、写真編集ソフトウェアまたはPicResize.comなどのオンラインサービスを使用して、事前にサイズを変更することをお勧めします。
- img src = "画像のURL" alt = "念のため" title = "ツールチップ" height = "50％" width = "50％" />
- img src = "画像のURL" alt = "念のため" title = "ツールチップ" height = "25px" width = "50px" />

チップ

これらの属性の値は、ピクセル単位またはパーセンテージで1〜100％の範囲で指定されます。
画像は、上、下、中央、右、左などのさまざまなフォーマット属性を使用して、Webページのどこにでも配置できます。
hspace属性は、画像の左右に水平方向のスペースを挿入するために使用され、vspace属性は、画像やその他のオブジェクトの上下にスペースを空けるために使用されます。
画像に甘んじすぎないでください。それは厄介で専門的ではないように見えます。
GIF画像はロゴや漫画には適していますが、このファイルタイプは、写真やその他の多くの色の画像にはあまり適していません。
- GIF画像は、画像の最大256色の8ビットカラーのみをサポートします。したがって、16ビットまたは24ビットのカラーイラストまたは写真の再現はそれほど良くないことが予想されます。
- GIF画像も透明度をサポートしています。 1ビットの透明度が可能です。つまり、1つの色を透明にすることができます。
- インターレースはGIF画像でもサポートされています。つまり、サイトの訪問者は、完全に読み込まれる前に画像がどのように見えるかを知ることができます。
- GIF形式はアニメーションもサポートしています。
URLに画像のファイル形式（.webp .gifなど）が記載されていることを確認してください。