ホームページ閲覧用のindex.htmlファイルを作成しFFFTPソフトでbiglobeのサーバーに

ホームページ閲覧用のindex.htmlファイルを作成しFFFTPソフトでbiglobeのサーバーにアップしたがIEで表示されません。サーバーにアップしたファイル容量は元のサイズより縮小されてますがこれが原因でしょうか？サーバーにアップされたファイルを開くと文字は表示されてるが画像が表示されません。

質問者からの補足コメント

• バイナリー送信で送信元のファイルとサーバーのファイル容量は同じになりましたが画像は未表示のままです。画像はimgファイルに21個保存してありimgファイルをそのままサーバーにアップしました。画像表示を許可するにはどうすれば良いのですか？

    補足日時：2016/03/14 20:50

• アップロードした画像デイレクトリーの実行許可とはどういう事ですか？

    補足日時：2016/03/14 20:55

• 専門知識が乏しいのでパスを良く理解してませんがサーバーにアップしたHTMLファイルのパスはルート相対パス つまり
  <img src="img/1.jpg">で画像が表示されません。

    補足日時：2016/03/17 01:23

• HTTPプロトコルの仕組みは理解しましたが具体的にコーデイングをどうすればいいのかわかりません。「GET:/abc/img/1.jpg」は
  コーデイングですか？サーバーにアップしたhtmlファイルのコーデイング変更はソースの表示ができないのでpc側で変更するのでしょうか？

    補足日時：2016/03/18 13:07

• 一部訂正します。「サーバーにアップしたHTMLファイルのソースが表示されない」は誤りで「ソースの表示はされるが書き換えができない」に訂正します。

    補足日時：2016/03/18 13:12

• 知人の専門家に見てもらった結果、HTML作成の言語はUTF-8ですがこれを保存する際の言語がJISになっていたこと、また検索エンジンGoogle及びYahooにURLを登録する事でウエブサイトで閲覧が可能となりました。検索エンジンBingはURL登録されるまで数週間かかる模様で検索しても現時点では表示されませんが一定の時間経過後表示されるものと思います。皆さんから色々ご教示いただき大変勉強になりました。改めて御礼申し上げます。

    補足日時：2016/03/19 22:07

No.1 回答者： naktak 回答日時： 2016/03/14 16:57

> サーバーにアップしたファイル容量は元のサイズより縮小されてますがこれが原因でしょうか？

容量が変化するということはありません。
FFFTPの設定によっては変化するかもしれませんが、バイナリ転送すべきでしょう。

> サーバーにアップされたファイルを開くと文字は表示されてるが画像が表示されません。
いくつかの原因が考えられます。
・画像を所定の位置にアップロードしていない。
・HTMLで指定している画像パスに誤りがある。
・HTMLで指定している画像ファイル名の大文字／小文字が正確でない。
・アップロードした画像またはディレクトリの実行／読み込み許可が行われていない。

No.2 回答者： naktak 回答日時： 2016/03/15 08:45

ディレクトリは実行許可がなければ、そのディレクトリ配下にアクセスすることはできません。

ファイルは読込許可がなければ、そのファイルにアクセスすることはできません。

FFFTPの設定は忘れましたが、パーミッションなどの言葉があると思います。
755や、705などといった数字もどこかに見えていると思います。
http://www.mdn.co.jp/di/articles/2104/?page=2

No.3 回答者： naktak 回答日時： 2016/03/15 09:10

<img src="/hoge.jpg" />

HTMLファイルで上記のように指定した時、ディレクトリは以下のようになります。
WindowsでWebサーバを立てずに実行した場合ではC:\hoge.jpg。
サーバ(Linux)ではルート相対パス。
ルート相対パスとは、例えはhttp://hoge.co.jp/というURLならば、
http://hoge.co.jp/hoge.jpgにアクセスするということになります。

つまり、Webサーバを立てずにファイルの動作確認をしたところで、
それがサーバ上でも正しく動作するとは限りません。

パス指定を、絶対パス、ルート相対パス、相対パスのどれで指定しているのか、およびその指定に誤りはありませんか？
絶対パス
<img src="http://hoge.co.jp/img/hoge.jpg" />
ルート相対パス
<img src="/img/hoge.jpg" />
相対パス
<img src="../img/hoge.jpg" />

