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

推薦する

MySQL で絵文字表現を挿入できない理由と解決策

失敗のシナリオMySQL データベースに絵文字表現を挿入するために JDBC を呼び出すと、例外ja...

JavaScript関数導入の詳しい説明

目次機能紹介関数関数の作成コンストラクタは関数を作成する関数宣言は関数を作成する関数式関数を作成する...

順序再構築に関する簡単な説明: MySQL シャーディング

目次1. 目的2. 環境整備1. 基本情報2. データベース環境の準備3. データベースを構築し、サ...

ネイティブJSを使用した遅延読み込みlazyLoadの3つの方法の概要

目次序文方法1: 高コントラスト方法2: getBoundingClientRect() APIを使...

血の写輪眼と輪廻眼の特殊効果コードを実現するためのHTML+CSS

結果 (完全なコードは下部にあります): 実装は難しくありませんが、繰り返しコードが多くなります。実...

HTMLの基本タグと構造の詳細な説明

1. HTMLの概要1.HTML: ハイパーテキスト マークアップ言語。これはプログラミング言語では...

HTML テーブル タグ チュートリアル (47): ネストされたテーブル

<br />このページでは、テーブルをネストすることで組版を実現しています。つまり、1 ...

Javascriptのクロージャとアプリケーションの詳細な説明

目次序文1. クロージャとは何ですか? 1.1 クロージャは条件コードを満たす1.2 クロージャ生成...

CSS を使用して、左側に固定幅、右側に適応幅を持つ 2 列レイアウトを実装する複数の方法

CSS を使用して、左側に固定幅、右側に適応幅を持つ 2 列レイアウトを実装する 7 つの方法。コー...

背景とリンクとして画像を書き込む方法(背景画像+リンク)

写真を背景にしてリンクを記載します。たとえば、ウェブサイトのロゴ画像などです。例: ポテトのロゴ画像...

HTML ページにミュージック ビデオを追加する例

1. ビデオタグFirefoxでは自動再生をサポートしますが、GoogleとIEではサポートしません...

HTML テーブル データを Json 形式に変換するサンプル コード

<table>テーブルデータをJSON形式に変換するJavaScript関数は次のとおり...

CentOS 8 に MariaDB をインストールするための詳細なチュートリアル

MariaDB データベース管理システムは MySQL のブランチであり、主にオープンソース コミュ...

Mysql5.6.36 スクリプトのコンパイル、インストール、初期化のチュートリアル

概要この記事は、centos7.3 上で mysql5.3.6 を自動的にコンパイルしてインストール...

Vue プロジェクトで axios をカプセル化する方法 (http リクエストの統合管理)

1. 要件Vue.js フレームワークを使用してフロントエンド プロジェクトを開発する場合、サーバ...