HTML amaliy loyiha — sayohat sahifasi

Bu amaliy ishda oldingi o’nta darsdagi bilimlarni bitta hujjatda birlashtirasiz. Maqsad chiroyli dizayn emas — mazmunni to’g’ri HTML elementlari bilan ifodalash, hujjat iyerarxiyasini saqlash va formani foydalanishga qulay tuzish.

Loyiha yakunida siz semantik sayohat sahifasi yaratasiz, element tanlovini izohlaysiz va tayyor hujjatni tekshiruv ro’yxati bo’yicha baholaysiz.

Loyiha talabi

Sahifa tog’ ko’liga qisqa sayohat qo’llanmasi bo’ladi. Unda quyidagilar bo’lsin:

sayt nomi va ichki navigatsiya;
asosiy kirish maqolasi va rasm;
ko’rish kerak bo’lgan joylar ro’yxati;
bir kunlik reja jadvali;
foydalanuvchi fikri uchun forma;
muallif yoki manba ko’rsatilgan footer.

Avval mazmunni yozing, keyin qaysi element uning vazifasini eng to’g’ri ifodalashini tanlang. Faqat tashqi ko’rinish uchun div ishlatmang.

1-qadam: hujjat skeleti

To’liq HTML fayl doctype, til, kodlash va mobil viewport ma’lumotidan boshlanadi:

<!doctype html>
<html lang="uz">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Tog' ko'liga bir kunlik sayohat</title>
  </head>
  <body>
    <!-- Ko'rinadigan mazmun shu yerda -->
  </body>
</html>

lang="uz" yordamchi texnologiyaga matn tilini, title esa brauzer yorlig’i va qidiruv natijasidagi sahifa nomini bildiradi.

2-qadam: header va navigatsiya

Navigatsiyadagi href="#reja" shu sahifadagi id="reja" elementiga olib boradi. Havola manzili va maqsad IDsi aynan bir xil bo’lishi kerak:

<header>
  <a href="#asosiy">Sayohat kundaligi</a>
  <nav aria-label="Asosiy navigatsiya">
    <ul>
      <li><a href="#joylar">Joylar</a></li>
      <li><a href="#reja">Kun rejasi</a></li>
      <li><a href="#fikr">Fikr yuborish</a></li>
    </ul>
  </nav>
</header>

Navigatsiya havolalari ro’yxat bo’lib yozildi, chunki ular o’zaro bog’langan bandlar guruhidir. aria-label sahifada bir nechta navigatsiya bo’lsa, uning vazifasini aniqroq aytadi.

3-qadam: asosiy mazmun

main ichida sahifaning noyob mazmuni turadi. Rasm va uning izohi bir birlik bo’lgani uchun figure va figcaption ishlatiladi. Muhim rasmga uning mazmunini tushuntiradigan alt yozing.

Joylar ro’yxatida tartib muhim emas, shuning uchun ul mos. Kun rejasi esa vaqt, faoliyat va joy o’rtasidagi qator-ustun munosabatiga ega — bu haqiqiy jadval ma’lumoti.

4-qadam: fikr formasi

Har bir boshqaruv ko’rinadigan label bilan bog’lansin. Serverga yuboriladigan qiymat uchun name, majburiy maydon uchun required yoziladi:

<form action="/fikr" method="post">
  <label for="ism">Ismingiz</label>
  <input id="ism" name="ism" autocomplete="name" required>

  <label for="izoh">Taklifingiz</label>
  <textarea id="izoh" name="izoh" rows="4" required></textarea>

  <button type="submit">Yuborish</button>
</form>

Bu statik misolda haqiqiy /fikr serveri yo’q. Forma tuzilmasi to’g’ri, ammo ma’lumotni saqlash uchun keyinchalik backend kerak bo’ladi.

Tayyor loyiha va natija

Quyidagi kod barcha qismlarni birlashtiradi. Natijada brauzer standart stillari bilan semantik, o’qiladigan sahifa paydo bo’ladi:

