いくつかの Web サイトからグラフィックや画像の特殊効果コードをコピーすると、画像が表示されないなどの問題が常に発生します。ここでは、これらの初心者向けに特別に書かれた関連チュートリアルを紹介します。 Webページ内での画像の適用、つまりWebページ内での画像タグの適用について、まとめてみました！
1) 画像マークアップの概要。
Web ページにテキストのみが含まれ、画像が含まれていない場合、画像は Web ページ制作において非常に重要な要素です。HTML Professional は、Web ページに画像を出力するための <IMG> タグを提供します。このタグには、SRC、ALT、ALIGN、BORDER、WIDTH、および HEIGHT 属性があります。
2) 属性の紹介。
SRC 属性。 <IMG> タグの場合、その SRC 属性は必須の属性です。つまり、SRC には <IMG> タグ内で値を割り当てる必要があり、タグの必須の部分です。このとき、IMG は次の形式で記述する必要があります。
以下は引用部分です。
<IMG SRC="パラメータ値">
このうちパラメータ値は画像の完全なファイル名とパスです。
一般に、画像ファイルは HTML ドキュメントなどのプレーン テキスト ファイルよりも多くのスペースを占めることが知られており、Web デザインでは、魅力を高めるために多くの画像を追加する必要がよくあります。これらの画像ファイルを HTML ドキュメントに追加すると、HTML ドキュメントが非常に大きくなります。 . サイズが大きいと、ネットワーク上の送信は必然的に非常に遅くなります。
<IMG> タグは、実際に HTML ドキュメントに画像を追加するのではなく、HTML に次のことを指示します。どの画像ファイルであるか?どこ？そのため、HTML は画像ファイルの元の場所からそれを呼び出すことができます。 SRC 属性の機能は、これら 2 つの質問に答えることであるため、SRC 属性のパラメータ値には、画像ファイルの完全なファイル名、つまりファイル名と拡張子 (logo.gif など) がなければなりません。どの画像ファイルであるかの問題。HTML が画像ファイルの場所を認識できるように、パラメータ値には画像ファイルへのパスも含まれている必要があります。 SRC属性のパラメータ値のうち、画像ファイルのパスをどう書くかが初心者にとっては悩ましいことが多いです。
画像ファイルへのパスには、相対パスまたは URL を使用できます。いわゆる相対パスとは、現在の HTML ドキュメントと現在の HTML ファイルにリンクまたは埋め込まれるファイルの相対位置によって形成されるパスを指します。 HTML ファイルと画像ファイル (名前が logo.gif であると仮定します) が同じディレクトリにある場合、画像ファイルが次のディレクトリに配置されている場合は、コードを <IMG SRC="logo.gif"> として記述できます。現在の HTML ファイルはサブディレクトリにあります (サブディレクトリの名前が image であると仮定します)。画像ファイルが現在の HTML があるディレクトリの上位ディレクトリにある場合、コードは <IMG SRC="images/logo.gif"> になります。ファイルが見つかった場合 (上位ディレクトリの名前が home であると仮定)、相対パスは準 URL である必要があります。つまり、開発者の Web サイトを表す「../」の後に開発者の Web サイト内の画像ファイルのパスを使用します。 。たとえば、home がこの Web サイトの下のディレクトリであると仮定すると、コードは <IMG SRC=”../home/logo.gif”> である必要があります。home が Web サイトの下のディレクトリ king の下のサブディレクトリである場合、コードは次のようになります。 <IMG SRC=”../king/home/logo.gif”> と書かれています。
その他の属性。 <IMG> タグの ALT、ALIGN、BORDER、WIDTH、および HEIGHT 属性はオプションです。 ALIGN 属性は画像の配置であり、パラメータ値は左、中央、右です。BORDER は画像の境界線であり、そのパラメータは 0 以上で、デフォルトの単位はピクセルです。 WIDTH 属性と HEIGHT 属性 これは画像の幅と高さであり、パラメータのデフォルト単位はピクセルです。ALT 属性は、画像上にマウスを移動したときに表示されるテキストです。これを使用する必要があることを皆さんに思い出していただきたいと思います。 Web ページを作成するときの属性。これを行う目的は何ですか?何らかの理由で画像が表示できない場合に、プロンプトテキストを表示することができ、利便性が向上します。