Матнларни безаш ( HTML )

Матнларни безаш ( HTML )

Загружено в:

20.09.2019

Скачано:

0

Размер:

304 KB

Матнларни безаш ( HTML ) Режа: 1. Ранглар ва ўлчов бирликлари 2. Матнларни безаш 3. Font тэги

1. Ранглар ва ўлчов бирликлари. HTML ҳ уж жа тининг кодида биз ҳамиша бирор бир безак объектларининг ўлчамларини ёки уларнинг ранглари хусусиятларини кўрсатишимизга тўғри келади. HTML тилида ранг ва ўлчов бирликларини қўллашнинг стандарт қоидаси мавжуд. Ранг беришнинг иккита усули мавжуд. Кўп қўлланиладиган усул керак рангнинг RGB кодини кўрсатишдир. Маълумки ҳ ар қандай рангни учта асосий: қизил, яшил ва кўк рангларнинг қ оришмасидан ҳ осил қилиш мумкин. Браузерлар бизга ун олти миллиондан ортиқ рангни тасвирлаш имконятини беради, чунки асосий 3 та рангдан ҳ ар бирининг қиймати 0 дан 255 гача қиймат қабул қилади. Ихтиёрий ранг ҳ ар бири асосий рангларнинг улушини ифодаловчи 3 та сон мажмуасидан иборат бўлади. HTML тилида ранг қулайлик учун 16 лик системадаги 6 та ра қ амлардан ташкил топади. Масалан: Color = “# FF 0000” 16 лик ра қ амлар олдида “#” белгиси қўйилади. Ранг улушларини кўрсатиб турувчи рақамлар тартибига эътибор бериш керак. Чунки биринчи қизил, иккинчи яшил ва учинчи кўк ранг улушлари жойлашади. Биз юқоридаги мисолда қизил рангни тасвирлдик. Ранг ўрнатишнинг му қ обил варианти ҳам мавжуд. Қуйидаги жадвалда энг кўп ишлатиладиган 16 та ранг учун ўрнатилган қийматлар кўрсатилган: Жадвал 1.2. № Ранг 16 лик коди Ёзма қиймати 1 қора #000000 Black

2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 Кумуш ранг Ок Тук қизил Кизил Тук қизил Оч қизил Яшил Оч яшил Олхури ранги Сарик Тук кўк Кук #C0C0C0 #808080 #FFFFFF #800000 #FF0000 #800080 #FF00FF #008000 #00FF00 #808000 #FFFF00 #000080 #0000FF #008080 #00FFFF Silver Gray White Marron Red Purple Fuchsin Green Lime Olive Yellow Navy Blue Teal Aqua Бу жадвал қийматларига асосан қизил рангни қуйидагича тасвирлашимиз ҳам мумкин: Color = “ red ” Энди узунлик ўлчов бирликларини қўллашни кўрамиз. Биз Web саҳифадаги объек ўлчамларини икки хил усулда беришимиз мумкин. Биринчи усул

ўлчамлар пикселларда берилади, иккинчи усул “ ў зак” объектга нисбатан процентларда берилади. Агар биз Web саҳифага жадвал жойлаштириб унинг энини 50% деб кўрсатсак у ҳ олда бу 50% браузер ойнаси энининг 50% ини ташкил этади. Жадвал ячейкасининг ўлчами эса шу ячейка жойлашган бутун жадвал ўлчамига нисбатан % да ҳисобида олинади. Фойдаланувчи томонидан браузер ойна ўлчамлари ўзгартирилса ўнга мос равишда Web саҳифа параметрлари ҳам ўзгаради. Web саҳифа яратаётганда браузер ойнаси ўлчами ўзгарганда Web саҳифа параметрлари ўзгармайдиган усулда яратиш керак. Агар биз бирор бир объектнинг энини 30 пиксел ўлчамида ўрнатмокчи бўлсак, унинг ёзилиши қуйидагича бўлади: Width = “30” Агар объект эни “ўзак” объектнинг 30% ини ташкил қилиши керак бўлса ёзув қуйидагича бўлади: Width = “30%” Параметр қийматлари қўштирноқ ичига олинишини эътиборга олиш зарур. Юқорида кўрилган икки хил усулдан ташқари объект ўлчамини беришнинг учунчи бир усули ҳам мавжуд. Бу усулни юқоридаги икки усулнинг ўртачаси деб ҳисобласак ҳам бўлади. Бунда биз ўлчамларни бир неча пиксел сонига каррали қилиб кўрсатишимиз мумкин. Масалан бизга 3 та сатрдан иборат жадвал берилган бўлсин. Агар ҳар бир сатр баландлиги 30 пикселга каррали бўлишини ҳохласак ҳар бир сатрни ҳосил қилувчи тэгга қуйидаги ёзувни ёзишимиз лозим: height=”3*” Каррали ўлчам бериш белгиси сифатида юлдузча (*) белгиси ишлатилади. Каррали сон коэффиценти ҳисобланганда (*) белгисининг чап томонидаги сон 10 га кўпайтирилади. Браузер бундай объектларни максимал ўлчамда тасвирлашга ҳаракат қилади. Агар жадвал 180 пиксел баландликка эга бўлса,

