HTML(5) da Yozish Uslublari and Kod Yozish Qoidalari

HTML(5) da Yozish Uslublari and Kod Yozish Qoidalari


HTML Kod yozish qoidalari

Ko’pgina dasturchilar HTML sintaksisi va kodlash uslublari haqida noaniq tushunchalarga egalar.

2000 va 2010 yillar oraligida ko’plab dasturchilar HTML dan XTMLga o’tishga majbur bo’lib qolishdi.

Chunki XHTML, dasturchilarga mukammal kod yozish imkonini berardi.

HTML5 ga kelganda esa bir oz ehtiyotkorroq bo’lish talab qilinadi.

Shuning uchun HTML5da o’z uslubingizni yarata olishingiz kerak.


Mukammal va Kelajakda Foydali Uslublar

Uslublardan izchil foydalanish HTML kodingizni boshqalar uchun osonroq tushunishga va foydalanishga yo’l ochadi.

Kelajakda esa XML dasturlari ham sizning HTML kodlaringizni o’qishga qiynalmaydi.

Yahshi joylashtirilgan "XHTML ga yaqin bo’lgan" sintaksis eng maqbul yechimdir.

...   Doimo kodlaringizni mukammal, aniq va yaxshi shakllangan holatda yaratishga harakat qiling.


To’gri Dokument turlaridan foydalanish

Doimo dokument turini birinchi qatorlardayoq dokumentga kiritib qo’ying:

<!DOCTYPE html>

Agarda kichik harflardan foydalanmoqchi bo’lsangiz bu ham xato emas:

<!doctype html>

Element Nomlarida Doimo Kichik Harflardan Foydalaning

HTML5, element nomlarini katta va kichik harflarda yozishga imkoniyat beradi.

Element nomlarida kichik harflardan foydalanishingizni tavsiya qilamiz:

  • Katta va kichik harflarni aralashtirib yozish yaxshi emas
  • Dasturchilar asosan kichik harflardan foydalanishadi(XHTML dagidek)
  • Kichik harflar tushunarliroq
  • Kichik harflarni yozish onsonroq

Yomon:

<SECTION>
  <p>Mening Paragrafim.</p>
</SECTION>

Juda Yomon:

<Section>
  <p>Mening Sahifam.</p>
</SECTION>

Yaxshi:

<section>
  <p>Mening Sahifam.</p>
</section>

Barcha HTML Element Teglarini Yoping

HTML5 da, barcha element teglarini yopish shart emas misol uchun: <p>

Biz shunchaki HTML element teglarini yopishni maslahat beramiz:

Yomon Ko’rinish:

<section>
  <p>Mening birinchi sahifam.
  <p>Mening ikkinchi sahifam.
</section>

Yaxshi Ko’rinish:

<section>
  <p>Mening birinchi paragrafim.</p>
  <p>Mening ikkinchi paragrafim.</p>
</section>

Bo’sh HTML Elementlarini Yoping

HTML5da, bo’sh element teglarini yopish ixtiyoriydir

Bu to’g’ri:

<meta charset="utf-8">

Bu ham to’g’ri:

<meta charset="utf-8" />

Slesh (/) XHTML vaa XMLda doimo ishlatilishi zarur.

Agarda siz XML dasturini veb sahifaga kiritib o’tsangiz, bu juda ham ajoyib bo’ladi.


Atribut Nomlarida Kichik Harflardan Foydalanish

HTML5, katta va kichik harflarni attribut nomlarida aralash foydalanishga imkon yaratgan

Atribut nomlarida kichik harflardan foydalanishingizni tavsiya qilamiz:

  • Katta va kichik harflarni aralashtirib yozish yaxshi emas
  • Dasturchilar asosan kichik harflardan foydalanishadi(XHTML dagidek)
  • Kichik harflar tushunarliroq
  • Kichik harflarni yozish onsonroq

Yomon Ko’rinish:

<div CLASS="menu">

Yaxshi Ko’rinish:

<div class="menu">

Quota Atributi Qiymatlari

HTML5 atribut qiymatlarini quota(qo’shtirnoq)larsiz ishlatishga imkon yaratgan.

Shunday bo’lsada qiymatlarni qo’shtirnoq ichiga yozishni maslahat beramiz:

  • Agar attribut qiymatlari bo’sh joy talab qilsa, quotlardan foydalaning
  • Turli uslublardan aralashtirib foydalanish yaxshi emas
  • Quotalangan qiymatlarni brauzer tez o’qiydi

Ushbu misoldagi holat ishlamaydi, chunki bo’sh joy tashlab yozilgan:

<table class=table striped>

Bu esa to’g’ri uslub:

<table class="table striped">

Rasm Atributlari

Rasm (image) attributi bilan doimo alt ni ishlatish zarur. Chunki bu attribut rasm ochilmagan holatlarda kerak bo’ladi

<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

