HTMLドキュメントに画像を挿入する方法。グラフィックオブジェクトを HTML ファイルに挿入します。コード内に画像を配置する

17.07.2020

研究室での作業 №5

仕事の目的: wwwドキュメントで静的および動的グラフィック画像を使用する方法を学びます。ハイパーテキストファイル間の接続と HTML ドキュメント内のポイントへのリンクを実装する方法を学びます。

仕事を終わらせる

タグは HTML 内のリンクを整理する役割を果たします。 …、最も多くの場合、次のパターンが使用されます。

hrefタグ属性ページ内の目印 (内部リンク)、ローカルディスク上のファイル、またはインターネットリソースを指す場合があります。

1. 画像を作成するには、画像をクリックするとリンクに移動し、コードを設定する必要があります。 , ここで、End はページの最後に移動することを意味します。

図 1.1 は、完全な HTML コードを示しています。

図1.1。 HTMLドキュメント

図1.2。ドキュメントがブラウザに表示されます。

図1.2。ブラウザ内のドキュメント

秘密の質問

グラフィックオブジェクトを HTML ファイルに挿入します。

HTML ドキュメントに画像を挿入するには、次の構造を使用します (完全なものが示されています)。

この設計の各パラメータの説明:

ソース-拡張子付きのグラフィックファイルの名前 (*.jpg、*.gif、*.png がサポートされています)。ファイルが別のディレクトリにある場合は、そのパスを指定します。

整列 -ドキュメント内の画像の配置: 左 - 左端に沿って右 - 右端に沿って。

トップまたは テキストトップ- 画像の上端を現在のテキスト行の上端に揃えます。

真ん中- 現在のテキスト行のベースラインを画像の中心に揃えます。

アブミドル- 現在のテキスト行の中心を画像の中心に揃えます。

底または ベースライン- 画像の下端を現在のテキスト行のベースラインに揃えます。

腹筋底- 画像の下端を現在のテキスト行の下端に揃えます。

国境- 写真の周りにフレームを付けます。デフォルト値は 0 (フレームなし) です。

幅-画像の幅 (ピクセル単位)。

身長 -画像の高さ (ピクセル単位)。

Hスペース -水平方向のパディンググラフィック画像ピクセル単位で。必須パラメータではありません。

ヴスペース -垂直方向のオフセット (ピクセル単位)。必須パラメータではありません。

オルタナティブ- これは、画像が表示されない場合 (見つからないか、ユーザーが画像を表示しないようにブラウザを設定している場合)、画像の代わりに表示されるメッセージです。さらに、マウスカーソルを図面上に置くと、このテキストがツールチップとして表示されます。

名前 -画像の名前を指定します。何も関連付けられていない通常の画像の場合、このパラメータはまったく必要ありません。

低ソース - src パラメーターで指定された画像よりも低品質 (したがってサイズが小さい) の代替画像を含む拡張子を持つグラフィックファイルの名前。このオプションをサポートするブラウザは、最初に lowsrc から画像をロードし、次に src からの画像に置き換えます。必須パラメータではありません。

挿入用 HTML 内の画像使用される主な形式は GIF と JPEG の 2 つです。 GIF 形式は単純なアニメーション (ダイナミックバナー) を保存でき、JPEG は写真などの色の多い画像に最適です。 Web グラフィックスの 3 番目の形式は PNG ですが、Web デザインではあまり使用されていません。 GIF または JPEG 形式の画像は、終了タグのないタグを使用して Web ページに挿入されます。

SRC 属性

属性経由 送信元画像ファイルのアドレス（URL）を指定します。ブラウザは、この属性で指定されたパス (URL) を使用して、サイトディレクトリで目的の画像を検索します。便宜上、サイトのすべての画像は、通常は名前が付けられた別のフォルダーに配置されます。画像。たとえば、任意の画像（できれば小さい形式）を取得し、作成したフォルダー image に次の名前で保存します。 プライマー.jpg。今後はトレーニングの参考にさせていただきます。

さて、ページに写真を挿入してみますか? コードを記述します (パス - URL、画像のあるフォルダーの場所に応じて記述されます)。

