授業5回目
2017年 12月 17日
⑴サイト内リンク:サイト内の別のページに移動する。
⑵ページ内リンク:ページ内の指定した箇所に移動する。
⑶外部リンク :外部のサイトに移動する。
<a> ハイパーリンクを表す
属性 href:リンク先のURLを指定
hreflang type real target download revなど
⑴サイト内リンク
トップページからcatsフォルダのmike.htmlのページに移動したい。
相対パスを使って記述する。
<p><a href="cats/mike.html">もっと見る→</a></p>
⑵ページ内リンク
ページ上部にある目次の一つである「ペット紹介」から、下部にある見出しに移動したい。
id属性を使って記述する。
①移動したい見出しを囲うsection要素にid属性をつけておく。
②<li><a href="#id名">ペット紹介</a></li>と記述して指定する。(目次部分が<ul><li></li></ul>タグで囲われている場合の例)
⑶外部リンク
<a href="http://〇〇○.jp/">〇〇株式会社</a>
*別タブで開く場合はtarget属性を使い以下のように記述する。
<a href="http://×××.jp/" target="_blank">〇〇株式会社</a>
mailto: <a>タグにmailto:と記述して、その後にメールアドレスを指定する。
メールアドレス部分をクリックするとメーラーが起動する。
<a href="mailto:×××@××.com">×××@××.com</a>
mailto:は便利だが、ソースコードの中にメールアドレスを書くことになるため、悪用される危険もある。
お問い合わせフォームを作った方が良い。
*<a>タグで囲われた単語や文章はリンクが貼られたことがわかるように、色が変わって表示される。
B. その他
<small> 免責、警告、著作権といった注釈や細目を表す
<p><small>Copyright © ××××× All Rights Reserved.</small></p>
→<small>はインライン要素なので改行されない。<p>で囲ってブロックレベル要素として扱えるようにする。
*「./」 同一階層にあるという意味になる。
*ルート相対パス トップページを基準にして考える。
ローカル環境の時は使えない。
*class属性とid属性の使い分けは、「その部分が他でも使えるか、使いまわせるか」で判断する。
同一ページ内で複数回そのスタイルや構造が使えるならclass属性を記述した方が、CSSで一気にスタイルを指定できる。
参考サイト・本
ウェブアンテナ [HTML<a href="mailto:">でメーラーを起動する方法]
HTMLクイックリファレンス <small>
btmup Blog HTMLで同一階層のパスを指定する方法。
『HTML&CSSとWebデザインが1冊できちんと身につく本』服部雄樹(著) 技術評論社
by zooori
| 2017-12-17 16:56
| 授業まとめ(HTML編)