• Savolingiz bormi?
  • +998 97 534 03 20
  • turayev.ruziboy@bk.ru
 8. Freymlar. Freymlar bilan ishlash

8. Freymlar. Freymlar bilan ishlash

HTML && CSS / 2022-02-28

Freymlar. Freymlar bilan ishlash

Reja:

1. Freym

2. Freymlar - freymlar tuzish

3. Oddiy freymlar

 Freym

Brauser oynasidagi mustaqil to'g'ri to'rtburchak shaklidagi maydon bo'lib, u o'z ichiga boshqa alohida mustaqil HTML hujjatlarni birlashtira oladi.

HTMl bo'yicha o'quv qo'llanmaning ushbu bo'limida siz har bir darchasida (oynasi) alohida mustaqqil HTML hujjatlarni ochish imkonini beruvchi freymlarnituzish usullari bilan tanishib chiqasiz. Freymlar brauserdagi yangi oyna emas, balki bu alohida oyna yoki ramka bo'lib, u brauserning ochilib turgan oynasi ichida aks ettiriladi. Bu bo'limda, bir freymdan ikkinchi freymlarni bir-biriha havolalar yordamida bog'lash usullarini tahlil qilinadi.

Freymlar - freymlar tuzish

Siz internetdan foydalanish jarayonida freymlar ishlatilgan veb sahifani balki ko'rgandirsiz. Agar freymli sahifani ko'rmoqchi bo'lsangiz mana bu erga bosing. Bu sahifada uchta freymdan foydalanilgan.

Ko'rib turganingizder bu sahifa uchta freymdan iborat ustunlarga bo'lingan. Cahp ustunda joylashgan freymda navigatsion menyu, yuqoridan o'ngdagisida reklama va o'gndan pastdagi freymda esa veb sahifa asosiy matni o'rin oladi. Chap ustunda joylashgan havolalarga bosish bilan, havoladari hujjat o'ngdan pastda joylashgan freymda ochiladi.

Ushbu freymlar qo'llanilgan sahifaning umumiy tuzilishini ko'rib chiqsak :

< FRAMESET> - freymlar tuzilishini belgilovchi ochuvchi teg (freymset)
< FRAME> - brinchi freym
< FRAME> - ikkinchi freym
< /FRAMESET> - freymsetni yopuvchi teg

Shemada ko'rinib turganidek, har gal   tegi yordamida freymlar tuzilishini belgilash losim. Shundan so'ng bevosita freymlar < FRAME> tegiga n avbat keladi. Ohirgi navbatda < /FRAMESET> freymset yopuvchi teg yoziladi.

Hozircha bu oddiy sxemani eslab qoling. Murakkab freymlar qo'llanilgan sahifalar haqida ushbu bo'limda keyinroq ma'lumot beriladi.

Oddiy freymlar

Hullas, freymlar bilan ko'rsatilgan oddiy misolni kurib chiqamiz. Ishni boshlashdan oldin, oddiy HTML formatida ikkita hujjat yarating. Birinchi hujjatga "Freym-1" ikkinchisiga esa "Freym-2" deb yozing va ularni frem1.html и frem2.html deb nomlang. Bu ikkita fayllar bizning misolimizda ikki freymlar uchun asosiy manba bo'lib hizmat qiladi.Endi esa HTML formatida keyingi hujjatni yarating.

< HTML>
< HEAD>
< TITLE>freymlar< /TITLE>
< /HEAD>

< FRAMESET COLS=200,*>
< FRAME NAME=left SRC=frame1.html>
< FRAME NAME=right SRC=frame2.html>
< /FRAMESET>

< NOFRAMES>
Sizning brouzeringiz freymlarni tushunmaydi.
< /NOFRAMES>

< /HTML>

Demak siz ham uzingizning birinchi sahifangizni freymlar yordamida yaratingiz. Endi shu yaratgan sahifangizni frameset.html deb nomlab oldin yaratilgan frame1.html va frame2.html fayllar turgan papkada saqlang va frameset.html faylini o'z brouzeringizda oching. Va sizda quyidagi natija hosil bulishi kerak. Kurib turganingizdek SRC ulchami tegi HTML formatidagi hujjatga yo'l ko'rsatyapti va siz ushbu freymda yuklashingiz kerak bo'ladi.