src="イメージ/プライマー.jpg" >

以下がなければウェブサイトを作成できません。 ∼ ∼

ほとんどの Web ページにはグラフィックが含まれています。情報をカラフルかつ明確に表示できます。多くの場合、長いテキストで説明するよりも、画像を表示する方が効果的です。
ページにグラフィックを配置するには 2 つの方法があります。

個々の写真の挿入。
背景を写真で埋めます。

いずれの場合も、グラフィックイメージはファイルから取得されます。

グラフィック形式ファイルからページにグラフィックイメージを挿入するには、タグを使用します。 (英語から、image - image) SRC 属性への引数としてファイルアドレスを示します。

グラフィックファイルアドレスは、URL またはファイル名であり、場合によってはパスが含まれます。たとえば、グラフィックファイル logotip.jpg を表示するには、次のタグを記述する必要があります。

タグ内のグラフィックイメージの転送速度を上げるには属性 ( 追加パラメータ) LOWSRC。グラフィックスファイルのアドレスを引数として受け取ります。 2 つのグラフィックファイルを作成できます。1 つ (たとえば、logotip.jpg) には高解像度の画像が含まれ、もう 1 つ (たとえば、logotip.gif) には低解像度の画像が含まれます。次にタグを付けます

最初に logotip.gif ファイルをダウンロードし、それを受け取ったら logotip.jpg ファイルに置き換えるようブラウザに指示します。
グラフィックスの読み込みを高速化するもう 1 つの方法は、ピクセル単位で測定される WIDTH 属性と HEIGHT 属性を使用して、グラフィックスが配置される長方形の領域の寸法を指定することです。これらの属性を指定すると、ブラウザはまずグラフィック用のスペースを割り当て、ドキュメントレイアウトを準備し、テキストを表示してから、グラフィックを読み込みます。ブラウザは画像を圧縮または引き伸ばしてフレームに埋め込むことに注意してください

指定されたサイズ 。画像の寸法を指定する例:通常、グラフィックスはテキストと一緒に使用されるため、テキストとグラフィックスの位置を調整するという問題が発生します。この問題は属性を使用して解決されます。整列タグさまざまな引数を使用して。たとえば、テキストを画像の周囲の右または左に流したい場合があります。通常、画像はテキストと密接に埋め込まれているため、見苦しくなる場合があります。これを回避するには、イラストの周囲に空白の余白を設定します。フィールドは属性を使用して作成されます Vスペース上下の余白については、スペース
.
タグのサイドマージン用

。 。画像の寸法を指定する例:これらの属性の引数は、フィールドのサイズをピクセル単位で指定する数値として指定されます。グラフィックの周りのテキストの回り込みをキャンセルするには、タグを使用します 次のタグは、logotip.jpg ファイルのグラフィックスを右に折り返すように設定します (画像はテキストの左側に表示されます)。:

テキストの右側に画像を配置したい場合は、属性が必要です

引数の割り当て
右画像の周囲に余白を設定するには、次のようなタグを記述する必要があります。ここで、数値 20 と 10 はフィールドのサイズを決定します。

例を見てみましょう

<Н1>共有
グラフィックとテキスト。メモ帳 (テキストエディターのメモ帳) Windows を開きます。上で説明したタグを使用して HTML コードを記述します。以下は、テキストとグラフィックを出力するプログラムです。手持ちのファイルをグラフィックファイルとして使用できます。ここで使用されるファイルは logotip.gif です。
演習 1 右側のグラフィックの周囲にテキストが回り込む。これにはテキストマークアップタグが使用されます。

このテキストは新しい段落から表示されます。これを行うために、特別なタグを使用しました。

ブラウザウィンドウのサイズを変更してみてください。テキストのレイアウトがどのように変化するかに注目してください。

米。 657. 右側の画像の周囲にテキストが回り込む

ページ上の画像 (および他の要素) を正確に配置するための幅広い可能性が提供されます。 テーブルそして スタイル。これらの HTML 要素については後で説明します。たとえば、表示されるフレームのない表を定義し、この表のセルに画像、テキスト、その他の要素を配置できます。

