Webサイトに画像を表示させるには?

質問

現在、テンプレートを使用して穴埋め式でサイトを作っています。
与えられたテンプレート(index.htmlというファイル)をメモ帳にドラック゛して、そこに文字を入れて、ある程度できたところで、メモ帳を保存して、firefoxの画面にドラッグして確認しています。
今回の質問としましては、以下のテンプレートに画像のファイル名を入力したのにどうして画像が表示されないのか、どうすれば画像をサイトに表示されるのか、という質問です。
(<!-- 　　 -->で括られた(サイトでは表示されない)解説文も一緒に載せました。)

【テンプレートの抜粋】
<!-- ●ヘッダー画像（サイトの看板）ここから●
このテンプレートでのヘッダー画像サイズは　横860px　縦200px　で設定されています。
サイトのサイズが横860pxです。
※サイズを変更できる方はご自由にサイズを変更してください。
-->
<p class="mainimage"><img src="images/■ここにヘッダー画像のファイル名（.以降も含めたもの）を記入■" width="860" height="200" /></p>
<!-- ●●ヘッダー画像（サイトの看板）ここまで●●●●●●●●● -->

【上記のテンプレートの置換え箇所に、海の写真のバナー、という私が保存しておいたものを入力しました】
<p class="mainimage"><img src="images/海の写真のバナー.jpg" width="860" height="200" /></p>】

このファイルは以前あるサイトのバナーを個人的に参考の為にマイピクチャにこの名前で保存しておいたもので、今回試験的にこの名前を入力しました。(これを転用する事はありません)テンプレートで画像サイズを指定する箇所がありますが、この画像のサイズがわからないのでまずはそのまま値を変えないでおきました。
他の文字の箇所や大きい文字にするH1 H2などは正常に表示されていますが、この画像の部分はまったく入力前と変わりありません。画像サイズをそのままにしてあるので、おかしな形になるとは予想していましたが、少なくともなんらかの画像らしきものは表示されると思っていました。
どうすれば、まず、画像が表示されるでしょうか?
よろしくお願いします。

回答No.2

ORUKA1951 · ベストアンサー

まずファイル名を英数文字にしてください。ASCII文字が良い。
次に、そのHTMLと同じ場所にimagesホルダーを作成して、そこに画像をコピーしてください。

まだ、始められたばかりだと思います。

いきなりテンプレートに取り掛かる前に
※はじめてのWebドキュメントづくり ( http://www.asahi-net.or.jp/%7Esd5a-ucd/www/ )
あたりで、まったくのゼロからHTMLを書く最低限の知識を身につけておいたほうが良いです。

　それと、XHTMLで作成されているようですが・・テンプレートはXHTMLのようですが、HTMLで学ばれたほうが良いでしょう。いずれHTML5になりますが、そのときはHTML4.01strictからの変更になります。
★HTML5 における HTML4 からの変更点 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/ )
　HTML4.01strictです。transitionalじゃありません。

テキストエディタは、
EmEditor Free ( http://jp.emeditor.com/modules/download2/rewrite/tc_5.html )
などが良いでしょう。
　書いたら
Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html )
などでチェックしながら直していくと上達が早いです。

【他の文字の箇所や大きい文字にするH1 H2などは正常に表示されていますが、】
　^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^これは、とっても重要で基礎的な部分の間違いです。本当に本当に何よりも大事・・・

H1は断じて、「文字を大きくする」ものではありません。
少し長いですがあるサイトからの引用です。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
　ご存知のように、それぞれのホームページにはテキストと言って多くの文章データがあります。人間はそのホームページを視覚的に捉えるため、読みやすくなっていることや、デザインが美しいことを重視します。
　しかし、コンピューターは違います。例えば検索エンジンは、多くのホームページを巡回する中で、そのホームページがどんなテーマに基づいたものであるかを文章などで判断します。つまり、本文に何が書いてあるのかでどんなキーワードに関連の深いサイトであるかを判断するわけです。人間は目で見て本文がどこにあるのかを見つけることが出来ますが、コンピューターにはその目印がありません。
　HTML5.0は、文章を構造化するためのタグが新設されています。つまり、「ここが本文ですよ」と宣言するタグがあるのです。これは世界共通で使用するため、検索エンジンは本文を示すタグで挟まれている部分が本文であると容易に判断することが出来ます。これは検索エンジンの検索精度を大幅に向上し、ホームページのデータベース化という大きな目的を推進することに役立ちます。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［HTML5.0の文章の構造化 | HTML5とは？変わるWebと注目の新要素 HTML5.0の情報サイト( http://www.html5-guide.com/strong/text.html )］より

　H1・・はその部分の文字が、最も高いレベルの見出しであることのマークアップです。

　今後、HTML5が一般的になると、文書構造を正確にマークアップで示すことが、とても重要になります。その意味でも
★はじめてのWebドキュメントづくり ( http://www.asahi-net.or.jp/%7Esd5a-ucd/www/ )
は、役に立つでしょう。HTML4.01仕様書翻訳メンバーの代表をされていた方が娘さんのために書かれたもの・・とか

お礼

返信がおそくなりすみません。
使っているテンプレートがXHTMLとは知りませんでした。今後のためにもHTMLを使うほうが良いとの事でしたのでHTMLを使用していこうと思います。質問直後に偶然みつけた資料から、同一フォルダに画像がある場合や下位、上位フォルダにある場合などの違いによる記述の仕方が判明し、この場合、同じフォルダに画像を保存したので、images/という部分を外して記述したところ日本語のファイル名でしたがFirefoxに表示されました。
はじめてのWebドキュメントづくり、というサイトはとてもわかり易いサイトでこれで学びたいと思います。
H1についての考えも注意します。
その他、EM Editerやhtmlをチェックするソフトなど有益なものを紹介していただき、感謝いたします。
色々とどうもありがとうございました。

回答No.1

DrFell

マイピクチャに保存してある「海の写真のバナー.jpg」ファイルを
今作成中のindex.htmlが入っているフォルダの中のimagesフォルダの中にコピーしてください。
imagesフォルダが無ければ、作ってその中に入れてください。

お礼

ご回答ありがとうございます。
画像を配置するHTMLの記述のなかに、images/という記述をした場合はindex.htmlがあるフォルダの中にimagesというフォルダを作ってそこに画像を保存しないと表示されないとわかりました。また、下位フォルダをつくらずに同一フォルダに画像を保存した場合、HTMLにはimages/という部分が不要であるとわかりました。
どうもありがとうございました。