у ҳ олда ҳ ар бир сатр баландлиги 60 пикселга тенг бўлади. Агар баландлиги 200 пикселлик жадвал қўйсак 20 пикселлик жой ўз-ўзидан йўқолади. Агар сатрларимиз бир хил баландликда бўлишини ҳ охласак у ҳ олда параметрнинг қуйидаги кўринишини қ ў ллаган маъ қ ул: height = “*” Жимлик бўйича юқоридаги ўлчов бериш усули қўлланилади. Агар объектлар гуру қ ида ўлчамлари кўрсатилмаган бўлса улар берилган кенгликда максимал ўлчамда тенг жойдашадилар. 2. Матнларни безаш HTML тилида матнни тасвирлашнинг бир қанча усуллари мавжуд. Браузер экранида матн сатрини тасвирлаш учун ҳ еч қандай тэг ишлатишга ҳ ожат йўқ. Матнни ёзиш кифоя. Лекин уни ҳ аттоки абзацга бўлиш ҳам тэгларсиз амалга ошмайди. Ҳ ар хил компьютер тизимларида матнларни азацга бўлиш учун ҳ ар хил символлар ишлатилади, лекин HTML ҳужжати компьютер тизими қандай бўлишидан қ аътий назар бир хил тасвирланиши лозим ва шунинг учун абзацни ифодаловчи тэг киритилишига тўғри келган. Ҳ ар бир абзац бошида < p > тэги қўйилади, охирида эса ёпилувчи </ p > тэги қўйилади. Бу тег ўз параметрларига эга. Бу параметрлар қаторига идентификация параметрлари class ва id , шаклли безаш параметри style ва текислаш (тенглаш) парметри align киради. Абзацни браузер ойнасининг ўнг ёки чап томонига текислаш, марказлаштириш ёки тўла энига ёйиб ёзиш учун уларга мос равишда left, right, center ва justify қийматлари ишлатилади. Буларнинг қўлланилишини қуйидаги мисолда кўрамиз: Мисол 4_1.

<html> <head> <title> абзацларни горизонтал танлаш.</title> </head> <body> <p align = “left”> чап томонга текислаган абзац </p> <p align = “right”> ўнг томонга текисланган абзац </p> <p align = “center”> марказлаштирилган абзац </p> <p align = “justify”> эни бўйича ёйиб ёзилган абзац </p> </body> </html> Бундай код билан ёзилган файлнинг Internet Explorer браузер тасвири 4_1 расмда тасвирланган. Internet Explorerнинг олдинги версиялари баьзи бир тэгларни қўлламаслиги мумкин. Масалан эни бўйига ёйиб ёзиш тэгини

браузер қўлламаса экранда оддий кўринишдаги матн ёзилади. Расм 4_1. Баьзан Web саҳифа яратувчилари абзацлар оралигини кенгайтириш учун бўш абзацлардан фойдаланишади, яьни абзацнинг очилувчи ва ёпилувчи тэгларининг ичига ҳеч нарса ёзмасдан қўллашади. Браузерлар эса бу нарсани эътибордан четда қолдирадилар. Шунинг учун абзацларни ажратиш ёки бирор абзацнинг ичидаги сатрни бўлиб кейинги сатрга ўтказиш учун <br> тэги ишлатилади. Бу тэг матннинг шу қисмини кейинги сатрга ўтказиш кераклигини англатади. Қуйидаги мисолда бу тэг ҳар иккала мақсадда қўлланилади.

