XHTML 入門チュートリアル: XHTML Web ページ画像アプリケーション

XHTML 入門チュートリアル: XHTML Web ページ画像アプリケーション
<br />適度に画像を追加すると、Web ページがより美しくなります。 画像タグ <img>
<img> タグは、Web ページに画像を挿入するために使用されます。 <img> タグには重要な属性「src」があり、その属性値は画像のアドレスです。次に、index.html に画像を挿入します。 「index.html」ファイルを開き、</body> の前に次のコードを追加します。
<p><img src="upload/2022/web/logo.gif" alt="テクニカルサポート"/></p>
保存した後、Web を閲覧して、Web ページがこのページと同じであることを確認します。
<img> は空のタグであり、XHTML の要件に準拠するにはその後に「/」を続ける必要があることがわかりました。この例では、src に加えて alt 属性も指定されており、これを置換属性と呼びます。何らかの理由で画像を表示できない場合は、画像の代わりに alt 属性の値が表示されます。画像が正常に表示されたら、画像の上にマウスを置くだけで、alt 属性の属性値を確認できます。 画像をリンクとして使用する 前回のチュートリアルでは、ハイパーリンクの作成方法を学びました。次に、「index.html」を開き、先ほど挿入したコードを次のように変更します。
<p><a href="https://www.jb51.net/"><img src="upload/2022/web/logo.gif"alt="テクニカルサポート"/></a></p>
保存後、Web ページを参照して、自分の Web ページがこの Web ページと同じであることを再度確認してください。画像がハイパーリンクになっているか確認してください。画像をクリックすると、Rookie Bar のホームページに入ります。 XHTML の検証に関しては、このセクション以降、「index.html」Web ページの外観を変更することはなくなります。作成した Web ページを検査のために権威ある組織に送信します。まず、http://validator.w3.org/ にアクセスします。このページは XHTML 検証ツールで、作成した Web ページが XHTML 標準に準拠しているかどうかを確認するために使用されます。 URL で確認するか、確認用のファイルをアップロードするかを選択できます。ファイルアップロードの検証は次のように選択できます。
「ファイルアップロードによる検証」に「ローカルファイル」の列があります。「参照」をクリックし、先ほど保存した「index.html」を探して選択し、「チェック」ボタンをクリックします。結果は URL 検証から得られるものと同じになるはずです。次のエラー メッセージが返されます。
申し訳ありませんが、このドキュメントの 3、6 ~ 9、12 ~ 14、16 ~ 22 行目に、utf-8 として解釈できないバイトが 1 つ以上含まれているため、このドキュメントを検証できません (つまり、見つかったバイトは指定された文字エンコーディングの有効な値ではありません)。ファイルの内容と文字エンコーディングの表示の両方を確認してください。
当社のページは XHTML に準拠していませんか?次のセクションに進んでください。

<<:  MySQL マスタースレーブ遅延問題の解決方法

>>:  jQuery で呼吸カルーセル効果を実現

推薦する

メタタグを簡単に説明すると

META タグは、一般的に タグと呼ばれ、HTML Web ページのソース コード内の重要な HTM...

ネイティブjsはショッピングカートのロジックと機能を実装します

この記事の例では、ショッピングカートのロジックと機能を実装するためのjsの具体的なコードを共有してい...

Windows 上の MySQL 5.6 で my.ini 設定ファイルを見つける方法

忘れてしまった場合に後で戻って確認できるようにメモしておいてください。問題の説明:今日はちょっとした...

VMware仮想マシンブリッジによるインターネット相互接続を実現する方法

VMware をインストールして新しい仮想マシンを作成したら、オプション バーの [編集] - [仮...

Docker の NFS-Ganesha イメージを使用して NFS サーバーを構築する詳細なプロセス

目次1. NFS-Ganeshaの紹介2. NFS-Ganeshaの設定3. NFS-Ganesha...

Red Hat Enterprise Linux 8 をベースにした CentOS 8 が正式にリリースされました

CentOS プロジェクトは、Red Hat の再配布要件に完全に準拠した、Red Hat Ente...

MySQL 8.0 ディクショナリテーブル拡張の詳細な説明

MySQL のデータ ディクショナリは、データベースの重要なコンポーネントの 1 つです。INFOR...

Centos7 ベースの Varnish キャッシュ プロキシ サーバーを展開する

1. ワニスの概要1. ワニスの紹介Varnish は、新しいソフトウェア アーキテクチャを使用し、...

ReactでuseStateを使用する詳細な例

使用状態useState は、関数コンポーネント内で呼び出すことで、コンポーネントに内部状態を追加し...

CSS3 でシンプルな白い雲が浮かぶ背景効果を実現

これは非常にシンプルな純粋な CSS3 の白い雲の浮遊する背景効果です。浮かぶ白い雲の特殊効果は、C...

VueはEChartsを使用して折れ線グラフと円グラフを実装します

バックエンド管理プロジェクトを開発する場合、バックエンドのユーザーデータをカウントし、折れ線グラフや...

MySQL データテーブルのパーティション戦略と利点と欠点の分析

目次なぜパーティションが必要なのでしょうか?パーティショニング戦略パーティションの危険性なぜパーティ...

HTML でのアンカータグの使用例の共有

アンカータグの使用法:同じドキュメント内の特定の場所にリンクすることをアンカー リンクと呼びます。ア...

MySQL 5.7 インストール不要の設定グラフィックチュートリアル

Mysql は人気があり、使いやすいデータベース ソフトウェアです。以下は、mysql の無料インス...

CSS変数を使用してスタイルを変更する方法の例

質問js を使用して CSS 疑似クラス スタイルを変更するにはどうすればよいでしょうか?しかし、j...