HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML画像：ステップバイステップガイド

HTMLのタグは、Webページに画像を追加します。 src属性を使用して、ベッドに配置する画像の場所を指定します。 alt属性は、画像を読み込めない場合に、画像の代わりにテキストを表示するためによく使用されます。

Webが最初に発明されたとき、Webページはテキストしか表示できませんでした。ただし、Webページに画像を追加する機能はすぐに追加されました。それ以来、画像はWeb上のほとんどのページの重要な部分になりました。ロゴから写真まで、画像はインターネット上のいたるところにあります。

このチュートリアルでは、 の使用方法について説明します。 Web開発者としてHTML画像を操作するためのタグ。 で使用できる主な属性のいくつかについても説明します。 タグ。

HTML画像タグ

HTML タグは、Webドキュメントに画像を追加します。 src属性を使用して、埋め込む画像の場所を指定します。これは、コンピューター上のファイルまたは別のファイルへのURLである可能性があります。 alt属性を使用すると、画像を読み込めない場合に表示される代替テキストを指定できます。

HTMLの構文は次のとおりです タグ：

<img src="house.png">

タグには終了タグがありません。代わりに、タグは「/>」で終わります。これは、 タグには個別の終了タグは必要ありません。 タグはすべてのブラウザでサポートされています。

HTMLは、HTMLファイルを格納するフォルダーが、参照する画像を格納するフォルダーと同じであると想定します。この動作は、画像を見つけることができる正確なファイルパスまたはURLを指定することで無視できます。

上記の構文では、 ファイルhouse.png。を参照します このファイルは、作業しているHTMLファイルと同じフォルダーにあります。

参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。

平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。

ただし、画像ファイルを別のフォルダ（たとえば、画像と呼ばれる）に保存する場合は、次のコードを使用します。

<img src="pictures/house.png">

外部ソースからの画像を埋め込む場合は、絶対URLを使用できます。これがの例です 外部画像を参照するタグ：

<img src="https://www.example.org/pictures/house.png">

とはいえ、可能な限りローカルファイルから画像を参照するのが通常は最善です。これは、外部画像を参照すると、ブラウザがローカルファイルから画像を取得する場合よりも多くの作業を行うためです。

HTML画像の例

HTMLの例を見てみましょう 動作中のタグ。地元のコーヒーハウスTheGoldenRoastのウェブサイトを構築しているとします。ゴールデンローストは、一杯のコーヒーの画像をホームページに表示したいと考えています。

彼らがウェブページに追加するために私たちにくれたファイルは、coffee.pngと呼ばれています。 HTMLページを保存するフォルダーには、この画像も保存されます。この画像をサイトに追加するには、次のコードを使用できます。

<body>
	<h1>The Golden Roast</h1>
<img src="coffee.png">
</body>

コードは次のようになります：

HTML画像：ステップバイステップガイド

コードを分解してみましょう。まず、 を使用しました タグ。Webページの主要な要素を格納します。次に、

を使用しました ページの見出しを定義するタグ。この見出しのテキストは次のとおりです。ゴールデンロースト。

次の行では、img要素を使用して、coffee.pngという画像をコードに追加しました。この画像は、HTMLファイルと同じフォルダに含まれています。その結果、src属性を使用してフォルダを指す必要はありませんでした。ファイルの名前を指定しました。

画像HTML：代替テキスト

代替テキストを追加することは、HTMLの画像を操作する上で重要な部分です。属性altで表される代替テキスト 、は画像のテキストによる説明です。

画像を操作するときにalt属性を指定する必要がある理由はいくつかあります。代替テキスト：

  1. 意図されているが存在しない画像について説明します 。代替テキストは、画像が見つからない場合に役立ちます。たとえば、指定したフォルダにそのファイルが存在しないためです。
  2. 意図されているが読み込みが遅い画像について説明します 。 Webページの訪問者の接続が遅い場合は、画像の読み込みが遅れる可能性があります。
  3. アクセシビリティを向上させます 。訪問者がスクリーンリーダーを使用している場合、代替テキストを使用すると、画像の説明を聞くことができます。

代替テキストは、何らかの理由で画像をレンダリングできない場合でも、Webページがユーザーにテキストを表示することを保証します。代替テキストを指定せずに画像が壊れている場合は、壊れた画像のアイコンが表示されます。

HTML代替テキストの例

上記のコーヒーハウスの例の画像にalt属性を追加するとします。指定する代替テキストは、焙煎コーヒーで、薄茶色の木製テーブルでコーヒー豆に囲まれています。 次のコードを使用して、この代替テキストを追加できます。

