№5 HTML dars — Axborot tiplariga oid teglar:pre, nobr, samp, kbd, abbr, dfn, code, var, tt, acronym, address, xmp, q, blockquote, bdo
www.dasturim.uzWeb sahifaga biror bir matn kiritsak, bu matn ichida turli hil ma’lumotlar bo‘ladi(ismlar, dastur nomlari, o‘zgaruvchilar, har xil frazalar,…). Bu ma’lumotlar bir xil shrifta yozilsa ham, htmlda ular uchun alohida teglar mavjud, bu teglar axborot tiplariga oid teglar deyiladi, maqola ham aynan mana shu teglarga bag‘ishlanadi, ular biroz ko‘proq. Shuning uchun ularni ikki qismga bo‘lib o‘rganamiz va veb sahifa ham ikkita bo‘ladi. Dastlabkisi bilan tanishing:
<html>
<head> <title>ManchesterUnited</title></head>
<body text="blue" bgcolor="#cdc6e5">
<pre>Bu teg ichida
istalgancha bo'sh joy
tashash mumkin </pre>
<hr color="red">
<p>Chiqish uchun<kbd> ALT+F4</kbd> ni bosing</p>
<hr color="red">
<nobr>Bir qatorda yozilishi shart bo'lgan matnlar
uchun</nobr>
<hr color="red">
<p align="right"><samp><font color="red">Misollarni ajratib ko'rsatish uchun ishlatiladi</font></samp></p>
<hr color="red">
<cite>Oracle <abbr>DBA</abbr></cite><br>
<hr color="red">
<dfn>Terminlarni ifodalashga yaxshi. <b>Internet</b> bu -</dfn>
<hr color="red">
<code>System.out.println("Hello");<br>
summa akmx = new summa();<br>
int <var>sum</var>;
</code>
<hr color="red">
<tt>Eric Contana</tt> <acronym>MU</acronym> ning yaxshi o'yinchi edi.
<address>Uzbekistan Tashkent</address>
<hr color="red">
</body>
</html>
Demak, yangi teglar bilan tanishamiz:
1. <pre>…</pre> — «dastlabki formatlangan matn» ko‘rinishida tarjima qilinib, sayt tuzuvchi yozuvni qanday ko‘rinishda chiqarishni hohlasa, shunday chiqarib beradi. Bo‘sh joylar va pastki qatorga o‘tish(enter) buyruqlarini inobatga oladi. Yozuvlar orasida qancha bo‘sh joy bo‘lsa, shuncha joy tashab keyingilarini chiqaradi.
2. <kbd>…</kbd> — matnda, klaviaturadan kiritilishi kerak bo‘lgan belgilarni chiqarish uchun ishlatiladi, shunda bu yozuv ajralib turadi.
3. <nobr>…</nobr> — uzun yozuvlarni bir qatorga yozish shart bo‘lsa, shu teg ishlatiladi. Agar bir qatorga sig‘masa, aylantirgich(prokrutka) chiqadi.
4. <samp>…</samp> — odatda yozilgan kodlarning natijalarini chiqarish uchun ishlatiladi yoki matnda misollar kelsa, shu misollarni ajratish maqsadida bu tegdan foydalaniladi.
5. <cite>…</cite> — bu teg, matn ichida uchraydigan har xil kitob nomlari, aqlli gaplarni ajratish uchun ishlatiladi.
6. <abbr>…</abbr> — qisqartirilgan(abbeviatura) so‘zlar uchun teg.
7. <dfn>…</dfn> — matn ichida birinchi marotaba uchraydigan terminlarni tushuntirishda, termin nomini ajratish uchun ishlatiladi.
8. <code>…</code> — bir yoki bir necha dasturlashga oid kodlarni chiqarish uchun ishlatiladi.
9. <var>…</var> — dasturlashdagi o‘zgaruvchilarni yozish uchun foydalaniladigan teg.
10. <tt>…</tt> — yozuv mashinasi ko‘rinishidagi namoyon qiladigan teg, tarixiy yozuvlar shu teg ichida yozilsa chiroyli bo‘ladi.
11. <acronym>…</acronym> — akronium yozish uchun mo‘ljallangan teg. Akronium bu qisqartirilgan so‘z bo‘lib, abbeviaturadan farqi, akronium harfma — harf o‘qilmaydi, balki so‘z shaklida o‘qiladi. Misol uchun, Nato — akronium, SNG — abbviatura(Es En G shaklida aytiladi).
12. <address>…</address> — Manzillarni kiritish uchun teg.
Shu yerda to‘xtatamiz va yuqoridagi kodning natijasini ko‘ramiz.
Kodlar biz kutgan natijani berdi, demak hammasi joyida, lekin maqola tugamadi, bu qismga tegishli yana teglar mavjud, teglar soni ko‘pligi uchun kodlarni ham bo‘lishga majbur bo‘ldim. Keyingi tegarni o‘rganish uchun quyidagi koddan foydalanamiz:
<html>
<head> <title>AxboroT davomi</title></head>
<body>
<hr color="red" >
<xmp>
Mashhur Manchester United klubi<br>
1878 yilda tashkil etilgan!
<h1 align="center">Giggs</h1>
<h2 align="right">Young</h2>
</xmp>
<hr color="red" >
<q>Topdingmi, yo'qotmoq taraddudini ko'r. Zero bir kun uni yo'qotasan</q>
<hr color="red" >
<blockquote>
Hayotda noming qoliwini
istasang yo o'qiwga arzigulik asar
yoz, yo yoziwga arzigulik iw qil... </blockquote>
<hr color="red" >
<bdo dir="rtl">Hello World from HtmL</bdo>
</body>
</html>
13. <xmp>…</xmp>, <plaintext>…</plaintext> — bu teg ichida qanday kod yozsangiz ham yozuv bo‘lib ekranga chiqadi, hech qanday buyruq ishlamaydi.
14. <q>…</q> — kichik hajmdagi aqlli gaplar(sitata) yozish uchun teg, bu teg ichidagi yozuv avtomat qo‘shtirnoqqa olinadi.
15. <blockquote>…</blockquote> — katta hajmdagi aqlli gaplar yozish uchun teg, bu teg ichidagi yozuv qo‘shtirnoqqa olinmaydi, lekin chap va o‘ng tomondan ma’lum bir masofa tashlab yoziladi, ya’ni ajratilib ekranga chiqadi.
16. <bdo>…</bdo> — yozuv yo‘nalishini aniqlashtirish. Teg ichidagi yozuvni o‘ng tomondan yoki chap tomondan o‘qish uchun mo‘ljallab chiqaradi. Bitta attributi bor:
dir — yozuv yo‘nalishini o‘rnatish, qiymatlari
*ltr — yozuv doimiy yo‘nalishda chiqadi, chapdan o‘ngga;
*rtl — yozuv o‘ngdan chapga qarab yoziladi.
<bdo dir=»rtl»>AKI</bdo>
natija:IKA
YUqoridagi html kodni natijasini chiqaramiz.