Birinchi navbatda, etibor bergan bulsangiz HTML formatidagi freymlar tizimidagi sahifada < BODY> tegi mavjud emas. Bu esa juda muhimdir. Agar siz < BODY> tegini ishlatsangiz u holda hamma и < FRAME> teglari brouzeringiz tomonidan o'chiriladi.

Ikkinchi eslatma esa < NOFRAMES> tegiga taalluqlidir. U shunday holatga mo'ljallangan-ki, bu holatda sizning brouzeringiz freymlarni qo'llab-quvvatlamaydi. Bu holatda < NOFRAMES> tegidan keyingi barcha ma'lumotlar ko'rsatiladi. Bizning misolimizda esa quyidagi yozuv"Sizning brouzeringiz freymlarni qo'llab-quvvatlamaydi "

Bizning misolimizda < FRAMESET> va < FRAME> teglarini biz oddiy o'lchamlarda ishlatgan edik. Endigi navbatda biz freymlar yordamida o'z sahifamizda nimalarni o'zgartira olishimizni ko'rib chiqaylik. frameset.html sahifasini baruzerda yoki HTML teglarni tahrirlovchi dasturda oching. Foydalanuvchi sizning fraymlaringizni ulchamlarini o'zgartira olmaydigan qilishingiz mumkin. Siz hozir freym chegaralariga sichqoncha ko'rsatgichini belgilab uning o'lchamlarini hohlagan tarzda o'zgartirishingiz mumkin.

NORESIZE

< FRAME> tegining parametr ushbu freymni o'zgarib bo'lmasligini anglatadi.

 Misol:

< FRAME NAME=left SRC=frame1.html NORESIZE>
< FRAME NAME=right SRC=frame2.html NORESIZE>

Keyingi holatlarda, agar siz freymlar orasidagi chegaralardan voz kechmoqchi bo'lsangiz u holda siz < FRAMESET> tegining quyidagi o'lchamini ishlatishingiz zarur

BORDER

< FRAMESET> tegining o'lchami freymlar chegaralari orasidagi masofani piksellarda ifodalaydi. Freym orasidagi chegarani umuman bo'lmasligi uchun shu o'lchamni nolga tenglashtiramiz

Misol:

< FRAMESET COLS=200,* BORDER=0>

< FRAME> tegining yana bir muhim ulchami

 

SCROLLING

< FRAME> tegining bu parametri mavjgud freymda sahifalash chizig'ini mavjudligi yoki mavjud emasligini belgilaydi. Bu parametrning yes, no va auto belgilari bu freymda sahifalash chizigini borligini, yo'qligini va agar kerak bo'lsa ishlatilishini ko'rsatadi.

Misol:

< FRAME NAME=left SRC=frame1.html NORESIZE SCROLLING=auto>
< FRAME NAME=right SRC=frame2.html NORESIZE SCROLLING=yes>

< FRAMESET> tegining quyidagi ikkita o'lchamlarini siz bilishingiz zarur,COLS va ROWS ularning bagaradigan ishi freymlar orasidagi vertikal va gorizontal ajratilganligini ko'rsatadi.

COLS

< FRAMESET> tegining bu parametri gorizontal freymlarning chapdan o'ngga tuzilishuni ko'rsatadi. O'lchami raqamlar bilan beriladi. Bu freymlarning kengligi piksellarda yoki foizlarda beriladi va bir- biridan tinish belgisi bilan agratiladi. '*' simvol shuni ko'rsatadiki, qolgan umimiy maydon shu freymga ajratilishini anglatadi.

Misol:

< FRAMESET COLS=200,*,100>

Bu misolda uchta freym mavjud bo'lib, birinchisi-200 piksel, ohirgisi -100 piksell, ikkinchisi(o'rtadagi freym)-qolgan maydonning hammasi shu freym uchun ajratilgan

< FRAMESET COLS=20%,100,50,*>

Bu misolda esa to'rtta freym bo;lib, birinchisi maydonning 20%ni, ikkinchisi-100 pikselli, uchunchisi-50 pikselli, to'rtinchisi esa qolgan maydonni tashkil etadi.

 

