今回はリンクの貼り方と画像の挿入の仕方について解説いたします。
パスの書きかたなどはこちらの記事をご覧ください
リンク
リンクを設定する場合には<a href=””></a>タグを使用します。開始タグと終了タグの間に記入したテキストや画像をクリックすることで、設定したリンク先に移動することができます。外部サイトにリンクする場合には「” “」の中にそのサイトのURLを、自分で作成している別のファイルにリンクする場合にはファイルへのパスを指定します。
外部サイトにリンクする
外部サイトへリンクを貼る場合のコードは以下の通りです。
今すぐ<a href="https://google.co.jp">Google</a>で検索！上記のコードをブラウザで開くと、以下の通り表示されます。
フォルダ内の別ファイルにリンクする
例えば、HTMLフォルダに「index.html」があり、同じフォルダ内に「link」フォルダを作成し、その中に「Link.html」ファイルを格納したとします。
このような場合に、「index.html」から「link.html」にリンクを設定する場合には、以下のように記入してください。
<a href="Link/link.html">リンク先に移動します</a>上記の場合、ブラウザには「リンク先に移動します」と表示され、その全てがリンクをクリックする際の選択範囲となります。
画像の挿入
画像の挿入
Webサイトに画像を挿入する場合には、HTMLファイルから画像ファイルまでのパスを指定する必要があります。
今回はHTMLフォルダに「index.html」を格納し、同じフォルダ内にimgフォルダを作成。imgフォルダに「dog.png」を保管したときに、「index.html」で「dog.png」を表示する際のコードを以下に記載します。
<img src="img/dog.png" alt="犬"> 何かしらの不具合で画像がうまく表示できなかった場合には、alt属性の値を表示することができます。
画像の種類について
画像には「jpg」や「png」「gif」などいろいろな種類があります。一番なじみがあるのは「jpg」画像だと思いますが、「jpg」画像は非可逆圧縮と呼ばれる方法で圧縮されており、呼び出すたびに少しずつ画像が劣化していきます。そのため、たくさん人が集まることが予想されるWebサイトの顔となるメイン画像を「jpg」画像にすることはお勧めできません。「png」などの劣化することのない画像を使用することを心がけてください。
画像をクリックしてリンク先へ移動する
リンクと画像を組み合わせることで、リンクのボタンに画像を設定することも可能です。
<p>画像をクリックしてリンク先へ移動</p>
<a href="Link/link.html"><img src="img/dog.png" alt="犬"></a>上記のコードをブラウザで表示すると以下のようになり、犬の画像をクリックすることで設定したリンク先へと移動することができます。
今回はここまで。
次回は表の書き方を学習します。
コメント