【HTML50分講座】HTMLのIMGタグ・AタグーChapter03

今回は文章の本文を記述する＜BODY＞タグ内からIMGタグ・Aタグを説明していきます。

前回の「Chapter02」の後、当講座に進んでください。

HTML文章の本文を記述する＜BODY＞タグ

BODYタグとは、HTML文章の本文を表すタグになります。

BODYタグ内はWEB（ブラウザ）に表示されます。

imgタグとは、image（イメージ,画像）の略語で、HTMLで画像を表示する際に使うタグのことです。

記述例：<img src=”画像ファイルが格納されるフォルダ” alt=”代替文字”>

続いて、imgタグの属性を説明していきます。ちなみに、（必須）と書かれているモノは必ず明記する属性、(任意）と書かれているモノは省略できる属性です。

src属性とは、sorce（ソース）の略語で、主に画像を埋め込む際に使います。src属性を主に使うタグには、img（イメージ）、script（スクリプト）、iframe（インラインフレーム）、embed（エンベッド）タグなどがあります。

alt属性とは、alternate attribute（代替テキスト）の略語で、画像などが表示できない場合、代わりに表示する文字列を定義する際に使います。ちなみに読み方は、”オルト”になります。

width属性を使って、画像の横幅を指定します。また、height属性を使って、画像の縦幅を指定します。

name属性を使って、imgタグの名前を指定します。

Aタグとは、anchor（アンカー）の略語で、ハイパーリンクの出発点と到達点を指定する際に使うタグのことです。

記述例：<a href=”https://www.〇〇〇.co.jp/”>アンカーテキスト</a>

出発点とはWebページの画像や文字、到達点とはリンク先となる他のWebページやファイルのことを指します。記述例を見ると、出発点は”アンカーテキスト”の文字、到達点はリンク先の”https//www.〇〇〇.co.jp”となります。

href属性とは、hypertext referenceの略語で、ハイパーリンク先のURLを指定する際に使います。

target属性を使って、リンクを開く方法を指定します。target属性の開く方法には、”_blank”と”_self”なるものが代表的です。

タブとは、WEB（ブラウザ）上において画面の切替をワンタッチで行えるスイッチの意味になります。タグを切り替えれば、簡単にWEB（ブラウザ）を切替表示できます。

まず始めに、以下をメモ帳で記述し、Chapter03.htmlファイルとして保存してください。また、sample.gifをChapter03.htmlと同フォルダ内に用意してください。

Chapter03.html内の8行目に以下の文章を追加してください。

Webブラウザで実行した場合、どのように表示されますか？

問1で表示した画像の大きさ（縦と横幅）を小さくしてください。

Chapter03.html内の9行目にYahooのトップページにジャンプできるように、リンクを追加してください。

Yahooページのリンク先である「https://www.yahoo.co.jp」を使います。

問１で追加したヤシの木の画像を押したら、Yahooページにジャンプするように修正してください。