著者:
Christy White
作成日:
12 5月 2021
更新日:
1 J 2024
![HTML入門講座 #05:画像 img タグ、ファイルパスの指定方法](https://i.ytimg.com/vi/uaT9ODTiucw/hqdefault.jpg)
コンテンツ
1行のHTMLコードで、クリック可能な画像をほぼすべてのWebサイトに追加できます。これを機能させるために必要なものが2つあります。画像のURLとウェブサイトのURLが必要です。
ステップに
方法1/2:HTMLコードを書く
HTMLファイルを作成します。 テキストエディタを開いて、新しいファイルを作成します。ファイルをindex.htmlとして保存します。
- •Windows(メモ帳)やMac OS X(テキストエディット)のシンプルなテキストエディタでも、任意のテキストエディタを使用できます。
- •HTMLでの作業を目的としたテキストエディタを使用する場合は、ここをクリックして、Windows、Mac OS X、およびLinux用のテキストエディタであるAtomをダウンロードしてください。
- •テキストエディットを使用している場合は、HTMLファイルを作成する前に[フォーマット]メニューをクリックしてから、[プレーンテキストにする]をクリックします。この設定により、HTMLファイルがWebブラウザに正しくロードされます。
- •MicrosoftWordなどのワードプロセッサは、HTMLファイルを破損し、Webブラウザに正しく表示されない可能性のある非表示の文字と書式を追加するため、HTMLの記述にはあまり適していません。
標準のHTMLコードをコピーして貼り付けます。 以下のHTMLコードを選択してコピーし、開いたindex.htmlに貼り付けます。
a href = "target url"> img src = "image url" /> / a>
画像のURLを見つけます。 Webで画像を見つけて右クリックし、(ブラウザに応じて)[画像のURLをコピー]、[画像のアドレスをコピー]、または[画像の場所をコピー]をクリックします。
- •FirefoxとInternetExplorerは、画像の場所のコピーを使用します。 Chromeは画像のコピーURLを使用します。 Safariは画像アドレスのコピーを使用します。
画像のURLを追加します。 index.htmlファイルで、クリックしてドラッグし、マウスで画像のURLを選択してから、CTRL + Vを押してURLを貼り付けます。
ターゲットURLを追加します。 index.htmlでターゲットURLを削除し、次のように入力します https://www.startpage.com.
- •ターゲットURLとして任意のURLを使用できます。
HTMLファイルを保存します。
HTMLファイルをWebブラウザで開きます。 index.htmlを右クリックし、選択したWebブラウザーでこのファイルを開きます。
- •ブラウザを開いても画像が表示されない場合は、index.htmlファイルで画像ファイル名のスペルが正しいことを確認してください。
- •ブラウザを開いても、背景画像の代わりにHTMLコードが表示される場合、index.htmlは.rtfファイル(リッチテキストファイル)として保存されます。別のテキストエディタでHTMLファイルを編集してみてください。
方法2/2:HTMLコードを理解する
アンカータグを理解します。 HTMLコードは、開始タグと終了タグで構成されます。 a href = "">タグは開始タグであり、/ a>は終了タグです。これはアンカータグと呼ばれ、Webページにリンクを追加するために使用されます。
- ザ・ a リンクを作成するようにブラウザに指示します。ザ・ href HTMLリファレンスの略語です。 = ブラウザにすべてを変更するように指示します ’ ’ リンクを作成します。 2つの引用符の間に任意のURLを配置できます。
- ザ・ / a> アンカータグが閉じていることをブラウザに通知します。
- 間にテキストを追加するとき a href = ""> そして / a> そのテキストは、Webページ上のクリック可能なリンクになります。例えば: a href = "https://www.google.com"> Google / a> Googleへのリンクを作成します。
画像タグを理解します。 img>タグは閉じたタグです。 img src = "" />またはimgsrc = ""> / img>で閉じることができます。
- ザ・ img タグはブラウザに画像を表示するように指示します。ザ・ src source、deの略語です。 = 間のすべてを削除するようにブラウザに指示します ’ ’ その場所から画像を取得します。
- ザ・ /> 画像タグを閉じるようにブラウザに指示します。
- 次に例を示します。{samp [}は、そのURLから画像を取得し、それをWebブラウザに表示します。
このコードはどこでも使用できます。 このコードがわかったので、次のことができます。 a href = "target url"> img src = "image url" /> / a> HTMLコードを使用して任意のWebページにクリック可能な画像を追加するため。