HTML 第2弾!
内容
1. <a> Element </a>
<a href="#">.<a href="" target="_blank">
<ul> + <li><a href=""> Element </a></li> + </ul>
2. <dl> + <dt> Element </dt> + <dd> Element </dd> + </dl>
3. <table> Element </table>
<table border="1"> Element </table>
<tr><th> Element </th></tr>
<tr><td> Element </td></tr>
4. <img>
<img src="#img">
<img src="" alt="#">
5. & Element;
Coyright©2020 All rights reserved.
<small> Element </small>
今回はぐんと学んだタグが増え、加えてタグにさらに情報を与える属性
というものを学びました！（勝手に例えるなら英語文法の副詞的役割）
下記１つ１つまとめていきます。
**********************************************
1. <a> Element </a> "a"はアンカータグと言われ、別の情報とつなぎますよー！の印。
よく見るTOPやHOME、概要、などのメニューボタンをクリニックするとその画面へ移行しますよね！！あれです！！
この裏側では"a"タグが働いているんです！
なので開始タグ<a>の中に一緒にどことリンクするのか、その情報を a タグの中に加えてあげます。
このタグに加えられる情報のことを属性という。
今回は unordered listタグの中で使用
※復習:<ul><li>Element</li></ul>は順番のないリスト
↑
ここにさらに関連するタグでございます！
(ページ内のナビゲーションに使用されることが多い un ordered listタグね）
これは初回HTMLブログで復習やりました！
では！行きましょう！"a"タグの属性 href="#"
注目点として、属性になるのは開始タグだけで終了タグには属性をつけない。
属性の形式のタイプがあるので先に紹介します。
形式A: <a href="#"> ＃には移動する場所の情報がくる。
→この形は同じタブの画面で情報が切り替わる形式
形式B: <a href="#" target="_blank">
→さらに target="_blank を加えることで新規タブを自動で開いてくれる形式
＊挿入順＊
<ul>
<li><a href="行先情報"> Element </a></li>
</ul>
これで属性"a"タグに挟まれた要素はクリックできるようになる。
<ul>
<li><a href="#">XXXXXXXXXXXXX</a></li>
<li><a href="#">YYYYYYYY</a></li>
<li><a href="#">ZZZZZZZ</a></li>
<li><a href="#" target="_blank">AAAAAAAAAAAA</a></li>
</ul>
2. <dl> + <dt> Element </dt> + <dd> Element </dd> + </dl>
<dl></dl> descrioption list
下記説明型文章の時に (対話形式など)
●●●●●●●とは？
〇〇〇〇〇ということです。
手順1 まず対象範囲全体に開始タグ、終了タグでマークアップ
<dl>
●●●●●●●とは？
〇〇〇〇〇ということです。
</dl>
手順2 <dt></dt>で問いかけ部分をマークアップ
<dt>●●●●●●●とは？</dt>
手順3 <dd></dd>で問いかけ部分をマークアップ
<dd>〇〇〇〇〇ということです。</dd>
完成図
<dl>
<dt>●●●●●●●とは？</dt>
<dd>〇〇〇〇〇ということです。</dd>
</dl>
3. <table> Element </table>
表を展開するときに使用。
<table border="1"> Element </table>
<tr><th> Element </th></tr>
<tr><td> Element </td></tr>
手順１ 表になる範囲に開始タグ、終了タグをマークアップ
<table>
日時 場所 内容
1月12日 教室C HTLM
1月13日 教室B HTLM
1月14日 教室B PhotoShop
</table>
手順2 まず全てのElemenrtに開始、終了タグ <tr></th>をマークアップ
<table>
<tr>日時 場所 内容</tr>
<tr>1月12日 教室C HTLM</tr>
<tr>1月13日 教室B HTLM</tr>
<tr>1月14日 教室B PhotoShop</tr>
</table>
手順3 表内見出し箇所の要素(ここでは日時、場所、内容)に<th> </th>タグでマークアップ
thは テーブルヘッダー(table header)
<tr><th>日時</th> <th>場所</th> <th>内容</th></tr>
手順4 見出し以外のElementを <td></td>でマークアップ
<tr><td>1月12日</td><td>教室C</td><td>HTLM</td></tr>
<tr><td>1月13日</td><td>教室B</td><td>HTLM</td></tr>
<tr><td>1月14日</td><td>教室B</td><td>PhotoShop</td></tr>
完成図
<table>
<tr><th>日時</th><th>場所</th><th>内容</th></tr>
<tr><td>1月12日</td><td>教室C</td><td>HTLM</td></tr>
<tr><td>1月13日</td><td>教室B</td><td>HTLM</td></tr>
<tr><td>1月14日</td><td>教室B</td><td>PhotoShop</td></tr>
</tabe>
※表に線で枠を引くときは開始タグ<table>に属性をつける
<table border="1">
1は線の太さのレベル
4. <img>画像挿入タグ
このタグは属性 src=""とセットで覚えた方がいい！<img src="#img">
挿入imgはあらかじめエクスプローラーのファイルへ入れておき、開いておく
Blackets内、左に画像が入っているファイルが表示されているか確認
さらに属性タグ alt="#"を追記
<img src="画像Element" alt="#">
#には、画像の説明的ワードを入れる
例えば、さくらのお花見をしている社員の写真、雪だるまを作る親子の写真、など
5. 文字参照 ∈ これはタグではない！Elementの直前にそのまま挿入
どのデバイスで見ても同じマークが見える特別な形式
最後の著作権の役割などに多く使用
例として、
Coyright©2020 All rights reserved.
この直接追記によるマークアップでWeb上では下記のようなcマークが出るようになる
Coyright©2020 All rights reserved.
ここには下記<p>タグと<small>タグでマークアップ (決まり文句のように覚えてしまおう)
<p><small> Element </small></p>
※文字を小さくしたい理由では<small></small>は使用しない
あくまで他と差別化するElementに対し強調的意味での使用なのでデザイン的文字サイズのためには使用しない