Naviqasiya tag-ləri

2.1 Anchor Links

HTML səhifəsi daxilində naviqasiya istifadəçilərə sənədin müxtəlif bölmələrinə tez keçid etməyə kömək edir. Bu, xüsusilə böyük miqdarda məzmunu olan uzun səhifələr üçün faydalıdır. HTML-də belə naviqasiyanı həyata keçirmək üçün bir neçə üsul mövcuddur və bunlara anchor links, id atributu və JavaScript-lə naviqasiya daxildir.

Anchor links — səhifə daxilində naviqasiyanın ən çox istifadə olunan üsuludur. Onlar istifadəçilərə anchor teg’lərindən istifadə edərək sənədin müəyyən hissələrinə keçməyə imkan verir.

İstifadə nümunəsi:

id atributundan istifadə edərək anchor yaratmaq:

    
      <h2 id="section1">Bölmə 1</h2>
      <p>Bölmə 1-in məzmunu...</p>
      <h2 id="section2">Bölmə 2</h2>
      <p>Bölmə 2-in məzmunu...</p>
      <h2 id="section3">Bölmə 3</h2>
      <p>Bölmə 3-in məzmunu...</p>
    
  

Anchor’lara keçidlər yaratmaq:

    
      <nav>
        <ul>
          <li><a href="#section1">Bölmə 1-ə Keçid</a></li>
          <li><a href="#section2">Bölmə 2-yə Keçid</a></li>
          <li><a href="#section3">Bölmə 3-ə Keçid</a></li>
        </ul>
      </nav>
    
  

name atributu ilə naviqasiya

name atributu anchor yaratmaq üçün də istifadə edilə bilər, lakin onun istifadəsi daha az yayılmışdır və köhnəlmiş hesab olunur.

Nümunə:

    
      <a name="top"></a>
      <p>Səhifənin üstü...</p>
      <a name="bottom"></a>
      <p>Səhifənin altı...</p>
      <nav>
        <ul>
          <li><a href="#top">Üstə Keçid</a></li>
          <li><a href="#bottom">Alta Keçid</a></li>
        </ul>
      </nav>
    
  

2.2 JavaScript ilə Sürüşdürmə

JavaScript səhifə daxilində naviqasiya üçün daha çevik imkanlar təklif edir. scrollIntoView, scrollTo və digər metodlardan istifadə edərək, səhifənin fərqli elementlərinə hamarlıqla sürüşdürmə həyata keçirmək olar.

Misal istifadəsi:

Bu kod, düyməyə klik edildikdə, səhifəni müvafiq elementə hamarlıqla sürüşdürür.

    
      <button onclick="scrollToSection('section1')">Section 1-ə keç</button>
      <button onclick="scrollToSection('section2')">Section 2-ə keç</button>
      <button onclick="scrollToSection('section3')">Section 3-ə keç</button>

      <h2 id="section1">Section 1</h2>
      <p>Section 1-in məzmunu...</p>
      <h2 id="section2">Section 2</h2>
      <p>Section 2-nin məzmunu...</p>
      <h2 id="section3">Section 3</h2>
      <p>Section 3-ün məzmunu...</p>
    
  

    
     // Səhifədə müəyyən bir hissəyə hamarlıqla sürüşdürmək üçün funksiya
      function scrollToSection(sectionId) {
        // Elementi onun ID-si ilə tapırıq
        document.getElementById(sectionId).scrollIntoView({ behavior: 'smooth' });
      }
    
  

2.3 <nav> tag-ı

<nav> tagı HTML5-də səhifənin navigation linkləri saxlayan bölməsini təyin etmək üçün istifadə olunur. Bu tag navigation bloklarını semantik olaraq təyin etməyə kömək edir, veb-səhifənin strukturunu yaxşılaşdırır və həm istifadəçilər, həm də axtarış sistemləri üçün daha əlçatan edir.

<nav> tagı sayt üzrə və ya cari sənəd daxilində navigation üçün nəzərdə tutulmuş linkləri qruplaşdırmaq üçün istifadə olunur. Bunlar əsas menyular, ikinci dərəcəli menyular, breadcrumb-lar, səhifə siyahıları və digər navigation elementləri ola bilər.

Syntax

    
      <nav>
        <!-- Navigation elementləri -->
      </nav>
    
  

İstifadə nümunəsi

    
      <header>
        <h1>Mənim saytim</h1>
        <nav>
          <ul>
            <li><a href="#home">Əsas səhifə</a></li>
            <li><a href="#about">Haqqımızda</a></li>
            <li><a href="#services">Xidmətlər</a></li>
            <li><a href="#contact">Əlaqə</a></li>
          </ul>
        </nav>
      </header>
    
  

İzah

• <header> tagı: səhifənin başlığını yaratmaq üçün istifadə olunur, hansı ki navigation menyunu daxil edir
• <nav> tagı: səhifənin müxtəlif bölmələrinə gedən linkləri saxlayan siyahını özündə birləşdirir
• <ul> və <li>: navigation siyahısını yaratmaq üçün istifadə olunur
• <a> tagı: istifadəçilərin səhifənin və ya saytın digər hissələrinə keçməsi üçün linkləri təyin edir

2.4 <nav> teqinin tətbiqi

<nav> teqi naviqasiya linklərini qruplaşdırmaq üçün istifadə olunur, məsələn:

• Saytın əsas menyusu
• İkincili menyular
• Breadcrumbs (çörək qırıntıları)
• Pagination səhifələrinin linkləri
• Digər naviqasiya linkləri

Saytın əsas menyusu

    
      <nav>
        <ul>
          <li><a href="#home">Əsas səhifə</a></li>
          <li><a href="#about">Haqqımızda</a></li>
          <li><a href="#services">Xidmətlər</a></li>
          <li><a href="#contact">Əlaqə</a></li>
        </ul>
      </nav>
    
  

İkincili menyu

    
      <nav>
        <ul>
          <li><a href="#faq">Tez-tez verilən suallar</a></li>
          <li><a href="#support">Dəstək</a></li>
          <li><a href="#privacy">Məxfilik siyasəti</a></li>
        </ul>
      </nav>
    
  

Breadcumbs (çörək qırıntıları)

    
      <nav aria-label="breadcrumb">
        <ol>
          <li><a href="/home">Əsas səhifə</a></li>
          <li><a href="/category">Kateqoriya</a></li>
          <li>Cari səhifə</li>
        </ol>
      </nav>
    
  

<nav> teqinin istifadəsinin üstünlükləri

Semantik işarələmə

<nav> teqinin istifadəsi axtarış sistemlərinə və məhdud imkanları olan insanlar üçün texnologiyalara səhifənin strukturunu daha yaxşı anlamağa kömək edir. Bu, saytı daha əlçatan edir və onun SEO göstəricilərini yaxşılaşdırır.

Səhifənin strukturunun təkmilləşdirilməsi

<nav> teqi naviqasiya elementlərini əsas məzmundan dəqiq ayırır, bu da səhifənin işarələməsini daha məntiqli və strukturlaşdırılmış edir.

Stilizasiya asanlığı

<nav> teqinə daxil edilmiş naviqasiya elementlərini CSS vasitəsilə asanlıqla stilizasiya etmək olar ki, saytın görünüşünü və istifadə rahatlığını yaxşılaşdırmaq mümkün olsun.