また、ないと思いますが、拡張子がimgというファイルだとしたら、それは表示できなくて当たり前です。


想定は、以下のようになるのではないでしょうか。
FFFTP上
/
└public_html
　　├img
　　│　└hoge.jpg
　　└index.html

index.html内
<img src="/img/hoge.jpg" />

ここでindex.htmlからhoge.jpgが表示可能なのは、以下の3通りのみです。
<img src="http://hoge.co.jp/img/hoge.jpg" />
<img src="/img/hoge.jpg" />
<img src="./img/hoge.jpg" />

いくらパス階層が正しくても、大文字／小文字が合致していないため、以下は表示できません。
<img src="http://hoge.co.jp/img/Hoge.jpg" />
<img src="/img/Hoge.jpg" />
<img src="./img/Hoge.jpg" />


パーミッションもあるかもしれませんが、このあたりがまず正しいのか確認された方がよいでしょう。

No.4 回答者： ORUKA1951 回答日時： 2016/03/18 11:15

＞ホームページ閲覧用のindex.htmlファイルを作成しFFFTPソフトで

　正確に用語を使わないと意味不明になってしまう。
index.html があなたのサイトのホームページですよね。(ページは単数形でそのファイルを示す)。サイト全体はウェブサイト。
ホームページとはブラウザを起動したときに最初に表示されるホーム(起点)ページ。ホームベースとか、ゴーホームのホーム
ホームページ - Wikipedia( https://ja.wikipedia.org/wiki/%E3%83%9B%E3%83%BC … )

　で、質問は
＞index.html というHTMLファイルをサーバーに転送したが、HTTP経由では画像が表示されない
ということだと思います。

＞サーバーにアップしたファイル容量は元のサイズより縮小されてますが
　それは通じようはわずかです。FTP(File Transfer Protocol)で転送するのは、OSによって改行コードが異なるWindowsは\r\n、UNIXは\n、旧Macは\n)を変換する程度ですから、行数×数ビットしか小さくならないはずです。(HTMLはテキストファイルですからバイナリ―で送ってはなりません。必ずテキストモードで転送します。その際にほんの少しサイズが変わることはあります）
＞画像が表示されない
　これは画像がないということ。
　HTTPプロトコルでは、いったんそのファイルを受け取った後、ブラウザが改めてサーバーにそのページに必要なファイルを要求していくものです。
　そのページ(例えば、hoge.com/abc/index.html ) に<img src="img/1.jpg"・・>
とあれば、
hoge.com
　/
　|-- abc/
　　　|-- index.html に、"img/1.jpg"　とある
　　　|-- img
　　　　　|-- 1.jpg　<-- ここにあるはず
よってサーバー(hoge.com)に対して
GET: /abc/img/1.jpg
と要求します。

サーバーは、それを探して提供するけどそれがない。みつからない

★その画像が表示されるべき場所で右クリックして「画像だけを表示」で画像のあるべきところに飛ぶはずです。
　画像の位置は、<img src="" alt="代替テキスト">とaltは必須ですからわかるはず。
　　「alt属性は、IMG要素とAREA要素では必ず指定しなければならない。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」

　それで、404 Not Found だったら画像がない。

　ウェブ開発なら開発ツール( https://addons.mozilla.org/ja/firefox/extensions … )が豊富なFirefoxをお使いだと思いますが、Firebug( https://addons.mozilla.org/ja/firefox/addon/fire … )つかうとソースの結果がすぐわかる。
　またサーバーとのやり取りは、Live HTTP Headers( https://addons.mozilla.org/ja/firefox/addon/live … )で確認できます。--GET: /abc/img/1.jpg に対して、どんな応答があるかなど・・

＞専門知識が乏しいのでパスを良く理解してませんが
　理科や数学と一緒、別に専門知識というほど難しい物じゃない。基本からきちんと身につけたら、科学技術系のものですからとっても簡単。急がば回れと言いますが、この世界はきちんと基礎から順を追って学ぶと簡単な世界ですよ。