Skip to main content

1-dars. HTML asoslari

Darsning maqsadlari:​

  1. HTML haqida asosiy tushunchalarni o'rganish.
  2. Murakkab bo'lmagan teglar va atributlarni tushunish.
  3. HTMLda jadval elementlarini tushunish.
  4. HTMLda multimedia (rasmlar, video va audio) elementlarini qo‘shishni o‘rganish.
  5. HTML-da forma yaratish va uning asosiy elementlarini o‘rganish.
  6. Semantik teglar va ularning ahamiyatini tushuntirish.

https://www.youtube.com/watch?v=9dUhZq9dkHM&list=PLpDyZ4xZcDg_aAzP6pDD1PRsYCSdheveS&pp=iAQB

Kirish​

HTML (HyperText Markup Language) — bu veb-sahifalarni yaratish uchun asosiy tili. Oddiy qilib aytganda, HTML veb-saytning "skeleti". Siz unda matnlarni, rasmlarni, tugmalarni va boshqa elementlarni joylashtirasiz.

HTML – bu kodlashning eng yengil tili. Agar matematikadan zerikarli formulalar yodlashni yoqtirmasangiz, xavotir olmang! HTML faqat teg va atributlardan iborat.

HTML hujjatining asosiy tuzilishi​

HTML hujjati quyidagi asosiy qismlardan iborat:

<!DOCTYPE html>
<html>
  <head>
    <title>Mening birinchi sahifam</title>
  </head>
  <body>
    <h1>Salom, HTML!</h1>
    <p>Bu mening birinchi sahifam.</p>
  </body>
</html>

Tushunish:

  1. <!DOCTYPE html> – Bu sahifani brauzerga "HTML5 ishlatyapman" deb aytadi.
  2. <html> – HTML hujjatining asosiy konteyneri.
  3. <head> – Bu yerda meta ma'lumotlar va sahifa nomi (title) yoziladi.
  4. <body> – Bu yerda ko'rinadigan barcha narsalar joylashadi (matn, rasm, tugmalar).

Teglar (Tags)​

HTML teglar orqali ishlaydi. Teglar qavslar < > orasida yoziladi va aksariyat teglar ochuvchi va yopuvchi bo‘ladi.

Masalan:

<p>Bu birinchi paragraf.</p>
  • <p> – ochuvchi teg.
  • </p> – yopuvchi teg.

Mashhur teglar:​

TegMaqsadiMisol
<h1>-<h6>Sarlavhalar (1 – eng katta)<h1>Katta sarlavha</h1>
<p>Paragraf (matn bloki)<p>Bu matn.</p>
<a>Havola (link)<a href="https://google.com">Google</a>
<img>Rasm qo‘shish<img src="rasm.jpg" alt="Rasm">
<ul> va <li>Ro‘yxatlar<ul><li>Element</li></ul>

Atributlar (Attributes)​

Teglarni "super kuch" bilan ta'minlovchi qismi bu – atributlar. Atributlar teglar ichida yozilib, ularga qo‘shimcha ma'lumot beradi.

Misol:

<a href="https://najottalim.uz" target="_blank">Najot Ta'lim</a>
  • href – havolaning manzilini ko‘rsatadi.
  • target="_blank" – yangi oynada ochilishini ta'minlaydi.

Eng ko‘p ishlatiladigan atributlar:​

AtributMaqsadiMisol
hrefHavola manzili<a href="https://...">
srcRasm manzili<img src="rasm.jpg">
altRasmga muqobil matn<img alt="Rasm yo‘q">
classCSS uchun guruhlash<div class="container">
idElementni aniqlash<div id="unique">

Havola qo'shish​

<a href="https://najottalim.uz" target="_blank">Najot Ta'lim sayti</a>

Ro‘yxat tuzish​

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

HTML haqida qiziqarli faktlar:​

  1. Birinchi HTML versiyasi 1991-yilda Tim Berners-Lee tomonidan yaratilgan.
  2. HTML-ning barcha teglari 100% katta va kichik harflarga sezgir emas: <P> ham, <p> ham bir xil ishlaydi.
  3. HTMLda 200dan ortiq teg mavjud bo‘lib, har birining o‘z maxsus vazifasi bor.
  4. Har kuni veb-saytlarda ishlayotgan eng ko‘p ishlatiladigan teg – <div>!

