HTMLにiframeを挿入する方法:使用例

インターネット

サイト構築の夜明けに、ウェブリソースはフレームの個々の部分を表示するために広範囲に使用されました。しかし、HTML5の新しいバージョンが登場して、すべてが変わってきました。マークアップ要素<フレーム>、<フレームセット>および<noframes>は廃止されたとみなされます。それらを置き換えることは単一のタグでした - iframe>。 html <iframe>に追加するには?以下の例はプログラミングの初心者でも理解できるでしょう。

フレームとは何ですか?

フレームは、最初のWebページのほとんどの基礎です。 文字通り翻訳すると、この単語は「フレーム」を意味します。つまり、フレームはブラウザのページの小さな部分です。過去のフレームの広範な使用は、低品質で高コストのインターネットトラフィックによって説明することができます。原則として、サイトは3〜5部に分かれており、それぞれが特定の目的を果たしました。

  • "Cap"(ページの幅の上の枠) - リソースの名前を表示します。
  • 左/右「ガラス」 - メニュー出力。
  • 中央のフレームはサイトコンテンツの表示です。

HTML iframeの例

ページを分割してパーツに分割すると、パーツを更新するときに特定のパーツのみをオーバーロードすることができます。たとえば、ユーザーがメニュー項目をクリックし、新しいコンテンツがセントラルフレームにダウンロードされました。

HTML 5の現代フレーム

HTMLを使う理由<iframe>?一例は、第三者のリソースからのコンテンツの挿入です。 古典的な状況は、Web開発者がマップ上のオブジェクトの位置を表示したいときです。どのようになる?地形計画をゼロから描画する?いいえ - 単純な解決策があります:Google Map、Yandex Maps、または2GISの要素をページに埋め込むことです。問題は4つのアクションで解決されます。

  1. 地図作成サービスのサイトに移動する必要があります。
  2. 目的のオブジェクトを探します。正確な住所がわかっている場合は、検索ボックスに住所を入力できます。
  3. 挿入するコードを取得するには、「コードを保存して受信」ボタン(「Yandex.Map」の場合)または「完了」(Googleマップの場合)を使用します。
  4. 生成されたマークアップタグをページに入力する必要があります。

さらに、マップサイズを選択したり、その他の表示オプションを設定することもできます。

HTML iframeの例

他にどのようにHTML <iframe>?例は、Youtubeリソースからのビデオ素材の挿入です。マルチメディア技術はインターネットユーザーを引き付けるので、ビデオコンテンツは非常に人気があります。ビデオデベロッパーのインストールにより、迅速に対応できます。

  1. Youtubeに自分のビデオをアップロードするか、ブロードキャスト用のサードパーティのファイルを見つける必要があります。
  2. 「HTML」ボタンを選択してタグを取得する
  3. 最後のアクションは、HTMLコード<iframe>に挿入することです。タグの内容の一例を以下に説明する。

どちらの例も自動コードの生成ができますが、プロの開発者は自分で作成することができます。まず、ページのレイアウトを理解し、必要に応じて変更することができます。第2に、サイト要素のマークアップ(外部リソースに属しているにもかかわらず)がウェブマスターの参加なしに形成されるとは限りません。ここに開発者の高い資格があります。

iframe htmlこれは何ですか

構文

したがって、ページレイアウトを開始する前に、iframe(html)タグを考慮する必要があります。つまり、その内容と使い方です。

まず、タグがペアになっていることに注意してください。 開始要素と終了要素の間に、このレイアウト要素をサポートしていないブラウザに表示されるコンテンツを指定します。タグの主な属性:

  • 幅(幅);
  • 高さ;
  • src(ロードされたリソースのアドレス)。
  • 整列(整列方法)。
  • フレームボーダー。
  • 許可スクリーン。

したがって、<iframe>のコードが取得されます。 HTMLの例を以下に示します。

<iframe width = "560" height = "315" src = "https://someserver.com/" frameborder = "0" allowfullscreen> </ iframe>

結果のマーキングでは、サイトのアドレスを他のアドレスに置き換え、必要に応じてフレームのサイズを修正するだけで十分です。