linkedin facebook linkedin facebook nod32

HTML HUJJATDAGI MATNLARNI FORMATLASH

Muallif: Zaripova M.J.

Qo`shilgan sana: 2014-03-12

HTML HUJJATDAGI MATNLARNI FORMATLASH

HTML hujjatining kodida biz hamisha biror bir bezak ob'ektlarining o’lchamlarini yoki ularning ranglari xususiyatlarini ko’rsatishimizga to’g’ri keladi.
HTML tilida rang va o’lchov birliklarini qo’llashning standart qoidasi mavjud.
Rang berishning ikkita usuli mavjud. Ko’p qo’llaniladigan usul kerak rangning RGB kodini ko’rsatishdir. Ma'lumki har qanday rangni uchta asosiy: qizil, yashil va ko’k ranglarning qorishmasidan hosil qilish mumkin. Brauzerlar bizga un olti milliondan ortiq rangni tasvirlash imkonyatini beradi, chunki asosiy 3 ta rangdan har birining qiymati 0 dan 255 gacha qiymat qabul qiladi. Ixtiyoriy rang har biri asosiy ranglarning ulushini ifodalovchi 3 ta son majmuasidan iborat bo’ladi.
HTML tilida rang qulaylik uchun 16 lik sistemadagi 6 ta raqamlardan tashkil topadi va ularning oldiga “reshotka” “#” belgisi quyiladi.
Masalan:
Color = “#FF0000” Qizil rang ekanligini bildiradi
Rang ulushlarini ko’rsatib turuvchi raqamlar tartibiga e'tibor berish kerak. Chunki birinchi qizil, ikkinchi yashil va uchinchi ko’k rang ulushlari joylashadi. Biz yuqoridagi misolda qizil rangni tasvirladik.
Rang o’rnatishning muqobil varianti ham mavjud. Quyidagi jadvalda eng ko’p ishlatiladigan 16 ta rang uchun o’rnatilgan qiymatlar ko’rsatilgan:

1-jadval


Black

#000000

Qora

Maroon

#800000

Bordoviy

Silver

#C0C0C0

Kumushrang

Red

#FF0000

Qizil

Grey

#808080

Kulrang

Purple

#800080

Purpurnaya

White

#FFFFFF

Oq

Green

#008000

Yashil

Fuchsia

#FF00FF

Pushti

Navy

#000080

To’q ko’k

Lime

#00FF00

Laym

Blue

#0000FF

Ko’k

Olive

#808000

Olivka ranq

Teal

#008080

 

Yellow

#FFFF00

Sariq

Aqua

#00FFFF

Aqva

Uzunlik o’lchov birliklari
Endi uzunlik o’lchov birliklarini qo’llashni ko’ramiz. Biz Web sahifadagi ob'ek o’lchamlarini ikki xil usulda berishimiz mumkin. Birinchi usul o’lchamlar piksellarda beriladi, ikkinchi usul “o’zak” ob'ektga nisbatan protsentlarda beriladi. Agar biz Web sahifaga jadval joylashtirib uning enini 50% deb ko’rsatsak u holda bu 50% brauzer oynasi enining 50% ini tashkil etadi. Jadval yacheykasining o’lchami esa shu yacheyka joylashgan butun jadval o’lchamiga nisbatan % da hisobida olinadi. Foydalanuvchi tomonidan brauzer oyna o’lchamlari o’zgartirilsa o’nga mos ravishda Web sahifa parametrlari ham o’zgaradi. Web sahifa yaratayotganda brauzer oynasi o’lchami o’zgarganda Web sahifa parametrlari o’zgarmaydigan usulda yaratish kerak.
Agar biz biror bir ob'ektning enini 30 piksel o’lchamida o’rnatmoqchi bo’lsak, uning yozilishi quyidagicha bo’ladi:
Width =“30”
Agar ob'ekt eni “o’zak” ob'ektning 30% ini tashkil qilishi kerak bo’lsa yozuv quyidagicha bo’ladi:
Width =“30%”
Parametr qiymatlari qo’shtirnoq ichiga olinishini e'tiborga olish zarur. Yuqorida ko’rilgan ikki xil usuldan tashqari ob'ekt o’lchamini berishning uchunchi bir usuli ham mavjud. Bu usulni yuqoridagi ikki usulning o’rtachasi deb hisoblasak ham bo’ladi. Bunda biz o’lchamlarni bir necha piksel soniga karrali qilib ko’rsatishimiz mumkin. Masalan bizga 3 ta satrdan iborat jadval berilgan bo’lsin. Agar har bir satr balandligi 30 pikselga karrali bo’lishini xohlasak har bir satrni hosil qiluvchi tegga quyidagi yozuvni yozishimiz lozim:
Height=“3*”
Karrali o’lcham berish belgisi sifatida yulduzcha (*) belgisi ishlatiladi. Karrali son koeffitsenti hisoblanganda (*) belgisining chap tomonidagi son 10 ga ko’paytiriladi. Brauzer bunday ob'ektlarni maksimal o’lchamda tasvirlashga harakat qiladi. Agar jadval 180 piksel balandlikka ega bo’lsa, u holda har bir satr balandligi 60 pikselga teng bo’ladi. Agar balandligi 200 piksellik jadval qo’ysak 20 piksellik joy o’z-o’zidan yo’qoladi. Agar satrlarimiz bir xil balandlikda bo’lishini hoxlasak u holda parametrning quyidagi ko’rinishini qo’llagan ma'qul:
Height=“*”
Jimlik bo’yicha yuqoridagi o’lchov berish usuli qo’llaniladi. Agar ob'ektlar guruqida o’lchamlari ko’rsatilmagan bo’lsa ular berilgan kenglikda maksimal o’lchamda teng joylashadilar.

Matnlarni bezash
HTML tilida matnni tasvirlashning bir qancha usullari mavjud. Brauzer ekranida matn satrini tasvirlash uchun hech qanday teg ishlatishga hojat yo’q. Matnni yozish kifoya. Lekin uni hattoki abzatsga bo’lish ham teglarsiz amalga oshmaydi. Har xil kompyuter tizimlarida matnlarni abzatsga bo’lish uchun har xil simvollar ishlatiladi, lekin HTML hujjati kompyuter tizimi qanday bo’lishidan qa'tiy nazar bir xil tasvirlanishi lozim va shuning uchun abzatsni ifodalovchi teg kiritilishiga to’g’ri kelgan. Har bir abzats boshida <p> tegi qo’yiladi, oxirida esa yopiluvchi </p> tegi qo’yiladi. Bu teg o’z parametrlariga ega. Bu parametrlar qatoriga identifikatsiya parametrlari class va id, shaklli bezash parametri style va tekislash (tenglash) parmetri align kiradi.
Abzatsni brauzer oynasining o’ng yoki chap tomoniga tekislash, markazlashtirish yoki to’la eniga yoyib yozish uchun ularga mos ravishda left, right, center va justify qiymatlari ishlatiladi. Bularning qo’llanilishini quyidagi misolda ko’ramiz:

Misol 1.
<html>
<head>
<title>Abzatslarni gorizontal tanlash</title>
</head>
<body>
<p align =left>chap tomonga tekislagan abzats</p>
<p align =right>o’ng tomonga tekislangan abzats</p>
<p align =center>markazlashtirilgan abzats</p>
<p align =justify>eni bo’yicha yoyib yozilgan abzats</p>
</body>
</html>

Bunday kod bilan yozilgan faylning Internet Explorer brauzer tasviri 1 rasmda tasvirlangan. Internet Explorerning oldingi versiyalari bazi bir teglarni qo’llamasligi mumkin. Masalan eni bo’yiga yoyib yozish tegini brauzer qo’llamasa ekranda oddiy ko’rinishdagi matn yoziladi.

Rasm 1.

Ba`zan Web sahifa yaratuvchilari abzatslar oraligini kengaytirish uchun bo’sh abzatslardan foydalanishadi, yani abzatsning ochiluvchi va yopiluvchi teglarining ichiga hech narsa yozmasdan qo’llashadi. Brauzerlar esa bu narsani e'tibordan chetda qoldiradilar. Shuning uchun abzatslarni ajratish yoki biror abzatsning ichidagi satrni bo’lib keyingi satrga o’tkazish uchun <br> tegi ishlatiladi. Bu teg matnning shu qismini keyingi satrga o’tkazish kerakligini anglatadi.
Quyidagi misolda bu teg har ikkala maqsadda qo’llaniladi.