Kod

<header>
<a href="#asosiy"><strong>Sayohat kundaligi</strong></a>
<nav aria-label="Asosiy navigatsiya">
  <ul>
    <li><a href="#joylar">Joylar</a></li>
    <li><a href="#reja">Kun rejasi</a></li>
    <li><a href="#fikr">Fikr yuborish</a></li>
  </ul>
</nav>
</header>

<main id="asosiy">
<article>
  <h1>Tog' ko'liga bir kunlik sayohat</h1>
  <p>Tabiat qo'ynida xavfsiz va tartibli dam olish uchun qisqa qo'llanma.</p>

  <figure>
    <img
      src="/images/html-css/tog-koli-namuna.webp"
      alt="Tog'lar orasidagi sokin ko'l manzarasi"
      width="720"
      height="480"
    >
    <figcaption>Sayohat kundaligidan namunaviy manzara.</figcaption>
  </figure>

  <section id="joylar">
    <h2>Ko'rish kerak bo'lgan joylar</h2>
    <ul>
      <li>Ko'l bo'yidagi kuzatuv maydoni</li>
      <li>Qisqa piyoda yo'li</li>
      <li>Dam olish hududi</li>
    </ul>
  </section>

  <section id="reja">
    <h2>Kun rejasi</h2>
    <table>
      <caption>Bir kunlik tavsiya etilgan yo'nalish</caption>
      <thead>
        <tr><th scope="col">Vaqt</th><th scope="col">Faoliyat</th></tr>
      </thead>
      <tbody>
        <tr><th scope="row">09:00</th><td>Ko'l bo'ylab sayr</td></tr>
        <tr><th scope="row">12:00</th><td>Dam olish va tushlik</td></tr>
        <tr><th scope="row">15:00</th><td>Kuzatuv maydoniga chiqish</td></tr>
      </tbody>
    </table>
  </section>

  <section id="fikr">
    <h2>Taklif qoldiring</h2>
    <form action="#" method="post">
      <p><label for="ism">Ismingiz</label><br><input id="ism" name="ism" autocomplete="name" required></p>
      <p><label for="izoh">Taklifingiz</label><br><textarea id="izoh" name="izoh" rows="3" required></textarea></p>
      <button type="submit">Yuborish</button>
    </form>
  </section>
</article>
</main>

<footer>
<p><small>O'quv loyihasi · 2026</small></p>
</footer>

<style>
img { max-width: 100%; height: auto; }
table { border-collapse: collapse; }
th, td { border: 1px solid #64748b; padding: 6px 10px; }
label { font-weight: 600; }
input, textarea, button { font: inherit; max-width: 100%; }
</style>

Natija

Mustaqil kengaytirish

Tayyor kodni ko’chirish bilan cheklanmang. Quyidagilardan kamida uchtasini o’zingiz qo’shing:

maqola ichiga ikkinchi bo’lim va yana bitta rasm;
tashqi manbaga xavfsiz havola;
ol bilan ketma-ket tayyorgarlik bosqichlari;
jadvalga Davomiyligi ustuni;
formada sayohat turini tanlash uchun radio guruh;
shartlarga rozilik uchun checkbox.

Tekshiruv ro’yxati

Sahifada faqat bitta mazmuniy h1 bormi?
Sarlavha darajalari sakramasdan ketganmi?
Barcha ichki havolalarning ID maqsadi mavjudmi?
Rasmda mazmunli alt, width va height bormi?
Jadvalda caption, ustun sarlavhalari va scope bormi?
Har bir forma maydoni label, id va name bilan bog’langanmi?
button turi aniq yozilganmi?
Elementlar faqat ko’rinishi emas, vazifasiga qarab tanlanganmi?

Keyingi sahifada HTML teglar ma’lumotnomasi orqali ishlatilgan elementlarni tez takrorlaysiz.