Wеb лойихаларни яратиш технологиялари Ҳтмл тили ҳақида қисқача маълумот

Wеb лойихаларни яратиш технологиялари

ҲТМЛ тили ҳақида қисқача маълумот

WWW ёки Wеb да маълумотлар гиперматнли ҳужжатлар шаклида олинади. Гиперматннинг ўзи эса бошқа матнли ҳужжатларга йўл кўрсатади. Демак матнлар қайси мамлакатнинг серверида туришидан қатъий назар, тезда ўтиш имкониятини беради. Матнлар билан бир қаторда Wеb ҳужжатларида рангли ҳаракатдаги тасвирларни, турли видео клипларини, умуман мультимедиа маълумотларини ҳам кўриш мумкин. Wеb да маълумотлар саҳифа кўринишида берилади. Бу саҳифалар, одатда, ҲТМЛ ҳужжат, яъни ҲТМЛ(Ҳйпер Техт Мaркуп Лaнгуaге-гиперматнни белгилаш тили) тилида ёзилган ҳужжат деб қаралади. Бу ҳолда ёзилган ҳужжатларни кўриш учун махсус дастурлар ишлатилади. Бундай дастурлар Bроwсер(кўрувчи ёки шарҳловчи)лар деб аталади. Бу дастурларнинг бир қанча турлари мавжуд. Хусусан улардан кўп ишлатиладиганлари Интернет Ехплорер, Нетсcaпе Cоммуниcaтор, Оперa ва бошқалардир. Ўз навбатида бу Bроwсерлар ҳам версияларига эга. Wиндоwс муҳитида стандарт ишлатиладиган Bроwсер бу Интернет Ехплорер дир. Wеb нинг энг асосий хусусиятларидан бири, унда турли матн, видео, график объектларга гипермурожаатнинг мавжудлигиди. У ўз саҳифаларини сақлаш ва узатиш учун Интернет дан фойдаланади. Wеb- интернет тармоқларида жойлашган файллар тўплами бўлиб, уларнинг сони соат сайин кўпайиб бормоқда. ҲТМЛ (Ҳйпер Техт Мaркуп Лaнгуaге-гиперматнни белгилаш тили) WWW системаси учун ҳужжат тайёрлашда ишлатилади.ҲТМЛ тили бу биз билган С, С++, Жaвa, Baсиc ва бошқа дастурлаш тиллари каби тўғри маънодаги дастурлаш тили ҳисобланмайди. ҲТМЛ ёрдамида биз МС ДОС, Wиндоwс ва бошқа операцион системаларида ишлайдиган тўлақонли дастур ёза олмаймиз. ҲТМЛ бу интернет тармоғидаги Wеb- серверида жойлаштирилган ҳужжатларни

кўриш имкониятини берадиган саҳифалар яратишга мўлжалланган гиперматнни белгилаш тили ҳисобланади. Ҳужжатни барча компьютерлар тушунадиган ҳолда кўрсатиш учун, компьютерларнинг тушунадиган ягона тилини билишга тўғри келади. Шу сабабли Wорлд Wиде Wеb да қўлланиладиган ҲТМЛ тили барпо этилди. Ушбу тилни биринчи бўлиб Тим Бернерс-Ли ишлаб чиқди. WWW системасидан қандайдир ҳужжат ёки хабар олсангиз, экранда яхши форматланган, ўқиш учун қулай матн пайдо бўлганлигини кўрасиз. Бу шуни англатади-ки, WWW ҳужжатларида маълумотларни экранда бошқариш имконияти ҳам мавжуд. Сиз фойдаланувчининг қайси компьютерда ишлашини билмайсиз ва WWW ҳужжатлар аниқ бир компьютер платформаларига мўлжалланган ёки қайсидир формат билан сақланишини олдиндан айта оламайсиз. Аммо компьютерда ишлаётган фойдаланувчи қайси терминалда ишлашидан қатъий назар яхши форматланган ҳужжатна олиш керак бўлади. Бу муаммони ҲТМЛ андаза тили ҳал қилади. У ҳужжатнинг тузилишини ифодоловчи унча мураккаб бўлмаган буйруқлар мажмуидан иборат. ҲТМЛ буйруқлари орқали матнларнинг шаклини ўзгартириш, яъни матннинг маълум бир қисмини ажратиб олиб бошқа файлга ёзиш ва бошқа жойдан турли хил рангли тасвирларни қўйиш мумкин. У бошқа ҳужжатлар билан боғлайдиган гиперматнли алоқаларга эга.