Jadval yaratish (Tables)​

Jadvallar ma'lumotlarni tartibli ko‘rsatish uchun ishlatiladi.

Asosiy teglar:​

TegVazifasi
<table>Jadval yaratadi
<tr>Jadval qatori
<td>Qatorning ustuni (ma'lumotlar qutisi)
<th>Jadval ustuni nomini belgilaydi

Misol:

<table border="1">
  <tr>
    <th>Ism</th>
    <th>Yosh</th>
  </tr>
  <tr>
    <td>Ali</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Laylo</td>
    <td>23</td>
  </tr>
</table>

Natija:

IsmYosh
Ali25
Laylo23

Izoh:

  • <table> ichidagi border="1" jadvallarni chegaralar bilan ko‘rsatadi.

Qo‘shimcha teglar va imkoniyatlar​

Yuqoridagilardan tashqari, HTMLda qo‘shimcha foydali teglar mavjud:

TegVazifasiMisol
<div>Elementlarni ajratish uchun ishlatiladi<div class="container">...</div>
<span>Matn yoki elementlarni qamrab oladi<span style="color: red;">Salom!</span>
<br>Yangi qator yaratadiMatn <br> Yangi qator
<hr>Gorizontal chiziq chizadi<hr>

Rasmlar bilan ishlash​

Rasm HTML sahifalarining ajralmas qismidir. Rasmlar yordamida veb-sahifalarga hayot baxsh etiladi.

Rasm qo‘shish uchun asosiy teg:​

<img>

Teg atributlari:​

AtributVazifasi
srcRasmning manzilini ko‘rsatadi
altRasmdagi matnli tavsif (rasm ko‘rinmasa, ko‘rinadi)
widthRasmning kengligini belgilaydi (px yoki %)
heightRasmning balandligini belgilaydi

Misol:​

<img src="cat.jpg" alt="Kulib turgan mushuk" width="300" height="200">

Natija: Sahifada 300x200 o‘lchamdagi mushuk rasmi paydo bo‘ladi.

Videolar bilan ishlash​

HTML yordamida videolarni to‘g‘ridan-to‘g‘ri sahifaga joylashtirish mumkin.

Asosiy teg:​

<video>

Teg atributlari:​

AtributVazifasi
srcVideoning manzilini ko‘rsatadi
controlsVideoga boshqaruv tugmalari qo‘shadi
autoplayVideo avtomatik boshlanishini ta'minlaydi
loopVideo tugashi bilan qayta boshlanadi

Misol:​

<video src="nature.mp4" controls autoplay width="640" height="360"></video>

Natija: Sahifada boshqaruv tugmalari bilan video oynasi paydo bo‘ladi.

Audio fayllar bilan ishlash​

HTMLda musiqa yoki ovozli ma'lumotlarni foydalanuvchilarga yetkazish uchun audio tegini qo‘shishingiz mumkin.

Asosiy teg:​

<audio>

Teg atributlari:​

AtributVazifasi
srcAudio manzilini ko‘rsatadi
controlsAudioga boshqaruv tugmalari qo‘shadi
autoplayAudio avtomatik boshlanishini ta'minlaydi
loopAudio tugashi bilan qayta boshlanadi

Misol:​

<audio src="song.mp3" controls></audio>

Natija: Sahifada boshqaruv tugmalari bilan audio oynasi paydo bo‘ladi.

HTML-da Formaning Asosiy Tuzilishi​

HTML-da forma yaratish uchun biz <form> tegini ishlatamiz. Bu teg barcha forma elementlarini o‘z ichiga oladi. Forma elementlari ichida foydalanuvchidan ma'lumot olish uchun turli input turlari mavjud.

  • <input>: Ma'lumot kiritish uchun.
  • <textarea>: Kattaroq matn kiritish uchun.
  • <button>: Bosilganda ma'lumotni yuborish uchun.
  • <select> va <option>: Tanlovlar yaratish uchun.

Misol:​

<form action="/submit" method="POST">
    <label for="name">Ismingiz:</label>
    <input type="text" id="name" name="username" required>

    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>

    <label for="message">Xabar:</label>
    <textarea id="message" name="message" required></textarea>

    <button type="submit">Yuborish</button>
</form>
  • action: Forma yuboriladigan manzil.
  • method: Forma ma'lumotlarini yuborish usuli (GET yoki POST).

Izoh:​

  • required atributi foydalanuvchidan ma'lum maydonlarni to‘ldirishni talab qiladi.
  • type="email" foydalanuvchidan faqatgina email kiritishini ta'minlaydi.

Turli Input Turlari va Ularning Qo‘llanilishi​

HTML-da formalar uchun turli xil input turlari mavjud. Har bir tur o‘z maqsadiga mos ishlatiladi.

text va password​

Matn yoki parol kiritish maydonlari:

<form>
    <input type="text" name="username" placeholder="Ismingizni kiriting">
    <input type="password" name="password" placeholder="Parol kiriting">
    <input type="submit" value="Yuborish">
</form>
  • type="password": Parol maydonida kiritilgan ma'lumot ko‘rinmas bo‘ladi.

radio va checkbox​

Bir nechta variantdan tanlash yoki ko‘plab tanlovlarni kiritish imkonini beradi:

<form>
		<label for="male">Erkak</label>
    <input type="radio" id="male" name="gender" value="male">

    <label for="female">Ayol</label>
    <input type="radio" id="female" name="gender" value="female">

    <label for="subscribe">Yangiliklarga obuna bo‘lish</label>
    <input type="checkbox" id="subscribe" name="subscribe">
    <input type="submit" value="Yuborish">
</form>
  • type="radio": Foydalanuvchi faqat bitta variantni tanlashi mumkin.
  • type="checkbox": Foydalanuvchi bir nechta variantni tanlashi mumkin.

select va option​

Tanlash ro‘yxatlarini yaratish uchun <select> va <option> elementlaridan foydalaniladi.

<form>
    <label for="country">Mamlakatingizni tanlang:</label>
    <select name="country" id="country">
        <option value="uzbekistan">O'zbekiston</option>
        <option value="kazakhstan">Qozog‘iston</option>
        <option value="russia">Rossiya</option>
    </select>
    <input type="submit" value="Yuborish">
</form>
  • <select>: Tanlov ro‘yxati.
  • <option>: Tanlanadigan variant.

HTML Semantik Teglari​

Semantik teglar – bu HTML tarkibiga ma'no qo'shadi. Ular tarkibning ma'nosini aniqroq ko'rsatib, SEO (Search Engine Optimization) va kirish qulayligini yaxshilaydi.

Eng ko‘p ishlatiladigan semantik teglar:​

  • <header> – Sahifa yoki bo‘limning bosh qismini belgilaydi.
  • <main> – Sahifaning asosiy kontenti.
  • <section> – Tarkib bo‘limlarini belgilash uchun.
  • <article> – Mustaqil va qayta ishlatiladigan kontent. Masalan, blog posti.
  • <footer> – Sahifaning pastki qismi (kontaktlar, mualliflik huquqi).
  • <aside> – Asosiy kontentdan tashqaridagi qo'shimcha ma'lumotlar.

Misol:​

<header>
    <h1>Bizning Raqamli Dunyomiz</h1>
</header>
<main>
    <article>
        <h2>HTML haqida qiziqarli faktlar</h2>
        <p>HTML dastlab 1991-yilda Tim Berners-Lee tomonidan yaratilgan.</p>
    </article>
    <aside>
        <p>Bonus: HTML– **HyperText Markup Language** degan ma'noni anglatadi.</p>
    </aside>
</main>
<footer>
    <p>Mualliflik huquqi © 2024</p>
</footer>

Xulosa​

Bugungi darsimizda HTML asoslarini, teglarning vazifalarini va atributlarning ishlatilishini, jadval va forma yaratish, qanday qilib rasmlar, audio, video va havolalarni sahifaga qo‘shish va semantik teglarni ko‘rib chiqdik. Bugungi darsda o‘rganganlaringizni o‘z loyihalaringizda qo‘llashingiz mumkin.