Rasm 2.

Misol 2.
<html>
<head>
<title>Matnni keyingi satrga bo’lиш</title>
</head>
<body>
<p> Haqiqatni yomon ko`radigan odamlar uni dadil aytadiganlarni ham yomon ko`radilar. Felenon
<br>“Keyingi satrga bo’lingan abzats”
Mutolaa insonni bilimdon qiladi, suhbat zukko bo‘lishga, yozib olish odati esa aniq bo‘lishga yordam beradi. Frensis Bekon</p>
<p>Navbatdagi abzats</p>
<br>
<p>“Bir bo’sh satrdan keyin yozilgan abzats”
Qanday bo‘lsalar o‘shanday qolishga ahd qilganlargina nodon. Aflotun</p>
</body>
</html>

Font tegi
Endi matn shriftlarini bezash usullarini ya'ni font tegini ko’rib chiqamiz. Biz <font> tegini parametrlari bilan birga abzatsning ixtiyoriy joyida qo’llashimiz mumkin. Bu tegdan keyingi matnlar parametrda ko’rsatilgan qiymatlar bo’yicha ekranda tasvir-lanadi. <font> tegini yopiluvchi tegi </font> shunday ko’rinishda bo’ladi.
<font> tegi o’zining qo’llanilayotgan shrift o’lchamini ko’rsatuvchi size, shrift simvollarining rangini belgilovchi color va matn qaysi shriftda tasvirlanishini belgilovchi face parametrlariga ega.
Size parametri qiymat sifatida 0 dan 7 gacha bo’lgan sonlarni qabul qiladi. Bu sonlar matndagi simvollar o’lchamini bildiradi. HTML da ofis dasturlaridagidek simvol o’lchamlarini absolyut o’rnatish imkoniyati yo’q. Chunki bizga Web sahifani ko’rayotgan foydalanuvchi kompyuterida o’rnatilgan shriftlar va qanday o’lcham imkoniyatlariga ega ekanligi noma'lum. Foydalanuvchi brauzeri biz ko’rsatgan shrift o’lchamiga maksimal mos keluvchi o’lchamni tanlashi kerak. Size parametri qiymati sifatida biz shrift o’lchamini berishimiz mumkin. Masalan shrift o’lchamini bittaga oshirish uchun quyidagi konstruktsiyani yozishimiz kerak:
<font size = “+1”>
Shrift (simvol) o’lchamlarini ikki birlikka kichraytirish uchun esa quyidagini yozishimiz kerak:
<font size = “-2”>
Yuqoridagi teglar qatnashgan misolni ko’ramiz:

Misol 3.
<html>
<head>
<title>Simvol o’lchamlari</title>
</head>
<body>
<p> <font size =7>ettinchi o’lchov</font> </p>
<p> <font size =6>oltinchi o’lchov</font> </p>
<p> <font size =5>beshinchi o’lchov</font> </p>
<p> <font size =4>to’rtinchi o’lchov</font> </p>
<p> <font size =3>uchinchi o’lchov</font> </p>
<p> <font size =2>ikkinchi o’lchov</font> </p>
<p> <font size =1>birinchi o’lchov</font> </p>
</body>

</html>

rasm 3.

font tegining navbatdagi parametri bu color parametridir. Color parametri quyidagicha yoziladi:
<font color = “rang”>
Masalan qo’llanilayotgan shrift simvollarini yashil rangda tasvirlash uchun quyidagini yozishimiz lozim:
<font color = “green”>
Navbatdagi face parametri esa qo’llanilishi kerak bo’lgan shriftni belgilaydi. Biz matnni face yordamida Times New Roman yoki Copperplate Gothic shriftlari yordamida tasvirlanishini ko’rsatishimiz mumkin. Biz Web sahifada ishlatgan shrift foydalanuvchi kompyuterida operatsion sistemaga o’rnatilmagan bo’lishi mumkin, u holda brauzer o’z qoidalari asosida ish yuritadi. Har bir brauzerda Web sahifani yuklashda qaysi shriftlardan foydalanish kerakligini ko’rsatib turuvchi sozlash bo’limi mavjud. Face parametri qiymati sifatida ko’pincha vergullar bilan ajratilgan shriftlar ro’yxati keltiriladi. Brauzer ro’yxat bo’yicha o’z operatsion sistemasidan (tizimidan) shu shriftlarni qidiradi va birinchi topilgan shrift bo’yicha matnni tasvirlaydi. Endi esa font tegining barcha parametrlari qatnashgan misolni ko’ramiz:
<font size = 4 color = “black” face = “courier new, arial black”>

