写真を貼り付けてみよう

写真の事前準備

写真をWebページに貼り付ける前に、写真ファイルをWebサーバの ~/public_htmlディレクトリ配下に用意しなければならない。その用意をしよう。

まずはブラウザから、自分のホームディレクトリにファイルをコピーしよう。

写真を貼りつけるにはimg要素を使う。img要素は

<img src="画像ファイル名" alt="代替テキスト">

という書式で指定する。これにより、画像ファイル名で指定された画像がWebページに挿入される。このように

<要素名 変数₁="値1" 変数₂="値2">

という形式の、変数の部分属性という。img要素では、属性として src と alt を指定することができ、それぞれ

画像ファイル所在場所を指定する。GIF, JPEG, PNG ファイルなどが指定できる。

画像、フォーム、アプレットを表示できないブラウザのために代替テキストを指定するために用いる。

という役割を持っている。他にも以下の属性を指定することが推奨されている。

画像の幅

画像の高さ

画像の高さと幅を指定することで、ブラウザはその画像が巨大なものであっても同一ページのもっと先の部分まで整形処理することができる。今回は width, heightの指定は省略する。

それでは実際のHTMLファイルに、写真を貼りつけるための要素<img>を書いてみよう。

sample.htmlに以下の強調部分を追加しよう

  <html>
   <head>
   <title>
   初めてのHTML
   </title>
   </head>

   <body>

   <img src="sample.jpg" alt="滝の写真">

   </body>
  </html>