Iframe va Frame - ular nima va Html-da ramkalardan qanday foydalanish yaxshiroq. Frame elementining Src atributida yo'lni belgilang

Salom, aziz blog o'quvchilari. Bugun biz HTML tilidagi ramkalar haqida gaplashamiz. Biz boshidan boshlashimiz aniq, ya'ni bu qanday hayvon. Shuningdek, biz ushbu elementlarning hozirgi (Frame) va kelajagi (Iframe) haqida gipermatn belgilash tilining joriy versiyasida va yangi Html 5 standartida gaplashamiz.

Maqolaning oxirida, keyin batafsil tavsif Html kodida o'rnatilgan ramkalar va ularning klassik tuzilishini yaratish jarayoni (allaqachon kamdan-kam qo'llaniladi), biz ularda sayt yaratishning dolzarbligi masalasiga to'xtalamiz, shuningdek, muhokama qilamiz. mumkin bo'lgan usullar mening blogim misolidan foydalanib, joriy vaqt ichida ularning qo'llanilishi.

Bu nima? Ma'lum bo'lishicha, ular nafaqat veb-saytlarda, balki dasturlarning har qanday ilovalarida ham qo'llanilishi mumkin, ammo ular veb-sahifa yoki dastur oynasi bir nechta sohalarga bo'linishi bilan farq qiladi, ularning har biriga alohida hujjat yuklanadi. . Bundan tashqari, ushbu ramka joylari bir-biridan mustaqil ravishda harakat qiladi.

Ehtimol, deyarli barchangiz duch kelgan ulardan foydalanishning eng aniq misoli - bu sizning kompyuteringizda o'rnatilgan ko'plab dasturlarda mavjud bo'lgan yordam fayllari.

Yordam menyusi bo'lgan fayl chap oynaga yuklanadi va o'ng oynada tanlangan menyu bandiga mos keladigan hujjat ko'rsatiladi. Shunisi e'tiborga loyiqki, ushbu tuzilma o'ngdagi yangi hujjatni ochishda menyu bilan faylni chap oynaga qayta yuklashdan qochish imkonini beradi. Bu HTMLda freymlardan foydalanishning asosiy afzalligidir.

Aslida, ushbu elementlarning nomi mustaqil oyna sifatida talqin qilinishi kerak. Ramkalar yordamida biz bitta katta oynani bir nechta bo'laklarga bo'lish imkoniyatiga egamiz, bu esa o'z navbatida bir-biridan mustaqil bo'lgan alohida hujjatlar (sahifalar, matnlar, tasvirlar, videolar va boshqalar) uchun qabul qiluvchi bo'lib xizmat qilishi mumkin.

Gipermatnni belgilash tilida ramka tuzilishi qanday yaratilgan? Agar hozirgi vaqtda asosiy bo'lgan Html 4.01 standarti (klassifikatsiya bo'yicha) haqida gapiradigan bo'lsak, buning uchun uchta element ishlatiladi - Frame, Frameset va Noframes.

Agar biz Html 5 standarti haqida gapiradigan bo'lsak (bizning kelajagimiz, ularning ba'zi elementlari allaqachon ko'plab brauzerlar tomonidan qo'llab-quvvatlanadi), unda endi Frame, Frameset va Noframes teglari bo'lmaydi, shuningdek, uning o'rniga klassik ramka tuzilishi bo'ladi; bitta Iframe yorlig'i (ko'milgan ramka) , bu haqda biz boshida gaplashamiz va keyin e'tiborimizni hozirda amalda bo'lgan 4.01 versiyasidan klassik sxemaga qaratamiz.

Iframe, quyida muhokama qilingan klassiklardan farqli o'laroq, Body tegini Frameset teglari bilan almashtirishni talab qilmaydi. Bular. bu teg oddiy sahifalarga, masalan, xatboshi ichiga yoki boshqa joyga kiritilishi mumkin. Asosiysi, bu element biz allaqachon ko'rib chiqqan Img tegiga juda o'xshaydi.

Bu o'zgartirilgan tarkibga ega bo'lgan inline element, chunki u xuddi ichki element kabi harakat qiladi, lekin uning ichida begona tarkibni ko'rsatadi. tashqi tarkib. HTML tilida faqat to'rtta shunday element mavjud - Img, Iframe, Ob'ekt va Embed. Shuning uchun, bizning qahramonimiz hajmi ushbu tegning atributlari yordamida o'rnatiladigan maydonga yuklanadigan tashqi fayl mavjudligini nazarda tutadi.

Bu. Iframe tashqi ob'ekt (masalan, video) yuklanadigan cho'milish elementidir. Va sahifaga yuklanishi kerak bo'lgan ushbu faylga yo'lni ko'rsatish uchun maxsus Src atributidan foydalaning. Lekin Img dan farqli o'laroq, Iframe elementi juftlangan, ya'ni. Shuningdek, yopilish yorlig'i mavjud:

Ushbu misol Iframe yordamida Youtube video sahifasida chiqishni ko'rsatadi. Ramka (oyna) yuklanadigan joyni cheklash uchun tashqi fayl, Width va Height atributlari mavjud bo'lib, ularning qiymatlari piksellarda ko'rsatilgan:

Bular. bu teg ba'zi bir tashqi ob'ekt yuklanadigan maydonni yaratadi (u sizning saytingizdanmi yoki boshqa manbadanmi muhim emas). Hududning kengligi va balandligi Width va Height yordamida belgilanadi va Src atributi ushbu ob'ektga yo'lni belgilaydi.

Iframe elementi ushbu atributlarning barchasini almashtirilgan tarkibga ega o'xshash ichki teglardan meros qilib oldi (masalan, yuqorida aytib o'tilgan Img). Xo'sh, u rasmlardan Hspace va Vspace atributlarini ham oldi, bu sizga ramkaning chegaralaridan uni o'rab turgan matnga chekinishlarni o'rnatish imkonini beradi.

O'rnatilgan ramkani tekislash Html-da tasvirlarni o'rganayotganda ko'rganimizdek amalga oshirilishi ham muhimdir. Xuddi shu Hizala , lekin Iframe yorlig'i uchun Past, Yuqori, O'rta, Chap va O'ngning mumkin bo'lgan qiymatlari bilan.

