Blok elementlərinin teqləri

3.1 Element <p>

Blok elementlər HTML-də veb-səhifənin strukturunu və məzmununu təşkil etmək üçün istifadə olunur. Onlar kontenti məntiqi bloklara və seqmentlərə bölməyə kömək edir. Bu elementlər yeni sətrə keçir və mövcud olan bütün eni tutur. Daha çox istifadə olunan üç tegi daha ətraflı nəzərdən keçirək: <p>, <div> və <span>.

<p> teqi

<p> teqi mətnin abzaslarını yaratmaq üçün istifadə olunur. O, blok elementi sayılır: bu o deməkdir ki, hər bir abzas yeni sətrə başlayır və üst və alt hissədə boşluqlar olur.

İstifadə nümunəsi:

    
      <p>
        Bu mətnin birinci abzassıdır. Abzaslar mətnin məntiqi bloklara bölünməsi üçün istifadə olunur,
        onun oxunaqlığını artırır.
      </p>
      <p>Bu mətnin ikinci abzassıdır. Hər abzas yeni sətrə başlayır.</p>
    
  

Xüsusiyyətlər:

• Blok elementi: Yeni sətrə keçir və mövcud olan bütün eni tutur.
• Avtomatik boşluqlar: Adətən brauzerlər abzasın önünə və arxasına boşluqlar əlavə edir.
• İç içəlik: <p> teqi başqa blok elementləri özündə saxlaya bilməz.

CSS ilə stilizasiya:

    
      p {
        color: #333;
        font-size: 16px;
        line-height: 1.5;
        margin-bottom: 15px;
      }
    
  

3.2 <div> Elementi

<div> teqi universal blok konteyneridir, hansı ki, digər elementləri qruplaşdırmaq və onlara üslublar tətbiq etmək üçün istifadə olunur. Onun daxili üslubları yoxdur və yalnız kontentin strukturu üçün istifadə edilir.

İstifadə nümunəsi:

    
      <div class="container">
        <h2>Blok başlığı</h2>
        <p>Div blokunun daxilində bəzi mətn.</p>
      </div>
    
  

Xüsusiyyətlər:

• Blok elementi: yeni sətirdə yerləşir və mövcud olan bütün eni tutur
• Universallıq: digər elementləri, həm blok, həm də inline elementləri daxil edə bilər
• Üslublaşdırma və skriptlər: çox vaxt CSS-üslubları və JavaScript-skriptləri tətbiq etmək üçün istifadə edilir

CSS ilə üslublaşdırma:

    
      .container {
        border: 1px solid #ccc;
        padding: 20px;
        background-color: #f9f9f9;
      }
    
  

3.3 <span> elementi

<span> tag-ı inline elementdir və mətnin və ya başqa bir kontentin daxilində olan hissəni seçmək üçün işlədilir. Onun daxilində heç bir default stil yoxdur və onu CSS-stilləri və ya JavaScript skriptləri ilə mətni və ya digər elementlərin müəyyən hissələrini stilize etmək üçün istifadə edirlər.

İstifadə nümunəsi:

    
      <p>Bu mətnin içində vurğulanmış <span class="highlight"> söz</span> var, hansı ki, qalan mətndən fərqlidir.</p>
    
  

Xüsusiyyətlər:

• Inline element: yeni sətir yaratmır və yalnız lazım olan eni tutur
• Dəyişkənlik: mətnin və ya digər elementlərin xüsusi hissələrinə stil tətbiq etmək üçün istifadə olunur
• Çox vaxt CSS və JavaScript ilə birgə istifadə olunur: mətnin müəyyən hissələrini dəqiq stilize etməyə və ya manipulyasiya etməyə kömək edir

CSS ilə stilizasiya nümunəsi:

    
      .highlight {
        color: red;
        font-weight: bold;
      }
    
  

3.4 <div> və <span> müqayisəsi

<div>:

• Blok elementi
• Yeni sətirdən başlayır
• Başqa blok və inline elementləri ehtiva edə bilər
• Məzmunu qruplaşdırmaq və strukturlaşdırmaq üçün istifadə olunur

<span>:

• Inline elementi
• Mətni axınını pozmur
• Mətndəki ayrı-ayrı hissələri üslublaşdırmaq üçün istifadə olunur
• Tez-tez vurğulamaq və JavaScript ilə işləmək üçün tətbiq edilir

<div> və <span> teqlərinin birlikdə istifadə edilməsi nümunəsi:

    
      .article {
        border: 1px solid #ddd;
        padding: 10px;
      }

      .keyword {
        color: blue;
        font-style: italic;
      }
    
  

    
      <div class="article">
        <h2>Məqalə başlığı</h2>
        <p>
          Bu, məqalə mətninin əsas <span class="keyword">sözünü</span> diqqəti cəlb etmək üçün vurğulayan bir
          paraqrafıdır.
        </p>
      </div>
    
  

<p>, <div> və <span> teqləri strukturlu, üslublaşdırılmış və interaktiv veb səhifələr yaratmaq üçün əsas HTML tikinti bloklarından biridir. Onların xüsusiyyətlərini başa düşmək və düzgün istifadə etmək, rahat və funksional interfeyslər yaratmağa kömək edir.