画像の表示方法
画像を表示させるには画像のファイルを用意しなければなりません。練習用ですから何 でもかまいません。風景写真でもペットの写真でもかまいません。パソコンに入っている画像を利用して、ブラウザ画面上に表示させる練習をしましょう。
画像はホームページHTMLファイルと同じフォルダに入れておかなければ表示されません。そこで、一つ新しいフォルダを作って、ホームページHTMLファイルと画像ファイルをいれるようにしましょう。フォルダの名前は「HP見本」としておきます。
デジカメなどで撮った写真はサイズが大きいので縮小しなければなりません。私はウインドウズにあらかじめインストールされている画像編集用ソフト、「ペイント」を使って画像を開き、編集します。その方法について簡単に解説します。
まず、「ペイント」を開きます。メニューバーの「ファイル」を開き掲載したい写真をクリックします。すると、ペイントの画面いっぱいに写真が表示されます。このままでは大きすぎて使えないのでサイズを変更します。まず、ペイントのタスクバーの「変形」ボタンをクリック、「伸縮と傾き」をクリック、するとダイアログボックスが出てきますから伸縮の「水平」「垂直」項目の入力をします。サイズにもよりますが、だいたい４０％から２０％くらいに縮小します。見本に表示されている写真は「水平」「垂直」ともに２５％に縮尺しています。そして、名前をつけて保存したあと、いったんペイントを閉じます。保存の方法は写真であればJPG形式がいいでしょう。
今度はマイピクチャを開いて先ほど作成した画像を確認してください。指定サイズに表示できましたか？次はそのファイルを先ほど作ったホームページのフォルダに移動してください。これでホームページHTMLファイルと画像ファイルが一つのフォルダに収まりました。
さていよいよ画像を表示させるために表示させたい場所に、HTMLタグと属性を書きこんでいきます。ここでは、最初の段落と２番目の段落の間に挿入しました。書き方は下のとおりです。
| <p>< img src=”3-4-19.jpg” alt=“見本画像” ></p> |
なお、”3-4-19.jpg”の部分はご自分の用意した画像のファイル名を入れてください。ファイル名はサーバーの都合で半角英数字といくつかの記号しか使えませんので注意してください。
次の項目→画像の右側に文章を回りこませるには