【HTML/CSS/PHP講座④まとめ】HTML・引き続き主要なタグをゼロから学んでおります

PR

今回のタグは <img>  <a>  < ul> <ol> <dl><dt><dd> です。

<img>タグ・・・画像を表示する

src属性(必須)

必須属性のsrc属性では、画像ファイルのURLを指定します。ブラウザで表示できるGIF、JPEG、PNGなどの画像ファイルを指定します。

alt属性(任意)

alt属性には、画像の代わりに表示される文字列を指定します。

alt属性は代替テキストと呼ばれ、画像を閲覧することができない環境でも、情報をテキストや音声で得ることが、出来るようにするための属性です。
音声ブラウザの場合、画像のalt属性のテキストを音声として流してくれるそうです!iPhoneで読み上げ機能などを使っているときは便利ですし、SEO的にもよいそうです。

属性って?

属性とは開始タグの中に書くもので、タグの性質を値で表現することです。

画像を挿入したい位置に、<img>タグで開始し、開始タグの中で指定したい画像のパスをダブルクオートで囲みます。

<img src=”http://〜 “ alt=”〜” >

  • srcには画像のあるURL(=URLは「絶対パス」であり、その画像の住所)
  • altに画像の説明文

上記のパスは「絶対パス」です。画像の住所をダイレクトに入れます。

パスには「相対パス」もあります。

この相対パスとは、基準となるファイルから見て任意のファイルの場所を指定します。(相対パスは自分のドメイン内にあるものしか指定できません。)

相対パスは、現在地からファイル等の場所を指定します。 1つ上の階層なら、「../」を先頭につけます。 2つ上の階層なら、「../../」と書きます。

・・・こちらは今の時点ではちょっと難しかったのでまた改めて復習したいと思います。

<a>タグ・・・ハイパーリンクを指定する

href属性

<a>タグには終点</a>があります。リンクの出発点と到達点を指定するタグです。 リンクの出発点では必須属性であるhref属性でリンク先を指定します。<a href=“/”> </a> ←「〜」の位置にパスを入れますが、その文字をクリックするとhref属性で指定したリンク先に飛ぶことができるようになります。 

例)クリックするとヤフー をタグで記述すると以下のとおり。

<a href=”https://www.yahoo.co.jp/“>クリックするとヤフー</a>

応用では以下のようなものがあります。

  • クリックするとメールが立ち上がる <a href=”mailto:メールアドレス”>ここをクリック</a>
  • クリックすると電話できる <a href=”tel:電話番号”>ここをクリック</a>

target属性

ハイパーリンクを開くときのターゲットを指定します。

  • _self(デフォルト) 現在のウィンドウでリンク先を開く
  • _blank 新しいタブやウィンドウでリンク先を開く

例)クリックするとヤフー 新しいタブでヤフーのHPを開く場合をタグに記述する場合以下のとおり。」

<a href=”https://www.yahoo.co.jp” target=”_blank“>クリックするとヤフー</a>

<ul>タグ・・・ 順序のないリスト

<ul>とは、「unordered list」のこと。<li>と併用します。

例)犬、猿、キジを順序のないリストにする

  • キジ

これを記述すると・・・

<ul>
<li>犬</li>
<li>猿</li>
<li>キジ</li>
</ul>

※ リストの丸●を□に変えたい、というときはCSSを使います。

<ol>タグ・・・ 順序のあるリスト

例)犬、猿、キジを順序のあるリストにする

  1. キジ

これを記述すると・・・

<ol>
<li>犬</li>
<li>猿</li>
<li>キジ</li>
</ol>     

<dl> <dt> <dd>・・・定義付け、説明リスト

<dl>タグでリスト本体を定義し、<dt>タグでリストの項目を定義し、<dd>タグにそのリストの内容を記述します。
始点の<dl>から終点</dl>で、<dt>と<dd>要素を囲みます。

<dt>と<dd>は必ずしも一対である必要はなく、説明は複数になっても構いません。

 例)桃太郎と鬼の勝負についての説明リスト

桃太郎が勝った場合
 村に平和がおとずれます。
鬼が勝った場合
 村が鬼によって滅ぼされます。
互角の場合
 世界が桃太郎派と鬼派で二分します。
それ以外の場合
 桃太郎と鬼が共生する世界がおとずれます。
これをタグで書くと・・・

<dl>
<dt>桃太郎が勝った場合</dt>
<dd>村に平和がおとずれます。</dd>
<dt>鬼が勝った場合</dt>
<dd>村が鬼によって滅ぼされます。</dd>
<dt>互角の場合</dt>
<dd>世界が桃太郎派と鬼派で二分します。</dd>
<dt>それ以外の場合</dt>
<dd>桃太郎と鬼が共生する世界がおとずれます。</dd>
</dl>

となります。

一週間ごとに更新していますが、一週間ってあっという間ですね。。また引き続きがんばります。

PR

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です