図の挿入(タグとその属性を使う)

 <img >で指定する。 

外部にある画像ファイルを表示させるタグは、
<img src="表示させるファイル名">
と記述します。ファイル名は、大文字と小文字を区別して、 ダブルクォートまたはシングルクォートでで囲みます。 この時、そのファイル名の画像ファイルが正しく存在していなければ表示できません。
そして、範囲を指定するタグではないので、</img>のような閉じるタグはありません。
また、分類的にはインライン要素に属します。

なお、用意する画像ファイルのファイル名は、HTMLファイルと同じように スペースを含まない半角英数字にすべきです。

以下に具体例を示します。サーバーに置いてあるheno.jpg の名前の画像ファイルを表示させています。

<html>
<head>
	<title> 画像を表示させる </title>
</head>
<body>
<p>このhtmlファイルと同じ場所にある
heno.jpg という名前のファイルを
表示させている。</p>

<img src="heno.jpg">

<p>ファイル名の指示が
正しくないと次のようになります。</p>
<img src="xxxx.jpg">
</body>
</html>

上記のファイル指示の場合は、このhtmlファイルと同じ場所に、heno.jpg のファイルが存在そんざいしないと正しく表示できません。

なお、<img src="heno.jpg"          > の          の部分で、 画像の幅や高さや説明を書くことができます。
以下に例を示します。左の記述で、右のように表示します。
<img src="heno.jpg" height="50">  高さを50にしています。
<img src="heno.jpg" width="30" height="100" alt="へのへのもへじ"> へのへのもへじ 左では幅、高さの両方を指定し alt で画像の代わりとなる代替文字列を指定しています。
altはalternative の略です。これにより、マウスカーソルを画像の上に移動することで 記述されている文字列がポップアップなどで表示されます。 また音声ブラウザでは altの内容を読み上げる機能があります。

 タグに指定する属性 

以上のようにimgタグでは、src、width、height、altなどを指定できますが、これらは属性 またはプロパティ(property)と呼ばれます。 タグには、それぞれの性質にあった属性を持っており、 それら属性は、
最初の始まりの<タグ名       >       の中で、半角スペースで区切って並べて書く規則になっています。 この並べる順番は、決まっていません。(順不同です)なお、閉じるタグには属性を書きません。

属性を指定する場合は、 属性名を = の左に書いて、設定する値となる情報を左側で ダブルクォートの " で囲むか、 またはシングルクォートの ' で囲むように書きます。
例えば<img src="heno.jpg" height="50"> または <img src='heno.jpg' height='50'> と書きます。
" で囲でも、 ' で囲んでも同じですが、 当サイトでは特別な理由がない限り、 " を使います。 出題に答える場合にも " を使ってください。


よく使う いくつかのタグ属性(プロパティ)の例を挙げます。

ページ全体の背景を黄色にする指定は、<body bgcolor="yellow">という指定で、bgcolorが bodyタグの属性になっているわけです。
(現バージョンのHTML仕様においてbgcolorのタグ属性は使うべきではない! 代わりにスタイルで指定すべきとされています。)

h1,h2,h3・・やpタグでは、そろえる指定の align の属性がよく使われ、その設定値に "left"や"right"や"center"などを指定します。 その記述例を 水平線で区切って、以下に示します。

<p align="left">デフォルトの左よせ</p>と書くと次のように見えます。

デフォルトの左よせ


<p align="right">右よせ</p>と書くと次のように見えます。

右よせ


<p align="center">中央にそろえる</p>と書くと次のように見えます。

中央にそろえる