Ammo bu element, shuningdek, klassik ramka tuzilishidan Frame tegidan bir nechta atributlarni oldi, biz quyida matnda batafsil gaplashamiz. Ushbu atributlar nomini o'z ichiga oladi, uning qiymati qiymat sifatida ishlatilishi mumkin, shunda havolani bosganingizda kerakli hujjat ushbu ramka oynasida ochiladi (quyida batafsilroq o'qing).

Shuningdek, Iframe-da Frameborder atributi faqat ikkita qiymatga ega bo'lgan Frame tegidan ko'chirildi - 0 (ramka atrofidagi ramka ko'rsatilmaydi) yoki 1 (ramka ko'rinadi). Standart qiymat Frameborder=1, shuning uchun uni olib tashlash uchun siz Frameborder="0" ni kiritishingiz kerak bo'ladi:

Scrolling atributi ham Frame dan ushbu elementga o‘tkazildi, uning standart qiymati Avtomatik - kontent uni ko‘rsatish uchun mo‘ljallangan oynaning o‘lchamidan kattaroq bo‘lganda freymdagi aylantirish satrlari kerak bo‘lganda paydo bo‘ladi.

Xo'sh, Marginwidth va Marginheight atributlari ham Frame elementidan ko'chirildi. Ular matnda quyida batafsil ko'rib chiqiladi, ammo qisqacha - ular ramkaning chetidan undagi tarkibga qadar kenglik va balandlikdagi chekinishni o'rnatishga imkon beradi.

Yuqorida aytib o'tganimdek, Iframe-dan foydalanishning aniq misoli:

Iframe-ni to'g'ridan-to'g'ri veb-sahifaga kiritish orqali siz YouTube-dan videoning chiqishini olasiz. Biz ushbu element almashtirilgan tarkibga ega bo'lgan ichki elementlar va aslida klassik ramkalar o'rtasidagi xoch degan xulosaga keldik, biz hozir muhokama qilamiz.

Shunday qilib, klassik ramka tuzilishini yaratish, odatda har qanday hujjatda mavjud bo'lishi kerak bo'lgan, Frameset elementlariga asoslangan konteyner bilan almashtirilishi kerak bo'lgan tana teglarini ochish va yopish o'rniga Html kodini yozishingizdan boshlanadi.

Asosiy nuqta shundaki, bu holda Tana elementidan foydalanib bo'lmaydi - Body (oddiy hujjat uchun) yoki Frameset (hujjat ramka tuzilishini yaratishda):

Asosiy ichida biz yaratadigan har bir ramka alohida Frame elementi yordamida yaratilgan. Bu teg bitta va unda biz ushbu oynaga yuklanadigan hujjatga yo'lni o'rnatamiz.

Biz hali to'xtalmagan uchinchi element - bu Noframes. U bog'langan va brauzer tomonidan qayta ishlanadigan va ko'rsatiladigan matnni ichiga yozish imkonini beradi veb sahifa faqat shu brauzer (yoki boshqa displey qurilmasi) ramkalarni qo'llab-quvvatlamasa. Bu, masalan, mobil qurilmalar uchun brauzerdan foydalansangiz sodir bo'lishi mumkin.

Odatda, Noframes nafaqat ramka tuzilishini qayta ishlashning mumkin emasligi bilan bog'liq mavjud vaziyat haqida ma'lumotni qo'shibgina qolmay, balki ularni ishlatmasdan ishlashni davom ettirishingiz mumkin bo'lgan boshqa sahifalarga o'tish imkoniyatini ham qo'shadi. U haqida boshqa biror narsa deyish qiyin, keling, davom etaylik.

Ma'lum bo'lishicha, Body yorlig'i o'rniga ishlatiladigan Frameset elementi ko'rish maydoni uchun ajratilgan barcha joyni egallaydi va ushbu maydon ichida ramkalar yordamida yaratiladi. individual elementlar Ramka. Shu munosabat bilan savol tug'iladi - ko'rish maydonini alohida oynalar o'rtasida qanday ajratish yoki boshqacha qilib aytganda, ularning har birining o'lchamini qanday belgilash kerak.

Bu Frameset elementiga tegishli atributlarni qo'shish orqali amalga oshiriladi. Ulardan ikkitasi bor - Cols va Rows. Cols katta oynaning vertikal ramkalar yoki ustunlarga bo'linishini o'rnatadi, Rows esa uni gorizontal oyna yoki qatorlarga bo'lish imkonini beradi.

