コンテンツとして画像を組み込みます

売れるホームページの作り方 ⇒ 速攻HTML ⇒ 画像を組み込む


速攻HTML

ページのコンテンツとして画像を組み込みます

メニューを横に並べる ←|→ 配置を調整する



画像ファイルを用意し、htmlで画像を記述します。


トップ画面に2個の画像を組み込みます
 ・title.gif トップ画面の最上の画像
 ・top.gif 中央に配置する画像


htmlソースにタグを追加して画像を組み込みます。 ソースは index.html


サンプルではトップ画面に関してのみ、h1見出しに画像を使って見ます。


● htmlソースにタグを追加します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org
/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  <title>富士河口湖の四季おりおりをお伝えします</title>
 </head>

 <body>
 <h1>富士河口湖の四季</h1> ←h1タグのコンテンツを下の様に変更します。
 <h1><img src="title.gif" alt="富士河口湖の四季"/></h1>

<p>富士河口湖の四季をお伝えする観光案内です。</p>

 <ul>
 <li><a fref="index.html">トップ</a></li>
 <li><a fref="about.html">牛乳の工房について</a></li>
 <li><a fref="event.html">イベントの案内</a></li>
 <li><a href="mailto:yatugatake@web.mail">メール</a></li>
 <li><a href="http://blog.xxx.xxx/">ブログ</a></li>
 </ul>

<p><img src="top.gif" alt="河口湖" /></p> ←この行を追加して画像タグを書きます。

<p>河口湖観光社は、河口湖の自然を生かしたイベントや季節の商品をお届けしている会社です。湖畔にある「体験の工房」では、竹細工を楽しんだり、クラフト作りチャレンジを楽しむこと出来ます。河口湖にお越しの際は、ぜひお立ち寄りください。 </p>

 </body>
</html>






● 各項目の説明。


@ 使用できる画像ファイルの形式は3種類です


  JPEG形式 ファイル拡張子.jpg  フルカラー
  GIF形式   ファイル拡張子.gif  256色以下
  PNG形式  ファイル拡張子.png  256色以下/フルカラー


A IMGタグ。


  画像を記述するには<img> を使用して、プロパティで画像ファイル名・サイズなど指定します。


  <img src="ファイル名" width="巾" height="高さ" alt="名称" ・・・/>


  ・ファイル名:拡張子付きで指定します。pic1.gif top.png の様にします。urlでフルパス指定
           もできます。 http://abc.blog.com/img/sample.gif の様な感じです。

           ブログではurlでフルパス指定しています。

  ・巾、高さ :ファイル格納サイズをそのまま使用する場合には、width や height は指定不要です。
         指定する場合は width="200px" height="150px" の様にします。


  ・alt属性 :必ず指定して下さい。音声ブラウザや検索エンジンは画像で無く、altを見ています。


B このサンプルでは h1 タグのコンテンツにimgを使用して見ました。


   リンク用の a タグのコンテンツに画像を使用しても何の問題もありません。
   <a href="sample.html"><img src="abc.gif" alt="例題"/></a>





サンプルを表示したイメージです。急にソレらしくなって来ました。
次のページで、位置調整と、真っ白な背景に少し手を入れて完成させます。


  画像表示