htmlファイルと画像ファイルの関係

htmlファイルと画像ファイル合わせてひとつのページ

htmlと画像ファイルはあくまで独立したものです。htmlファイルの中に、IMGタグを使って画像の指定をすると表示するときにはめ込まれます。htmlファイルと画像ファイルは別々に存在します。

上記のページはsakuhin.htmlを表示したものを表していますが、次のような構造をしています。sakuhin.html は文字部分だけです。中に、yama.jpg という画像をはめ込むように指定しているので、中程に山の絵が入ります。

目次の index.html から、sakuhin.html がリンクされ、sakuhin.html が yama.jpg を取り込んでいる様子を図にしました。

ファイル名は半角英数字に

htmlファイルも画像ファイルもファイル名は必ず半角の英数字にします。全角文字ではうまくいきません。public_htmlの中のファイルをダブルクリックして見ているうちはうまくいくのですが、インターネットの形式で公開するとうまくいかなくなります。[みんなのindex]から表示した場合や http://www.st.seiai.ed.jp/~n8hoge/ などと入力して表示した場合に、見えるかどうか確認しましょう。

山.jpg とか、山の絵.png とかは全角であることがはっきりわかります。しかし、英字や数字にも全角があります。yama.jpg は yama の部分が全角になっています。以前は全角は半角の2倍の幅があったのでわかりやすかったのですが、最近は見やすく調整するようになったので見分けにくくなってしまいました。入力の時に気をつけてください。

images などのフォルダ名も同じです。


聖愛高等学校
http://www.seiai.ed.jp/