Html Frameset tegining Cols va Rows qiymatlari vergul bilan ajratilgan raqamlardir (bo'shliqlarsiz). Bu raqamlar biz natijada olishni istagan oynalarning nisbatlarini belgilaydi. Shuning uchun, Cols yoki Rows-da qancha vergul bilan ajratilgan raqamlar yozilmasin, bizda mavjud bo'lgan ramkalar soni natija bo'ladi.

Masalan, ushbu yozuvdan foydalanib, biz kengligi 2: 5: 3 nisbatga mos keladigan uchta vertikal ustunni olamiz.

Biz uchta freym uchun nisbatlarni o'rnatganimiz sababli, hech bo'lmaganda qo'shimcha atributlarni ko'rsatmasdan, Frameset teglarini ochish va yopish orasiga uchta Frame elementini kiritishimiz kerak bo'ladi:

Natijada, uchta bo'sh oynadan iborat bo'lgan ramka tuzilishimiz quyidagicha ko'rinadi:

Ushbu misolda biz oyna o'lchamlarini (Frame) foizlar yordamida o'rnatamiz, ular ko'rish maydonining kengligidan (bu Cols dan foydalanilganda) yoki uning balandligidan (Qatorlar) olinadi. Ko'rish oynasini o'zgartirganda, ramka o'lchamlari o'rtasidagi foiz nisbati saqlanib qoladi. Ammo foizlar o'rniga siz shunchaki ma'noga ega bo'lgan raqamlardan foydalanishingiz mumkin. Bu erda, menimcha, tushunishda hech qanday qiyinchiliklar paydo bo'lmasligi kerak.

Ammo o'lcham belgilarida yulduzcha "*" ga o'xshash juda g'ayrioddiy variant ham mavjud. Bundan tashqari, u oddiygina "*" yoki oldida raqam bo'lgan yulduzcha bo'lishi mumkin, masalan, "3*". Foizlarga juda o'xshash aqlli kichik narsa va biz ramka maydonini mutanosib ravishda bo'lishimizni anglatadi.

Keling, bir misolni ko'rib chiqaylik. Keling, Rows yordamida ko'rish oynasini gorizontal qatorlarga bo'lishni tanlaymiz:

Ushbu kirish nimani anglatadi? Bizga vertikal ravishda mavjud bo'lgan butun ko'rish maydoni uchta qatorga bo'linadi. Birinchisining balandligi 200 pikselda, ikkinchisi - 500 da olinadi, lekin uchinchi qator balandlikda qolgan barcha joyni egallaydi, chunki Uning o'lchami sifatida "*" ishlatilgan.

Shunisi e'tiborga loyiqki, "*" va "1*" qiymatlari bir xil ma'noni anglatadi - biz qolgan barcha bo'shliqni bittaga ajratamiz va bu qismni ushbu ramkaga beramiz (ya'ni qolgan barcha bo'sh joy).

Ammo proportsional bo'lish uchun "*" qiymatini raqam bilan ishlatsangiz nima bo'lishini ko'ring:

Sizningcha, bu holda Ramkaning o'lchamlari qanday bo'ladi? Ikkinchi qatorning balandligi aniq 100 piksel bo'lishi aniq. Ammo qolgan joy uchinchi va birinchi qatorlar orasidagi balandlikda qanday bo'linadi?

Hisoblash juda oson - ikkitaga (2*) to'rt (4*) qo'shing va shu maxrajga (maktab o'quv dasturidagi kasrlarni eslang) ikki va to'rtga bo'ling. Bular. Biz ramkali birinchi ustun balandlikda qolgan joyning uchdan bir qismini, uchinchi ustun esa uchdan ikki qismini egallashini olamiz. Yoki boshqacha qilib aytganda, uchinchisi birinchisidan ikki baravar yuqori bo'ladi:

Ramka oynalarini bitta atributda o'lchashning uchta usulidan foydalanishingiz mumkin, masalan:

Natijada, biz barcha mavjud maydonning o'n foizi kengligi bilan birinchi ramka ustunini olamiz, ikkinchisi - 100 piksel, qolgan uchtasi esa to'rt, uch va to'qqizdan ikkisi nisbatida kenglikka ega bo'ladi. qolgan kenglik maydoni. Shunday qilib, hamma narsa oddiy va tushunarli.

Agar siz asosiy oynani nafaqat gorizontal va vertikal ramkalarga, balki, masalan, ularning kombinatsiyalariga bo'lishni istasangiz, u holda siz Frameset elementlarining ichki o'rnatilgan tuzilishini ustunlar uchun alohida va qatorlar uchun alohida ishlatishingiz mumkin. Masalan, quyidagi skrinshotda ko'rsatilgan tuzilmani olish uchun quyidagi konstruktsiyadan foydalanish kifoya:

Bular. avval biz "frameset cols="20%,80%"" hamma narsani ajratamiz mavjud bo'sh joy vertikal ravishda ikkita ustunga aylantiring va o'ng ustunning tarkibini "ramka" yorlig'i bilan o'rnating, lekin chap ustun uchun "ramka" elementini qo'shish o'rniga biz yangi "frameset rows = "10%,*"" ochamiz.

Va uning yordami bilan biz o'ng ustunni ramkalar bilan ikkita qatorga ajratamiz, ularning mazmuni ikkita "ramka" teglari yordamida o'rnatiladi, shundan so'ng biz ikkala "frameset" konteynerini yopamiz. Hammasi oddiy va mantiqiy.

Lekin biz hammamiz Frameset elementi va uning Cols va Rows atributlari haqida gaplashdik, ular yordamida strukturani shakllantiramiz va ularning o'lchamlarini o'rnatamiz. Keling, kerakli freymlarda kerakli hujjatlarni qanday ko'rsatishni va ularning oynalari orasidagi o'zaro ta'sirni qanday sozlashni aniqlaymiz.

Xo'sh, biz tashqi ko'rinishni qanday boshqaramiz? yaratilgan derazalar? Bularning barchasi Frame tegining atributlarida mavjud. Birinchi eslatib o'tishga arziydigan narsa bu Src. Biz u bilan allaqachon uchrashganmiz teg Img Html kodiga tasvirlarni kiritishni ko'rib chiqqanimizda. Uning mohiyati o'zgarmadi va u hali ham ramkaga yuklanishi kerak bo'lgan hujjatga yo'lni belgilashga imkon beradi.

Src-dagi hujjatga yo'l sifatida ko'rsatilishi mumkin. Nisbiy yo'llar odatda o'z manbangizda joylashgan hujjat uchun ishlatiladi, lekin hujjatni boshqa saytdan ramka oynasiga yuklamoqchi bo'lganingizda mutlaq yo'llar kerak bo'ladi.

Agar yo'lni ko'rsatuvchi Src atributi ko'rsatilmagan bo'lsa kerakli hujjat, keyin bo'sh hujjat oynaga yuklanadi. Shaxsan men bir marta o'z blogim uchun shunga o'xshash ishni qildim (qo'shimcha navigatsiya elementi sifatida) va shu bilan birga u uchun xosting serverida alohida papka yaratdim va u erda nafaqat ramka tuzilishiga ega Html faylini (men uni indeks deb ataganman) joylashtirdim. .html), balki har xil hujjat oynalariga yuklangan, shuningdek, fon sifatida ishlatilgan tasvir fayllari.

Shuning uchun men uchun Frame tegining Src atributidagi nisbiy havolalardan foydalanish eng oson bo'ldi:

Shunisi e'tiborga loyiqki, agar siz ushbu kodda keltirilgan barcha havolalarni nisbiydan mutlaqga almashtirsangiz (masalan, https://site/navigator/joomla.html) va ushbu faylni brauzerda ochsangiz, Frame-da ko'rsatilgan hujjatlar yuklanadi. mening serverimdan va brauzeringizda shunga o'xshash tasvirni ko'rasiz. Bundan tashqari, freym tuzilmasi (index.html) bo'lgan faylingiz qayerda - kompyuteringizda yoki hostingda joylashganligi muhim emas.

