ウェブサイトやソーシャル ネットワーキング サイトのプロフィール ページに写真を追加することは、ページを美しく見せるための優れた方法です。これを行うには、ハイパーリンク コードを使用して画像を追加する必要があります。画像を挿入するコードを書くことはそれほど難しくなく、これは初心者の Web 開発者が学ばなければならない最初のレッスンになっています。
ステップ 1 パート 1/2:画像を挿入する {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/e\/e1\/Insert-Images-with-HTML-Step-1-Version-6.jpg\/v4-460px-Insert-Images-with-HTML-Step-1-Version-6.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/e1\/Insert-Images-with-HTML-Step-1-Version-6.jpg\/v4-728px-Insert-Images-with-HTML-Step-1-Version-6.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 1写真をアップロードします。 Picasa Web アルバム、Imgur ウェブサイト、Flickr アルバム、Photo Bucket ウェブサイトなど、無料の写真ホスティング サービス ウェブサイトは数多くあります。これらのウェブサイトの利用規約をよくお読みください。一部のサーバーでは画像の品質が低下します。一部のウェブサイトでは、ホストの帯域幅を大量に消費するため、多くの人が写真を閲覧すると写真が削除されます。一部のブログサイトでは、ブログ管理ツールを使用して写真をアップロードできます。 有料のウェブホストをお持ちの場合は、FTP サービスを使用して写真をウェブサイトにアップロードできます。ファイルの整理と保存を容易にするために、「画像」パスを作成することをお勧めします。 [1] 他のウェブサイトの写真を使用する場合は、まずそのウェブサイトの作成者に問い合わせて許可を得てから使用してください。作成者が同意する場合は、まず画像をダウンロードし、画像ホスティング Web サイトにアップロードします。 {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/7\/7e\/Insert-Images-with-HTML-Step-2-Version-6.jpg\/v4-460px-Insert-Images-with-HTML-Step-2-Version-6.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/7e\/Insert-Images-with-HTML-Step-2-Version-6.jpg\/v4-728px-Insert-Images-with-HTML-Step-2-Version-6.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 2画像を追加するWebドキュメントを開きます。 フォーラムに画像を挿入したい場合は、投稿に直接入力することができます。多くのフォーラムでは、ページの編集に HTML を使用せず、代わりにカスタム システムを使用します。この方法が機能しない場合は、他のフォーラムの専門家に助けを求めてください。 {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/ce\/Insert-Images-with-HTML-Step-3-Version-6.jpg\/v4-460px-Insert-Images-with-HTML-Step-3-Version-6.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/ce\/Insert-Images-with-HTML-Step-3-Version-6.jpg\/v4-728px-Insert-Images-with-HTML-Step-3-Version-6.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 3 img タグから始めます。 Web ページの本体 (HTML の <body> セクション) 内で画像を挿入する場所を見つけます。ここに<img>タグを記述します。これは、参照される画像のプレースホルダーを作成する空のタグです。また、HTML では、<img> タグに終了タグがありません。挿入した画像を二重山括弧で囲む必要があります。{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/f\/f9\/Insert-Images-with-HTML-Step-4-Version-6.jpg\/v4-460px-Insert-Images-with-HTML-Step-4-Version-6.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/f\/f9\/Insert-Images-with-HTML-Step-4-Version-6.jpg\/v4-728px-Insert-Images-with-HTML-Step-4-Version-6.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 4画像のURLアドレスを見つけます。 画像が保存されている Web ページにアクセスします。画像を右クリックし (Mac では自動的に選択されます)、「画像 URL をコピー」を選択します。 「画像を表示」をクリックすると、新しいタブで画像を個別に表示することもできます。次に、アドレスバーの URL をコピーします。自分のウェブサイトの画像ディレクトリに画像をアップロードすると、ファイル名が である /images/ を通じて画像に直接リンクできます。これが機能しない場合は、画像が別のフォルダー パスにあることが原因である可能性があります。まずルートディレクトリに移動してから検索することができます。 {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/d\/dc\/Insert-Images-with-HTML-Step-5-Version-5.jpg\/v4-460px-Insert-Images-with-HTML-Step-5-Version-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/dc\/Insert-Images-with-HTML-Step-5-Version-5.jpg\/v4-728px-Insert-Images-with-HTML-Step-5-Version-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 5 「src」属性にURLアドレスを入力します。 ご存知のように、HTML 属性は、タグを通じて要素を変更し、HTML 要素に追加情報を提供するために使用されます。 src 属性は「source」の略で、ブラウザに画像の場所を伝えます。 src=" " と入力し、引用符の間に画像の URL を貼り付けます。例えば： <img src="http://www.exampleimagehost.com/my-cute-dog.jpg"> {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/5\/55\/Insert-Images-with-HTML-Step-6-Version-4.jpg\/v4-460px-Insert-Images-with-HTML-Step-6-Version-4.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/5\/55\/Insert-Images-with-HTML-Step-6-Version-4.jpg\/v4-728px-Insert-Images-with-HTML-Step-6-Version-4.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 6. 「alt」属性を追加します。 技術的に言えば、HTML ファイルには画像を表示するためのすべての要素がすでに含まれています。ただし、 alt 属性を追加するのが最適です。画像の読み込みに失敗した場合、画像の内容がテキストとして表示されます。さらに重要なのは、これにより検索エンジンが画像の内容を理解しやすくなり、スクリーン リーダーが視覚障害のある訪問者に画像の内容を説明することができるようになることです。 [2] 上記の例に従って、引用符内のテキストを次のように変更します。 <img src="http://www.exampleimagehost.com/my-cute-dog.jpg" alt="ミカンを食べている私の犬"> 画像の内容が重要でない場合は、「alt」属性にテキストを含める必要はありません。 alt="" など。 [3] 7 変更を保存します 。 HTML ファイルを Web サイトに保存します。編集したページにアクセスしてください。すでに Web ページを開いている場合は、もう一度更新してください。追加した画像が表示されるはずです。画像サイズが適切でない場合や画像効果に満足できない場合は、2 番目の部分の方法に従って調整できます。 広告する2 パート 2/2:オプションの調整 {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/06\/Insert-Images-with-HTML-Step-8-Version-3.jpg\/v4-460px-Insert-Images-with-HTML-Step-8-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/06\/Insert-Images-with-HTML-Step-8-Version-3.jpg\/v4-728px-Insert-Images-with-HTML-Step-8-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 1画像サイズを変更します。 最適な表示のために、無料の編集ソフトウェアを使用して画像のサイズを変更してください。調整後の新しいバージョンの画像をアップロードします。 HTML コードを使用して幅 と高さを 設定し、ブラウザで画像を縮小または拡大できるようにすることもできます。ただし、これによりブラウザ間で表示効果が一致しなくなり、表示エラーが発生する場合があります。 [4] 画像のサイズをすばやく変更したい場合は、次の形式を使用できます。 <img src="http://example.com/example.png" alt="display this" width=200 height=200> (ピクセル、または HTML5 のよりモバイルフレンドリーな「CSS ピクセル」)。 [5] [6] または、 <img src="http://example.com/example.png" width=100% height=10%> (Web ページの寸法のパーセンテージ、または画像を含む HTML 要素のパーセンテージ)。 属性を 1 つだけ (幅または高さ) 入力すると、ブラウザは画像の元のアスペクト比を維持し、それに応じて表示します。 {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/3\/37\/Insert-Images-with-HTML-Step-9-Version-3.jpg\/v4-460px-Insert-Images-with-HTML-Step-9-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/3\/37\/Insert-Images-with-HTML-Step-9-Version-3.jpg\/v4-728px-Insert-Images-with-HTML-Step-9-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 2プロンプト情報を追加します。 title 属性を使用すると、画像に関する追加のコメントや情報を追加できます。たとえば、ここで画像の作成者を示すことができます。ほとんどの場合、訪問者が画像の上にカーソルを置いたときにタイトルのテキスト コンテンツが表示されます。 <img src="http://example.com/example.png" title="写真撮影: J. Godfrey"> {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/3\/38\/Insert-Images-with-HTML-Part-2-Step-3.jpg\/460px-Insert-Images-with-HTML-Part-2-Step-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/3\/38\/Insert-Images-with-HTML-Part-2-Step-3.jpg\/728px-Insert-Images-with-HTML-Part-2-Step-3.jpg","smallWidth":460,"smallHeight":316,"bigWidth":728,"bigHeight":500,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 3リンクとして作成されました。 画像からリンクを作成する場合は、画像タグを<a></a> ハイパーリンク タグに挿入します。例えば： <a href="http://www.urloflink.com"><img src="http://urlofimage.com/image.gif"></a> ヒント 画像 URL に画像ファイル形式 (.jpg、.gif など) が含まれていることを確認します。 万が一に備えて、画像のバックアップコピーをコンピューターに保存しておいてください。 GIF 画像はロゴやアニメーションに適していますが、JPEG 画像は製品写真などの複雑な画像に適しています。 ほとんどの場合、.gif、.jpeg、.jpg、.png などのファイル形式を使用するのが最適です。 [7] その他の形式はすべてのブラウザで正しく表示されない可能性があります。 警告する 他の人のウェブサイトにリンクしないでください。そうすると、他の人のウェブサイトの帯域幅が消費され、訪問者が来なくなります。また、ハイパーリンク付きの画像はリンクURLが無効になると消えてしまいます。ウェブホストがハイパーリンクを見た場合、ウェブサイトに表示される画像を変更することもできます。 [8] 