Мисол 4_2. <html> <head> <title> Матнни кейинги сатрга бўлиш </title> </head> <body> <p> Биз <br> кейинги сатрга бўлган абзац </p> <p> кейинги абзац </p> <br> <p>Бир бўш сатрдан кейин ёзилган абзац </P> </ body > </ html >

Рамс 4_2 3. Font тэги Энди матн шрифтларини безаш усулларини яъни font тэгини к ў риб чи қ амиз . Биз <font> тэгини параметрлари билан бирга абзацнинг ихтиёрий ерида қ ў ллашимиз мумкин . Бу тэгдан кейинги матнлар параметрда к ў рсатилган қийматлар бўйича экранда тасвирланади . <font> тэгини ёпилувчи тэги </font> шундай к ў ринишда б ў лади . <font> тэги ў зининг қ ў лланилаётган шрифт ў лчамини к ў рсатувчи size, шрифт символларининг ранггини белгиловчи color ва матн қайси шрифтда тасвирланишини белгиловчи face параметрларига эга . size параметри қиймат сифатида 0 дан 7 гача б ў лган сонларни қабул қилади . Бу сонлар матндаги символлар ў лчамини билдиради . HTML да офис дастурларидагидек символ ў лчамларини абсолют ў рнатиш имконияти й ў қ . Чунки бизга Web саҳифани к ў раётган фойдаланувчи компютерида ў рнатилган шрифтлар ва қандай ў лчам имкониятларига эга эканлиги номаълум . Фойдаланувчи браузери биз кўрсатган шрифт ўлчамига максимал мос келувчи ўлчамни танлаши керак . Size параметри қиймати сифатида биз шрифт ўлчамини беришимиз мумкин . Масалан шрифт ўлчамини биттага ошириш учун қуйидаги конструкцияни ёзишимиз керак : <font size = “+1”> Шрифт (символ) ўлчамларини икки бирликка кичрайтириш учун эса қуйидагини ёзишимиз керак: <font size = “-2”> Юқоридаги тэглар қатнашган мисолни кўрамиз:

Мисол 4_3. <html> <head> <title>Символ ўлчамлари </title> </head> <body> <p> <font size = “7”> еттинчи ў лчов </font> </p> <p> <font size = “6”> олтинчи ў лчов </font> </p> <p> <font size = “5”> бешинчи ў лчов </font> </p> <p> <font size = “4”> т ў ртинчи ў лчов </font> </p> <p> <font size = “3”> учунчи ў лчов </font> </p> <p> <font size = “2”> иккинчи ў лчов </font> </p> <p> <font size = “1”> бир инчи ў лчов </font> </p> </body> </html>

Расм 4_3. font тэгининг навбатдаги параметри бу color параметридир. Color параметри қуйидагича ёзилади: < font color = “ранг”> Масалан қўлланилаётган шрифт символларини яшил рангда тасвирлаш учун қуйидагини ёзишимиз лозим: < font color = “ green ”> Навбатдаги face параметри эса қўлланилиши керак бўлган шрифтни белгилайди. Биз матнни face ёрдамида Times New Roman ёки Copperplate Gothic шрифтлари ёрдамида тасвирланишини кўрсатишимиз мумкин. Биз Web саҳифада ишлатган шрифт фойдаланувчи компьютерида операцион

системага ўрнатилмаган бўлиши мумкин, у ҳ олда браузер ўз қоидалари асосида иш юритади. Ҳ ар бир браузерда Web саҳифани юклашда қайси шрифтлардан фойдаланиш кераклигини кўрсатиб турувчи созлаш бўлими мавжуд. Fa с e параметри қиймати сифатида кўпинча вергуллар билан ажратилган шрифтлар рўйхати келтирилади. Браузер рўйхат бўйича ўз операцион системасидан (тизимидан) шу шрифтларни қидиради ва биринчи топилган шрифт бўйича матнни тасвирлайди. Энди эса font тэгининг барча параметрлари қатнашган мисолни кўрамиз: < font size = 4 color = “ black ” face = “ courier new , arial black ”> Юқоридаги тэгда шу тэгдан кейинги матн тўртинчи ўлчамда, қора рангда ва Courier New ёки бу шрифт системага ўрнатилмаган бўлса Arial Black шрифтида тасвирланиш кераклиги эълон қилинган. HTML бизга яна символларни курсив , қалин , тагига чизилган ёки устидан чизилган ҳ олатларда тасвирлаш имконини беради.  < b > ва </ b > тэглари белгиланган жойдаги матнни қалин шрифтда тасвирлайди.  < i > ва </ i > тэглари белгиланган жой матнини курсив шрифтда тасвирлайди.  < u > ва </ u > тэглари белгиланган жой матнини тагига чизилган шрифтда тасвирлайди.  < strike > ва </ strike > тэглари белгиланган жой матнини усти чизилган шрифтда тасвирлайди.  < tt > ва </ tt > тэглари белгиланган жой матнини моношрифт шрифтда тасвирлайди.  < small > ва </ small > тэглари белгиланган жой матнини кичрайтирилган шрифтда тасвирлайди.  < big > ва </ big > тэглари белгиланган жой матнини катталаштирилган шрифтда тасвирлайди.