Rasmda ko'rsatilgan misolda chap freymning oynasiga oddiy menyu bo'lgan ma'lum menyuga ega sahifa yuklangan. Lekin muhimi, menyu qanday tuzilganligi emas, balki uning havolalaridan biriga bosilgandan keyin nima sodir bo'lishidir.

Agar buni qilsangiz, hamma narsa xuddi shunday bo'ladi - hujjat pastki o'ng oynada ochiladi. Ammo buning uchun men bitta kichik hiyla ishlatishim kerak edi, chunki standart versiyada hujjat oynaning butun hajmini ochdi, ramka tuzilishini almashtirdi, bu menga umuman kerak emas edi, chunki chap va yuqori freymlarda navigatsiya menyusi. g'oyib bo'ldi.

Shunday qilib, biz giperhavolalar haqida gapirganda, biz "A" teg atributini Target=_blank deb aytdik. Bu nima uchun ekanligini eslaysizmi? Bog'langan hujjatni yangi oynada ochish to'g'ri. Odatiy bo'lib, u bir xil oynada ochilishi kerak, bu target="_self" ga teng.

Biroq Targetning imkoniyatlari shu bilan cheklanmaydi. Ma'lum bo'lishicha, siz unga qiymatni ramka nomi ko'rinishida qo'shishingiz mumkin, bu avval Frame tegining maxsus Name atributida ko'rsatilgan. Keyin ushbu havola orqali hujjat bir xil oynada ochilmaydi, uning butun maydonini egallaydi, lekin siz ko'rsatgan ramkada. Tushunarli? Agar to'liq bo'lmasa, endi misolni tahlil qilganimizda aniq bo'ladi.

Shunday qilib, keling, yuqoridagi rasmda ko'rsatilgan misolimizga qaytaylik. Pastki o'ng (katta) ramkada chap oynadan havolalar yordamida sahifalarni ochishimiz kerak. Shuning uchun avval bu katta oynaga Frame tegidagi Name atributidan foydalanib nom berish kerak.

Ular buni yasadilar va uni "ktona" deb atashdi. Endi chap oynada menyu sifatida yuklangan faylni xavfsiz ochishingiz va undagi barcha A teglariga Target="ktona" atributini qo'shishingiz mumkin:

Joomla tarixi va VirtueMart komponenti

Albatta, qidirish va almashtirish vositasidan foydalanib, uni barcha giperhavolalar uchun qo'yish qiyin bo'lmaydi, lekin bizda yuqorida aytib o'tilgan maxsus Base tegidan foydalanish uchun ajoyib imkoniyat mavjud bo'lganda, kodni keraksiz yuklashning nima keragi bor? giperhavolalar haqidagi maqola, ular Target blankidan foydalanish haqida gapirganda.

Asosiy target="ktona" elementini ochish va yopish bosh teglari orasiga qo'yish kifoya va ushbu hujjatning Html kodidagi barcha havolalar "ktona" deb nomlangan belgilangan ramkada yangi sahifalarni ochadi:

Aytgancha, agar biz bir vaqtlar mavjud bo'lgan vositamni misol sifatida ko'rib chiqsak, unda yuqori gorizontal oynadagi barcha havolalar o'z sahifalarini chap vertikal ramkada ochishiga ishonch hosil qilishimiz kerak, bu mening chap menyum bo'lib xizmat qiladi. Buning uchun nima qilish kerak?

Birinchidan, chap vertikal ramkaga nom berishingiz kerak:

Va yuqori oynaga (gor.html) yuklangan faylga siz asosiy target="gor" elementini qo'shishingiz kerak:

Mana, endi biz hamma narsani to'g'ri qildik. Yuqori ramkadagi havolalardan keyingi barcha hujjatlar chap oynada ochiladi va undagi barcha havolalar hujjatlarni markaziy va eng katta ramkada ochadi. Menimcha, hamma narsa oddiy va mantiqiy.

Endi ramkalar ko'rinishini moslashtirish uchun Frame tegida Src va Name dan boshqa qanday atributlardan foydalanish mumkinligini ko'rib chiqamiz. Scrolling bilan boshlaylik. Undan foydalanib, biz ramka tuzilmangizning har bir oynasi uchun o'tish satrlari ko'rinishini alohida sozlashimiz mumkin.

Scrolling sukut bo'yicha Avto qiymatiga ega - brauzer freymga yuklangan hujjat hajmiga qarab aylantirish panelini ko'rsatish yoki ko'rsatmaslikni avtomatik ravishda hal qiladi. Hujjat oynaga to'liq mos kelmasa, uning hammasini oxirigacha ko'rish imkonini beruvchi aylantirish paneli paydo bo'ladi.

Shuningdek, siz Ha (hujjat unga to'liq mos tushsa ham, oynadagi aylantirish satrlari doimo ko'rsatiladi) va Yo'q (aylantirish chiziqlari, hatto hujjatning bir qismi mos kelmasa ham, hech qachon ko'rinmaydi) qiymatlaridan foydalanishingiz mumkin. Scrolling uchun qiymatlar sifatida.

Bir vaqtlar mavjud bo'lgan asbobimda men Auto-ning standart qiymatidan foydalandim va kerak bo'lganda freymlardagi aylantirish satrlari paydo bo'ldi:

