タグの華


  コピーして貼り付けるだけで誰でも簡単に作れる自営業者のためのホームページ作成講座

 
コピペで作るホームページトップ コピペで作るホームページトップ HTMLの基本 テーブル 画像 リンクタグ リストタグ



3.画像

この章ではホームページの見栄えをよくする画像タグの挿入を行います


下の「HPのメイン画像」と書かれた画像の右側にあるタグをコピーして張り付けるだけで簡単に画像を表示させることが出来ます。
 
画像を表示させるためには、<img>タグを記述します。
記述例
<img src="画像ファイル名" alt="画像の説明" width="横幅" height="縦幅">

* htmlファイルがある場所にさらにimages(名前は自分で指定)というフォルダを作り、その中に画像がある場合は <img src="images/画像ファイル名">となります。
(例えばデスクトップにhormpageというフォルダを作ってその中にhtmlファイルを置き、htmlファイルと同じ場所(hormpageというフォルダ)にimagesファイルを作り その中に画像ファイルを置いた場合などです)


では始めていきますが、表示させる画像がない方はコピペする前にサンプル画像をダウンロードしておきましょう!
サンプル画像のダウンロードはこちら  (著作権の関係で花の画像になっています。ご容赦ください。)
ダウンロードしたら解凍ソフトで解凍して画像ファイルをデスクトップに移しておきましょう。圧縮フォルダーと解凍したフォルダーは削除してしまってください。

画像をダウンロードし、デスクトップに保存したらコピペ作業に入りましょう。
(画像がある方はご自分の画像ファイルを使いましょう! サイズは540*200〜300くらいが良いです) 画像の加工にはJtrimが便利です。(フリーソフトです)



■HPのメイン画像

 
画像の説明




 ※ 一度枠の中をクリックしてから選択する
   とコピーしやすいです。



解説

@.前のページで作成したindex.htmlファイルを開くと下のように表示されてますでしょうか?

        テーブルタグ貼り付け後のイメージ


テーブルタグ貼り付け後のイメージ A. ここでは画像を貼り付けたいと思いますので再びメモ帳でindex.htmlファイルを開いてみましょう。

B.サイドバーのタグが終わり</td><td>をはさんでメインタグが始まっていると思いますがメインタグの前に上記の 【HPのメイン画像】のソースを貼り付けてあげます。
具体的には右側、中枠の中と書かれたソースのような感じです。

C.貼り付けたら再び上書き保存をしてブラウザで開いて見てみましょう!

  上書き保存の仕方




by 自営業者が自分で作るお店のホームぺージ

Copyright © 2008 タグの華 All rights reserved.