Yuqoridagi tegda shu tegdan keyingi matn to’rtinchi o’lchamda, qora rangda va Courier New yoki bu shrift sistemaga o’rnatilmagan bo’lsa Arial Black shriftida tasvirlanish kerakligi e'lon qilingan.
Matn muharrirlari bilan ishlash jarayonidan bilamizki, matnlarni xar-xil ko’rinishda ifodalanish mumkin: qalinlashtirilgan (polujirniy), qo’lyozma shaklida (kursiv), tagi chizilgan (podcherknutiy) … Bu elementlarni ixtiyoriy grafik brauzerlar bir xil ko’rinishda ifodalaydilar. Ba'zi bir fizik stillar quyidagi jadvalda keltirilgan:

Fizik stillar:


Element

Vazifasi

<b>, </b>

Qalinlashtirilgan matn (polujirnшy)

<i>, </i>

Qo’lyozma shaklidagi matn (kursiv)

<tt>, </tt>

Harflar oralig’ini kengaytirish

<u>, </u>

Tagi chizilgan matn (podcherknutiy)

<big>, </big>

Kattalashtirilgan matn

<small>, </small>

Kichiklashtirlgan matn

<sub>, </sub>

Pastki indeks

<sup>, </sup>

Yuqori indeks

Fizik stillarni ishlatish qoidasi:

  1. Matnni kiriting.
  2. Matn oldiga kursorni olib kelib kerakli tegni ochuvchisini yozing.
  3. Matn oxiriga kursorni olib keling.
  4. Yopuvchi tegni yozing.

Mantiqiy stillar:
Mantiqiy stillar brauzerga matnni qay tartibda ekranga chop etish kerakligini bildiradi. Mantiqiy stillar fizik stillar ishlamay qoladigan holatlar uchun ham o’rinli bo’lishi mumkin: uyali telefon internetga ulanganda <b> tegi orqali qalinlashtirilgan matn uchrab qolsa, uni o’qiy olmaydi. Bu holatda <strong> elementi kerakli natijani bera oladi.


Element

Vazifasi

<em>, </em>

<i> tegiga analog teg, matnni ajratish

<strong>, </strong>

<b> tegiga analog teg, juda sezilarli ajratish

<cite>, </cite>

Mazkur hujjatga sitata keltirish.

<dfn>, </dfn>

Dastur kodi, biror terminni aniqlash

<samp>, </samp>

Dasturning matnli natijasi.

<kbd>, </kbd>

