画像は、Webページの外観を改善し、顧客とのやり取りを増やすため、Webページの非常に重要な部分です。複数のWebサイトのUSPは、Webページ上のさまざまな画像を整理し、それにフレーバーを追加する方法です。これで 画像の記事では、HTMLを使用して次の順序で画像をWebページに埋め込む方法を理解します。
HTMLで画像を追加する方法
Webページに画像を埋め込むにはHTMLを使用すると 鬼ごっこ。覚えておくべきもう1つの重要なポイントは、
終了タグはありません。 scr 属性は、画像のパスを指定するために使用されます。これは、システム/サーバーからのURLまたは画像パスにすることができます。まず、HTMLを使用してWebページに画像を埋め込む基本的な構文から始めましょう。
構文
img src = 'img / front-end-web-development / 50 / what-are-html-images.png'>サンプルコード
Webページに画像を埋め込むHTML画像
他のタグと同様に、関連するさまざまな属性があります 鬼ごっこ。それらを一つ一つ見て、その必要性と使い方を理解しましょう。
HTML画像タグ
- alt属性
alt属性は、画像の代替テキストです。 alt属性が導入された理由は、何らかの理由で画像を読み込めなかった場合に、画像に関するアイデアを示す代替テキストが表示されるはずだからです。画像が読み込まれない理由は、インターネット接続が遅いか、画像が提供されたソースに存在しないなどです。
画像がHTMLファイルと同じフォルダ内にある場合は、ファイルの名前を直接指定できます。それ以外の場合は、画像ファイルの絶対パスを指定する必要があります。
alt属性の値は、画像を説明する必要があります。
例
Webページに画像を埋め込むHTML画像
セレンwebdrivertestngフレームワークの例
- 画像の幅と高さ
スタイル属性は、画像の高さと幅を設定するために使用されます。 style属性では、CSSスタイルを指定します。
Webページに画像を埋め込むHTML画像
HTMLを使用してWebページに画像を埋め込む際の重要なポイントは次のとおりです。
- 幅と高さの属性はピクセル単位で定義されます。
- 画像の幅と高さをパーセンテージで定義することもできます。ウェブページ全体に応じた割合を考慮します。
- それらの1つだけを指定すると、それに応じてもう1つが調整されます。
- URLを使用した画像の埋め込み
HTMLは、URLを指定するだけで別のサーバーから画像を選択できる柔軟性も提供します。別のサーバーを使用して画像をホストし、URLを使用してそれらの画像を埋め込むことができます。
Webページに画像を埋め込むHTML画像
- リンクとしての画像
また、ユーザーが画像をクリックして新しいWebページにアクセスできるリンクとして画像を使用することもできます。そうするために、あなたはただ置く必要があります の日 鬼ごっこ。
Webページに画像を埋め込むHTML画像
- 画像フローティング
CSSfloatプロパティを使用して画像の配置を調整することもできます。すべてのCSSプロパティは、style属性で指定する必要があります。
HTML画像
- イメージマップ
これは、HTMLによって提供される重要な機能の1つです。タグは、イメージマップの定義に役立ちます。あなたはイメージマップが何であるか疑問に思っているに違いありません。イメージマップはクリック可能な領域のある画像です
HTML画像
- 背景画像
Webページに背景画像を追加することもできます。 CSSプロパティ、つまりスタイルタグのbackground-imageを使用して、それをHTML要素に追加するだけです。
ソート関数c ++配列
HTML画像背景画像
BODY要素
これで、このHTML画像ブログは終わりです。上記のスニペットを実行した後、HTMLに画像を挿入する方法を理解できたはずです。このブログがあなたにとって有益で付加価値があることを願っています。
私たちをチェックしてください インストラクター主導のライブトレーニングと実際のプロジェクト経験が付属しています。このトレーニングにより、バックエンドおよびフロントエンドのWebテクノロジーを操作するスキルを習得できます。これには、Web開発、jQuery、Angular、NodeJS、ExpressJS、およびMongoDBに関するトレーニングが含まれます。
質問がありますか？ 「HTMLImages」ブログのコメント欄にその旨をお伝えいただければ、折り返しご連絡いたします。