El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Utilitzant Iframes

Següent ►
►

Els iframes (marcs en línia) són elements HTML que permeten incrustar un altre document HTML dins de la pàgina actual. Són útils per a diverses aplicacions, com ara incrustar vídeos, mapes, o altres continguts web.

Conceptes Clau

  1. Què és un iframe?

    • Un iframe és un element HTML que permet incrustar un altre document HTML dins de la pàgina actual.
    • Es defineix amb l'etiqueta <iframe>.

  2. Atributs principals de l'iframe:

    • src: Especifica l'URL del document que es vol incrustar.
    • width i height: Defineixen l'amplada i l'alçada de l'iframe.
    • frameborder: Controla si l'iframe té un marc al voltant (0 per a sense marc, 1 per a amb marc).
    • allowfullscreen: Permet que l'iframe es mostri en pantalla completa.
    • sandbox: Aplica restriccions de seguretat a l'iframe.

Exemple Bàsic

A continuació, es mostra un exemple bàsic d'un iframe que incrusta una pàgina web:

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemple d'Iframe</title>
</head>
<body>
    <h1>Incrustant una pàgina web amb Iframe</h1>
    <iframe src="https://www.example.com" width="600" height="400" frameborder="0" allowfullscreen></iframe>
</body>
</html>

Explicació del Codi

  • <iframe src="https://www.example.com" width="600" height="400" frameborder="0" allowfullscreen></iframe>:
    • src: L'URL de la pàgina que es vol incrustar.
    • width i height: Amplada i alçada de l'iframe en píxels.
    • frameborder="0": Elimina el marc al voltant de l'iframe.
    • allowfullscreen: Permet que l'iframe es mostri en pantalla completa.

Atributs Avançats

Atribut sandbox

L'atribut sandbox aplica restriccions de seguretat a l'iframe. Pot tenir diversos valors per controlar diferents aspectes de la seguretat:

  • allow-same-origin: Permet que l'iframe accedeixi a les cookies i dades del mateix origen.
  • allow-scripts: Permet l'execució de scripts dins de l'iframe.
  • allow-popups: Permet que l'iframe obri finestres emergents.

Exemple:

<iframe src="https://www.example.com" width="600" height="400" sandbox="allow-scripts allow-same-origin"></iframe>

Atribut srcdoc

L'atribut srcdoc permet especificar el contingut HTML directament dins de l'iframe, en lloc de carregar-lo des d'un URL extern.

Exemple:

<iframe srcdoc="<p>Aquest és un contingut incrustat directament.</p>" width="600" height="400"></iframe>

Exercicis Pràctics

Exercici 1: Incrustar un Vídeo de YouTube

Incrusta un vídeo de YouTube utilitzant un iframe. Utilitza el següent URL del vídeo: https://www.youtube.com/embed/dQw4w9WgXcQ.

Solució:

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Incrustar Vídeo de YouTube</title>
</head>
<body>
    <h1>Vídeo de YouTube Incrustat</h1>
    <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" width="560" height="315" frameborder="0" allowfullscreen></iframe>
</body>
</html>

Exercici 2: Utilitzar l'Atribut sandbox

Crea un iframe que incrusti una pàgina web i aplica les següents restriccions de seguretat: permetre scripts però no permetre finestres emergents.

Solució:

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Iframe amb Sandbox</title>
</head>
<body>
    <h1>Iframe amb Restriccions de Seguretat</h1>
    <iframe src="https://www.example.com" width="600" height="400" sandbox="allow-scripts"></iframe>
</body>
</html>

Errors Comuns i Consells

  1. Error: L'iframe no es carrega correctament.

    • Solució: Assegura't que l'URL especificat en l'atribut src és correcte i accessible.

  2. Error: L'iframe no es mostra en pantalla completa.

    • Solució: Assegura't d'incloure l'atribut allowfullscreen a l'iframe.

  3. Consell: Utilitza l'atribut sandbox per millorar la seguretat del teu lloc web quan incrustes contingut extern.

Conclusió

Els iframes són una eina poderosa per incrustar contingut extern dins de les teves pàgines web. Amb els atributs adequats, pots controlar l'aparença i el comportament de l'iframe, així com aplicar restriccions de seguretat per protegir el teu lloc web. Practica amb els exercicis proporcionats per familiaritzar-te amb l'ús dels iframes i les seves opcions de configuració.

◄ Anterior
◄
Següent ►
►

Curs d'HTML

Mòdul 1: Introducció a l'HTML

Mòdul 2: Formatació de text en HTML

Mòdul 3: Enllaços i mitjans en HTML

Mòdul 4: Taules en HTML

Mòdul 5: Formularis en HTML

Mòdul 6: Elements semàntics d'HTML5

Mòdul 7: Tècniques avançades d'HTML

Mòdul 8: Integració d'HTML i CSS

Mòdul 9: Disseny web responsiu

Mòdul 10: Millors pràctiques i accessibilitat

Mòdul 11: Projecte: Construint un lloc web complet

El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats