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

このサイトについて サイトマップ


アフィリエイトで稼ぐのは厳しい ⇒ 速習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>




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

  画像表示