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

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

　　この文字をクリックするとサンプルダウンロード出来ます。

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

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

トップ画面に２個の画像を組み込みます
　・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>

●　各項目の説明。

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

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

②　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を見ています。

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

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

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

　　画像表示