I början av webbplatsbyggnaden använde webresurser ramar i stor utsträckning för att visa enskilda delar av sidorna. Men med ankomsten av den nya versionen av HTML 5 har allt förändrats. Markup Elements <ram>, <ramuppsättning> och <noframes> anses vara föråldrade. Byta dem var en enda tagg - <iframe>. Hur lägger man till html <iframe>? Exemplet nedan kommer att vara förståeligt även för en nybörjare i programmeringen.

Vad är ramar?

En ram är grunden för de flesta av de första webbsidorna. Om du översätter bokstavligen betyder detta ord "ram", det vill säga att ramen är en liten del av sidan i webbläsaren. Den utbredda användningen av ramar i det förflutna kan förklaras av låg kvalitet och hög kostnad för Internettrafik. Webbplatsen var i regel uppdelad i 3-5 delar, som var och en uppfyllde ett visst syfte:

  • "Cap" (toppramen på sidans bredd) - visa namnet på resursen;
  • vänster / höger "glas" - menyutgång;
  • Den centrala ramen är visning av webbplatsinnehållet.

html iframe exempel

Dela upp sidan i delar som får överbelasta endast en viss del när den uppdateras. Till exempel klickade användaren ett menyalternativ och det nya innehållet hämtades till den centrala ramen.

Moderna ramar i HTML 5

Varför använda HTML <iframe>? Ett exempel är införandet av innehåll från en tredje parts resurs. En klassisk situation är när en webbutvecklare vill visa positionen för ett objekt på en karta. Hur är det? Rita en terrängplan från början? Nej - det finns en enklare lösning: att bädda in en del av Google Map, Yandex Maps eller 2GIS på sidan. Problemet löses i fyra handlingar.

  1. Du måste gå till webbplatsen för någon kartografisk tjänst.
  2. Hitta det önskade objektet. Att veta den exakta adressen kan du skriva in i sökrutan.
  3. Använd knappen "Spara och ta emot kod" (för "YandexMap") eller "Done" (för Google Maps) för att få koden att infoga.
  4. Det återstår att ange de genererade märkningstaggarna på sidan.

Dessutom kan du välja kartstorlek och konfigurera andra visningsalternativ.

html iframe exempel

Hur kan jag annars använda HTML <iframe>? Ett exempel är införandet av videomaterial från Youtube-resursen. Multimediateknik lockar Internetanvändare, så videoinnehåll är så populärt. Med installationen av videon utvecklaren klarar sig snabbt.

  1. Du ska ladda upp din egen video på Youtube eller hitta en tredje parts fil för sändningen.
  2. Ta taggen genom att välja "HTML" -knappen
  3. Den slutgiltiga åtgärden är att infoga i HTML-koden <iframe>. Ett exempel på innehållet i taggen kommer att diskuteras nedan.

Båda exemplen användes automatisktkodgenerering, men professionella utvecklare borde kunna komponera det själva. Först kommer det att tillåta dem att förstå layouten på sidan och vid behov ändra den. För det andra bildas inte alltid markeringen av platselement (även om de tillhör en extern resurs) utan att en webmaster deltar. Här är utvecklarens höga kvalifikationer.

iframe html vad är det här

syntax

Så innan du börjar sidlayout måste du överväga iframe (html) -taggen: vad det är och hur du använder det korrekt.

Först och främst bör det noteras att taggen är parad. Mellan öppnings- och stängningselementen anger du innehållet som visas i webbläsare som inte stöder detta layoutelement. Huvudattributen för taggen:

  • bredd (bredd);
  • höjd (höjd);
  • src (adressen till den laddade resursen);
  • justera (justeringsmetod);
  • frameborder;
  • allowfullscreen.

Således erhålls koden för <iframe>. HTML-exemplet visas helt nedan:

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

I den resulterande märkningen räcker det att ersätta adressen på en webbplats med någon annan och, om det behövs, att rätta storleken på en ram.

</ p>