ホームページ作成 そのE 画像を挿入してみよう。

文章だけでは物足りない。
自分のデジカメで撮影した写真は、著作権侵害はないので
どしどし、挿入していこう。

段落内で文字を大きくしたり、色をつけて文字を強調してみた

今度は画像を挿入して、面白いホームページにしてみよう。

sample7.html

<HTML>
<HEAD>
<TITLE>
ホームページの作成方法
</TITLE>
</HEAD>
<BODY>
<H1>社長になりたい日記</H1>
<H2>社長を目指すため汗みず働く平社員の物語</H2>
<HR>
<P>3月10日</P>
<P>
今日は会社であった。最近、<BIG><BIG>定時上がり</BIG></BIG>ではあるが、仕事が詰まっており、苦しんでいる
。<BR>
しかし、家に持ち帰って<S>サービス残業する気はない。</S><BR>
会社は会社。自宅は自宅。<BR><BR>
<SMALL>建前はそうなんだけどね。。</SMALL>
</P>
<HR>
<P>
3月11日
</P>
<P>
今日も会社。<STRONG>早く週末にならないかな。</STRONG><BR>
今週はどこいこうかな。<BR>
残念ながら、<B>家計</B>が<I>財政難</I>で<U>遠出</U>は無理だけど、考えてみるか。<BR>
</P>
<HR>
<P>
3月13日
</P>
<P>
今日は金曜日。定時の日だ。といっても、最近は残業禁止だ。<BR>
<IMG SRC="yuuhi.jpg" ALT="夕日" WIDTH="320" HEIGHT="240" BORDER="1"><BR>
何気に携帯で撮ってみた。<BR>
夜遅くの残業もなくなってしまったなぁ〜。<BR>
</P>
</BODY>
</HTML>


<IMG SRC="yuuhi.jpg" ALT="夕日" WIDTH="320" HEIGHT="240" BORDER="1">

で「yuuhi.jpg」という画像を挿入できる。

WIDTHは幅320ピクセル、HEIGHTは高さ240ピクセルの大きさで画像を貼り付ける。

省略すれば、写真の大きさがそのまま反映される。画像を拡大したり、縮小したりできる。

ALTは画像のところにマウスを持っていったときに表示される「文字」(画像の題名)を書く。
タイトルは夕日と名づけたのでそうした。

BORDERは画像の枠の太さ。省略すれば、枠は表示されない。
普通は枠はつけないが、あえてつけてみた。2、3にするにつれて、太くなる。

画像を挿入するには注意点がある。
容量だ。

最近のデジカメは1000万画素とか高画質のため、容量が数メガ単位ですぐにプロバイダにおけるファイル容量を超えてしまう。

容量を数十キロ単位に落とす。

画像をWindows付属のペイントで開く。

ペイントの【変形】→【伸縮と傾き】で画像を小さくすること同時に、ファイル容量を小さくすることができる。

デジカメの画像を開くと、巨大な画像が出てくるが、これだけのものをホームページに載せる必要はないので、適当な大きさ(320×240ぐらいか)にする。縦、横10%〜20%にすれば適当な大きさになる。

また、ペイントではトリミングも可能。点線で指定して、【編集】→【ファイルへのコピー】を行うと、点線で選んだ部分のみ別ファイルへコピーできる。

ファイルの拡張子だが、保存するときに名前をつけて保存を選び、ファイルの種類をJPEGにしよう。
ファイルの容量を減らすことができる。

Windowsに無料でついてくるペイントを活用しよう。

デジカメ画像は、コピーしてから加工するようにしよう。原画像は保存しておきたいし、失敗したときにやり直すためである。


サンプルソースをダウンロードできます。

以上で画像の挿入完了。

文章の右揃え、中央揃え、左揃えをしてみよう。


実践!ホームページ作成TOP