HTML内の画像リンク

HTML の画像リンクは、Web サイト上であるページから別のページに移動するのに役立つため、ほぼすべてのページにあります。一般的な組み合わせは、HTML アンカー タグ を使用することです。 HTML の img タグ を使用します。この組み合わせにより、画像をクリックすることでユーザーをあるページから別のページに移動できるようになります。このトピックにさらに入る前に、まずアンカー要素と画像要素の動作とレンダリングを個別に理解してから、それらを組み合わせてリンクされた画像を作成しましょう。

HTML アンカー タグ

HTML アンカー タグは、他の Web ページまたは Web 上でホストされているマルチメディア コンテンツへの HTML ハイパーリンクを作成するために使用されます。以下の構文を参照して、アンカー タグの仕組みとその基本属性を理解しましょう

ここをクリック!!

上記の例では、「href」属性は、「ここをクリック!!」というテキストをクリックしたときにユーザーをリダイレクトする Web ページの URL を指定します。

以下の完全なコードを見てみましょう:

出力

–>

上記の例では、次のことがわかります

1. 未訪問のリンクは下線付きで青色で表示されます。たとえば、これは未訪問のリンクです
2. 訪問したリンクは下線付きで紫色で表示されます。たとえば、これはすでにアクセスされているリンクです
3. アクティブなリンクは下線付きで赤色で表示されます。たとえば、これはアクティブなリンクです

HTML 画像タグ

インターネットを閲覧しているときに、さまざまな形のマルチメディアが含まれているいくつかの Web ページに遭遇したことがあるはずです。特に画像は、今日のほぼすべてのインタラクティブな Web ページや Web サイトで見られるマルチメディアの一般的な形式です。以下の例を使用して、HTML でのイメージ タグとその実装を理解してみましょう:

構文

<img src="smiley.gif" alt="Smiley face" width="42" height="42">

img タグの各属性がどのように機能するかを理解しましょう。

1. src: src 属性は、このタグでロードしようとしている画像ファイルのパスを定義します。 example.com/images/dummy.png のような形式で Web 上でホストされている画像、または Web ページと同じサーバー上でローカルにホストされている画像ファイルにリンクできます。
2. alt: alt 属性は、ネットワーク接続やその他の問題により画像の読み込みに失敗した場合に表示する画像のテキストと説明を定義します。
3. 幅と高さ: 両方の属性の幅と高さは、Web ページに表示する画像の幅と高さを定義します。それ以外の場合、画像はデフォルトで 100% の高さと幅で機能します。

次に、Web ページに画像を読み込むために必要な完全な HTML コードを見てみましょう。次の画像をローカル ドライブの「image_test」というフォルダーに「sunset.png」という名前で保存します。

同じフォルダーに、次の HTML コードを含む、sunset.html という名前の HTML ファイルを作成しましょう。

次に、マシン上のブラウザに移動し、.html ファイルのパスを入力します。ファイルは D ドライブに保存されているため、パスは次のようになります。

D:/image_test/sunset.html

これで、レンダリングされた HTML ページがブラウザーに日没の画像をロードしたことがわかります。 CSS と

の助けを借りて、タグを使用すると、要件に応じて画像の周囲にテキストを表示することもできます。 anchor タグと img タグはどちらも、Google Chrome、Safari、Microsoft Edge、Firefox、Internet Explorer などのすべてのブラウザーと互換性があります。

HTML 内のリンクされた画像

アンカー タグとイメージ タグが個別にどのように機能するかを例を使って理解しました。次は、2 つの機能を組み合わせて、クリックでユーザーを新しい Web ページにリダイレクトするシナリオを実現する方法を理解しましょう。イメージの。画像をクリック可能にしてユーザーを別の Web ページにリダイレクトするには、画像をアンカー タグ内にネストするだけです。以下の例では、世界中で使用されている上位 3 つの Web 検索エンジンを登録しようとします。リストには 3 つの検索エンジンのロゴが表示され、いずれかのロゴをクリックすると、ユーザーはそれぞれの検索エンジンのページにリダイレクトされます。 「redirection test」という名前のフォルダーを作成し、同じフォルダー内に以下の画像を保存しましょう

1. Google

2. Yahoo

3.ビン

ここで、同じファイル内に imageredirection.html という名前の .html を作成します。 imageredirection.html には次のコードが含まれます。

次に、ブラウザから HTML ページにアクセスする必要があります。そのために、ローカル パス「D:/redirectiontest/imageredirection.html」を入力します。ブラウザは HTML ファイルをレンダリングして次の結果を生成します:

–>

ユーザーはロゴをクリックすると、それぞれの検索エンジンに移動できます。上記の例から、HTML は複数のタグを組み合わせてこのような複雑な機能を実現できるシンプルで柔軟な言語であることがわかります。 img とアンカー タグの使用の組み合わせは、一般的な組み合わせです。HTML コーディングを追加すると、

を使用してリンクされた画像を順序付きリストまたは順序なしリストに表示するなど、さまざまな HTML 要素を追加することもできます。または
。リリースされる各バージョンで HTML が提供する極めて高い柔軟性とシンプルさは、UI および UX デザイナーが日常の活動でインターネットを閲覧するときに見るインタラクティブで直感的な Web ページをデザインするのに役立ちます。

おすすめ記事

これは HTML での画像リンクのガイドでした。ここでは、構文とともにさまざまなタイプの HTML タグについて説明します。詳細については、他の推奨記事を参照することもできます。
1. HTML 属性
2. HTML 形式のタグ
3. HTML 画像タグ
4. HTML フレーム

以上がHTML内の画像リンクの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。