HTML-CSS講座

HTML5とCSS3基本講座 4回|HTMLルール

HTMLのルールを学習します。要素に追加する属性とは、要素で指定された情報がどこにあるのか、あるいは、要素の役割の細部の指定や機能の拡張などを指定します。記事では、具体的な内容として、「a要素の属性」と「img要素の属性」について解説します。

要素の性質を定義する属性とは

前回の講座では「初心者も知っておくべき8つのタグ要素」を紹介しました。これらの要素には、さらに詳しい指定が必要なものもあります(a要素とimg要素)。具体的には、「属性」を追加して紹介します。

属性とは?

要素に追加する属性は、要素で指定された情報がどこなのか、あるいは、要素の役割の細部の指定や機能の拡張などを指定します。

次に、前回行った「初心者も知っておくべき8つのタグ要素」の中で属性を指定しなければならないものの内容を紹介します。(尚、ここでは、WPが反応しないように不等号を大文字で書いていますが、実際には小文字で記載して下さい)

a要素の属性

a要素は、他のウェブページを参照する「ハイパーリンク(リンクを張る)」を定義するタグです。「どこにある情報なのかの場所を指定します」href属性を追加して次のように記載します。href属性で参照先のウェブページの場所を記します。

<a href=”リンク先のアドレス”>テキスト文</a>

ここで、a要素で挟まれた部分の語句や画像は、リンクボタンとして機能します。

img要素の属性

img要素は、画像を表示します。そのため、どの画像なのかなどをsrc属性(画像の場所)や、alt属性(画像の代替テキスト)、title属性などのタグで指定します。

<img src=”画像ファイルの場所” alt=”代替テキスト”>

上記のalt属性の代替テキストは、画像が表示されなかった場合に備えたものです。

テキストエディタで実践

では、今回学習した、a要素について、テキストエディタ(ブラケッツ等)で実践してみましょう。

テキストエディタ(ブラケッツ等)を立ち上げて次の内容を打ち込んで下さい(不等号は、小文字にして下さい)。

<!DOCTYPE html>
<html>
  <head>
    <meta charset=”UTF-8”>
    <title>練習用4回目の講義</title>
  </head>

  <body>
    <h1>HTML講座4</h1>
    <p>これは練習用の文章です。これは練習用の文章です。これは練習用の文章です。これは練習用の文章です。これは練習用の文章です。これは練習用の文章です。これは練習用の文章です。これは練習用の文章です。これは練習用の文章です。これは練習用の文章です。これは練習用の文章です。これは練習用の文章です。これは練習用の文章です。これは練習用の文章です。これは練習用の文章です。これは練習用の文章です。これは練習用の文章です。これは練習用の文章です。これは練習用の文章です。これは練習用の文章です。これは練習用の文章です。これは練習用の文章です。これは練習用の文章です。これは練習用の文章です。これは練習用の文章です。これは練習用の文章です。</p>
    <h2>HTMLを習得するには</h2>
    <ul>
    <li>焦らず、ゆっくり、テキストエディタで好きなものを作る</li>
    <li>楽しみながら取り組む</li>
    </ul>
    <p>勉強だと思わないで、テキストエディタで遊びましょう。</p>
    <p><a href=” https://www.yahoo.co.jp/”>ヤフージャパンへリンク</a>
  </body>

</html>
以上の内容をテキストエディタでプレビュー表示すると、次のようになります。
*************************

*************************

まとめ

HTMLのルールを学習しました。要素に追加する属性は、要素で指定された情報がどこにあるのか、或いは、要素の役割の細部の指定や機能の拡張などを指定します。

「a要素」では、他のウェブページを参照する「ハイパーリンク(リンクを張る)」を定義するタグです。「どこにある情報なのかの場所をhref属性で指定します。」

「img要素」では、画像を表示します。そのため、どの画像なのかなどをsrc属性(画像の場所)や、alt属性(画像の代替テキスト)、title属性などのタグで指定します。

a要素や、img要素には、もっとさまざまな属性があって、さらに詳しく情報を指定することもできますが、ここでは割愛します。自分で、どんどんチャレンジして下さい。

ABOUT ME
iyasaretaihito
子どもの時から、昆虫や恐竜、宇宙などに興味がある理科大好きな理系人間です。 会社は半導体設計関連会社に勤務して、60歳で定年退職後は趣味に没頭する、のん気なおじさんです。
RELATED POST