# HTML amaliy loyiha — sayohat sahifasi

> HTML bo'yicha o'rgangan sarlavha, havola, rasm, ro'yxat, jadval, forma va semantik teglarni birlashtirib sayohat sahifasini bosqichma-bosqich yarating.

Manba: https://learncode.uz/html-css/html-amaliy-loyiha/
Sana: 2026-05-19

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:

1. sayt nomi va ichki navigatsiya;
2. asosiy kirish maqolasi va rasm;
3. ko'rish kerak bo'lgan joylar ro'yxati;
4. bir kunlik reja jadvali;
5. foydalanuvchi fikri uchun forma;
6. 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:

```html
<!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:

```html
<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:

```html
<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:

```html
<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>

    ![Tog'lar orasidagi sokin ko'l manzarasi](https://learncode.uz/images/html-css/tog-koli-namuna.webp)

*Sayohat kundaligidan namunaviy manzara.*

    <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>
```

```css
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%; }
```

> **Nega natijada ozgina CSS bor?**
>
> Bu loyiha HTML bilimini tekshiradi. Previewdagi bir necha CSS qoidasi faqat
> rasm va jadvalni kichik oynada o'qishga qulay qiladi; loyiha semantikasi ularga
> bog'liq emas. Keyingi modulda shu sahifani to'liq CSS bilan bezaysiz.

## 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](https://learncode.uz/html-css/html-malumotnoma)
orqali ishlatilgan elementlarni tez takrorlaysiz.