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 で呼吸カルーセル効果を実現

推薦する

Ubuntu Server 16.04 MySQL 8.0 のインストールと設定のグラフィックチュートリアル

Ubuntu Server 16.04 MySQL 8.0 のインストールと設定のグラフィックチュー...

Node.jsをゼロから学ぶ

目次URL モジュール1. 解析メソッド2. フォーマット方法3. 解決方法イベントモジュール(イベ...

ソケット '/tmp/mysql.sock' 経由でローカル MySQL に接続できない解決策

エラーメッセージ:エラー 2002: ソケット '/tmp/mysql.sock' ...

DIV 背景半透明テキスト非半透明スタイル

DIVの背景は半透明ですが、DIV内の文字は半透明ではありませんコードをコピーコードは次のとおりです...

カルーセルの制作方法を実現するjs

この記事では、カルーセル画像の表示を実現するためのjsの具体的なコードを参考までに共有します。具体的...

iframe が HTML 内のページにジャンプするのを防ぎ、iframe を使用して WeChat Web バージョンをページに埋め込む方法

私は、WinForm と HTML5 を組み合わせた小さなものを作りたいだけなのですが、突然、そこに...

Mybatisの特殊文字処理の詳細な説明

序文: Mybatis の特殊文字処理、Mybatis の xml ファイル内の特殊文字の処理、ここ...

Vue バッチ更新 DOM 実装手順

目次シーン紹介深い応答性トリガーゲッターDep.targetを探すゲッターセッター要約するシーン紹介...

Nginx+ModSecurity セキュリティモジュールの導入

目次1. ダウンロード2. 展開1.Nginxのデプロイメント2. ModSecurityの展開3....

MySQLへのJava接続の基礎となるカプセル化の詳細な説明

この記事では、Java接続MySQLの基礎となるカプセル化コードを参考までに紹介します。具体的な内容...

MySQL データベース テーブルとデータベース パーティショニング戦略

まず、テーブルを分割する必要がある理由について説明します。データシートが数百万に達すると、1 回のク...

border-radius 値の設定に関する質問

問題記録今日はプログレスバーに似た小さなコンポーネントを完成させるつもりでした。プロトタイプは次のよ...

Reactのようなフレームワークをゼロから作成する

最近、インターネットで「Build your own React」という記事を見ました。著者は、シン...

VirtualBox で作成された Debian 仮想マシンは Windows ホストとファイルを共有します

用語: 1. VM: 仮想マシンステップ: 1. Windows 10 に VirtualBox 6...

Vue3 setup() の高度な使用例の詳細な説明

目次1. オプションAPIと組み合わせAPIの違い2. セットアップを具体的にどのように使用するので...