ROWS

< FRAMESET> tegining bu parametri freymlarning vertikal tepadan pastga bo';lgan tuzilishuni ko'rsatadi. O'lchami raqamlar bilan beriladi. Bu freymlarning balandligi piksellarda yoki foizlarda beriladi va bir- biridan tinish belgisi bilan ajratiladi. '*' simvol shuni ko'rsatadiki u umumiy qolgan maydonni shu freymga agratilishini anglatadi.

 

Misol:

< FRAMESET ROWS=50%,50%>

Balandligi ekranning 50% tashkil qiluvchi ikkita freym. Anglash qiyin emaski, bu ifodani ROWS parametrida, simvol orqali quyidagicha yozish mumkin 50%,*

 

 

tegiga taalluqlidir. U shunday holatga mo'ljallangan-ki, bu holatda sizning brouzeringiz freymlarni qo'llab-quvvatlamaydi. Bu holatda <NOFRAMES> tegidan keyingi barcha ma'lumotlar ko'rsatiladi. Bizning misolimizda esa quyidagi yozuv"Sizning brouzeringiz freymlarni qo'llab-quvvatlamaydi "</span></p> <p style="text-align: justify;"><span style="font-size: 14pt;">Bizning misolimizda <FRAMESET> va <FRAME> teglarini biz oddiy o'lchamlarda ishlatgan edik. Endigi navbatda biz freymlar yordamida o'z sahifamizda nimalarni o'zgartira olishimizni ko'rib chiqaylik. <a href="/2132321321321321321321321312/html/frameset.html">frameset.html</a> sahifasini baruzerda yoki HTML teglarni tahrirlovchi dasturda oching. Foydalanuvchi sizning fraymlaringizni ulchamlarini o'zgartira olmaydigan qilishingiz mumkin. Siz hozir freym chegaralariga sichqoncha ko'rsatgichini belgilab uning o'lchamlarini hohlagan tarzda o'zgartirishingiz mumkin.</span></p> <p style="text-align: justify;"> </p> <p style="text-align: justify;"><span style="font-size: 14pt;">NORESIZE</span></p> <p style="text-align: justify;"><span style="font-size: 14pt;"><FRAME> tegining parametr ushbu freymni o'zgarib bo'lmasligini anglatadi.</span></p> <p style="text-align: justify;"><span style="font-size: 14pt;"> Misol:</span></p> <table width="100%"> <tbody> <tr> <td> <p><span style="font-size: 14pt;"><FRAME NAME=left SRC=frame1.html NORESIZE></span><br /><span style="font-size: 14pt;"><FRAME NAME=right SRC=frame2.html NORESIZE></span></p> </td> </tr> </tbody> </table> <p style="text-align: justify;"><span style="font-size: 14pt;">Keyingi holatlarda, agar siz freymlar orasidagi chegaralardan voz kechmoqchi bo'lsangiz u holda siz <FRAMESET> tegining quyidagi o'lchamini ishlatishingiz zarur</span></p> <p style="text-align: justify;"> </p> <p style="text-align: justify;"><span style="font-size: 14pt;">BORDER</span></p> <p style="text-align: justify;"><span style="font-size: 14pt;"><FRAMESET> tegining o'lchami freymlar chegaralari orasidagi masofani piksellarda ifodalaydi. Freym orasidagi chegarani umuman bo'lmasligi uchun shu o'lchamni nolga tenglashtiramiz</span></p> <p style="text-align: justify;"><span style="font-size: 14pt;">Misol:</span></p> <table width="100%"> <tbody> <tr> <td> <p><span style="font-size: 14pt;"><FRAMESET COLS=200,* BORDER=0></span></p> </td> </tr> </tbody> </table> <p style="text-align: justify;"><span style="font-size: 14pt;"><FRAME> tegining yana bir muhim ulchami</span></p> <p style="text-align: justify;"> </p> <p style="text-align: justify;"><span style="font-size: 14pt;">SCROLLING</span></p> <p style="text-align: justify;"><span style="font-size: 14pt;"><FRAME> tegining bu parametri mavjgud freymda sahifalash chizig'ini mavjudligi yoki mavjud emasligini belgilaydi. Bu parametrning yes, no va auto belgilari bu freymda sahifalash chizigini borligini, yo'qligini va agar kerak bo'lsa ishlatilishini ko'rsatadi.</span></p> <p style="text-align: justify;"> </p> <p style="text-align: justify;"><span style="font-size: 14pt;">Misol:</span></p> <table width="100%"> <tbody> <tr> <td> <p><span style="font-size: 14pt;"><FRAME NAME=left SRC=frame1.html NORESIZE SCROLLING=auto></span><br /><span style="font-size: 14pt;"><FRAME NAME=right SRC=frame2.html NORESIZE SCROLLING=yes></span></p> </td> </tr> </tbody> </table> <p style="text-align: justify;"><span style="font-size: 14pt;"><FRAMESET> tegining quyidagi ikkita o'lchamlarini siz bilishingiz zarur,COLS va ROWS ularning bagaradigan ishi freymlar orasidagi vertikal va gorizontal ajratilganligini ko'rsatadi.</span></p> <p style="text-align: justify;"> </p> <p style="text-align: justify;"><span style="font-size: 14pt;">COLS</span></p> <p style="text-align: justify;"><span style="font-size: 14pt;"><FRAMESET> tegining bu parametri gorizontal freymlarning chapdan o'ngga tuzilishuni ko'rsatadi. O'lchami raqamlar bilan beriladi. Bu freymlarning kengligi piksellarda yoki foizlarda beriladi va bir- biridan tinish belgisi bilan agratiladi. '*' simvol shuni ko'rsatadiki, qolgan umimiy maydon shu freymga ajratilishini anglatadi.</span></p> <p style="text-align: justify;"> </p> <p style="text-align: justify;"><span style="font-size: 14pt;">Misol:</span></p> <table width="100%"> <tbody> <tr> <td> <p><span style="font-size: 14pt;"><FRAMESET COLS=200,*,100></span></p> </td> </tr> </tbody> </table> <p style="text-align: justify;"><span style="font-size: 14pt;">Bu misolda uchta freym mavjud bo'lib, birinchisi-200 piksel, ohirgisi -100 piksell, ikkinchisi(o'rtadagi freym)-qolgan maydonning hammasi shu freym uchun ajratilgan</span></p> <table width="100%"> <tbody> <tr> <td> <p><span style="font-size: 14pt;"><FRAMESET COLS=20%,100,50,*></span></p> </td> </tr> </tbody> </table> <p style="text-align: justify;"><span style="font-size: 14pt;">Bu misolda esa to'rtta freym bo;lib, birinchisi maydonning 20%ni, ikkinchisi-100 pikselli, uchunchisi-50 pikselli, to'rtinchisi esa qolgan maydonni tashkil etadi.</span></p> <p style="text-align: justify;"> </p> <p style="text-align: justify;"><span style="font-size: 14pt;">ROWS</span></p> <p style="text-align: justify;"><span style="font-size: 14pt;"><FRAMESET> tegining bu parametri freymlarning vertikal tepadan pastga bo';lgan tuzilishuni ko'rsatadi. O'lchami raqamlar bilan beriladi. Bu freymlarning balandligi piksellarda yoki foizlarda beriladi va bir- biridan tinish belgisi bilan ajratiladi. '*' simvol shuni ko'rsatadiki u umumiy qolgan maydonni shu freymga agratilishini anglatadi.</span></p> <p style="text-align: justify;"> </p> <p style="text-align: justify;"><span style="font-size: 14pt;">Misol:</span></p> <table width="100%"> <tbody> <tr> <td> <p><span style="font-size: 14pt;"><FRAMESET ROWS=50%,50%></span></p> </td> </tr> </tbody> </table> <p style="text-align: justify;"><span style="font-size: 14pt;">Balandligi ekranning 50% tashkil qiluvchi ikkita freym. Anglash qiyin emaski, bu ifodani ROWS parametrida, simvol orqali quyidagicha yozish mumkin 50%,*</span></p> <p style="text-align: justify;"><span style="font-size: 14pt;"><strong><em> </em></strong></span></p> <p style="text-align: justify;"> </p>


Izoh qoldirish