Info Tech

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

PCを楽しむ女性

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講座4回目課題の結果

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

ポイントのまとめ

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

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

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

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

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