<body>
	<h1>The Golden Roast</h1>
<img src="coffee.png" alt="Roasting coffee, surrounded by coffee beans on a light brown wooden table.">
</body>

ここで、誰かがcoffee.pngファイルを別のフォルダーに移動したとします。その結果、当社のWebページはファイルを見つけることができなくなりました。これにより、画像が見つからないため、代替テキストがWebページに表示されます。この場合、訪問者がWebページに表示する内容の例を次に示します。

HTML画像：ステップバイステップガイド

alt属性を追加するときは、簡潔にして、画像自体を説明するために使用してください。コーヒーの例では、コーヒーの画像に何が含まれているかを説明しました。ユーザーを混乱させるため、すでにページにあるテキストを繰り返したくありません。

HTML画像：タイトル

title属性を使用して、画像に関する追加情報を提供できます。 title属性を使用すると、ユーザーがマウスで画像にカーソルを合わせたときに表示されるツールチップが提供されます。

title属性は、画像にツールチップを追加する場合に役立ちます。ただし、title属性はスクリーンリーダーをサポートしておらず、モバイルデバイス（マウスがない）では表示されません。

テーブルにコーヒーを1杯という値のtitle属性を追加するとします。 以前からの私たちのイメージに。これを行うには、次のコードを使用できます。

<body>
	<h1>The Golden Roast</h1>
<img src="coffee.png" alt="Roasting coffee, surrounded by coffee beans on a light brown wooden table." title="A cup of coffee on a table">
</body>
HTML画像：ステップバイステップガイド

カーソルで画像にカーソルを合わせると、タイトルタグの内容が表示されます。

HTML画像サイズ：幅と高さ

画像の幅と高さの属性を使用して、画像の幅と高さをそれぞれ指定できます。

コーヒーハウスの例に戻りましょう。コーヒーの画像を幅400ピクセル、長さ400ピクセルにしたいとします。この画像がウェブページのスペースを取りすぎないようにします。次のコードを使用して、これらのパラメーターを指定できます。

<body>
	<h1>The Golden Roast</h1>
<img src="coffee.png" width="400" height="400">
</body>

コードは次のようになります：

HTML画像：ステップバイステップガイド

ご覧のとおり、この例の画像は前の画像よりも小さくなっています。最初の例では、画像は500×500でした。今、私たちの画像は400×400です。これは、height属性とwidth属性の両方を指定し、それぞれを400に設定したためです。

HTML画像：画像の配置

画像を操作しているときに、画像をページの左または右に浮かせたいと思うかもしれません。フロートとは、ページ上の画像の水平方向の配置（左または右）を指します。そこでCSSFloat属性が登場します。

以前のコーヒーの画像をページの右側に表示したいとします。次のコードを使用してこれを実現できます：

<body>
	<h1>The Golden Roast</h1>
<img src="coffee.png" width="400" height="400" style="float:right;">
</body>

コードは次のようになります：

HTML画像：ステップバイステップガイド

float：right;を使用しました スタイル属性内の属性。これにより、画像をページの右側に表示するように指定できます。



結論

を使用できます Webページに画像を配置するためのHTMLタグ。画像は、ローカルのファイルやフォルダ、または外部ソースからレンダリングできます。

このチュートリアルでは、 の操作方法について説明しました。 HTMLのタグ。また、HTMLで提供されるいくつかの属性の使用方法についても話しました 鬼ごっこ。これで、プロのようにHTMLで画像を使い始めるために必要な知識を身に付けることができます。

HTMLについてもっと知りたいですか？専門家のヒントとオンラインコースおよび学習リソースのリストについては、HTMLの学習方法ガイドをご覧ください。


  1. HTMLDOM入力画像オブジェクト

    HTML DOM入力画像オブジェクトは、HTMLドキュメントのtype =” image”を持つ要素を表します。 入力画像オブジェクトを作成する方法を見てみましょう- 構文 以下は構文です- var imageInput = document.createElement(“INPUT”); imageInput.setAttribute(“type”,”image”); プロパティ 以下は、HTMLDOM入力画像オブジェクトのプロパティです- プロパティ 説明 Alt 入力画像のalt属性の値を返し

  2. HTMLマッピング画像

    HTMLマッピング画像は、HTMLドキュメントのハイパーリンクとして機能するクリック可能な領域を備えたクライアント側の画像マップです。 マップ間の関係を作成するには およびimg HTML要素マップの名前属性 要素はimgusermap属性に関連付けられています。 構文 以下は構文です- <img src=”” alt=”’ usemap=”#name_value”> <map name=”name_value”> <area shape=””