写真が含まれていない Web サイトをインターネット上で見つけるのは困難ですが、写真は Web サイトのデザインの主要部分であり、印象に残る外観を与えるため、これは当然のことです。あ良いデザインウェブサイトが開発成功の鍵となります。 HTMLで画像を表示するにはタグが1つだけです .

1. タグの構文

画像の説明" src ="URL " [属性]>

このタグは単一であることに注意してください。必要ありません終了タグ .

src 属性は必須です。表示する画像のアドレスを指定するために使用します。絶対 URL または相対 URL を指定できます。アドレスを指定しなかったり、誤って書き込んだ場合、画像は表示されません。

属性 alt="説明" - не является обязательным, но лучше сразу себя приучить к тому, чтобы прописывать его каждому изображению, поскольку это нужно как для пользователей, так и для поисковых систем.!}

残りの属性はオプションです。以下で説明します。まずは画像をHTMLに出力する簡単な例を見てみましょう。

2. HTMLに画像を挿入する方法

画像をHTMLに挿入するには、タグを使用します。構文をもう少し詳しく見ていきました。実際の例を挙げてみましょう。

例2.1。タグの使用

... ...

このコード

でこの例では Yandex Photos の写真から画像の直接アドレスを示しました。ほとんどの場合、同じ URL にある画像へのリンクが提供されます。たとえば、src="/img/kartinka.jpg"、つまり相対アドレスが示されます。

複数の写真を並べて配置することも可能です。 1 行に収まらない場合は、自動的に次の行に移動します。

例2.2。 HTMLで複数の画像を連続して表示する

... https://img-fotki.yandex.ru/get/173114/19749220.11/0_da31c_45c53ada_orig.jpg"> ...

ページ上で次のように変換されます。

別の画像を投稿するとしたら、改行、これでは収まらなくなるからです。

例2.3。画像での代替テキスト (alt) の使用

タグ内に代替テキスト（alt属性）を含めることを推奨します、写真が利用できない場合に備えて。以下は代替テキストを使用した例です。最初のケースでは画像のサイズを指定しませんでしたが、2 番目のケースでは画像のサイズを指定します。

... 画像例" src ="321.jpg "> ...

ページ上で次のように変換されます。

別の画像を配置すると、この行に収まらなくなるため、新しい行に配置されます。

次に、すべてのタグ属性を詳しく見てみましょう .

3. タグの属性とプロパティ

1. プロパティ align="parameter" - 画像の配置を決定します。この値は、テキストが画像の周りをどのように流れるかにも影響します。次のパラメータを受け入れることができます。

左 - 左揃え
middle - 画像の中央を現在の行のベースラインに揃えます
Bottom - 画像の下の境界線を周囲のテキストに合わせます
top - 画像の上端は現在の行の最上位の要素に揃えられます。
右 - 右揃え

例3.1。 HTML内の画像を右揃えにする

... https://img-fotki.yandex.ru/get/173114/19749220.11/0_da31c_45c53ada_orig.jpg"> ...

ページ上で次のように変換されます。

2. プロパティ alt="text" - подсказка/описание картинки. Выполняет сразу две важные функции:!}

ホバー時にツールチップを表示します
ブラウザで画像が無効になっている場合、このテキストが表示されます

この属性は、Yandex Images で画像をランク付けする場合にも非常に重要です。 Google画像。これは検索エンジンのアルゴリズムの要素の 1 つであるため、各画像に追加する必要があります。

例3.2。 HTMLで画像をフレーム（枠線）付きで出力する

... http://img-fotki.yandex.ru/get/4423/80300288.f/0_631d9_e822264_M.jpg"> ...

ページ上で次のように変換されます。

4. プロパティ bordercolor="color" - 画像の周囲を囲む境界線の色を設定します。 border 属性が 0 より大きい場合にのみ意味を持ちます。

例3.3。色枠付きの画像をHTMLで出力する

