画像・リンク

画像を表示させる（終了タグはありません）

<img src="./image.gif" width="80" height="60" border="0" alt="画像だよ♪">

width は画像の幅、height は高さ、border は 0 なら画像にふちがなくなり、1 ならふちありになります。alt は画像が表示できないときにこの文字が表示されます。（代替テキスト）また、Internet Explorer ならば画像をポイントしたときにツールチップに表示される文字です。

各プロパティを追加するときには半角スペースを空けます。

画像の横に文字を入れたいとき（回り込み）

<img src="./hamu.jpg" width="80" height="60" border="0" alt="画像だよ♪" align="left">
ハムちゃんの画像です<br>
どうですか？<br clear="left">
ハムちゃんの部屋もよろしくね。

align="left" として画像を左側に固定してそれを回りこんで文字を書き <br clear="left"> でそれを解除します。解除すると通常どおりになります。右側なら align="right" として、<br clear="right"> とします。

上記と同じく文字が1行の場合

<img src="./hamu.jpg" width="80" height="60" border="0" alt="画像だよ♪" align="middle">ハムちゃんの画像です

align="???" に上段揃えなら top (texttop) 中央揃えなら middle (absmiddle) 下段揃えなら bottom (absbottom) のように画像の横に文字を入れる際に、画像に対して文字の上中下を指定します。（何も指定しないときは bottom の位置に表示されます）

左右に画像がありその間に文字を入れたいときは

<img src="./hamu.jpg" width="80" height="60" border="0" alt="左だよ♪" align="left">
<img src="./hamu.jpg" width="80" height="60" border="0" alt="右だよ♪" align="right">
この画像は私のお気に入りです。どうですか？<br clear="all">

左側の画像に align="left" 右側の画像に align="right" そして <br clear="all"> にします。

1つ目の画像と2つ目画像の間に文字を挿入すると、左右の画像がズレます。

<img src="./hamu.jpg" width="80" height="60" border="0" alt="左だよ♪" align="left">
この画像は私のお気に入りです。どうですか？
<img src="./hamu.jpg" width="80" height="60" border="0" alt="右だよ♪" align="right">
<br clear="all">

リンクを作成する

<a href="???">○○○</a>

??? にリンク先の URL、○○○にリンクの名前を指定します。<a href="../index.html">ホームへ</a> とすると…ホームへ

画像をリンクにする

<a href="../hamu/index.html"><img src="./hamu.jpg" width="80" height="60" border="0" alt="ハムちゃんの部屋へ"></a>

リンク先を新しいウィンドウで開く

<a href="http://www.yahoo.co.jp/" target="_blank">Yahoo! JAPAN</a>

ページの特定の場所に移動する

移動先: <a name="top"> ～ </a> or <div id="top">
リンク: <a href="#top">TOP</a>

他のページの指定場所なら

<a href="./first.html#basic">HTML の基本形</a>

移動先に name または id 属性を使用して移動先に名前をつけます。id 属性の場合、移動先はアンカータグでなくても良いです。

リンクには <a href="#top">TOP</a> のように先ほどつけた名前に # をつけます。このリンクをクリックすると移動先にジャンプします。また、他のページの特定の場所の場合は URL に移動先を指定します。

リンクでメールソフトを起動する

<a href="mailto:example@example.com">メールはこちら</a>

件名をデフォルトで指定したいときは

<a href="mailto:example@example.com?subject=お便り">メールはこちら</a>