Frame tegining navbatdagi atributi Noresize bitta atributdir (uning qiymati yo'q). Uni ro'yxatdan o'tkazish orqali siz uning hajmini o'zgartirishni taqiqlaysiz, bu sukut bo'yicha ramkalar chegarasini sichqoncha bilan sudrab borish orqali amalga oshiriladi.

Sichqoncha kursorini chegaraga olib borganingizda, kursor ikki boshli o'qga aylanishini ko'rasiz va endi tugmani bosish orqali. chap tugma sichqoncha, siz hohlaganingizdek chegarani siljitishingiz mumkin. Noresize bu irodani taqiqlaydi (sichqoncha kursorini derazalar chegarasiga olib borganingizda, siz endi ikki tomonlama o'qni ko'rmaysiz).

Yana bir vizual atribut - Frameborder. Undan foydalanib, ramkalar orasiga ramka (chegara) chizish yoki chizmaslikni belgilashingiz mumkin. Frameborder faqat ikkita mumkin bo'lgan qiymatga ega bo'lishi mumkin - 0 (ramka chizmang) yoki 1 (chegarani ko'rsatish). Standart qiymat, albatta, 1.

Bitta noziklik bor. Agar siz ko'rinadigan chegarani olib tashlamoqchi bo'lsangiz, unda siz ko'rinadigan chegaralarni olib tashlamoqchi bo'lgan ramkalarning barcha Frame teglariga Frameborder=0 qo'shishingiz kerak bo'ladi.

Xo'sh, biz shuningdek, ramka tegining bir nechta atributlarini ko'rib chiqishimiz kerak - Marginwidth va Marginheight, ular deraza chegaralaridan unga yuklangan tarkibgacha kenglik (o'ng va chap) va balandlik (yuqori va pastki) bo'yicha chegaralarni o'rnatadi. (raqam chekka piksellar sonini bildiradi):

Keling, klassik tuzilmalarning asosiy kamchiliklari nimada ekanligini ko'rib chiqaylik, bu esa veb-sayt yaratishda ulardan foydalanishga chek qo'yadi. Bu ramka tuzilishi yordamida uning holatini kuzatish mumkin emasligidan iborat.

Murakkab tuzilmalar minglab turli holatlarga ega bo'lishi mumkin (har xil ramka oynalarida ochilgan hujjatlar variantlari), lekin aynan shu strukturaning Url manzili o'zgarmaydi. Shu sababli, brauzer xatcho'plaridan foydalanish yoki boshqa foydalanuvchilarga o'zingiz yoqtirgan sahifalarga havolalarni yuborish imkonsiz bo'ladi. Nega?

Chunki manzil brauzer xatcho'plaridan yoki elektron pochtadan ochilganda ham o'zgarishsiz qoladi elektron pochta, siz saqlamoqchi bo'lgan holatni emas, balki ramka tuzilishining boshlang'ich holatini ko'rsatadigan sahifani olasiz.

Albatta, bu muammoni HTML vositalari bilan emas, balki server (masalan, Php) yoki mijoz dasturlash tillari (JavaScript) yordamida hal qilish mumkin va bu echimlar yuz foiz samarali bo'lmaydi. Bunday echimlar, aslida, ramka strukturasining Url manziliga uning joriy holati haqida qo'shimcha ma'lumotlarni qo'shish imkonini beradi, ammo buni qilish oson emas va ishonchlilik mutlaq bo'lmaydi.

Bu veb-saytlarni yaratish uchun ramkalardan foydalanishning birinchi kamchiligi va juda muhim, ammo yana bir katta kamchilik bor. Qidiruv mexanizmlari, albatta, ularni indekslashni va ulardan derazalariga yuklangan hujjatlarning manzillarini olishni uzoq vaqtdan beri o'rgangan. Muammo boshqacha.

Agar foydalanuvchi Yandex yoki Google qidiruv natijalaridan ramka tuzilishi asosida qurilgan veb-saytingizga kirsa, butun tuzilma emas, balki faqat ramkalardan biriga yuklangan hujjat ochiladi. Nima haqida gapirayotganimni tushunyapsizmi?

Foydalanuvchi hujjatni ko'radi va saytingizda navigatsiyani ko'rmaydi, chunki u boshqa oynalarda himoyalanadi va ular faqat butun tuzilishning bir qismi sifatida yuklanadi.

Natijada, ramkalar ustiga qurilgan sayt oddiygina yaroqsiz holga keladi. Garchi, yana bir bor, server skriptlari asosida ushbu muammoning echimlari mavjud bo'lsa-da, alohida hujjatlar manzillaridan ramka tuzilishiga qayta yo'naltirish amalga oshirilganda. to'g'ri holatda, lekin yana bu juda qiyin va har doim ham ishonchli emas.

Umuman olganda, xulosa bir ma'noda chiqarilishi mumkin - freymlarda veb-saytlar yaratishning hojati yo'q. Ammo ular doimo turli xil ilovalar uchun yordam yaratish uchun ishlatiladi va ular boshqa kichik narsalarda foydali bo'lishi mumkin.

Misol uchun, men "Navigator" deb nomlangan ramka tuzilishini yaratdim (endi u vaqtincha o'chirildi) va u mening blogim uchun o'ziga xos kengaytirilgan tashqi menyuga aylandi, bu menimcha, manba bilan ishlashni soddalashtirishi kerak. va shuning uchun "bema'nilik yo'q" ni yaxshilash saytni reklama qilishga juda kuchli ta'sir qiladi.

Biroq, har qanday muammoga duch kelmaslik uchun qidiruv tizimlari, Men bu butun ramka tuzilishini yopib qo'ydim va har ehtimolga qarshi hammasiga qo'shdim HTML fayllar Rodots meta yorlig'i ularni indekslashni taqiqlaydi:

JOOMLA

Ammo bu cheklovlarning barchasi faqat Frame va Frameset teglaridagi tuzilmalarga taalluqlidir va Iframe teglaridagi o'rnatilgan freymlarning ko'rinadigan kamchiliklari yo'q va ular sizning loyihalaringizda, hech bo'lmaganda videolarni qo'shish uchun ishlatilishi mumkin va hatto ishlatilishi kerak. YouTube.

Sizga omad! Tez orada blog sayti sahifalarida ko'rishguncha

Sizni qiziqtirishi mumkin

Html kodidagi sharh direktivalari va Doctype, shuningdek blok va inline elementlar (teglar) tushunchasi
O'rnatish va ob'ekt - veb-sahifalarda media-kontentni (video, flesh, audio) ko'rsatish uchun Html teglari
Img - Html yorlig'i rasmni qo'shish (Src), matnni uning atrofida tekislash va o'rash (tekislash), shuningdek fonni o'rnatish (fon)
Html gipermatn belgilash tili nima va W3C validatoridagi barcha teglar roʻyxatini qanday koʻrish mumkin. HTML shakllari ochiladigan ro'yxatlar va matn maydoni
Html kodidagi ro'yxatlar - UL, OL, LI va DL teglari
Shrift (yuz, o'lcham va rang), Blockquote va Pre teglar - sof HTMLda eski matn formatlash (siz CSS yordamida)
Html va CSS kodlarida ranglar qanday o'rnatiladi, jadvallarda RGB soyalarini tanlash, Yandex chiqishi va boshqa dasturlar

Veb-saytlar yaratilishining boshida veb-resurslar sahifalarning alohida qismlarini ko'rsatish uchun ramkalardan keng foydalanilgan. Ammo HTML 5 ning yangi versiyasi paydo bo'lishi bilan hamma narsa o'zgardi. Belgilash elementlari , va eskirgan. Ular bitta teg bilan almashtirildi - . Html ga qanday qo'shish kerak? Quyidagi misol hatto dasturlashda yangi boshlanuvchilar uchun ham tushunarli bo'ladi.

Ko'pgina birinchi veb-sahifalarning asosi ramka hisoblanadi. Agar so'zma-so'z tarjima qilingan bo'lsa, bu so'z "ramka" degan ma'noni anglatadi, ya'ni ramka brauzerdagi sahifaning kichik qismidir. O'tmishda ramkalarning keng qo'llanilishini internet-trafikning past sifati va yuqori narxi bilan izohlash mumkin. Qoidaga ko'ra, sayt 3-5 qismga bo'lingan, ularning har biri ma'lum bir maqsadga xizmat qilgan:

• "sarlavha" (sahifaning kengligi bo'ylab yuqori ramka) - resurs nomini ko'rsatadi;
• chap/o'ng "shisha" - menyu ekrani;
• Markaziy ramka sayt tarkibini ko'rsatishdir.

Sahifani qismlarga bo'lish uni yangilashda faqat ma'lum bir qismni ortiqcha yuklashga imkon berdi. Misol uchun, foydalanuvchi menyu elementini bosdi va yangi tarkib markaziy ramkaga yuklab olindi.

Nima uchun u HTMLda kerak? Masalan, uchinchi tomon manbasidan tarkibni kiritish. Klassik holat - veb-ishlab chiquvchi ob'ektning joylashuvini xaritada ko'rsatmoqchi bo'lganda. Nima qilishim kerak? Sayt rejasini noldan chizasizmi? Yo'q - oddiyroq yechim bor: sahifaga Google Map, Yandex Maps yoki 2GIS elementini joylashtiring. Muammo to'rt bosqichda hal qilinadi.

Bundan tashqari, siz xarita o'lchamini tanlashingiz va boshqa displey parametrlarini sozlashingiz mumkin.

Uni HTMLda yana qanday ishlatish mumkin?? Misol tariqasida Youtube resursidan video materiallarni kiritish mumkin. Multimedia texnologiyalari Internet foydalanuvchilarini o'ziga jalb qiladi, shuning uchun video kontent juda mashhur. Ishlab chiquvchi videoni o'rnatish bilan tezda shug'ullanadi.

Ikkala misolda avtomatik kod ishlab chiqarish ishlatilgan, ammo professional ishlab chiquvchilar kodni o'zlari yozishlari kerak. Birinchidan, bu ularga sahifa tartibini tushunishga va kerak bo'lganda uni o'zgartirishga imkon beradi. Ikkinchidan, sayt elementlarini belgilash (ular tashqi manbaga tegishli bo'lsa ham) har doim ham veb-ustaning ishtirokisiz shakllanmaydi. Bu erda ishlab chiquvchining yuqori malakasi o'ynaydi.

Shunday qilib, sahifani joylashtirishni boshlashdan oldin, iframe (html) tegini ko'rib chiqishingiz kerak: bu nima va uni qanday to'g'ri ishlatish kerak.

Avvalo, tegning juftlanganligini ta'kidlash kerak. Ochilish va yopish elementlari o'rtasida ushbu belgilash elementini qo'llab-quvvatlamaydigan brauzerlarda ko'rsatiladigan tarkibni ko'rsatadi. Asosiy teg atributlari:

• kenglik (kenglik);
• balandlik (balandlik);
• src (yuklab olingan resurs manzili);
• tekislash (tekislash usuli);
• ramka chegarasi;
• ruxsat etilgan to'liq ekran.

Shunday qilib, uchun kod. HTML misoli quyida to'liq ko'rsatilgan:

Yuqoridagi belgilashda sayt manzilini boshqasiga almashtirish va kerak bo'lganda ramka hajmini sozlash kifoya.

Saytda virus mavjudligini tekshirish ko'pincha iframe qo'shimchalarini aniqlamaydi, ular shubhali saytlarga havolalarni o'z ichiga olishi mumkin, lekin yangi versiya AntiVirus plagini WP ularni ko'rsatadi.

Iframe qo'shimchalarining o'zi zararli kod emas, shuning uchun ular ko'pincha saytni viruslarga tekshiradigan onlayn xizmatlar tomonidan aniqlanmaydi. Iframe qo'shimchalari yordamida ko'pincha tashqi manbada joylashgan fayllar yuklanadi. Masalan, ushbu usul yordamida YouTube-dan veb-saytingizga video yuklash mumkin. Ammo ko'pincha iframe qo'shimchalari tajovuzkorlar tomonidan qurbonning veb-saytiga shubhali fayllarni yuklash uchun ishlatiladi.

Men allaqachon aniq infektsiyalangan saytlarga bir necha bor duch kelganimni yozganman, ammo ularni antivirus-alarm.ru resursida etakchi antivirus ishlab chiquvchilari ma'lumotlar bazalaridan foydalangan holda tekshirish hech qanday shubhali narsani aniqlamadi. 2ip.ru saytidagi tekshiruv shubhali iframe qo'shimchalari mavjudligini ko'rsatdi, ammo kodda ularni topish mumkin bo'lgan aniq joy ko'rsatilmagan. Shuningdek, ushbu qo'shimchalar foydali yoki zararli ekanligini ko'rsatmadi.

Ammo ozod qilish bilan oxirgi versiya WP plagini bilan vaziyat o'zgardi. Ishlab chiquvchiga ko'ra, ushbu plagin endi iframe qo'shimchalarini ko'rsatadi. Va ular zararli yoki yo'qligini o'zingiz aniqlay olasiz. Iframe qo'shimchasi qanday ko'rinishini bilish:

Agar plagin uni aniqlasa, ushbu qo'shimchada qaysi manba manzili ko'rsatilgan bo'lsa, uning foydali yoki zararli ekanligini aniqlash oson.

O'zlari zararli kodni topadigan va olib tashlaydigan kompyuterlar uchun antiviruslardan farqli o'laroq, sayt uchun antiviruslarning aksariyati, masalan, AntiVirus, faqat o'z nuqtai nazaridan shubhali kodni topadi. Uni olib tashlash va o'chirish to'g'risidagi qaror foydalanuvchi tomonidan qabul qilinadi. Bundan tashqari, PHP bilan tanish bo'lmagan yangi boshlanuvchilar uchun faqat mavzuni sinab ko'rish uchun mo'ljallangan TAC plagini haqiqatan ham yordam beradi. Men faqat bitta plaginni bilaman, u nafaqat topadi, balki yomon kodni ham olib tashlaydi. Afsuski, ushbu plaginda bitta yoqimsiz xususiyat mavjud. Agar u saytdagi infektsiyani bartaraf eta olmasa, u ruxsat so'ramasdan saytga kirishni bloklaydi.

Shuning uchun, agar saytingizda shubhali hech narsa sodir bo'lmasa, antivirus plaginlarini o'rnatmasligingiz kerak. Veb-saytni viruslar uchun profilaktik tekshirish uchun yuqorida aytib o'tilgan onlayn xizmatlardan foydalanish oqilona. Faqatgina ushbu xizmatlarda shubhali narsa aniqlangandan keyin siz joylashuvni aniqlashga yordam beradigan plaginlarga murojaat qilishingiz mumkin zararli kod. Shunga qaramay, hamma ham buning uchun malakaga ega emas. Yangi boshlanuvchilar uchun texnik xodimlardan yordam so'rash osonroq bo'ladi. xostingni qo'llab-quvvatlash.

Saytlarning eng katta ulushi egasining kompyuteri infektsiyalanganidan keyin zararlanadi. Natijada, administrator login va parol o'g'irlangan. panellardan yoki hostingdan. Va faqat kichik bir qismi xakerlik natijasida infektsiyalanadi. Shuning uchun, saytni himoya qilishning eng muhim chorasi shaxsiy kompyuteringiz xavfsizligini ta'minlashdir. Kompyuterda ham yaxshi bo'lishi kerakligini unutmang.

Biz analogni yaratdik Google vositasi Webmaster marker. Eslatib o'taman, Marker - bu Google Webmaster hisobidagi Ochiq Grafik sahifalaringizni teglar bilan izohlash imkonini beruvchi vositadir. Buning uchun siz shunchaki sichqonchangiz bilan sahifadagi matn qismini tanlaysiz va bu sarlavha, bu esa reyting ekanligini ko'rsatasiz. Sizning sahifangiz webmaster hisobidagi Iframe-ga yuklangan.

Endi Google sizning saytingizda shunga o'xshash sahifaga duch kelib, unda qanday kontent nashr etilishini va uni mohiyatiga qanday qilib chiroyli tarzda ajratishni biladi (maqola, mahsulot, video..)

Bizga ham xuddi shunday funksiya kerak edi. Vazifa oddiy va faqat mijoz tomoniga o'xshardi. Biroq, amalda, yechim mijoz tomoni va server tomoni chorrahasida joylashgan ("sof" JS dasturchilari turli proksi-serverlar haqida hech narsa bilmasligi mumkin va loyihaga yaqinlashish uchun juda uzoq vaqt kerak bo'lishi mumkin). Biroq, men Internetda butun texnologiyani boshidan oxirigacha tasvirlaydigan maqola topmadim. Shuningdek, BeLove foydalanuvchisiga va qo'riqchilarimizga yordamlari uchun rahmat aytmoqchiman.

Bizning holatda, biz veb-masterdan o'z sahifasidagi ma'lum elementlar uchun xPath qiymatini qulay tarzda (sichqoncha bilan bosish orqali) olishini xohladik.

Biroq:

Xususan, ruxsat berish-bir xil kelib chiqish qiymati (aniqrog'i, uning yo'qligi) shunchaki iframe-ni har doim xorijiy domendan yuklangan deb hisoblash kerakligini aytadi (masalan, siz asosiy hujjatning domeniga bunday domendan AJAX so'rovini yubora olmaysiz. ramka)

Iframe elementining src atributiga e'tibor qarataylik: src="https://wmthighlighter.googleusercontent.com/webmasters/data-highlighter/RenderFrame/007....." - bizning sahifamiz administrator panelidan yuklangan. Google domeni. Bundan tashqari, bu yanada jiddiyroq: hatto dastlabki hujjatdagi skriptlar va rasmlar proksi-server orqali boshqariladi. Barcha src, href... html da proksilanganlar bilan almashtiriladi. Shunga o'xshash narsa:

Sizning sahifangiz foydalanadigan barcha resurslar Google proksi-serverlarida ham saqlanadi. Mana, masalan, bizniki.

Sahifaning kodlanishini aniqlang (http-javob yoki html-dagi belgilar to'plami orqali) - proksi-serverimiz biz yuklagan sahifa bilan bir xil kodlashda javob berishi kerak. Biz har qanday holatda ham kontent turini aniqlaymiz, garchi biz sahifani matn/html ko'rinishida olishimiz aniq bo'lsa ham, biz uni xuddi shu tarzda qaytarib beramiz.
final String url = request.getParameter("url");
final HttpGet requestApache = yangi HttpGet(url);

Biz yetib keldik, domenlararo cheklovlarni chetlab o'tib, o'z yechimimizni buzdik. Endi biz yana iframe tarkibiga kira olmaymiz.

Google'dan yechim topishda davom etib, men proksi-server orqali xizmat ko'rsatadigan sahifamizni alohida oynada ochdim

Va men konsolda g'alati xatolikni payqadim.
CrossPageChannel: ulanib bo‘lmadi, tengdosh oyna-obyekt sozlanmagan.
Domeningizdan iframe-ga sahifa yuklashdan ko'ra hamma narsa tartibliroq ekanligi ayon bo'ldi. Sahifalar bir-biri bilan aloqa qiladi. Shunga ko'ra, biz window.postMessage tomon harakat qilamiz

Bu erda proksi-serverning namunasi bosh sahifa O'rnatilgan skript bilan Habr:
http://highlighter.indexisto.com/?md5=6ec7rdHxUfRkrFy55jrJQA==&url=http%3A%2F%2Fhabrahabr.ru&expires=1390468360

Biz nginx-ni proksi-server oldiga qo'yamiz, u 80-portni tinglaydi va biz proksi-serverning o'zini boshqa portga olib tashlaymiz. Biz 80 dan tashqari barcha boshqa portlarni yopamiz tashqi dunyo.

Endi proksi-serverning faqat administrator paneli orqali ishlashini ta'minlaylik. Veb-ustoz o'z saytining URL-manzilini kiritgan paytda, biz tezda serverga yuguramiz, u erda biz joriy TimeStamp + 1 soatdan md5 xeshini, URLning o'zi va super sirni yaratamiz:
final String md5Me = timeStampExpires + urlEncoded + "SUPERSECRET";
yakuniy MessageDigest md = MessageDigest.getInstance("MD5");
md.reset();
md.update(md5Me.getBytes("UTF-8"));

String kodi = Base64.encodeBase64String(md.digest());
kod = code.replaceAll("/", "_");

kod = code.replaceAll("\\+","-");

Shuni ham yodda tutingki, kodda biz md5 satrini odatdagi hex sifatida emas, balki base64 kodlashda olamiz, shuningdek, natijada olingan md5-da biz pastki chiziq va tire bilan slash va plyus belgilarni g'alati almashtirishlarni amalga oshiramiz.

Va Java kanonik bazani 64 beradi.

Administrator panelimizdagi xavfsiz md5-ga ega serverdan javob olganimizdan so'ng, iframe-ga quyidagi url-ni yuklashga harakat qilamiz:

highlighter.indexisto.com/?md5=Dr4u2Yeb3NrBQLgyDAFrHg==&url=http%3A%2F%2Fhabrahabr.ru&expires=1389791582

Endi biz nginx HttpSecureLinkModule modulini sozlaymiz. Ushbu modul unga kelgan barcha parametrlarning md5-ni tekshiradi (xuddi shu maxfiy kalit modulda administrator servletida ro'yxatdan o'tgan), havolaning tahlil qilinganligini tekshiradi va faqat bu holda so'rovni bizning proksi-servletimizga yuboradi. .

Endi hech kim bizning proksi-serverimizni administrator panelidan tashqarida ishlata olmaydi, shuningdek, serverimizga so'ralgan rasmni hech qanday joyga qo'sha olmaydi - u baribir bir soat ichida o'ladi.

Bularning barchasi, Google, tabiiy ravishda, o'zining marker vositasi bilan bir xil elementni (masalan, maqolaning sarlavhasini) bir xil turdagi sahifalarda belgilashingiz kerak. xpath-ni aniqroq yaratishingiz va "post-2334" kabi turli xil identifikatorlarni o'chirib tashlashingiz mumkin, bu faqat bitta sahifada ishlaydi, hozircha ma'muriy panelda maqbul natijaga erishish uchun xpath qo'lda tuzatilishi kerak.

Element

Veb-dizaynning yomon eski kunlarida har bir ishlab chiquvchining hayotini buzadigan ko'plab elementlar mavjud edi. Ular deyarli har doim yomon dizayn yondashuvi edi. Yaxshiyamki, element HTML5 da eskirgan. Lekin yoki "inline ramka" hali ham mavjud. Keyingi versiyada u bekor qilinadimi? Balki bundan qochishimiz kerakdir? HTML sahifasini yaratishda ushbu elementdan bir nechta to'g'ri foydalanish mumkin. Lekin xatolarga yo'l qo'ymaslik uchun nima ekanligini va qanday ishlashini tushunishingiz kerak.

Ushbu elementlarning ikkalasi ham alohida HTML hujjatini yaratishga imkon beradi. Joriy veb-sahifa tomonidan havola qilingan hujjat mazmuniga havola src atributida ko'rsatilgan.

. . . . . .

va o'rtasidagi asosiy farq shundaki, u HTML hujjatining ustuvorligi haqidagi qoidani amalga oshiradi. Tarkib joriy hujjatning bir qismi bo'lgan element ichida ko'rsatiladi. Misol sifatida, YouTube'dan olingan ushbu o'rnatilgan videoni ko'rib chiqing:

Video aniq HTML sahifasida va alohida panelda emas. element ushbu paradigmani buzdi va hujjatga brauzer oynasi ustidan nazoratni amalga oshirishga imkon berdi, uni bir nechta kichik panellarga (ramkalarga) ajratdi, ularning har biri alohida hujjatni aks ettiradi. O'rtasidagi boshqa barcha farqlar va bu asosiy farqdan kelib chiqadi.

Bir kun kelib siz ramkalar yordamida qurilgan eski veb-saytni yangilash vazifasiga duch kelishingiz mumkin. Bundan tashqari, mustaqil panellar va tokchalarning bir xil dahshatli tushini qayta yaratish uchun belgilangan kenglikdagi tartibdan foydalanishni xohlashingiz mumkin. Lekin siz alohida ramkada havolani ochish uchun maqsad atributidan foydalana olmaysiz. Siz JavaScript yechimlarini qidirishni boshlashingiz mumkin. Iltimos, qilmang.

uchun bir nechta to'g'ri foydalanish holatlari mavjud HTML yaratish sahifalar:

• uchinchi tomon media-kontentini joylashtirish;
• o'z media kontentingizni platformalararo hujjat orqali joylashtirish;
• joylashtirish kodlari misollari;
• to'lov shakllari sifatida uchinchi tomon "appletlari" ni joylashtirish.

Bu erda ba'zi dahshatli foydalanish holatlari mavjud:

• Fotogalereya;
• forum yoki chat.

Agar siz mustaqil, oldindan mavjud bo'lgan HTML hujjatlarini joriy hujjatga joylashtirishingiz kerak bo'lsa, dan foydalaning. Agar siz hamma narsani noldan qurayotgan bo'lsangiz, sahifa dizaynini bir nechta alohida hujjatlarga bo'lish uchun hech qanday sabab yo'q. Ayniqsa, agar ular mustaqil tarkib bo'lmasa.

Ushbu nashr do'stona loyiha jamoasi tomonidan tayyorlangan "" maqolasining tarjimasi