... http://img-fotki.yandex.ru/get/4423/80300288.f/0_631d9_e822264_M.jpg"> ...

結果はすぐ上に表示されます。

注記

border 属性と bordercolor 属性は、img の CSS スタイルで設定できます。

... http://img-fotki.yandex.ru/get/4423/80300288.f/0_631d9_e822264_M.jpg"> ...

5. プロパティ height="NUMBER" - 画像の高さをピクセルまたはパーセンテージで設定します。たとえば、画像のサイズが 400x200 で、高さを 150 ピクセルに指定した場合、画像は 300x150 (25% 小さく) に圧縮されます。比例的に。

6. プロパティ width="NUMBER" - 画像の幅をピクセルまたはパーセンテージで設定します。たとえば、画像のサイズが 1000x800 で、幅が 1200 ピクセルに指定されている場合、画像は自動的に 20% 拡大されて 1200x960 になります。

7. プロパティ hspace="NUMBER" - 他の HTML オブジェクトからの画像の水平方向のインデントをピクセル単位で設定します。

8. プロパティ vspace="NUMBER" - 他の HTML オブジェクトからの画像の垂直方向のスペースをピクセル単位で設定します。

注記

hspace と vspace の代わりに、古くて実績のあるマージンを使用することをお勧めします (これについては、HTML スタイルの記述に関するレッスンで詳しく読むことができます)。簡単に思い出させてください:

マージントップ: X ピクセル;
(X - 上部のインデント)
マージンボトム: Y ピクセル;
(Y - 下のインデント)

マージン左: L ピクセル;

(L - 左インデント)

... マージン右: R ピクセル;(R - 右インデント) https://img-fotki.yandex.ru/get/173114/19749220.11/0_da31c_45c53ada_orig.jpg"> ...

ページ上で次のように変換されます。

オブジェクトのインデントをピクセル単位で設定します。負の値も許可されます。デフォルトでは、祖先の値を継承するか、値が 0 になります。

例えば。左マージンは 50 ピクセル、上マージンは 10 ピクセルです。

マージントップ:10px; 左マージン:50px

"src=" この例では、上部のインデントは 10 ピクセル、左側は 50 ピクセルでした。

9. プロパティ class="class_name" - 画像にクラスを割り当てて、このクラスのすべての画像のスタイルを設定できます。

... この疑問は若いウェブマスターの間で生じます。実はとても簡単です。これを行うには、タグをフレームに入れるだけです"> ...

タグ（リンク）。

https://img-fotki.yandex.ru/get/173114/19749220.11/0_da31c_45c53ada_orig.jpg例えば

リンクがつながる場所

画像アドレス

5. 写真の角を丸くする方法 "style="border-radius: 30px">読者の皆さん、HTML img タグについてさらに詳しく学びました。次のレッスンに進むことをお勧めします。

ブログサイトの読者の皆さん、こんにちは。このセクションの次の記事では、引き続きタグについて見ていきます。前に学びました)、コメントと) の書式設定について説明し、HTML コード内のスペース文字と ) についても触れました。はい、可能性についても話し合いました。

今日は、Web プロジェクトで作業するときによく遭遇するハイパーテキストマークアップ言語の要素について詳しく説明したいと思います。私が話しているのは

HTML ドキュメントに画像やリンクを挿入する方法を知っていれば、作業が大幅に簡素化され、時間を節約できます。さらに、最も一般的な 10 個の要素を研究することは難しくありません。実際には、残っているタグはそれほど多くありません。もちろん、今日のヒーローは最も一般的で頻繁に使用されるタグの 1 つです。

一方で、リンク、画像、コンテナ、リスト (これらについては説明します) などの挿入など、同じ要素が使用しているテンプレートのデザインでも積極的に使用されています。

したがって、テンプレートの構造 (これは Joomla テンプレートと WordPress テーマに関するものです) を理解し、必要に応じて変更を加えるためには、やはり少なくとも少数のコード要素を知る必要があります。信じてください、これに費やした時間は将来十分に報われるでしょう。さて、マークアップ言語について理解する必要があることを私が皆さんに理解していただいたとして、今日の出版物の主人公に直接移りましょう。