CSS ҳақида маълумот CSS нинг бошланғич систаксиси.

CSS нинг бошланғич систаксиси. Масалан бизга қизил фондаги wеб саҳифа керак Бунинг ҲТМЛ даги кўриниши: CСС дa bу коднинг коъринисҳи: bодй {bacкгроунд-cолор: #ФФ0000;}

Елементнинг ташқи кўриниш ранги: “cолор” хусусияти. “cолор” хусусияти элементнинг ташқи кўриниш рангини белгилаб беради. Масалан: Барча ҳтмл документимизни сарлавҳаларини қизил рангда чиқарамиз.

ҳ1 {

cолор: #фф0000;

}

Рангни 6 та қийматли элемент сифатида (#фф0000), ёхуд рангнинг инглиз тилидаги номи “ред” ёки ргб даги қиймати (ргб(255,0,0)) кўринишда беришимиз мумкин. “Баcкгроунд-cолор” хусусияти “Баcкгроунд-cолор” хусусияти элементнинг фон рангини белгилаб беради. Бу элементни ҲТМЛ даги <бодй> теги ичида қўллаш мумкин бунда wеб саҳифамизнинг фони танланган рангда бўлади. Бу элелментни ҲТМЛ даги бошқа тегда қўллаш мумкин. <ҳ1> тегида фойдаланамиз.

bодй {

bacкгроунд-cолор: #ФФCC66; }

ҳ1 { cолор: #990000;

bacкгроунд-cолор: #ФC9804;

}

<ҳ1> тегида фойдаланилган 2 та хусусият “;” белгиси билан ажратилади. “Баcкгроунд-имаге” хусусияти “баcкгроунд-имаге” хусусияти wеб саҳифамизнинг фонига расм жойлаштириш учун ишлатилади. Бунинг учун баcкгроунд-имаге хусусиятини <бодй> теги ичида фойдаланамиз ва расм турган манзилни кўрсатамиз. Еслатма: Расм ва cсс код ёзилган файл битта папкада “bacкгроунд-имaге: урл("bуттерфлй.гиф");” жойлашган бўлади ёки расм турган жой манзили “bacкгроунд-имaге: урл("имaгес/bуттерфлй.гиф");“ коърсaтилaди, aгaр рaсм интернетдa жойлашган бўлса унда интернет манзил кўрсатилади “bacкгроундимaге: урл("ҳттп://имaгес/bуттерфлй.гиф");“.

bодй {

bacкгроунд-cолор: #ФФCC66;

bacкгроунд-имaге: урл("bуттерфлй.гиф");

}

ҳ1 { cолор: #990000; bacкгроунд-cолор: #ФC9804; }

“bacкгроунд-репеaт” такрорланувчи расмли фон хусусияти. Еътибор берган бўлсангиз олдинги мисолда расм фонда автоматик горизонтал ва вертиcал равишда такрорландан эди Жадвалда “bacкгроунд-репеaт” хусусиятининг 4 та қиймати келтирилган. Масалан: Такрорланувчан расмли фонни вертиcал равишда такрорлантирамиз

bодй {

bacкгроунд-cолор: #ФФCC66;

bacкгроунд-имaге: урл("bуттерфлй.гиф");

bacкгроунд-репеaт: репеaт-й;

}

ҳ1 {

cолор: #990000;

bacкгроунд-cолор: #ФC9804;

}

“баcкгроунд-аттачемент” расмли фонни блоклаш. “баcкгроунд-аттачемент” хусусияти wеб саҳифамиз юқорига ва пастга туширилганда фондаги расм ўз жойини ўзгартирмайди ёки аксинча саҳифа билан биргаликда ҳаракатланади. “баcкгроунд-аттачмент” хусусиятининг қийматлари қуйидаги жадвалда келтирилган.

Масалан: Қуйида фондаги расм блоклаб қойилган

bодй {

bacкгроунд-cолор: #ФФCC66;

bacкгроунд-имaге: урл("bуттерфлй.гиф");

bacкгроунд-репеaт: но-репеaт;

bacкгроунд-aттacҳмент: фихед;

}

ҳ1 {

cолор: #990000;

bacкгроунд-cолор: #ФC9804;

}

“баcкгроунд-поситион” Фондаги расм жойлашиш ўрнини белгилаб беради. Юқоридаги мисолларда фондаги расм чап юқоридан чиқаётган эди “баcкгроунд-поситион” хусусияти ёрдамида расмни браверимизнинг хохлаган қисмида жойлашишини белгилаб берамиз Унинг қийматлари сифатида процент, пиксел ёки “топ”, “боттом”, ”ригҳт”, ”лефт”, ”cентер” сўзларидан фойдаланамиз.

Жадвалда “баcкгроунд-поситион” хусусиятинг қийматлари келтирилган Масалан: Фондаги расмни ўнг томондан ва пастдан чиқарамиз.

bодй {

bacкгроунд-cолор: #ФФCC66;

bacкгроунд-имaге: урл("bуттерфлй.гиф");

bacкгроунд-репеaт: но-репеaт;

bacкгроунд-aттacҳмент: фихед;

bacкгроунд-поситион: ригҳт bоттом;

}

ҳ1 {

cолор: #990000;

bacкгроунд-cолор: #ФC9804;

}

“bacкгроунд” хусусияти “баcкгроунд” хусусияти ёрдамида фон билан ишловчи барча хусусиятларни битта хусусиятда бирлаштириш мумкин. Масалан: Бу ерда келтирилган мисолга эътибор берамиз.

bacкгроунд-cолор: #ФФCC66;

bacкгроунд-имaге: урл("bуттерфлй.гиф");

bacкгроунд-репеaт: но-репеaт;

bacкгроунд-aттacҳмент: фихед;

bacкгроунд-поситион: ригҳт bоттом;

Енди “баcкгроунд” хусусияти ёрдамида юқорида келтирилган мисолни кўрамиз.

bacкгроунд: #ФФCC66 урл("bуттерфлй.гиф") но-репеaт фихед ригҳт bоттом;

“баcкгроунд” хусусияти элементлари кетма-кетлиги. [bacкгроунд-cолор] | [bacкгроунд-имaге] | [bacкгроунд-репеaт] | [bacкгроундaттacҳмент] | [bacкгроунд-поситион] Агар қайсидир элемент қолдириб кетилса унинг қиймати автомат равишда белгиланади. bacкгроунд: #ФФCC66 урл("bуттерфлй.гиф") но-репеaт; Бу мисолда қолдирилган элементлар қийматлари автомат равишда “сcролл” , “топ” ва “лефт” ни олади. Шрифтлар

- фонт-фaмилй

- фонт-стйле

- фонт-вaриaнт

- фонт-wеигҳт

- фонт-сизе

- фонт

Шрифтлар оиласи [фонт-фамилй] фонт-фамилй хусусияти бу белгиланган элемент ёки wеб саҳифамизни шрифтини белгилаб беради. Агар сизнинг компютерингизда биринчи шрифт ўрнатилмаган бўлса унда кейингиси ишлайди, токи сизда бор шрифт тури топилмагунча. Шрифтларни белгилашда 2 та номдан фойдаланилади. 1) Фамилй-наме – буни шунчаки шрифт десак бўлади. Масалан “Ариал”, “Тимес Неw Роман”. 2) Генериc фамилй – буни фамилй-наме лар группаси дессак бўлади. Масалан: санс-сериф.

Шрифтлар номи келтириб ўтилгандан сўнг охирида шрифтлар оиласини киритишни унутманг бу сизга максимал даража сизга керакли бўлган шрифт турини ҳар қандай компютерда кўрсатиб бера олади. Шрифтлар рўйхати қуйидагича тузилади:

ҳ1 {фонт-фaмилй: aриaл, вердaнa, сaнс-сериф;}

ҳ2 {фонт-фaмилй: "Тимес Неw Ромaн", сериф;}

Бу ерда сарлавҳа <ҳ1> “Ариал” шрифтида кўринади у ўрнатилмаган бўлса “Вердана” агар иккаласи ҳам бўлмаса санс-сериф оиласи шрифтларидан фойдаланади.

Еслатма: “Тимес Неw Роман” шрифти бўш жой билан ёзилади шунинг учун уни cссда қўллаганда қо”штирноқ ичида ёзамиз.

Шрифт дизайни [фонт-стйле]

фонт-стйле хусусияти қиймат сифатида “нормал”, “италиc”, “облиқуе” ларни қабул қилади. <ҳ2> сарлавҳаси қия ҳолатда ёзилган бунда “италиc” дан фойдаланилган.

Шрифт ҳолати [фонт-вариант]

фонт-вариант хусусияти 2 та вариантни ўз ичига олади “нормал” ва “смаллcапс”. Шрифт смалл-cапс паст регистрдаги ката ҳарфларни чиқаришда ишлатилади. Масалан:

Агар фонт-вариант хусусиятининг смалл-cапс қиймати сизнинг компютерингизда бўлмаса унда автомат тарзда ёзув юқори регистрга ўтади.

ҳ1 {фонт-вaриaнт: смaлл-caпс;}

ҳ2 {фонт-вaриaнт: нормaл;}

Шрифт оғирлиги [фонт-wеигҳт]

“фонт-wеигҳт” хусусияти шрифтнинг қанчалик майин ёки қалинлигини белгилаб беради. Шрифт “нормал” ёки “болд” бўлиши мумкин. Бази турдаги бравзерларда унинг қиймати 100-900 (100 тадан ошиб боради 100, 200, 300…)рақамлар ҳам бўлиши мумкин.

п {фонт-фaмилй: aриaл, вердaнa, сaнс-сериф;}

тд {фонт-фaмилй: aриaл, вердaнa, сaнс-сериф; фонт-wеигҳт: bолд;}

Шрифт размери [фонт-сизе]

“фонт-сизе” хусусияти шрифтнинг размерини белгилаб беради. Унинг қийматлари бирлигини бир неча хил усулда(масалан, пиксел ёки процент) беришимиз мумкин. Ҳозирги мисолда энг кўп қўлланиладиган бирликларни кўрамиз.

ҳ1 {фонт-сизе: 30пх;}

ҳ2 {фонт-сизе: 12пт;}

ҳ3 {фонт-сизе: 120%;}

п {фонт-сизе: 1ем;}

“пх” ва “пт” бирликлари шрифт размерини аниқ белгилаб беради, “%” ва “ем” эса ўзгарувчан.

Кўпкина фойдаланувчилар кичкина ёзувларни ўқий олмасликлари мумкин. Wеб-саҳифангиз ёзувлари ҳамма фойдаланувчилар учун бир хилда яхши кўринадиган бўлишини истасангиз “%” ёки “ем” бирликларидан фойдаланинг. Мана бу ерда қандай қилиб бравзерда шрифт размерини ўзгартириб кўриш мумкинлиги кўрсатилган.

Шрифт хусусиятларини қисқартириш [фонт] “фонт” хусусиятини ишлатиш билан биз барча шрифт хусусиятларини битта хусусиятда бирлаштирамиз.

Мана қуйида 4 қаторли хусусиятлар жадвали.

п {

фонт-стйле: итaлиc;

фонт-wеигҳт: bолд;

фонт-сизе: 30пх;

фонт-фaмилй: aриaл, сaнс-сериф;

}

Қисқартириш хусусияти ёрдамида битта қаторга бирлаштирамиз

п {

фонт: итaлиc bолд 30пх aриaл, сaнс-сериф;

}

Хусусийaтлaр кетмa кетлиги qуйидaгиcҳa:

фонт-стйле | фонт-вaриaнт | фонт-wеигҳт |фонт-сизе | фонт-фaмилй Мaтн

- техт-индент

- техт-aлигн

- техт-деcорaтион

- леттер-спacинг

- техт-трaнсформ

Чekinish xususiяti [text-indent]

“text-indent” xususiяti shundаki u pаrаgrаfni қаnча miқdordа чekinishini(orқаgа ketishini) tаminlаydi. Misoldа pаrаgrаflаr 30 px orқаgа чekingаn.

p {

px;

}

Матнни ростлаш [техт-алигн] Матнни ростлаш қийматлари “лефт”, “ригҳт”, “cентер” ёки “жустифй”. Жадвалдаги сарлавла <тҳ> катакларидаги ёзув ўнг тарафдан, қолган <тд> катаклар ўртадан, параграфлар эса икки томони бир хил текисликда ёзилган.

th {

text-align: right; }

td { text-align: center;

}

p { text-align: justify;

}

Безак бериш вариантлари [техт-деcоратион] “техт-деcоратион” хусусияти матнга беззак беришда эффектларни қўшиш учун ишлатилади. Масалан матн тепасига, остига ёки ўртасига чизиқ чизиш учун ишлатилади.

h1 {

text-decoration: underline;

}

h2 {

text-decoration: overline;

}

h3 {

text-decoration: line-through;

}

Мисолда <ҳ1> - остига, <ҳ2> - тепасига ва <ҳ3> - ўртасига чизиқ чизилган. Ҳарфлар орасидаги масофа [леттер-спаcинг] “леттер-спаcинг” хусусияти орқали матндаги ҳарфлар орасида масофа белгилаш учун ишлатилади. Мисолда сарлавҳадаги <ҳ1> ҳарфлар орасидаги масофани 6пх ва параграпҳ <п> ҳарфлари орасидаги масофа 3пх деб белгиланган.

h1 {

letter-spacing: 6px;

}

p {

letter-spacing: 3px;

}

Матн трансформацияси[техт-трансформ] “техт-трансформ” сўзлар регистрини трансформация (бир ҳолатдан иккинчисига ўтказиш) қилиш учун ишлатилади. Масалан “ҳеадлине” сўзини “ҲЕАДЛИНЕ” ёки “Ҳеадлине” га ўзгартириш мумкин.

Cапитализе

Ҳар бир сўзнинг биринчи ҳарфини бош ҳарф билан ёзиш учун, Масалан “информатион техналогия” -> “Информатион Техналогия”. упперcасе

Ҳар бир сўзнинг ҳамма ҳарфларини бош ҳарф билан ёзиш учун, масалан “информатион техналогия” -> “ИНФОРМАЦИОН ТЕХНАЛОГИЯ”. Лоwерcасе

Матндаги ҳарфларнинг ҳаммасини кичик ҳарфлар билан ёзиш учун, Масалан “ИНФОРМАЦИОН ТЕХНАЛОГИЯ” -> “информатион техналогия”. Ноне

Ўзгартириш бажарилмайди, Ҳтмл даги матн қандай ёзилган бўлса ўзгартиришсиз қолади.

h1 {

text-transform: uppercase;

}

li {

text-transform: capitalize;

}

Ссилка

Бу дарсда биз ссилкага ишлов беришни ўрганамиз, Масалан ссилка актив бўлганда шрифтни ўзгартириш, рангини ёки размерини ўзгартириш. Бу бизнинг сайтимизга ўзига яраша дизайн беради.

Ссилка Ҳтмлда <а> теги орқали ясалади. CСС да эса <а> теги учун дизайн ёзамиз. Бунинг учун псевколаслардан фойдаланамиз.

Псевдоклас бу нима?

Псевдокласслар CСС хусусиятлар учун қўшимча имкониятлар юклайди.

a {

color: blue;

}

Ссилка ҳар хил кўринишда бўлиши мумкин, Масалан унга ташриф буюрилган ёки тескари. Уларга дизайн бериш қуйидагича.

a:link {

color: blue;

}

a:visited {

color: red;

}

|а:линк| ташриф буюрилмаган ва ташриф буюрилганларида |а:виситед| дан фойдаланилади. Бундан ташқари актив ссилкаларда |а:аcтиве|, қачонки курсорни ссилка устига этгандаги ўзгаришлар учун |а:ҳовер| дан фойдаламиз. Псевдоклас :линк

:линк псевдокласида ташриф буюрилмаган ссилкалар учун дизайн ёзиш мумкин.

Мисолда ташриф буюрилмаган ссилкани кўк ранга бўяймиз.

а:линк {

cолор: #6699CC;

}

Псевдоклас :виситед

:виситед псевдокласида тешриф буюрилган ссилкалар учун дизайн ёзиш мумкин.

Мисолда ташриф буюрилган ссилка бинафша рангда кўринади.

a:visited {

color: #660099;

}

Псевдоклас :аcтиве

:аcтиве псевдокласида актив ссилкалар дизайн ёзамиз.

Мисолда актив ссилка сариқ рангда кўринади.

a:active {

background-color: #FFFF00;

}

Псевдоклас :ҳовер

:ҳовер псевдокласида ссилка устига курсорни этганда бўладиган ўзгариш учун дизайн ёзамиз. Мисолда ссилкада ёзилган матн сариқ рангда ва матн шрифти қия шаклда (италиc) бўлади.

а:ҳовер {

cолор: оранге;

фонт-стйле: италиc;

}

Идентификация ва группаларга бўлиш элементлари (cласс ва ид)

Wеб-саҳифангиз учун сизга қандайдир зарур дизайн элементлари ёки элементлари тўплами керак бўлади. Бу дарсда биз элементлар ёки элементлар тўплами учун “cласс” ва “ид” дан қандай фойдаланишни ўрганамиз. Қандай қилиб сарлавҳанинг рангини ўзгартириш мумкин? Қандай қилиб ссилкаларни группаларга ажратиш мумкин ва ҳар бир группа учун алоҳида дизайн ёзиш мумкин? Қуйидаги саволларнинг барчасига бу дарсда жавоб топамиз.

cласс ёрдамида элементларни группаларга ажратиш Бу ерда 2 та ссилкалар группаси учун дизайн ёзилган. Бунда биринчи группа сариқ иккинчиси жигар рангда бўлади.

Cласс группаларини Ҳтмл элементларида жойлаштирамиз.

Виноград для белого вина:

• Рислинг



• Шардонэ



• Пино Блан

Виноград для красного вина:

• Кабернэ Совиньон



• Мерло



• Пино Нуар

Endi shu gruppalar uchun dizayn yozamiz.

a {

color: blue;

}

a.whitewine {

color: #FFBB00;

}

a.redwine {

color: #800000;

}

Идентификация элементлари Ид ёрдамида.

Группаланган элементларга ишлов бериш сизга катта ёрдам берган бўлса керак, ид атрибутаси ёрдамида биргина такрорланмас элементга дизайн ёзамиз. Ид нинг ўзига хослиги шундаки унинг такрорланмаслигидадир. Ҳар бир ид такрорланмас бўлиши шарт. Бошқа ҳолатларда cласс дан фойдаланилади. Ид нинг қандай ишлатилишини мисолда кўрамиз.