Bundan tashqari doimo rasm hajmini kiritib o’ting. Chunki brauzer rasmlarni hali yuklamaganda sahifada o’sha joy ajratib ketiladi.

<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

Bo’sh Joylar va Tenglik Belgilari

Tenglik belgisi yonida bo’sh joy ishlatsa ham boladi:

<link rel = "stylesheet" href = "styles.css">

Shunga qaramay bo’sh joy tashlamasdan yozish kodni o’qishni onsonlashtiradi:

<link rel="stylesheet" href="styles.css">

Uzun Qatorli Kod Yozishdan Saqlaning

HTML muharririni ishlatish davomida, o’ngdan chapga skroll qilish dasturchi uchun noqulaylik keltirib chiqaradi.

Shuning uchun iloji boricha 80ta harfdan ortiq kodlashdan saqlaning.


Bo’sh Qatorlar va Xat boshi(Indentation)

Bo’sh qatorlardan sababsiz foydalanmang.

Yaxshi tushinilishi uchun, katta blok va logik qismlar orasigagina bo’sh qator qo’shing.

Yashi o’qilishi uchun TAB o’rniga 2 ta bo’sh joydan foydalaning

Har bir elementni bo’sh qatorlar bilan ajratish shart emas:

Kerak bo’lmagan joy tashlangan:

<body>

  <h1>Mashhur shaharlar</h1>

  <h2>Toshkent</h2>

  <p>
    Toshkent O’zbekiston Respublikasining poytaxtidir.
    Toshkent Markaziy Osiyodagi eng katta shaharlardan biridir. Toshkent aholisi 2 milliondan 
oshiq bo’lib, yahshi rivojlangan poytaxt shahardir. </p> </body>

Yahshiroq:

<body>

<h1>Mashhur Shaharlar</h1>

<h2>Toshkent</h2>
<p>Toshkent O’zbekiston Respublikasining poytaxtidir. Toshkent Markaziy Osiyodagi eng katta shaharlardan biridir. Toshkent aholisi 2 milliondan oshiq bo’lib, yaxshi rivojlangan poytaxt shahardir.</p>

</body>

Jadval Namunasi:

<table>
  <tr>
    <th>Nomi</th>
    <th>Izohi</th>
  </tr>
  <tr>
    <td>A</td>
    <td>A ning izohi</td>
  </tr>
  <tr>
    <td>B</td>
    <td>B ning izohi</td>
  </tr>
</table>

Ro’yhat Namunasi:

<ol>
  <li>Toshkent </li>
  <li>Namangan </li>
  <li>Samarqand </li>
</ol>

<html> va <body> Teglarini Tushirib Qoldirish

HTML5 da <html> va <body> teglarini yozmasa ham boladi:

Namuna:

<!DOCTYPE html>
<head>
  <title>Sahifa sarlavhasi</title>
</head>

<h1>Bosh sarlavha</h1>
<p>Paragraf.</p>

<html> va <body> teglarini yozmaslikni maslahat bermaymiz.

<html> elementi sahifani ildiz(root) elementi hisoblanadi. Bunga qo’shimcha ravishda sahifa tilini ham kiritib ketishni maslahat beramiz:

<!DOCTYPE html>
<html lang="uz">

Sahifa tilini kiritib o’tish dastur tezligini oshiradi va qidiruv tizimilari uchun muhimdir

<html> yoki <body>ni tushirib qoldirish DOM (Document Object Model = obyektlashtirilgan dokument modeli) va XML da muamolarni vujudga keltirishi mumkin.

<body>ni qoldirib ketish esa eski brauzerlarda(IE9) muammo keltirib chiqarishi mumkin.


<head> Tushirib Qoldirilsa?

HTML5 da <head>tegini ham tushirib qoldirsa boladi.

<head> elementi tushirib qoldirilgan holatda, brauzer avtomatik tarzda <body> elementi yuqorisiga <head> elementini qo’shib qo’yadi

HTML dagi murakkablikni <head> tegini tushirib qoldirish orqali to’g’rilashingiz mumkin:

Namuna:

<!DOCTYPE html>
<html>
<title>Sahifa sarlavhasi</title>

<body>
  <h1>Birinchi sarlavha</h1>
  <p>Birinchi paragraf.</p>
</body>

</html>

...   Teglarni tushirib qoldirish ko’op veb dasturchilar uchun notanish. Bularni HTML yo’riqnomasiga kiritish uchun bir qancha vaqt talab qiladi.


Meta Data

<title> elementi HTML5 da ishlatilishi zarur bo’lgan teglardan biridir. Imkon boricha title nomini ma’noliroq va tushunarli qo’yishga harakat qiling:

<title>HTML5 sintaksisi va kodlash uslublari</title>

To’g’ri kiritilgan meta data qidiruv tizimlarida izlash imkonini tezlashtiradi, shuning uchun til va harflar kodirovkasini iloji boricha ertaroq kiritib o’tishga harakat qiling:

<!DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>HTML5 Syntax and Coding Style</title>
</head>

HTML Izohlar Yozish

Kichik ko’rinishdagi izohlar <!-- izohlar--> huddi shunday tartibda yozilishi kerak.

<!-- Bu kichik izoh -->

Uzun qatorli izohlarni ham aynan shu tag ostiga yozish mumkin<!-- uzun qatorli izoh -->

<!-- 
uzun qatorli izoh, uzun qatorli izoh,
uzun  qatorli  izoh,  uzun  qatorli  izoh, uzun  qatorli  izoh,
uzun  qatorli  izoh,  uzun  qatorli  izoh
-->

Agar siz izohlarni ikkita bo’sh joy tashlab yozsangiz ularni oson o’qilishini taminlagan bo’lasiz


Style Sheets

Imkon boricha sintaksisi oddiy bo’lgan style sheetlardan foydalanin(attributlar turlari muhim emas):

<link rel="stylesheet" href="styles.css">

Qisqa qilib yozish qoidasi bo’yicha bir qatorga yozsa bo’ladi:

p.into {font-family: Verdana; font-size: 16em;}

Bir necha uslublar(stillar) bir necha qatorlarda yozilishi kerak:

body {
  background-color: lightgrey;
  font-family: "Arial Black", Helvetica, sans-serif;
  font-size: 16em;
  color: black;
}
  • Selektor bilan bir qatorda ochish belgisini qo’yib keting.
  • Aniqlik kiritish uchun ikkita bo’sh joy tashlab yozing .
  • Doimo atributlardan keyin ikki nuqta hamda bitta bo’sh joy tashlab yozing.
  • Har doim vergul va nuqta verguldan so’ng bitta bo’sh joy tashlab yozing.
  • Har bir qiymatdan so’ng nuqta vergul ishlating.
  • Quotalarni esa faqatgina o’z ichida bo’sh joy bo’lgan atribut nomlari uchun ishlating.
  • Qatorlarda esa 80tadan ortiq belgilardan saqlaning.

...   Vergul yoki ikki nuqtadan keyin bitta joy tashlab yozish umumiy qoida tusiga kiradi.


HTML da JavaScript ni Yuklash

Tashqi resurslardagi skriptlardan foydalanish uchun(attribut turlari muhim emas) imkon boricha oddiy sintaksisdan foydalaning:

<script src="myscript.js"

HTML Elementlariga JavaScript Orqali Kirish

Yaxshi tashkillashtirilmagan HTML usullaridan foydalanmaslik oqibatida JavaScript ko’plab hatolarga olib kelishi mumkin

Masalan ushbu ikki namuna ikki xil natija ko’rsatadi:

var obj = getElementById("Doppi")

var obj = getElementById("doppi")

Kichik Harfli Fayl Nomlaridan Foydalanish

Ko’plab veb serverlar(APACHE, Unix) fayl nomlariga kase senstive(katta va kichik ko’rinishdagi ayni bir harf bit hil atribut hisoblanmaydi masalan: olma va Olma ayni bir o’zgaruvchi emas)dirlar:

tashkent.jpg orqali Tashkent.jpg ga kirib bo’lmaydi.

Biroq (Microsoft, IIS) veb serverlarida bu holat kuzatilmaydi:

tashkent.jpg orqali Tashkent.jpg ga kirsa bo’ladi.

Iloji boricha mayda detallarni ko’zdan qochirmang, aks holda veb sahifangiz noto’g’i aks etishi va boshqa muammolarga olib kelishi mumkin.

Har xil kutilmagan muammolardan saqlanish uchun har doim iloji boricha kichik harflardan foydalaning.


Fayl Kengaytmalari

HTML fayllari .html yoki .htm kengaytmasida bo’ladi.

CSS fayllari esa .css kengaytmasida saqlanishi shart.

JavaScript fayllari .js kengaytmasida bo’lishi kerak.


.htm va .html o’rtasidagi farqlar

.html va .htm kengaytmalari orasida deyarli farq yo’q. Har ikkisidan ham istalgan brauzer orqali foydalansa bo’ladi.

Ular o’rtasidagi farq esa:

.htm ilk DOS sistemalari uchun yaratilgan bo’lib, ushbu tizimda faqat 3 harfli kengaytmalardan foydalanilgan.

.html esa Unix operatsion tizimida foydalanilgan bo’lib, Unixda hech qanday cheklashlar yo’q

Agar veb serveringizda index.html fayl nomidan foydalangan bo’lsangiz, o’z fayllaringiz ham aynan shu kengaytmada bo’lishi kerak.


Innovative Lab web sahifasiga xush kelibsiz biz bilan birga IT sohasidagi o'z bilimlaringizni bosqichma-bosqich oshirib boring!


Telegram kanalimizdan kunlik darslarni o'rganing  

TOSHKENT SHAHRIDAGI INHA UNIVERSITETI - 2017