画像をホームページに掲載する場合には、二つのファイルを用意しなければなりません。
一つは、HTMLファイルで、もう一つは画像ファイルです。
HTMLファイルには、読み込む画像のファイル名、その画像が保存されている場所、どのような大きさで表示するのかといったことを指定します。
ここでは、HTMLファイルも、画像ファイルも同一のフォルダー内にあると言う前提にします。両者が異なる場所に保存されている場合については、リンクの「パスについて」を参考にして下さい。
そして、実際に起動するとまずHTMLファイルが起動され、画面に開かれたページに画像ファイルを読み込むというプロセスになります。
(IMG=Image, SRC=Source)
|
例えば、
|
と指定し、このファイルが保存されているのと同じフォルダに、kokkai.jpgというタイトルのイメージファイルを保存します。ブラウザ上では下記のように表現されます。 参考 国会の写真は衆議院ホームページより(http://www.shugiin.go.jp/itdb_main.nsf/html/index_annai.htm)。
![]() |
写真を入れるときには、必ず代替テキストを入れるようにしましょう。これは何らかの理由でイメージを送ることができない場合でも、その写真が何であったかを言葉で説明できるようにするためです。
また、写真が表示できている場合には、写真上にマウスを置くとマウスの先にテキスト枠が表示され写真の解説となります。
その基本書式は下記のようにします。
(ALT=Alternative)
|
例えば、下記のように入力します。ここでは、故意にイメージファイルのファイル名の綴りを誤っています。
|
ブラウザ上では下記のように表示されます。
![]() |
画像も文字の一環として処理されているので同じ行として横一列に並びます。イメージの底辺に合わせて配列されます。また、一行に収まりきらない分は二行目に表示されます。
例えば、下記のように入力します。
なお、文字の色については無視してください。
<IMG SRC="kokkai.jpg" ALT="衆議院側、つまり「左」からから見た国会">予算について,参議院で衆議院と異なつた議決をした場合に,法律の定めるところにより,両議院の協議会を開いても意見が一致しないとき,又は参議院が,衆議院の可決した予算を受け取つた後,国会休会中の期間を除いて30日以内に,議決しないときは,衆議院の議決を国会の議決とする。 |
ブラウザ上では下記のように表示されます。
![]() |
これでは見苦しいので、イメージと文字位置を決めるタグが必要になるわけです。
文字位置の調整の調整は下記のように指定します。
|
例えば、下記のように入力します。
<IMG SRC="kokkai.jpg" ALIGN="right" ALT="衆議院側、つまり「左」からから見た国会">予算について,参議院で衆議院と異なつた議決をした場合に,法律の定めるところにより,両議院の協議会を開いても意見が一致しないとき,又は参議院が,衆議院の可決した予算を受け取つた後,国会休会中の期間を除いて30日以内に,議決しないときは,衆議院の議決を国会の議決とする。 |
ブラウザ上では下記のように表示されます。
![]() |
これ以外に、文字と画像の位置関係については以下のことができます。
|
画像の大きさを帰ることができます。方法はピクセル数で大きさを固定して指定する場合と、ブラウザの画面に対する比率として指定する方法の二つです。
|
|