Мисол 4_ < html > < head > < title > турли хил кўринишда ёзиш</ title > </head> <body> <p> <font face = “Times New Roman”> матнлар <b> қалин </b> ёки <i> курсив </i> кўринишда бўлиши мумкин <br> Бир вақтнинг ў зида <b> <i> ҳам қалин ҳам курсив </b></i> к ў ринишда б ў лиши ҳам мумкин </p> <p><u> таги чизилган </u> ва <strike> усти чизилган </strike> кўринишда ҳам бўлади </p> <p> ёки <tt> кенгайтирилган </tt> бўлиши мумкин </p> <p> Биз символ ўлчовини <big> катталаштиришимиз </big> ва <small> кичрайтиришимиз </small> мумкин </p> </body> </html>

Расм 4_ Html да матнни тасвирлашнинг яна бир неча параметрлари мавжуд. Булар қаторига қуйидагилар ҳам киради:  < em > ва </ em > матнни ажратиш  < strong > ва </ strong > жуда сезиларли ажратиш  <с ite > ва </ cite > цитата  < dfn > ва </ dfn > бирор терминни аниқлаш  < code > ва </ code > бирор дастурлаш тили кодини белгилаш  < samp > ва </ samp > дастурнинг матнли натижаси  < kbd > ва </ kbd > фойдаланувчи томонидан киртилган матн  < var > ва </ var > дастур кодидаги ўзгарувчилар  < abbr > ва </ abbr > аббревиатурлар  < acronym > ва </ acronym > акронимлар Мисол 4_5. < html > < head > < title > тасвирлашнинг стандарт варианти </ title >

</head> <body> <p> <font face = “Times New Roman”> бу оддий матн </p> <p> бу <em> ажратилган </em> ва <strong> жуда сезиларли ажратилган </strong> матн </p> <p> бу <cite> цитата </cite> , бу эса <dfn> ани қ ланган термин </dfn> </p> <p> Биз <code> дастур кодини </code> фойдаланувчи томонидан киритилган <kbd> kbd матнини </kbd>, яна <samp> дастурнинг матнли натижасини </samp> ва <var> ўзгарувчи ларни </var> ёзишимиз мумкин </p>. <p> <abbr> аббревиатлар </abbr> ва <acronym> акроним </acronym> лар ана шундай тасвирланадилар </body> </html>

Расм 4_5 Баъзан бирор бир матн му ҳ арририда ёзилган матнни Web саҳифага жойлаштиришга тўғри келади. Бундай пайтда матн формати матн му ҳ арририда ўрнатилган сатр узунлигига боғли қ бўлиб қ олади. Булардан ташқари HTML да юқори ва пастки индексларни ёзиш имконияти мавжуд. Юқори индексни ёзиш учун <sup> ва </sup> тэглари, пастки индексларни ёзиш учун эса <sub> ва </sub> теглари ишлатилади. Бу теглар қатнашган қуйидаги мисолни кўрамиз: Мисол 4_9 < html > < head > < title >Юқори ва пасики индекслар</ title > </head> <body> <p>квадрат тенгламанинг умумий кўриниши ax<sup>2</sup>+bx+c=0</p> <p>сувнинг химиявий формуласи қуйидагича: H<sub>2</sub>O</p> </body> </htm

Адабиётлар 1. Шафран Э. Создание Web -страниц: самоучитель-СПб:Питер,2001.-320с. 2. Игорь Шапошников HTML 4 «БХВ-Петербург» 2002. 3. www.intuit.ru 4. www.citforum.ru 5. www.ziyonet.uz 6. www.slayd.arxiv.uz

Похожие

HTML tili. HTML hujjatning strukturasi

HTML tili

HTML формалар

HTML тили

HTML haqida tushuncha