質問: 現在、テンプレートを使用して穴埋め式でサイトを作っています。 与えられたテンプレート(index.htmlというファイル)をメモ帳にドラック ゙して、そこに文字を入れて、ある程度できたところで、メモ帳を保存して、firefoxの画面にドラッグして確認しています。 今回の質問としましては、以下のテンプレートに画像のファイル名を入力したのにどうして画像が表示されないのか、どうすれば画像をサイトに表示されるのか、という質問です。 (で括られた(サイトでは表示されない)解説文も一緒に載せました。) 【テンプレートの抜粋】 【上記のテンプレートの置換え箇所に、海の写真のバナー、という私が保存しておいたものを入力しました】 】 このファイルは以前あるサイトのバナーを個人的に参考の為にマイピクチャにこの名前で保存しておいたもので、今回試験的にこの名前を入力しました。(これを転用する事はありません)テンプレートで画像サイズを指定する箇所がありますが、この画像のサイズがわからないのでまずはそのまま値を変えないでおきました。 他の文字の箇所や大きい文字にするH1 H2などは正常に表示されていますが、この画像の部分はまったく入力前と変わりありません。画像サイズをそのままにしてあるので、おかしな形になるとは予想していましたが、少なくともなんらかの画像らしきものは表示されると思っていました。 どうすれば、まず、画像が表示されるでしょうか? よろしくお願いします。
回答: まずファイル名を英数文字にしてください。ASCII文字が良い。 次に、そのHTMLと同じ場所にimagesホルダーを作成して、そこに画像をコピーしてください。 まだ、始められたばかりだと思います。 いきなりテンプレートに取り掛かる前に ※はじめてのWebドキュメントづくり ( ) あたりで、まったくのゼロからHTMLを書く最低限の知識を身につけておいたほうが良いです。 それと、XHTMLで作成されているようですが・・テンプレートはXHTMLのようですが、HTMLで学ばれたほうが良いでしょう。いずれHTML5になりますが、そのときはHTML4.01strictからの変更になります。 ★HTML5 における HTML4 からの変更点 ( ) HTML4.01strictです。transitionalじゃありません。 テキストエディタは、 EmEditor Free ( ) などが良いでしょう。 書いたら Another HTML-lint gateway ( ) などでチェックしながら直していくと上達が早いです。 【他の文字の箇所や大きい文字にするH1 H2などは正常に表示されていますが、】 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^これは、とっても重要で基礎的な部分の間違いです。本当に本当に何よりも大事・・・ H1は断じて、「文字を大きくする」ものではありません。 少し長いですがあるサイトからの引用です。 【引用】____________ここから ご存知のように、それぞれのホームページにはテキストと言って多くの文章データがあります。人間はそのホームページを視覚的に捉えるため、読みやすくなっていることや、デザインが美しいことを重視します。 しかし、コンピューターは違います。例えば検索エンジンは、多くのホームページを巡回する中で、そのホームページがどんなテーマに基づいたものであるかを文章などで判断します。つまり、本文に何が書いてあるのかでどんなキーワードに関連の深いサイトであるかを判断するわけです。人間は目で見て本文がどこにあるのかを見つけることが出来ますが、コンピューターにはその目印がありません。 HTML5.0は、文章を構造化するためのタグが新設されています。つまり、「ここが本文ですよ」と宣言するタグがあるのです。これは世界共通で使用するため、検索エンジンは本文を示すタグで挟まれている部分が本文であると容易に判断することが出来ます。これは検索エンジンの検索精度を大幅に向上し、ホームページのデータベース化という大きな目的を推進することに役立ちます。 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[HTML5.0の文章の構造化 | HTML5とは?変わるWebと注目の新要素 HTML5.0の情報サイト( )]より H1・・はその部分の文字が、最も高いレベルの見出しであることのマークアップです。 今後、HTML5が一般的になると、文書構造を正確にマークアップで示すことが、とても重要になります。その意味でも ★はじめてのWebドキュメントづくり ( ) は、役に立つでしょう。HTML4.01仕様書翻訳メンバーの代表をされていた方が娘さんのために書かれたもの・・とか