Klaviaturadan kiritiladigan matn ya`ni foydalanuvchi tomonidan kirtilgan matn

<var>, </var>

O’zgaruvchi yoki miqdor. Dastur kodidagi o’zgaruvchilar

<abbr>, </abbr>

Abbreviatura

<code>, </code>

biror dasturlash tili kodini belgilash

<acronym>, </acronym>

Akronim

Yuqorida aytib o’tganimizdek HTML bizga simvollarni (matnlarni) kursiv, qalin, tagiga chizilgan yoki ustidan chizilgan holatlarda tasvirlash imkonini beradi.

Misollar fizik stillarga:
<b> Qalinlashtirilgan matn (polujirniy)</b><br/>
<i> Qo’lyozma shaklidagi matn (kursiv) </i><br/>
<tt> Harflar oralig’ini kengaytirish </tt><br />
<u> Tagi chizilgan matn (podcherknutiy)</u><br/>
<big> KATTALASРHTIRILGAN MATN</big><br/>
<small> kichiklashtirilgan matn</small><br/>
C<sub>n</sub><br />

ax<sup>2</sup>+bx+c=0<br />

Rasm 4.

Misol 4.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head> <title>Turli xil ko’rinishda yozish </title> </head>
<body>
<p> <font face = “Times New Roman”>matnlar <b> qalin </b>yoki <i>kursiv </i> ko’rinishda bo’lishi mumkin <br>
Bir vaqtning o’zida <b> <i>ham qalin ham kursiv </b></i>ko’rinishda bo’lishi ham mumkin </p>
<p><u>tagi chizilgan </u> va <strike>usti chizilgan</strike>
ko’rinishda ham bo’ladi</p>
<p><tt> yoki kengaytirilgan </tt></p>
<p> bo’lishi mumkin </p>
<p>Biz simvol o’lchovini<big> kattalashtirishimiz
</big>va<small> kichraytirishimiz</small> mumkin</p>
</body>
</html>

Misol mantiqiy stillarga:

Rasm 5.

Misol 5.
<html>
<head><title> Tasvirlashning standart varianti </title></head>
<body>
<p> <font face = “Times New Roman”> Bu oddiy matn </p>
<p> Bu <em> ajratilgan</em> va <strong> juda sezilarli ajratilgan </strong> matn </p>
<p> Bu <cite> sitata</cite>, bu esa <dfn> aniqlangan termin</dfn> </p>
<p> Biz <code> dastur kodini </code> foydalanuvchi tomonidan kiritilgan
<kbd> kbd matnini</kbd>, yana <samp> dasturning matnli natijasini </samp> va <var> o’zgaruvchilarni </var> yozishimiz mumkin</p>
<p> <abbr> Abbreviaturalar </abbr> va <acronym> akronim</acronym>lar ana shunday tasvirlanadilar
</body>
</html>

Ba'zan biror bir matn muharririda yozilgan matnni Web sahifaga joylashtirishga to’g’ri keladi. Bunday paytda matn formati matn muharririda o’rnatilgan satr uzunligiga bog’liq bo’lib qoladi. Bulardan tashqari HTML da yuqori va pastki indekslarni yozish imkoniyati mavjud. Yuqori indeksni yozish uchun <sup> va </sup> teglari, pastki indekslarni yozish uchun esa <sub> va </sub> teglari ishlatiladi. Bu teglar qatnashgan quyidagi misolni ko’ramiz:

Misol 6.
<html>
<head>
<title>Yuqori va pastki indekslar </title>
</head>
<body>
<p>Kvadrat tenglamaning umumiy ko’rinishi ax<sup>2</sup>+bx+c=0</p>
<p>Suvning ximiyaviy formulasi quyidagicha: H<sub>2</sub>O</p>
</body>
</html>

Rasm 6.

2034 marta o`qildi.

Parol:
Eslab qolish.


Ro`yhatdan o`tish

testing

+998915878681

Siz o`z maxsulotingizni 3D reklama ko`rinishda bo`lishini xohlaysizmi? Unda xamkorlik qilamiz.

3D Reklama


Рейтинг@Mail.ru
Рейтинг@Mail.ru

Besucherzahler
счетчик посещений