Дарси 29. Чорчӯбҳои лағжон дар санади HTML - Технологияи иттилоотӣ — синфи 9
Чорчӯби лағжон чист
Баъзан якбора якчанд парвандаи HTML-ро дар экран дидан лозим аст. Роҳ – равзанаи браузерро ба қисмҳо тақсим кардан: ин қисмҳоро чорчӯбҳои лағжон (фреймҳо, кадрҳо) меноманд. Дар ҳар чорчӯб санади алоҳида нишон дода мешавад, ва ҳар кадом, ба мисли равзанаи мустақил, тасма, пайванд ва расм дорад. Чорчӯбҳо ё новобаста аз ҳам кор мекунанд, ё бо пайвандҳо ба ҳам таъсир мерасонанд.
Контейнери <frameset>
Санади чорчӯбдор аз санади одӣ дар он фарқ дорад, ки ба ҷои <body> контейнери <frameset>…</frameset> дорад (<head> ҳамон тавр мемонад). Ин контейнер сатр ва сутунҳоро муайян мекунад; ҳар чорчӯб бо <frame> навишта мешавад. Дар дохили <frameset> танҳо <frame> ё <frameset>-и дигар меояд. Агар дар санад ҳам <frameset> ва ҳам <body> бошад, браузер чорчӯбҳоро нишон намедиҳад ва танҳо <body>-ро мебинад.
<frameset rows="рӯйхат" cols="рӯйхат">: rows – тақсим ба сатрҳо, cols – ба сутунҳо. Ҳадди ақал яке аз онҳо лозим аст. Чорчӯби яккатакӣ набояд бошад: ҳадди ақал ду сатр ё ду сутун; хосияти дуюм ба 100 % баробар мешавад.
Қиматҳо бо вергул ҷудо мешаванд ва се навъ доранд:
| Қимат | Маъно |
|---|
100 | 100 пиксел (мутлақ) |
25% | 25 % аз андозаи равзана |
*, 2*, 3* | ҳисса аз боқимонда: * – 1 ҳисса, 2* – 2 ҳисса |
Мисолҳо:
rows="100,240,140" – се сатр бо баландии 100, 240 ва 140 пиксел;rows="25%,50%,25%" – се сатр: чоряк, нисф, чоряк. Агар ҷамъ 100 % набошад, андозаҳо мутаносибан тағйир меёбанд;
навбатӣДарси 30. Чандрасонаӣ дар санади HTML
1 соат
cols="*,2*,3*" – се сутун: 1/6, 2/6 ва 3/6-и бар;cols="100,25%,*,2*" – чор сутун: якум 100 пиксел, дуюм 25 %, боқимонда байни сеюм ва чорум 1 бар 2.Дар шакли омехта аввал ҷойи чорчӯбҳои мутлақ, баъд бо фоиз, дар охир – нисбӣ муайян мешавад. Бо пиксел дар rows/cols як чорчӯби нисбӣ ҳам гузоред, то ки дар равзанаҳои гуногун ҷо шавад. Ҳамзамон rows ва cols – панҷараи чорчӯбҳо: rows="*,2*,*" cols="2*,*" – 3 сатр ва 2 сутун (сатрҳо 1/4, 1/2 ва 1/4-и баландӣ, сутунҳо 2/3 ва 1/3-и бар). Азбаски равзанаи браузерҳо андозаи гуногун дорад, баландии сатрҳоро бо пиксел муайян кардан кам мувофиқ аст: пиксел бештар барои расмҳои хурд истифода мешавад, дар дигар ҷойҳо – фоиз ва *.
Теги <frame>
<frame> дар дохили <frameset> меистад; ҷуфт надорад. Мисол: <frameset rows="*,2*"><frame><frame></frameset> – ду чорчӯби ҳоло холӣ, бинобар ин ду <frame>. Шумораи <frame>-ҳо бояд ба шумораи чорчӯбҳои <frameset> баробар бошад. Хосиятҳо:
| Хосият | Таъйинот |
|---|
src | суроғаи санад (HTML-и пурра бо html, head, body) |
name | ном, то ки пайвандҳо ба он ишора кунанд |
scrolling | yes – тасмаи тобдиҳӣ ҳамеша, no – ҳеҷ гоҳ, auto – аз рӯи зарурат (пешфарз): агар дарунмоя аз чорчӯб калон бошад, тасма худкор меояд |
marginwidth | фосила аз чап ва рост дар дохили чорчӯб (пиксел, қимати мутлақ) |
marginheight | фосила аз боло ва поён (пиксел); масалан, marginheight="5" marginwidth="7" – тасмаҳои 5 ва 7 пиксел, дохилашон холӣ; ба сарҳади чорчӯб дахл надорад |
noresize | чорчӯбро аз тағйири андоза манъ мекунад (бе қимат) |
frameborder | yes – хати сарҳадӣ (пешфарз), no – ноаён |
bordercolor | ранги хати сарҳадӣ: ном ё рамз |
Ҳамаи хосиятҳо ҳатмӣ нестанд, аксар вақт танҳо src кифоя аст. Агар src ёфт нашавад, браузер хатогӣ нишон медиҳад; агар набошад, ҷой холӣ мемонад. Матн, сарлавҳа ва расм ба санади чорчӯбҳо бевосита гузошта намешавад, танҳо бо URL. Агар дар <frameset> «ҷузъи бегона» бошад, он ба экран мебарояд ва ҳамаи чорчӯбҳо беэътибор мешаванд.
noresize-ро барои сарҳади байни ду чорчӯб як маротиба дар яке аз онҳо нависед: кифоя аст, ки онро дар яке нишон диҳем ва сарҳади дигарон низ дахлнопазир мешавад. Одатан нишондиҳандаи муш дар болои хати байни чорчӯбҳо тирчаи дусамта мешавад (андозаро тағйир додан мумкин аст); бо noresize ин шакл намеояд.
Чорчӯба (сарҳад). Се хосият: border, frameborder, bordercolor. border танҳо дар <frameset> меояд ва бари сарҳади ҳамаи чорчӯбҳоро бо пиксел медиҳад: <frameset border="10">; border="0" – ҳамаи чорчӯбҳо бе хат; пешфарз 5 пиксел. frameborder ҳам дар <frameset> ва ҳам дар <frame> меояд: yes – хати сарҳадӣ сеченака (пешфарз), no – хат ноаён ва ранги заминаи равзанаро мегирад. bordercolor низ дар ҳар ду тег меояд, ранг – ном ё қимати RGB. Хосиятҳои <frame> хосияти <frameset>-ро бекор мекунанд.
Дар ин мисол bordercolor-и <frameset> хатҳои сарҳадиро сурх мекунад, вале bordercolor-и чорчӯби якум онро бекор карда, чорчӯби якумро бунафш мекунад. Хати байни чорчӯби якум ва дуюм низ бунафш мешавад; боқимондаи хатҳои чорчӯби дуюм сурх мемонад. Агар барои ду чорчӯби ҳамсоя bordercolor-и гуногун гузошта шавад, ҳеҷ яке эътибор надорад ва ранги хати байни онҳо аз <frameset> гирифта мешавад.
Пайвандсозӣ: name ва target
Асосан чорчӯбҳо барои роҳнамоӣ дар сомона лозиманд: рӯйхати пайвандҳо дар як чорчӯб, мақола – дар дигаре. Ба чорчӯб name медиҳанд: <frame name="frame1">. Пайванд бо target мегӯяд, ки санад дар кадом чорчӯб кушода шавад: <a href="putfirst.html" target="frame1">Пахш кунед</a>. Агар target набошад, санад дар ҳамон чорчӯб кушода мешавад, ки пайванд дар он аст. Ба чорчӯби беном пайванд додан мумкин нест. Ном бо ҳарф ё рақам сар мешавад, на бо зерхат (бо зерхат номҳои махсус сар мешаванд):
| Ном | Маъно |
|---|
_blank | санад дар равзанаи нави беном |
_self | дар ҳамон чорчӯб, ки пайванд дар он аст |
_parent | дар чорчӯби сатҳи болои маҷмӯа; агар набошад – чун _self |
_top | дар тамоми равзана: сохтори чорчӯбҳо бекор мешавад |
Ҳамаро якҷоя
Мисоли 5: frames.html ва се парванда.
frame2.html – замина сурх, матн зард, пайванд ба frame3.html бо target="_top"; frame3.html – замина бунафш, пайванд ба frame1.html бо target="_self".
<iframe> – имрӯза
Саҳифаи имрӯза санади дигарро бо <iframe> дар дохили худ нишон медиҳад. Ин ҷузъ дар ҷои дилхоҳи <body> меистад (бе <frameset>):
name ва target ҳамин тавр кор мекунанд: пайванд санадро дар iframe-и номдор мекушояд.
Худатон озмоед
Дар намоишгар <frameset> кор мекунад (дар браузер не). Ҳар як супориш парвандаҳои тайёр дорад.
Чорчӯбҳои лағжонсанҷида бин! Кори амалӣ
Дар компютер: чорчӯбҳои <frameset> дар браузерҳои имрӯза кор намекунанд, бинобар ин ҳамаи супоришҳоро дар намоишгари саҳифаи курс иҷро кунед; <iframe>-ро дар браузер низ санҷед.
Кор дар синф
Машқҳо
Саволҳо
1. Чорчӯби лағжон чист? Вазифаи он аз чӣ иборат аст?
2. Контейнери чорчӯби лағжон кадом аст?
3. Хосиятҳои фреймро чӣ тавр муайян мекунанд?
4. Кадом вақт аз теги <frame> истифода мебаранд?
5. Кадом хосиятҳои чорчӯбҳои лағжонро медонед?
6. Методҳои пайвандсозии чорчӯбҳои лағжон кадомҳоянд?
Супоришҳо
7. Парвандаи frame1.html созед ва бо ёрии контейнерҳои <frameset> равзанаро ба мисли расми зерин ба чорчӯбҳо тақсим кунед: се сатр; сатри якум – ду сутун; сатри дуюм – се сутун, ки сутуни мобайнӣ ба ду сатр тақсим шудааст; сатри сеюм – як чорчӯб.
8. Парвандаи index.html-ро бо ёрии Блокнот кушода, дарунмояи онро тоза кунед. Равзанаро ба 4 чорчӯби лағжон тақсим карда (2 сатр ва 2 сутун), дар онҳо парвандаҳои қаблан сохтаатон – list.html, table.html, image.html ва first.html-ро фаъол гардонед. Баъд:
- ба фрейме, ки дорои парвандаи
list.html аст, тасмаҳои тобдиҳӣ ҳамроҳ намоед;
- фрейми дорои парвандаи
table.html-ро аз имконияти тағйирёбии андозааш (noresize) маҳрум созед;
- парвандаи
first.html-ро чунон тағйир диҳед, ки ҳангоми интихоби пайванди матнӣ ба парвандаи image.html вай дар ҳамон чорчӯби лағжоне фаъол гардад, ки дар он парвандаи first.html ҷойгир аст;
- дар парвандаи
image.html пайвандро ба парвандаи first.html дар шакли тасвир (расм) табдил диҳед, то ки ҳангоми ба он пахш кардан парвандаи first.html дар равзанаи нави браузер кушода шавад.
9. Санади зеринро бо номи freymi_man.html созед ва бо намоишгар кушоед:
Вазифаи хонагӣ
- Саволҳои 1–6-ро шифоҳӣ омода кунед; саволҳои 5 ва 6-ро дар дафтар нависед.
- Супоришҳои 7–9-ро иҷро кунед.
- Вазифаи хонагии онлайнро («ТИ 9 · Вазифаи хонагӣ · Дарси 29») дар саҳифаи «Супоришҳо» иҷро кунед, агар омӯзгор таъин карда бошад.
Хулоса
- Чорчӯби лағжон – қисми равзана бо санади алоҳида;
<frameset rows cols> ба ҷои <body>, дар дохили – <frame> ё <frameset>.
- Қиматҳо: пиксел,
%, *; шумораи <frame> ба шумораи чорчӯбҳо баробар.
<frame src name scrolling noresize frameborder bordercolor marginwidth marginheight>.name + target; _blank, _self, _parent, _top.- Имрӯз:
<iframe src name>; <frameset> дар HTML5 нест.
Дар ин дарс
- мегӯед, ки чорчӯби лағжон (фрейм) чист ва
<frameset> ва <frame> чӣ кор мекунанд;
- равзанаро бо
rows ва cols бо пиксел, фоиз ва * ба чорчӯбҳо тақсим мекунед;
- пайвандро бо
name ва target ба чорчӯби дигар равона мекунед, _blank, _self, _parent, _top-ро фарқ менамоед;
- медонед, ки имрӯз ба ҷои чорчӯби лағжон
<iframe> истифода мешавад.
Такрор (2 дақиқа)
- Бо кадом хосият ду катаки ҳамсояи як сатри ҷадвалро муттаҳид мекунанд?
- Фарқи
th аз td чист?
- Бо кадом тег сарлавҳаи умумии ҷадвалро менависанд?
Ҷавоб
colspan. 2. th – сарлавҳа (дар мобайн, ғафс), td – катаки одӣ. 3. <caption>.
Вазъият барои андешаронӣСомонаи рӯзнома: дар чап рӯйхати рубрикаҳо, дар боло ном, дар мобайн мақола. Агар рубрикаро пахш кунед, танҳо мақола иваз мешавад, рӯйхат ва ном намеғелтанд. Ин чӣ тавр кор мекунад?
Имрӯз<frameset> ва <frame> дар HTML5 вуҷуд надоранд: браузерҳои имрӯза онҳоро намефаҳманд ва саҳифаро холӣ нишон медиҳанд. Бинобар ин код дар ин дарс дар намоишгари худамон кор мекунад, на дар браузер. Имрӯз ҳамин корро <iframe> мекунад: он дар дохили як саҳифа санади дигарро нишон медиҳад (охири дарсро бинед). Мафҳумҳои ин дарс – name, target, _top – бо <iframe> ҳам кор мекунанд.
Чор тарҳи тақсим ва қимати rows ё cols.
Пайванд дар fr1 ва натиҷа дар fr3: ном ва target.Чорчӯбҳо дар index.html
- Парвандаҳои
list.html, table.html, image.html, first.html-ро (аз дарсҳои пештара) нигоҳ доред. Дар саҳифа: онҳо дар супориши 2 тайёранд.
- Дар
index.html равзанаро ба 4 чорчӯб тақсим кунед (2 сатр, 2 сутун) ва парвандаҳоро гузоред.
- Ба
list.html тасма гузоред (scrolling="yes"), table.html-ро noresize кунед.
- Дар
first.html пайванд ба image.html, дар image.html расм-пайванд ба first.html бо target="_blank" созед.
- Санади
freymi_man.html-ро нависед ва хатои онро (</frameset>-и фаромӯшшуда) ислоҳ кунед.
- Хотима: бо
<iframe> саҳифае созед, ки first.html-ро нишон медиҳад.
Калимаҳои калидӣчорчӯби лағжонframesetframerowscolstargetnameiframe
Ман дар ин дарс чӣ омӯхтам?Кадомашро аллакай метавонед ва кадомашро боз машқ мекунед?
- Ман равзанаро ба чорчӯбҳо тақсим мекунам.
- Ман пайвандро ба чорчӯби дигар равона мекунам.
- Ман медонам, ки имрӯз iframe лозим аст.
Нависед: target="_top" чиро мекунад?
<frameset rows="100,*"> чӣ медиҳад?
Як ҷавобро интихоб кунед
Дар cols="*,2*,3*" аломати * чиро ифода мекунад?
Як ҷавобро интихоб кунед
target="_top" чӣ мекунад?
Як ҷавобро интихоб кунед
Теги <frame> теги анҷом лозим дорад.
Кадом target санадро дар ҳамон чорчӯб мекушояд, ки пайванд дар он аст?
Як ҷавобро интихоб кунед <frameset bordercolor="red" rows="*,*">
<frame src="first.html" bordercolor="#FF00FF">
<frame src="first.html">
</frameset>
<html>
<frameset rows="*,*">
<frameset cols="*,*">
<frame src="frame1.html" name="fr1">
<frame src="frame2.html" name="fr2">
</frameset>
<frame src="frame3.html" name="fr3">
</frameset>
</html>
<!-- frame1.html -->
<html><body bgcolor="white">
<h1>Frame1</h1>
<a href="frame2.html" target="fr3">Пайванд ба кадри 2</a>
</body></html>
<iframe src="first.html" name="oyna" width="300" height="150"></iframe>
<a href="image.html" target="oyna">Расмро дар iframe кушоед</a>
<html><head>
<title>ЧОРЧӮБҲОИ ЛАҒЖОН</title>
</head><frameset rows="60%,*">
<frame src="frame1.html">
<frameset cols="35%,65%">
<frame src="frame2.html" noresize>
<frame src="frame3.html" noresize>
</frameset></frameset></html>