HTML 初心者ガイド (8)

行に埋め込まれた画像
ほとんどの Web ブラウザは、行に埋め込まれた X-ビットマップ (XBM)、GIF、または JPEG 形式の画像 (つまり、テキストに隣接する画像) を表示できます。他の形式の画像が処理されています。 、ポータブル ネットワーク グラフィック (PNG) 形式]。各画像には処理時間がかかり、ドキュメントの表示が遅くなります。

連続して画像が含まれている場合は、次のように入力します。 SRC=../../image name>ALT="FORWARD" HEIGHT=32 WIDTH=32>

画像ファイルの URL

アンカー チェーン HREF で使用される形式と同じです。画像ファイルが GIF ファイルの場合、画像名のファイル名部分は .gif で終わる必要があります。X ビットマップ形式のファイルは .xbm で終わる必要があります。 .jpg または .jpeg で終わる; ポータブル ネットワーク グラフィック ファイルは .png で終わる必要があります。 タグには、ブラウザに画像のサイズを通知する 2 つの属性が含まれている必要があります。 HEIGHT 属性と WIDTH 属性により、ブラウザはファイルの残りの部分をダウンロードする際に、画像に適切なスペース (ピクセル) を許可できます (ピクセル サイズは、Adobe Photoshop などの画像処理ソフトウェアから取得できます)。 )

たとえば、ファイルに自分のポートレートを含めるには、次のように入力します:


ALT="FORWARD" HEIGHT=32 WIDTH=32>

注: 画像のサイズが属性の説明のサイズと一致しない場合、一部のブラウザーは、割り当てられたスペースに収まるように画像を拡大または縮小するために HEIGHT 属性と WIDTH 属性を使用します。したがって、読者がこの機能にアクセスできるとは想定せず、画像のサイズを確認し、適切なサイズを使用することをお勧めします。画像の表示方法にはある程度の柔軟性があります。画像をテキストから分離したり、画像を左、右、または中央に配置したり、アイコンとテキストを同じ行に配置したりできます。さまざまな形式を試して、どれが最適かを確認できます

画像とテキストを同じ行に配置します
デフォルトでは、この段落のように、画像の下部と次のテキストが同じ行に表示されるようにすることもできます。 ALIGN= 属性の値を TOP または CENTER に設定して、画像を段落の先頭または中央に配置します。

このテキストは画像の上部と同じ行にあります ()。このようなテキストは 1 行だけであり、他の行は一番下に移動することに注意してください。画像の

この行 テキストは画像の中央に表示されます ()。ここでも、中央には 1 行のみが表示され、他の行は表示されません。

テキストなしの画像
テキストなしの画像 (組織のロゴなど) を表示するには、段落タグの ALIGN= 属性を使用して画像を中央にサイズ変更します。または、以下に示すようにウィンドウの右側に移動します。

結果は次のようになります。

画像が表示されます。

画像の代替テキスト
一部の World Wide Web ブラウザ (主に VT100 端末で実行されているブラウザ) では、ソフトウェアで画像を表示できる場合でも、画像のダウンロードをオフにすることができます。画像 (特にモデムまたは低速回線ユーザーの場合) HTML は、閲覧しているページに何が欠けているかを読者が知るメカニズムを提供します。

ALT 属性を使用すると、表示できる段落を指定できます。画像の場所 例:


ALT="" HEIGHT=48 WIDTH=50> .gif は上向きの矢印 画像表示機能と画像のダウンロードが有効になっているブラウザでは、上向きの矢印のグラフィックが表示されます。 VT100 ブラウザーまたは画像のダウンロードがオフになっている場合、ウィンドウに「上」という文字が表示されます。

これは読者への礼儀です。

背景画像。新しいバージョンの Web ブラウザでは、ホームページを表示するときに背景として使用する画像をダウンロードできます。背景を使用したい人もいれば、そうでない人もいます。通常、背景を含める場合は、テキストを含める必要があります。背景に対してもはっきりと読み取ることができます。

背景画像は、他の画像と同じように、オブジェクトの組織 (リネン紙など) または画像 (おそらくロゴ) にすることができます。 。

ただし、作成する必要があるのは非常に小さな画像だけです。ブラウザはタイルと呼ばれる機能を使用して、ブラウザ ウィンドウ全体に画像を繰り返し表示します。簡単に言うと、画像を生成するだけで、ウィンドウがいっぱいになるまでブラウザが自動的に画像を複数回実行します。このアクションは、以下で説明するタグを使用すると自動的に実行されます。

背景画像を含むタグは、

タグの説明に属性として含まれます。
背景色
デフォルトでは、ブラウザーは灰色の背景に黒を使用してテキストを表示しますが、一部の HTML 作成者は背景色を選択し、それに応じてテキストの色も変更します。事前に、読みやすいかどうかを確認してください (たとえば、多くの人は黒い背景に赤いテキストを使用しますが、これは非常に読みにくいです)。 タグの複数の属性を使用します。たとえば、次のように入力すると、テキスト、リンク、表示されたリンクとアクティブなリンクの色を変更できます。背景が黒 (BGCOLOR)、テキストが白 (TEXT)、ハイパーリンクが銀色 (LINK) のウィンドウが作成されます

6 桁の数字と文字の組み合わせが色を表し、RGB (赤、この 6 桁の数字は、実際には 3 つの 2 桁の数字を順番に並べたもので、00 から FF までの赤、緑、青の比率を 16 進数値で表します。たとえば、000000 は黒 (色がまったくない)、FF0000 は明るい赤、FFFFFF は白 (3 色すべてが飽和している) を意味します。幸いなことに、これらの数字と文字の組み合わせの意味はあいまいです。さまざまな組み合わせと色の対応関係を理解し​​ます。

ColorPro Web サーバー
外部画像、サウンド、アニメーション
ユーザーがドキュメント内の単語または小さな画像から作成されたリンクをアクティブにしたときに、画像を表示することもできます 画像が開きますこれは外部画像と呼ばれ、画像が大きいためにメイン文書のダウンロードを遅くしたくない場合に便利です。

外部画像リンクを含めて、次のように入力します。 HREF="MyImage.gif">リンク アンカー

次のように入力することもできます:

IMG SRC="SmallImage.gif">
ALT="" HEIGHT=48 WIDTH=50>

画像 SmallImage.gif をクリックすると、ファイル LargerImage.gif が開きます。外部アニメーションとサウンドをリンクするための構文は同じです。唯一の違いは、リンクされたファイルの拡張子です。例:



上記は HTML 初心者向けガイド (8) の内容です。さらに関連する内容については、PHP 中国語 Web サイト (www.php.cn) に注目してください。