roadmap.az

Menyu

HTML & CSSDərs 3 / 16

Əsas HTML elementləri

Məlumata uyğun element

Ardıcıllıq vacibdirsə ol, adi maddələr üçün ul istifadə et. Hər maddə li elementidir. Keçiddə href gediləcək ünvanı, şəkildə src resursun yolunu, alt isə məqsədini bildirir.

<h2>Öyrənmə planım</h2>
<ol><li>HTML</li><li>CSS</li><li>JavaScript</li></ol>
<ul><li>Praktika</li><li>Təkrar</li></ul>
<a href="/roadmaps/frontend/">Frontend yolunu aç</a>
<img src="images/profile.jpg" alt="Ayselin portreti" width="240" height="240">
<table>
  <caption>Həftəlik plan</caption>
  <thead><tr><th scope="col">Gün</th><th scope="col">Mövzu</th></tr></thead>
  <tbody><tr><td>Bazar ertəsi</td><td>HTML</td></tr></tbody>
</table>
Nümunə

Yollar və cədvəllər

images/profile.jpg cari sənədə görə nisbi yoldur; /images/profile.jpg saytın kökündən başlayır. Fayl adının hərf registrini dəqiq saxla. Xarici URL protokol və domeni də ehtiva edir.

Cədvəl əlaqəli sətir və sütun məlumatları üçündür. tr sətir, th başlıq, td adi xana yaradır. colspan və rowspan xananı bir neçə sütun və ya sətirə yaya bilər. Ümumi səhifə layout-unu cədvəllə qurma. Dekorativ şəkil üçün boş alt="", mənalı şəkil üçün məqsədi izah edən mətn yaz.

Əlavə qeydlər və mənbələr

Məlumatın növünə uyğun element seç: ardıcıllıq üçün ol, adi siyahı üçün ul, keçid üçün a, şəkil üçün img. Cədvəlləri əlaqəli sətir və sütun məlumatları üçün istifadə et.

Niyə vacibdir?

Semantik HTML məzmunu həm insanlar, həm də köməkçi texnologiyalar üçün anlaşılan edir.

Əvvəlki biliklər

Bu mövzuda

  • ul, ol və li
  • a, href və img
  • table, tr, th və td

Mövzuya baxış

Mənbələr

Məşqin idarəetməsi
Addım 1 / 3

Bacarıqları nömrəli göstər

Adi və nömrəli siyahı arasında keçid et. Sıralı plan üçün ol seç.

Hədəf: Nömrələnmiş siyahı yarat.

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

Özün sına

Bacarıqlar siyahısı, nailiyyətlər siyahısı, şəkil, xarici keçid və həftəlik cədvəli olan səhifə hazırla. Şəkilə məqsədini bildirən alt yaz.

Nəticəni necə yoxlayım?

Siyahılar uyğun növdədir, keçidlər işləyir, şəkil alt-a malikdir və cədvəldə sütun başlıqları var.

Gözlənilən nəticə

  • Hər iki siyahı, alternativ mətnli şəkil, xarici keçid və iki günlük plan görünür.
  • Şəkil yüklənməsə alt mətni onun məzmununu izah edir.
Görünüş nümunəsi

Bu, görünüş nümunəsidir. İnteraktiv davranışı kodu öz layihəndə işlədərək yoxla.

Nümunə həllə bax

Əvvəl özün sına, sonra müqayisə et. Bu, mümkün həllərdən biridir.

ul bacarıqları, ol ardıcıl nailiyyətləri göstərir. Cədvəldə başlıq xanaları və caption məlumatı anlamağa kömək edir.

index.html

<!doctype html>
<html lang="az">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Nümunə səhifə</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
<main>
 <h1>Öyrənmə səhifəm</h1>
 <img width="96" height="96" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5NiIgaGVpZ2h0PSI5NiI+PHJlY3Qgd2lkdGg9Ijk2IiBoZWlnaHQ9Ijk2IiBmaWxsPSIjZGNlOWY3Ii8+PGNpcmNsZSBjeD0iNDgiIGN5PSI0OCIgcj0iMjQiIGZpbGw9IiMyMTRlODAiLz48L3N2Zz4=" alt="Şəxsi avatar nümunəsi: mavi fonda dairə">
 <h2>Bacarıqlar</h2><ul><li>HTML</li><li>CSS</li></ul>
 <h2>Nailiyyətlər</h2><ol><li>İlk səhifəmi qurdum</li><li>İlk cədvəlimi yaratdım</li></ol>
 <a href="https://developer.mozilla.org/">MDN mənbələri</a>
 <table><caption>Həftəlik plan</caption><thead><tr><th scope="col">Gün</th><th scope="col">Mövzu</th></tr></thead><tbody><tr><th scope="row">Bazar ertəsi</th><td>HTML</td></tr><tr><th scope="row">Çərşənbə</th><td>CSS</td></tr></tbody></table>
</main>
</body>
</html>

styles.css

body{font:16px/1.5 Arial,sans-serif}table{border-collapse:collapse;margin-top:16px}th,td{border:1px solid #abbdce;padding:8px}

Praktikanı bitirdin?Özün qiymətləndirirsən. İrəliləyiş bu brauzerdə saxlanılır.