MohirDox

Ko'rinishi

HTML Uslub Qo'llanmasi ​

Izchil, toza va tartibli HTML kodi boshqalar uchun kodni o'qish va tushunishni osonlashtiradi.

Ushbu qo'llanma HTML yozishda eng yaxshi amaliyotlarni taqdim etadi.

Mundarija ​

Hujjat turi ​

Hujjat turini har doim birinchi qatorda e'lon qiling:

html
<!DOCTYPE html>

Element va atribut nomlari ​

  • Element va atribut nomlarida kichik harflardan foydalaning.

To'g'ri:

html
<body>
    <p>Bu paragraf.</p>
</body>

Noto'g'ri:

html
<BODY>
    <P>Bu paragraf.</P>
</BODY>

Atribut qiymatlarini qo'shtirnoqlash ​

  • Atribut qiymatlarini har doim qo'shtirnoq ichida yozing.

To'g'ri:

html
<table class="striped">

Noto'g'ri:

html
<table class=striped>

Juda noto'g'ri (qiymatda bo'sh joy):

html
<table class=table striped>

Elementlarni yopish ​

  • HTML elementlarini har doim yoping, hatto majburiy bo'lmasa ham.

To'g'ri:

html
<section>
    <p>Bu paragraf.</p>
    <p>Bu paragraf.</p>
</section>

Noto'g'ri:

html
<section>
    <p>Bu paragraf.
    <p>Bu paragraf.
</section>

Formatlash va chekinish ​

  • Uzun qatorlardan saqlaning.
  • Mantiqiy bloklarni ajratish uchun bo'sh qatorlardan foydalaning.
  • 2 ta bo'sh joy bilan chekinish (tab emas).

To'g'ri:

html
<body>

  <h1>Mashhur shaharlar</h1>

  <h2>Tokio</h2>
  <p>Tokio Yaponiyaning poytaxti...</p>

  <h2>London</h2>
  <p>London Angliyaning poytaxti...</p>

  <h2>Parij</h2>
  <p>Parij Fransiyaning poytaxti...</p>

</body>

Noto'g'ri:

html
<body>
<h1>Mashhur shaharlar</h1>
<h2>Tokio</h2><p>Tokio Yaponiyaning poytaxti...</p>
<h2>London</h2><p>London Angliyaning poytaxti...</p>
<h2>Parij</h2><p>Parij Fransiyaning poytaxti...</p>
</body>
  • Keraksiz bo'sh qatorlar yoki bo'sh joylardan foydalanmang.

Jadvallar va ro'yxatlar ​

Jadval namunasi:

html
<table>
    <tr>
        <th>Nomi</th>
        <th>Tavsifi</th>
    </tr>
    <tr>
        <td>A</td>
        <td>A tavsifi</td>
    </tr>
    <tr>
        <td>B</td>
        <td>B tavsifi</td>
    </tr>
</table>

Ro'yxat namunasi:

html
<ul>
    <li>London</li>
    <li>Parij</li>
    <li>Tokio</li>
</ul>

Majburiy elementlar ​

  • SEO va qulaylik uchun <title> elementini har doim qo'shing.
html
<title>HTML uslub qo'llanmasi va kodlash konventsiyalari</title>

Teglarni tashlab ketish ​

  • Moslik uchun <html>, <head>, va <body> teglarini har doim yozing.

Tavsiya etilmaydi:

html
<!DOCTYPE html>
<head>
    <title>Sahifa sarlavhasi</title>
</head>
<h1>Bu sarlavha</h1>
<p>Bu paragraf.</p>

Tavsiya etiladi:

html
<!DOCTYPE html>
<html>
    <head>
        <title>Sahifa sarlavhasi</title>
    </head>
    <body>
        <h1>Bu sarlavha</h1>
        <p>Bu paragraf.</p>
    </body>
</html>

Bo'sh elementlar ​

  • HTMLda yopuvchi qiya chiziq ixtiyoriy, XHTMLda majburiy.
html
<meta charset="utf-8">
<!-- yoki -->
<meta charset="utf-8" />

Til va meta ma'lumotlar ​

  • Har doim lang atributi va kodlashni belgilang.
html
<!DOCTYPE html>
<html lang="uz">
    <head>
        <meta charset="UTF-8">
        <title>Sahifa sarlavhasi</title>
    </head>
    <body>
        ...
    </body>
</html>

Viewport ​

  • Moslashuvchan dizayn uchun viewport meta tegini qo'shing.
html
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Izohlar ​

  • Qisqa izohlar bir qatorda:
html
<!-- Bu izoh -->
  • Ko'p qatorli izohlar:
html
<!--
    Bu uzun izoh namunasi.
    Bu uzun izoh namunasi.
-->

Uslub jadvallari ​

  • Uslub jadvallarini oddiy bog'lang (type kerak emas):
html
<link rel="stylesheet" href="styles.css">
  • Qisqa CSS qoidalarini bir qatorda yozing:
css
p.intro { font-family: Verdana; font-size: 16em; }
  • Uzun CSS qoidalarini bir nechta qatorda yozing:
css
body {
  background-color: lightgrey;
  font-family: "Arial Black", Helvetica, sans-serif;
  font-size: 16em;
  color: black;
}

CSS formatlash:

  • Ochuvchi qavs selektor bilan bir qatorda
  • { dan oldin bitta bo'sh joy
  • 2 ta bo'sh joyli chekinish
  • Har bir xossadan keyin nuqta-vergul
  • Qiymatda bo'sh joy bo'lsa, qo'shtirnoq ishlating
  • Yopuvchi qavs yangi qatorda

JavaScript ​

  • Tashqi skriptlarni oddiy yuklang (type kerak emas):
html
<script src="myscript.js"></script>
  • Element IDlarida izchil bo'ling (katta-kichik harf farqlanadi):
js
getElementById("demo").innerHTML = "Salom";

Fayl nomlash va kengaytmalar ​

  • Fayl nomlarida kichik harflardan foydalaning.
  • HTML uchun .html, CSS uchun .css, JavaScript uchun .js kengaytmalaridan foydalaning.
  • .htm va .html bir xil.

Standart fayl nomlari ​

  • Standart fayl nomlari (masalan, index.html) URLda fayl ko'rsatilmaganida ishlatiladi.
  • Qaysi fayllar standart sifatida tan olinishi server sozlamalariga bog'liq.