画像を挿入するにはページでは HTML Img タグが使用されています。以下の画像はそれを使用して挿入されました。

Src 属性を使用すると、イメージファイルの名前と保存場所 (つまり、ファイルへのパス) を指定できます。この場合、画像を含むファイルを指すことができます。パスは「/」文字を使用して指定します。これは、画像ファイルが保存されているサブディレクトリ名の間の区切り文字として機能します。

Src への絶対パスは http://vash_sait.ru (私のブログ用 -) から始まります。次に、サブフォルダー名を「/」で区切って、画像ファイルへのフルパスを記述し、最後にファイル自体の名前と拡張子を付けます。例えば、

Src の相対パスは、HTML ドキュメント自体のファイルが含まれており、画像を開こうとしているソースフォルダーからグラフィックファイルまでの相対パスを定義することによって設定されます。このファイルがサーバー上の、アクセス元のドキュメントと同じフォルダーにある場合は、そのファイルへのパスを指定する必要はありません。グラフィックファイルの名前 (大文字と小文字は区別したまま) を指定するだけで済みます。）。

このファイルが同じサーバー上にあるが、別のディレクトリにある場合は、アクセス元のドキュメントが存在するディレクトリからそのファイルへのパスを指定する必要があります (上記の例では、相対パスが使用されています)。画像/finik.jpg) 。

[幅] 属性と [高さ] 属性を使用して画像の幅と高さを設定します。

HTML 属性の幅と高さを使用すると、この画像のページ上に割り当てられる領域のサイズ (それぞれ幅と高さ) を設定できます。これらは、たとえば次のように Img タグ内に挿入されます。

この領域が挿入する画像の実際のサイズに対応していない場合、画像は指定されたサイズに応じて拡大または縮小されます。ただし、この方法は、文書に挿入された画像のサイズを縮小する場合などには使用しないでください。結局のところ、その重量は依然として大きいままであり、これにより Web ページの読み込みが遅くなります。

まずグラフィックエディターで画像のサイズを変更し ( で行うこともできます)、それから文書に挿入することをお勧めします。また、グラフィックファイルを保存するときは、最終的な重さに注意する必要があります。大きすぎてもいけません。最終的な重量を減らすために、画質を少し犠牲にした方がよい場合もあります (幸いなことに、サイズが小さい場合は、ほとんど目立ちません)。

図面を保存する場合は、コンパクトタイプの GIF (概略図の挿入用) または JPG (写真の挿入用) を使用してください。 Src 属性 (Img タグで唯一必須の属性) とは異なり、幅と高さはオプションです。多くは単にそれらを示していませんが、それでもわずかに許可します ドキュメントの読み込みを高速化する.

実際のところ、ブラウザが HTML Img タグ内で幅と高さを見つけられない場合、画像のサイズを見つけてロードし、その後ドキュメントの残りのコンテンツのダウンロードを続行するのに時間がかかります。。高さと幅を指定した場合、ブラウザはこれらの属性で指定されたサイズの画像用のスペースを自動的に予約し、さらに Web ページの読み込みを続けます。

特定のページに表示されるグラフィックファイルが非常に重く、その数が多い場合、高さと幅を挿入すると、ユーザーはグラフィックの読み込み中にサイトのテキストを読み始めることができます。

また、Img 内で幅と高さを指定しない場合、小さな画像と非常に長い代替テキスト (後述する Img タグの Alt 属性で設定) により、一時的なシフトが発生する状況が発生する可能性があります。グラフィックスがウェブサイトのデザインに読み込まれる前に、長い代替テキストは、必要なだけのスペースを占有します。

[幅] と [高さ] を使用すると、代替テキストを表示するスペースは、それらで指定されたサイズに制限されます。ほとんどの場合、これが私がこれらの属性を Img タグに書こうとする理由です。

HTML Img タグの Alt と Title

Web サイトの内部検索エンジン最適化の観点から非常に便利なのは、Alt 属性と Title 属性です。自分自身または「」出版物でサイトを読んで宣伝してください。

