Webページ作成の質問: 画像ファイルのパス

この記事は 123WORDPRESS.COM Lightning によるオリジナルです。転載する際にはこの文章を削除しても構いませんが、いかなる言い訳や方法であっても記事の内容を変更しないでください。変更した場合は自己責任となります。転載の際は著者と出典を明記してください。
ずっと前から今まで、多くのネットユーザーが私に同様の質問をしてきました。特にこのサイトからグラフィック画像の特殊効果コードをコピーした後、画像が表示されないなどの問題が常に発生します。ここでは、特に初心者向けの関連チュートリアルを書きます。この点に関して質問がない場合は、立ち去ってください。
Web ページに画像を適用する問題、つまり Web ページに画像タグを適用する問題について、以下にまとめておきます。
1) 画像ラベル付けの概要。
Web ページにテキストのみがあり、画像がない場合、活気が失われているように見えます。画像は Web ページの作成において非常に重要な要素です。HTML では、Web ページに画像を出力するための <IMG> タグが専門的に提供されています。このタグには、SRC、ALT、ALIGN、BORDER、WIDTH、HEIGHT 属性があります。
2) 属性の紹介。
SRC 属性。 <IMG> タグの場合、SRC 属性は必須属性です。つまり、<IMG> タグでは SRC に値を割り当てる必要があり、タグの不可欠な部分です。このとき、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 ファイルがあるディレクトリのサブディレクトリに配置されている場合 (サブディレクトリの名前が images であると想定)、コードは <IMG SRC="images/logo.gif"> になります。イメージファイルが現在の HTML ファイルがあるディレクトリの上位ディレクトリに配置されている場合 (上位ディレクトリの名前が 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 ページを作成するときにこの属性を使用するように全員に通知します。これを行う目的は何ですか?何らかの理由で画像が表示できない場合は、プロンプトテキストを表示できるため、ユーザーの利便性が向上します。

<<: docker に基づいて nginxssl 設定を開始する

>>: js タグ構文の使用法の詳細