HTML ഫ്രെയിംസ് (Frames) എന്താണ്?
HTML ഫ്രെയിമുകൾ ഒരു പേജിനുള്ളിൽ ഒരേ സമയം പലവക യിലുള്ള വസ്തുക്കൾ പ്രദർശിപ്പിക്കാൻ ഉപയോഗിക്കുന്നു. Framesets (ഫ്രെയിംസെറ്റുകൾ) ഉപയോഗിച്ച് വെബ്ബ് പേജുകൾ വിഭജിക്കാനും, ഓരോ സെക്ഷനിലും വ്യത്യസ്ത വെബ്ബ് പേജുകൾ ഉൾപ്പെടുത്താനും കഴിയും. HTML5-ൽ, <frameset> ടാഗ് പ്രദർശനം പിന്‍വലിച്ചെങ്കിലും പഴയ HTML-വേർഷനുകളിൽ ഇത് ഉപയോഗിച്ചിരുന്നു. എന്നാൽ, കൂടുതൽ സാമാന്യം <iframe> (Inline Frame) ഉപയോഗിച്ച് ഉണ്ടാക്കപ്പെടുന്നു.
Frameset ഉപയോഗിച്ച HTML ഫ്രെയിംസ്:
HTML <frameset> ടാഗ് ഒരു വെബ്പേജ് വിഭാഗങ്ങളാക്കി വിഭജിക്കാനായി, ഓരോ ഭാഗത്തും വേറിട്ട പേജുകൾ കാണിക്കാനും ഉപയോഗിച്ചിരുന്നു.
<frameset cols="50%,50%">
<frame src="page1.html">
<frame src="page2.html">
</frameset>
HTML5-ൽ <iframe> ടാഗ്:
HTML5-ൽ <iframe> (inline frame) ആണ് ഫ്രെയിം ഉപകരണം. ഇത് ഒരു വെബ്ബ് പേജിനുള്ളിൽ മറ്റൊരു പേജ് കാണിക്കാൻ ഉപയോഗിക്കുന്നു.
htmlCopy code<iframe src="https://example.com" width="600" height="400" title="Example"></iframe>
Example:
<iframe src="https://example.com" width="500" height="300" title="Example Frame"></iframe>
ഇവിടെ, src ആട്രിബ്യൂട്ട് മറ്റൊരു പേജിന്റെ URL നിശ്ചയിക്കുന്നു, width, height എന്നിവ ഉപയോഗിച്ച് ഫ്രെയിമിന്റെ വലുപ്പം നിർണ്ണയിക്കുന്നു.
iframe-ന്റെ പ്രയോഗങ്ങൾ:
- വെബ്ബ് പേജിനുള്ളിൽ മറ്റൊരു പേജ് പ്രദർശിപ്പിക്കുക:iframe ഉപയോഗിച്ച് ഒരു പേജിനുള്ളിൽ മറ്റൊരു വെബ്സൈറ്റ്, ഡോക്യുമെന്റ്, വീഡിയോ തുടങ്ങിയവ കാണിക്കാനാകും.htmlCopy code
<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" width="560" height="315"></iframe> - Google Maps ഉൾപ്പെടുത്തുക:Google Maps ലൊക്കേഷൻ iframe-ലൂടെ ഒരു വെബ്ബ് പേജിനുള്ളിൽ ചാർട്ട് ചെയ്യാം.htmlCopy code
<iframe src="https://maps.google.com/maps?q=kannur&t=&z=13&ie=UTF8&iwloc=&output=embed" width="600" height="450"></iframe>
iframe ആട്രിബ്യൂട്ടുകൾ:
- src: ഫ്രെയിമിൽ പ്രദർശിപ്പിക്കേണ്ട പേജിന്റെ URL നിശ്ചയിക്കുന്നു.
- width, height: ഫ്രെയിമിന്റെ വലിപ്പം നിർണ്ണയിക്കുന്നു.
- title: ഫ്രെയിമിന്റെ തലക്കെട്ട് നൽകുന്നു.
- frameborder: ഫ്രെയിമിന്റെ ചുറ്റുമുള്ള ബോർഡർ കാണിക്കേണ്ടതോ അല്ലയോ എന്ന് വ്യക്തമാക്കുന്നു.htmlCopy code
<iframe src="https://example.com" width="600" height="400" frameborder="0"></iframe>
iframe-ൽ ഓട്ടോമാറ്റിക് സ്ക്രോളിംഗ്:
iframe-ൽ ഉള്ളടക്കം ഫ്രെയിമിന്റെ വലിപ്പം മറികടക്കുമ്പോൾ, സ്ക്രോൾബാർ പ്രദർശിപ്പിക്കാൻ scrollingആട്രിബ്യൂട്ട് ഉപയോഗിക്കുന്നു.
<iframe src="https://example.com" width="600" height="400" scrolling="yes"></iframe>
iframe-ന്റെ സവിശേഷതകൾ:
- **Resizable:**iframes CSS ഉപയോഗിച്ച് വലുപ്പം മാറ്റാവുന്നതാണ്.
- Multiple Pages: ഒറ്റ പേജിനുള്ളിൽ തന്നെ പല ഫയലുകളും പ്രദർശിപ്പിക്കാനും.
- Embedded Videos & Maps: YouTube വീഡിയോ, Google Maps തുടങ്ങിയവ iframe ഉപയോഗിച്ച് പ്രദർശിപ്പിക്കാം.
iframe-ൽ സുരക്ഷാ പരിഗണനകൾ:
iframe ഉപയോഗിച്ച് വെബ്ബ് പേജുകൾക്ക് സുരക്ഷ സംബന്ധമായ പ്രശ്നങ്ങൾ ഉണ്ടാകാം. അതിനാൽ, sandboxആട്രിബ്യൂട്ട് ഉപയോഗിച്ച് iframe-നുള്ളിലെ പ്രവർത്തനങ്ങൾ നിയന്ത്രിക്കാം.
<iframe src="https://example.com" sandbox="allow-scripts"></iframe>
CSS ഉപയോഗിച്ച് iframe സ്റ്റൈലിംഗ്:
iframe-നുള്ളിലെ സ്ക്രോൾബാറുകളും ബോർഡറുകളും CSS ഉപയോഗിച്ച് നീക്കം ചെയ്യാനും, ഫ്രെയിമിന്റെ വലിപ്പം ക്രമീകരിക്കാനും കഴിയും.
iframe {
border: 0;
width: 100%;
height: 500px;
}
സങ്കലനം:
HTML-ൽ ഫ്രെയിമുകൾ, പ്രത്യേകിച്ച് <iframe> ടാഗ്, മറ്റൊരു പേജിനെയും മൾട്ടിമീഡിയ നെറ്റ്വർക്കുകളെയും ഒരു വെബ്ബ് പേജിനുള്ളിൽ പ്രദർശിപ്പിക്കാൻ ഉപയോഗിക്കുന്നു. iframe HTML5-ൽ പ്രോത്സാഹിപ്പിക്കപ്പെടുന്നു, HTML ടേബിളുകൾക്കും വീഡിയോയ്ക്കുമുള്ള പ്രദർശനം മെച്ചപ്പെടുത്തുന്നു.