それらの最初のものは、画像のいわゆる代替テキストを設定します。ブラウザでグラフィックスを無効にすると、このテキストが表示されます。 Alt は、検索エンジンにどのような種類の画像があるべきかを伝えるために設計されています。タイトルは、写真の内容をユーザーに知らせることを目的としています。

ユーザーが画像の上にマウスを移動すると、Img タグの Title コンテンツがポップアップ行に表示されます。これらの属性は両方とも (指定した場合)、Web プロジェクトの画像を .html ファイルに含めることができます。したがって、この機会を無視せず、少なくとも Alt は必ず登録してください。画像のレイアウトは次のようになります。

実際、非常に多くの属性があり、少なくとも提供されているリンクを使用すると、それらをすべて表示できます。ただし、実際には、この記事で私がリストしたもののみを使用する可能性が高くなります。

タグの書き方のルールをもう一度思い出させてください。開始三角括弧の後に、常にスペースを入れずにその名前が書き込まれ、次にスペースで区切って、それに許可される属性の名前が書き込まれます。属性名の後にスペースを入れずに等号を配置し、そのパラメーターを引用符で囲みます (たとえば、幅の場合はピクセル単位の幅)。

HTML タグ内の次の属性は、前の属性からスペースで区切られます。最後に閉じ三角括弧があります。 Img はペアになっていないことに注意してください。終了タグがありません。

理想的には、Web プロジェクトで使用されるすべての画像がこのようにデザインされるべきです。この外観は、各画像の HTML コードを手動で編集しなくても実現できます。さまざまな CMS (Joomla、WordPress など) のビジュアルエディターを使用すると、ユーザーフレンドリーなグラフィカルインターフェイスでこの豊富な機能をすべて設定できますが、試用セットアップ後は必ずコードを確認してください (どのビジュアルエディターでも、コードの表示に切り替えることができます)。記事のHTMLコード）。

HTMLリンクタグ「A」を使用してハイパーリンクを作成します。

リンクは、HTML におけるドキュメント構成の主要な要素の 1 つです。これらがなければ、Web ページは単なるページになってしまいます。これらは「A」タグを使用して作成されます。必須の属性は Href だけです。ユーザーがこのハイパーリンクをクリックして移動する URL (パス) を指定します。

リンクは、独自のリソースの内部ページ (特に内部最適化における非常に重要な点に関連します) または別のプロジェクトのページにリンクできます。 HTML タグ A はペアになっており、それに応じて終了要素があります。ハイパーリンクのテキスト（アンカー - SEO 推進の観点から詳しく書かれています）は、開始タグと終了タグ「A」の間に配置されます。

検索エンジンはアンカー自体だけでなく、アンカーを囲む単語も分析します。他のリソースにサイトへのリンクを配置する場合は、これを考慮する必要があります。より自然に見えるようにするには、次のようにテキストの一部をアンカーの外側に移動します。

新しいウィンドウで開き、写真（イメージ）からリンクします

さて、また検索エンジンの最適化に気を取られてしまいました。タグの話に戻りましょう。 HTML タグ「A」には、このリンク先のページを開くために非常に必要な属性が 1 つあります。 新しいウィンドウで。これは、1 つのページから多くの外部ドキュメントにリンクする場合に必要になる場合があります。この場合、訪問者にとっては、ページを常に開いたままにしておく方が便利です。

Target には、この目的のために、と呼ばれる新しいウィンドウでページを開くことができるオプションがあります。 _空白。タグ A でターゲットが指定されていない場合、リンクは同じウィンドウで開きます。 Target 属性の使用例:

アンカー (リンクが内部リンクに使用されている場合、このテキストには、このハイパーリンクのリンク先の記事を宣伝するためのキーワードが含まれている必要があります)

タグ内の属性の順序は一切規制されていないことに注意してください。同じように成功すれば、次のように書くこともできます。

検索エンジンは写真からのリンクをより高く評価するという意見がありますが、いくつかのデータによるとその逆です。ただし、このタイプのリンクを使用する場合、必要なリンクを挿入できるアンカーがありません。キーワード。この場合、A タグの Title 属性を使用できます。

