<!DOCTYPE HTML>
<html lang="ja">
<head>
<link rel="stylesheet" text="text/css" href="anchor.css">
<title></title>
</head>
<body>
<h1>アンカータグ</h1>
<p><a>はアンカー要素と呼ばれる。href属性を使って、別のwebページ、ファイル、メールアドレス、同じページ内の場所、または他のURLへのハイパーリンクを作成する</p>
<h3>href属性</h3>
<p>hypertext referenceの略。ハイバーリンクのリンク先を指定する属性。</p>
<p><<span class="blue">a</span> <span class="green">href</span>="<span class="orange">http://roy.e.koeki-u.ac.jp/</span>"><span class="red">東北公益文科大学 学生専用サーバ</span><<span class="blue">/a</span>></p>
<ul>
<li><span class="blue2">要素</span></li>
<li><span class="green2">属性</span></li>
<li><span class="orange2">リンク先のファイルパス</span></li>
<li><span class="red2">テキストや画像</span></li>
</ul>
<h4>例</h4>
<ul>
<li>テキストをクリックするとリンク先に飛ぶ</li>
<a href="https://www.yatex.org/gitbucket/C1220118/Program-Storage/pages/css-teaching/css.html">このテキストを押すとCSSを教える用のページに飛びます。</a>
<div class="code-box">
<span class="box-title">(htmlコード)</span>
<p><a href="https://www.yatex.org/gitbucket/C1220118/Program-Storage/pages/css-teaching/css.html"></p>
</div>
<li>画像をクリックするとリンク先に飛ぶ</li>
<a href="https://one-piece.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT5_y_GQUjG04b62izbowYZU8UWbZrc3Rmbai1L2FuT1YcdHSWtRF9ili2UaMANjFaQYFYeFRN1rePW8Hos7tI20vKaVZGgmf4QgtyckfQ5z84qFJt-WsgDOYXKIdrsxPyw_GddpsFXISL/s600/onepiece20_santaisyou.png" alt="One Piece"></a>
<div class="code-box">
<span class="box-title">htmlコード</span>
<p><a href="https://one-piece.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT5_y_GQUjG04b62izbowYZU8UWbZrc3Rmbai1L2FuT1YcdHSWtRF9ili2UaMANjFaQYFYeFRN1rePW8Hos7tI20vKaVZGgmf4QgtyckfQ5z84qFJt-WsgDOYXKIdrsxPyw_GddpsFXISL/s600/onepiece20_santaisyou.png" <span class="red2">alt</span>="One Piece"></a></p>
</div>
<p>※<span class="red2">alt</span>属性：Webブラウザで画像が表示できないときに、画像の代わりに表示されるテキストを指定するために使われるもの。画像を使用するときは、alt=""を使おう！</p>
<li>指定メールアドレス(ここでは私の公益メールを指定）が入力されたメールソフトを開く(mailtoを使用)</li>
<a href="mailto:c122011@f.koeki-u.ac.jp">お問い合わせはこちらをクリック</a>
<div class="code-box">
<span class="box-title">(htmlコード)</span>
<p><a href="mailto:c122011@f.koeki-u.ac.jp">お問い合わせはこちらをクリック</a></p>
</div>
<li>クリックすると電話がかかる(telを使用)</li>
<a href="tel:09024109679">メリーさんの電話番号(らしい)</a>
<div class="code-box">
<span class="box-title">(htmlコード)</span>
<p><a href="tel:09024109679">メリーさんの電話番号らしい</a></p>
</div>
</ul>
<h3>target属性</h3>
<p>リンク先を表示する場所を指定する属性。</p>
<p><<span class="blue">a</span> <span class="green">href</span>= "<span class="orange">http://roy.e.koeki-u.ac.jp/</span>" <span class="green">target</span>="<span class="red">_blank</span>"></a></p>
<ul>
<li><span class="blue2">要素</span></li>
<li><span class="green2">属性</span></li>
<li><span class="orange2">リンク先のファイルパス</span></li>
<li><span class="red2">属性値</span></li>
</ul>
<table border="1">
<tr><th bgcolor="#a9a9a9">属性値</th><th bgcolor="#a9a9a9">概要</th></tr>
<tr><td>_blank</td><td>新しいウインドウまたはタブでリンク先のページを表示</td></tr>
<tr><td>_self</td><td>初期値<br>現在のウインドウまたはタブでリンク先のページを表示</td></tr>
<tr><td>_parent</td><td>親ページがある場合、親のウインドウまたはタブに表示<br>ない場合は_selfと同じ</td></tr>
<tr><td>_top</td><td>親ページがある場合、最も上位の親のウインドウまたはタブに表示<br>ない場合は_selfと同じ</td></tr>
</table>
<h4>例</h4>
<ul>
<li>target="_blank"を使用</li>
<a href="https://www.yatex.org/gitbucket/" target="_blank">GitBucketを別タブに開くよ</a>
<div class="code-box">
<span class="box-title">(htmlコード)</span>
<p><a href="https://www.yatex.org/gitbucket/" target="_blank">GitBucketを別タブに開くよ</a></p>
</div>
<li>target="_blank"を使用</li>
<a href="https://www.yatex.org/gitbucket/" target="_self">初期値のため、target="_self"が無くても同じ動作をするよ</a>
<div class="code-box">
<span class="box-title">(htmlコード)</span>
<p><a href="https://www.yatex.org/gitbucket/" target="_self">初期値のため、target="_self"が無くても同じ動作をするよ</a></p>
</div>
<li>target="_parent"を使用</li>
<a href="https://www.yatex.org/gitbucket/" target="_parent">親ページがある場合、親のウインドウ・タブに表示されるよ</a>
<div class="code-box">
<span class="box-title">(htmlコード)</span>
<p><a href="https://www.yatex.org/gitbucket/" target="_parent">親ページがある場合、親のウインドウ・タブに表示されるよ</a></p>
</div>
<li>taraget="_top"を使用</li>
<a href="https://www.yatex.org/gitbucket/" target="_top">親ページがある場合、最も上位の親ウインドウ・タブに表示されるよ</a>
<div class="code-box">
<span class="box-title">(htmlコード)</span>
<p><a href="https://www.yatex.org/gitbucket/" target="_top">親ページがある場合、最も上位の親ウインドウ・タブに表示されるよ</a></p>
</div>
</ul>
<h3>download属性</h3>
<p>ユーザーがクリックしたときに、href属性で指定したファイルをダウンロードするように指定する属性</p>
<p><<span class="blue">a</span> <span class="green">href</span>="<span class="orange">html.html</span>" <span class="green">download</span>="<span class="red">html.html</span>"></p>
<ul>
<li><span class="blue2">要素</span></li>
<li><span class="green2">属性</span></li>
<li><span class="orange2">ダウンロードするファイルパス</span></li>
<li><span class="red2">ファイル名</span></li>
</ul>
<h4>例</h4>
<ul>
<li>download属性を使用</li>
<a href="html.html" download="html.html">これをクリックするとhtmlファイルがダウンロードされるよ</a>
<div class="code-box">
<span class="box-title">(htmlコード)</span>
<p><a href="html.html" download="html.html">これをクリックするとhtmlファイルがダウンロードされるよ</a></p>
</div>
</ul>
<h3>rel属性・rev属性</h3>
<ul>
<li>rel属性：リンク先との<span class="red2">現在のぺージから見た関係性</span>を指定する属性。</li>
<li>rev属性：現在ページとの<span class="red2">リンク先から見た関係性</span>を指定する属性。</li>
</ul>
<p>属性値は関係性を表すリンクタイプのキーワードで指定する。</p>
<p><<span class="blue">a</span> <span class="green">href</span>=<span class="orange">author.html"</span> <span class="green">rel(rev)</span>=<span class="red">author"</span>></p>
<ul>
<li><span class="blue2">要素</span></li>
<li><span class="green2">属性</span></li>
<li><span class="orange2">リンク先のファイルパス</span></li>
<li><span class="red2">関係性のキーワード</span></li>
</ul>
<table border="1">
<tr><th bgcolor="#a9a9a9">リンクタイプのキーワード</th><th bgcolor="#a9a9a9">概要</th></tr>
<tr><td>alternate</td><td>代替ページ</td></tr>
<tr><td>author</td><td>作者ページ</td></tr>
<tr><td>next</td><td>次のページ</td></tr>
<tr><td>nofollow</td><td>推奨していないページ</td></tr>
<tr><td>prev</td><td>前のページ</td></tr>
</table>
</body>
