Iframe-uri HTML
Un iframe HTML afișează o pagină web în interiorul altei pagini web.
Sintaxa Iframe HTML
Tag-ul <iframe> creează un cadru inline, care înglobează un alt document în interiorul paginii curente.
Sfat: Include întotdeauna un atribut title pe un <iframe>. Cititoarele de ecran îl folosesc pentru a descrie conținutul iframe-ului.
Sintaxa iframe
Forma unui iframe.
<iframe src="url" title="description"></iframe>
Iframe - Setarea Înălțimii și Lățimii
Folosește atributele height și width pentru a seta dimensiunea iframe-ului (implicit în pixeli), sau setează-le cu proprietățile CSS height și width în atributul style.
Cu atribute
Un iframe dimensionat cu atributele height și width.
Output: pagină HTML completă
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dimensiune Iframe prin atribute</title>
</head>
<body>
<iframe src="demo_iframe.html" height="200" width="300" title="Exemplu Iframe"></iframe>
</body>
</html>
Cu CSS
Un iframe dimensionat cu CSS în atributul style.
Output: pagină HTML completă
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dimensiune Iframe prin style</title>
</head>
<body>
<iframe src="demo_iframe.html" style="height:200px;width:300px;" title="Exemplu Iframe"></iframe>
</body>
</html>
Iframe - Eliminarea Bordurii
Implicit, un iframe are o bordură. Elimin-o cu proprietatea CSS border setată la none, sau folosește CSS pentru a schimba dimensiunea, stilul și culoarea bordurii.
Fără bordură
Un iframe cu bordura eliminată.
Output: pagină HTML completă
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Iframe fără bordură</title>
</head>
<body>
<iframe src="demo_iframe.html" style="border:none;" title="Exemplu Iframe"></iframe>
</body>
</html>
Bordură colorată
Un iframe cu o bordură roșie.
Output: pagină HTML completă
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Iframe cu bordură colorată</title>
</head>
<body>
<iframe src="demo_iframe.html" style="border:2px solid red;" title="Exemplu Iframe"></iframe>
</body>
</html>
Iframe - Țintă pentru un Link
Un iframe poate fi cadrul țintă pentru un link. Setează atributul target al linkului la atributul name al iframe-ului, iar pagina legată se va încărca în interiorul iframe-ului.
Exemplu
Un link care își încarcă pagina în interiorul unui iframe cu nume.
Output: pagină HTML completă
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Iframe cu target</title>
</head>
<body>
<iframe src="demo_iframe.html" name="iframe_a" title="Exemplu Iframe"></iframe>
<p><a href="https://prompt-cookbook.com" target="iframe_a">PromptCookbook</a></p>
</body>
</html>
Rezumatul Capitolului
Pe scurt: tag-ul <iframe> creează un cadru inline, atributul src setează pagina de înglobat, și ar trebui să incluzi întotdeauna un title pentru cititoarele de ecran. Atributele height și width îi setează dimensiunea, iar border:none; elimină bordura.