Ru/image/finik.jpg" 幅="200" 高さ="150">

タイトルは通常のテキストアンカーの場合にも使用できます。この場合、ハイパーリンクにマウスカーソルを移動すると、そこに書かれた情報が表示されます。実は、この属性はほぼすべてのタグで使用できます。 HTML言語, しかし、それはあまり良いことはありません。

ここで、このハイパーリンクのリンク先の記事を宣伝するキーワードを書き留める必要があります。

アンカーとハッシュリンクの作成

もう 1 つの興味深い属性は NAME です。これは、いわゆるリンクアンカーを作成するために非常に広く使用されており、いわゆるハッシュリンクを使用してアクセスできます。少しややこしいですが、これから説明していきたいと思います。必要だとしましょう 文書の本文中の特定の場所を指す（冒頭ではありません）、そこではある問題が議論されています。

この記事への単純なハイパーリンクを設定すると、それをクリックすると記事が最初に開き、ユーザーはその中で注目したい場所を見つける必要があります。したがって、アンカーとハッシュリンクの助けを借りて、記事が意図した場所に正確に開くようにすることができ、ユーザーは不必要な資料を探す必要がなくなります。

HTML ドキュメント内にハイパーリンクを作成する上記の方法を実装するには、以前は、ハッシュリンクがつながる先の記事にアンカーを最初に挿入する必要がありました。アンカーは通常のリンクを思わせる構造でありながら、訪問者には見えないままでした。彼はこんな感じでした。

それらの。アンカーは開始タグと終了タグ「A」のみで構成されていますが、アンカーは含まれておらず、必須の NAME 属性が 1 つだけあることがわかりました。この属性のパラメータはラベルであり、その名前は自分で指定する必要がありました。このラベルは、後にハッシュリンクの作成に使用されました。

これがアンカーを挿入する方法です 時代遅れと考えられる HTML コードバリデーターは次のようにみなされます。失策。ご注意ください。アンカーは、最も近いタグに追加することで配置されるようになりました。

記事の見出しが次のようになっているとします。

見出し

したがって、記事のテキストに必要なアンカーをすべて配置した後、上記の方法 (ID セレクターを使用) で以前にマークされた記事のテキスト内の場所を参照するハッシュリンクの作成を開始できます。。

ハイパーリンクは標準的な方法で作成されますが、Href に記述された URL の最後にハッシュ記号 (シャープ記号またはハッシュ記号) が配置され、その後にアンカーのラベルの名前が来る点が異なります。それは記事本文の必要な場所にあります。

アンカー

アンカーがハッシュリンクと同じ HTML ドキュメント内にある場合は、アンカーのみを指定できます。

アンカー

頑張ってね！ブログサイトのページでお会いしましょう

興味があるかもしれません

のリスト HTMLコード- UL、OL、LI、DLタグ
Html および CSS コードでの色の設定方法、テーブルでの RGB シェードの選択、Yandex 出力およびその他のプログラム
HTMLフォームサイト用 - Web フォーム要素を作成するためのタグ Form、Input and Select、Option、Textarea、Label など
Img - 画像の挿入 (Src)、テキストの配置とその周りの折り返し (align)、および背景 (background) の設定のための HTML タグ
ハイパーリンク (A、Href、空白のターゲット) を作成する方法、サイト上の新しいウィンドウでハイパーリンクを開く方法、および HTML コードで画像をリンクにする方法
Iframe と Frame - それらとは何か、また HTML でフレームを使用する最適な方法
MailTo - 電子メールを送信するための HTML リンクの作成方法とその方法選択、オプション、テキストエリア、ラベル、フィールドセット、凡例 - ドロップダウンリストおよびテキストフィールドのフォームの HTML タグ
埋め込みとオブジェクト - Web ページにメディアコンテンツ (ビデオ、フラッシュ、オーディオ) を表示するための HTML タグ
HTML コードのコメントディレクティブと Doctype、およびブロックとインライン要素 (タグ) の概念