HTMLに画像を挿入する方法

著者: Florence Bailey
作成日: 24 行進 2021
更新日: 15 5月 2024
Anonim
【HTML講座】imgタグで画像を挿入しよう! #06
ビデオ: 【HTML講座】imgタグで画像を挿入しよう! #06

コンテンツ

ウェブサイトやソーシャルメディアページに画像を追加することは、ページを飾るのに最適な方法です。 HTML(ハイパーテキストマークアップ言語)にはWebプログラミングのための多くの機能がありますが、画像を挿入するために必要なコードは非常に単純です。

ステップ

方法1/1:画像をHTMLに挿入する

  1. 1 PhotobucketやTinyPicなどの無料のホスティングサービスに画像をアップロードして、他のサーバーがリソースを使用できるようにします。 一部のサイトでは、帯域幅とサーバースペースを消費するため、これは禁止されています。
    • 有料のホスティングアカウントをお持ちの場合は、そこに画像をアップロードしてください。無料のサイトよりも信頼性があります。
  2. 2 テキストエディタ(メモ帳など)、サイトのページ、またはHTMLを変更できるプロファイルで新しいドキュメントを開きます。
  3. 3 タグから始める img. 鬼ごっこ img 単一。つまり、終了タグは必要ありませんが、スペースとスラッシュを追加してXHTML準拠を実現できます。
    • img />
  4. 4 利用できる要素はたくさんありますが、絶対に必要なのは次のとおりです。src..。画像の場所またはURLを指します。
    • img src = "画像のURL" />
  5. 5 次に、要素を追加する必要があります alt. 彼は、何らかの理由で画像が読み込まれない場合に表示されるテキストを担当します。このテキストは、スクリーンリーダーを使用する視覚障害者も使用できます。
    • 画像にカーソルを合わせると、アクションの説明にフォールバックテキストが表示されますが、InternetExplorerでのみ表示されます。クロスブラウザソリューション(Firefoxで動作します や。。など。)-要素を使用 タイトル に加えて alt..。手順を説明したい場合を除いて、これを行わないでください。
    • 例えば:img src = "画像のURL" alt = "念のため" title = "アクションの説明" />
  6. 6 今要素 身長 画像のサイズを設定したり、ピクセルやパーセンテージを指定したりできます。 この方法でサイズを変更すると、表示されている画像のサイズが変更されますが、ブラウザは元の画像サイズをロードします。画像が大きすぎる場合は、画像エディタプログラムでサイズを変更してください。PicResize.comが対応します。
    • img src = "画像のURL" alt = "念のため" title = "アクションの説明" height = "50%" width = "50%" />
    • img src = "画像のURL" alt = "念のため" title = "アクションの説明" height = "25px" width = "50px" />

チップ

  • これらの要素の値は、ピクセル単位または1から100までのパーセンテージで示されます。
  • 画像または画像は、上、下、中央、右、左などの要素を使用して、Webページのどこにでも配置できます。
  • hspace要素は、画像から水平方向に左または右に空白を作成するために使用されます。 Vspace要素-上部または下部。
  • 画像でやりすぎないでください。すべてが混沌とし、プロフェッショナルではないように見えます。
  • GIF画像はロゴや漫画に適しており、JPEGは高品質の写真などの複雑な画像に適しています。
    • GIF画像は8ビットカラーから256カラーまでサポートしています。写真にこの形式を使用すると、品質が低下します。
    • GIF画像は透明度をサポートしています。 1ビットの透過性があります。つまり、1つの色を透明にすることができます。
    • インターリーブもサポートされています。ロードする前でも、ユーザーは画像がどのように見えるかを見積もることができます。
    • GIF形式はアニメーションもサポートしています。

警告

  • ホットリンクしないでください!