この記事では、HTMLでimgタグを使用して画像を作成し、Webサイトをより鮮やかにする方法を紹介します。

「美しいウェブサイトには、画像、明確なレイアウト、そして多くの人目を引く効果が必要です」という言葉があります。このステートメントだけで、それを作成するために使用する必要のあるテクノロジーをリストするのに十分です。

• 美しい形状を作成する=>HTMLタグを使用して、通常はimgタグを作成します。
• レイアウトのクリア=>CSSを使用してレイアウトを分割します。
• 人目を引く効果=>HTML5とCSS3、またはjQueryのようなJavascriptライブラリを使用します。

知識が多すぎますよね？ただし、心配しないでください。急いでではなく、ゆっくりと進む必要があるため、この記事では、最初にimgタグを使用して画像を作成する方法を学習します。

HTMLのimgタグとは何ですか？

Imgは画像の略で、Webページに画像を作成するために使用されるHTMLタグです。 100％のウェブサイトがこのタグを使用しています。

Webに画像を表示するには、次の構文でimgを使用します。

 <img src="link"/>

ここで、メインリンクは画像を指すリンクです。クライアントのコンピューター上のリンクではなく、インターネット上に存在するリンクである必要があります。したがって、画像をホスティングにアップロードする必要があります。ウェブサイトにアクセスするすべてのコンピューターで画像を見ることができます。

例：web888のホスティングにすでにアップロードされている画像のリンクを使用して画像を作成します。

 <img src="https://web888.net/upload/tut_post/images/2014/08/14/122/xay-dung-chuc-nang-scrollto-voi-jquery.gif"/>

HTMLのimgタグの属性

タグをスムーズに操作するには、タグのすべての属性の意味を理解する必要があります。最も一般的なのは、次の属性です。

src。属性

これは、画像ファイルを指すパスを含む属性です。 png、jpg、gif 、…など、さまざまな種類の画像があり、すべてWebサイトに表示できます。特に、URLの値は、ドメインを含むURLまたは現在のディレクトリ内のURL（すべてホスティングにアップロードされている）の2つの形式のいずれかである必要があります。

代替属性

これは、間違った画像URLを渡した場合に表示されるプロパティです。今回は、画像の代わりにこのテキストが表示されます。

 <img src="url_khong_ton_tai" alt="hình ảnh"/>

SEOの人々にとって、この属性はGoogleのボットエンジンが画像の意味を知るのに役立ちます。

幅と高さのプロパティ

これは、画像の幅（ width ）と高さ（ height ）を設定するプロパティです。 CSSを使用して設定することもできます。

 <img width="500px" height="200px" src="https://hocvietcode.com/upload/tut_post/images/2014/08/14/122/xay-dung-chuc-nang-scrollto-voi-jquery.gif"/> <img width="200px" height="100px" src="https://hocvietcode.com/upload/tut_post/images/2014/08/14/122/xay-dung-chuc-nang-scrollto-voi-jquery.gif"/>

通常、上記の2つのプロパティを使用する代わりに、CSSを使用して幅と高さを設定します。ただし、CSSはまだ学習していないため、代わりにこれら2つのプロパティを使用できます。

HTMLでimgタグを使用するいくつかの方法

imgを他のタグと組み合わせて使用して、Webサイトインターフェイスを作成できます。

タグを組み合わせて画像リンクを作成する

ユーザーが画像をクリックしたときに必要な場合は、ブラウザが別のページにリダイレクトし、画像の周囲にタグを使用できます。

 <a href="https://hocvietcode.com"> <img src="http://code.web888.vn/upload/config/images/hoc-lap-trinh-online.png" title="Học lập trình"/> </a>

マップタグを組み合わせて、画像内の小さな位置にリンクを割り当てます

衛星画像があり、その画像に太陽の写真である小さな角度があるとします。その画像の太陽の小さな角をクリックすると、太陽の完全な画像に切り替わります。これを行う方法は、以下の例のようになります。

 <img src="https://hocvietcode.com/upload/tut_post/images/2014/08/14/123/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap"> <map name="planetmap"> <area shape="rect" coords="0,0,82,126" alt="Sun" href="https://hocvietcode.com/upload/tut_post/images/2014/08/14/123/sun.gif"> </map>

説明：

• imgには、このシェイプに適用するマップを指定するための属性usemap="#planetmap"があります。これは、その値が#planemapであるため、 name="planemap"のmapタグを取得するためです。
• mapタグで、属性を持つareaを定義します
  • shape="rect"つまり長方形
  • coords="0,0,82,126" 、つまり、 areaを構成する座標のリスト。上記の画像を標準として測定し、ピクセル単位で測定します。
  • alt="sun"は、上記の座標の場所にマウスを合わせると、このタイトルが表示されます
  • https://freetuts.net/upload/tut_post/images/2014/08/14/123/sun.gifは、この領域をクリックして移動したときのリンクです。

この記事では、 imgを使用してHTMLで簡単な画像を作成する方法を紹介し、 imgをタグやmapタグなどa他のタグと組み合わせてさまざまな機能を実行する方法をいくつか紹介しました。実際、それを行うときは、CSSと組み合わせる必要があります。新しいインターフェイスは美しく、効果は目を引くものです。