آموزش ایجاد تگ‌های صفحه‌بندی در HTML و CSS: طراحی و استایل‌دهی pagination

دسته : آموزش رایگان HTML

آموزش ایجاد تگ‌های صفحه‌بندی در HTML و CSS: طراحی و استایل‌دهی pagination

آموزش ایجاد تگ‌های صفحه‌بندی در HTML و CSS: طراحی و استایل‌دهی pagination

صفحه‌بندی (Pagination) یکی از عناصر مهم در طراحی وب‌سایت است که به کاربران کمک می‌کند بین صفحات مختلف محتوا حرکت کنند. این ویژگی به‌ویژه در وب‌سایت‌های دارای تعداد زیادی مقاله، محصولات یا داده‌های صفحه‌ای بسیار کاربرد دارد. در این مقاله، با نحوه ایجاد صفحه‌بندی با استفاده از HTML و CSS و بهینه‌سازی آن بر اساس استانداردهای گوگل آشنا می‌شویم.

 

مفهوم صفحه‌بندی (Pagination)

صفحه‌بندی مجموعه‌ای از لینک‌هاست که کاربر را به صفحات مختلف هدایت می‌کند. این ویژگی معمولاً در پایین صفحه یا بالای لیست محتوا قرار می‌گیرد.

 

ساختار پایه صفحه‌بندی در HTML

ساختار صفحه‌بندی با استفاده از تگ‌های < nav > و < ul > ایجاد می‌شود. هر آیتم صفحه‌بندی به صورت لینک در تگ < li > قرار می‌گیرد.

نمونه کد HTML:



< nav aria-label="صفحه‌بندی" >
    < ul class="pagination" >
        < li > < a href="#1" > 1 < / a > < / li >
        < li > < a href="#2" > 2 < / a > < / li >
        < li > < a href="#3" > 3 < / a > < / li >
        < li > < a href="#4" > 4 < / a > < / li >
    < / ul >
< / nav >

 

استایل‌دهی صفحه‌بندی با CSS

CSS برای ایجاد صفحه‌بندی زیبا و کاربرپسند به کار می‌رود. با ترکیب استایل‌ها می‌توانید ظاهر حرفه‌ای ایجاد کنید.

نمونه استایل CSS:



.pagination {
    display: flex;
    list-style-type: none;
    padding: 0;
    margin: 0;
    justify-content: center;
}

.pagination li {
    margin: 0 5px;
}

.pagination a {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    color: #007bff;
    border: 1px solid #ddd;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.pagination a:hover {
    background-color: #007bff;
    color: #fff;
}

.pagination .active a {
    background-color: #007bff;
    color: #fff;
    pointer-events: none;
    border: 1px solid #007bff;
}

 

اضافه کردن کلاس فعال برای صفحه جاری:

در HTML، می‌توانید با استفاده از کلاس active صفحه فعلی را مشخص کنید.



< li class="active" > < a href="#3" > 3 < / a > < / li >

 

اضافه کردن لینک‌های "بعدی" و "قبلی"

لینک‌های «بعدی» و «قبلی» به کاربران کمک می‌کنند تا راحت‌تر بین صفحات حرکت کنند.

نمونه کد HTML:



< nav aria-label="صفحه‌بندی" >
    < ul class="pagination" >
        < li > < a href="#prev" > « < / a > < / li >
        < li > < a href="#1" > 1 < / a > < / li >
        < li > < a href="#2" > 2 < / a > < / li >
        < li class="active" > < a href="#3" > 3 < / a > < / li >
        < li > < a href="#4" > 4 < / a > < / li >
        < li > < a href="#next" > » < / a > < / li >
    < / ul >
< / nav >

 

نمونه استایل CSS:



.pagination a {
    padding: 10px 15px;
    color: #007bff;
    text-decoration: none;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.pagination a:hover {
    background-color: #007bff;
    color: #fff;
}

 

نکات دسترسی‌پذیری (Accessibility)

برای بهبود دسترسی‌پذیری صفحه‌بندی، از ویژگی‌های ARIA و تگ‌های معنایی استفاده کنید.

اضافه کردن ویژگی ARIA:



< nav aria-label="صفحه‌بندی" >
    < ul class="pagination" >
        < li > < a href="#prev" aria-label="صفحه قبلی" > « < / a > < / li >
        < li > < a href="#1" aria-label="صفحه ۱" >1 < / a > < / li >
        < li > < a href="#2" aria-label="صفحه ۲" >2 < / a > < / li >
        < li class="active" > < a href="#3" aria-label="صفحه ۳" aria-current="page" > 3 < / a > < / li >
        < li > < a href="#4" aria-label="صفحه ۴" > 4 < / a > < / li >
        < li > < a href="#next" aria-label="صفحه بعدی" > » < / a > < / li >
    < / ul >
< / nav >

 

نکات بهینه‌سازی صفحه‌بندی بر اساس استانداردهای گوگل

  • لینک‌های قابل خزیدن:

    اطمینان حاصل کنید که تمامی لینک‌های صفحه‌بندی توسط موتورهای جستجو خزیده شوند. از ویژگی‌های JavaScript که لینک‌ها را از دسترس گوگل خارج می‌کنند، خودداری کنید.

  • استفاده از ویژگی‌های معنایی:

    از تگ < nav > برای گروه‌بندی لینک‌های صفحه‌بندی استفاده کنید.

  • متن لینک توصیفی:

    متن لینک‌ها باید واضح و مرتبط باشد.

  • حفظ سرعت صفحه:

    از فایل‌های CSS بهینه استفاده کنید تا سرعت بارگذاری صفحه کاهش پیدا نکند.

 

نمونه کد کامل HTML و CSS



< ! DOCTYPE html >
< html lang="fa" dir="rtl" >
< head >
    < meta charset="UTF-8" >
    < meta name="viewport" content="width=device-width, initial-scale=1.0" >
    < meta name="description" content="آموزش ایجاد صفحه‌بندی با HTML و CSS" >
    < meta name="keywords" content="HTML, CSS, صفحه‌بندی, pagination" >
    < meta name="author" content="نام شما" >
    < title > آموزش صفحه‌بندی < / title >
    < style >
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            margin: 20px;
        }
        .pagination {
            display: flex;
            list-style-type: none;
            padding: 0;
            margin: 0;
            justify-content: center;
        }
        .pagination li {
            margin: 0 5px;
        }
        .pagination a {
            display: block;
            padding: 10px 15px;
            text-decoration: none;
            color: #007bff;
            border: 1px solid #ddd;
            border-radius: 5px;
            transition: background-color 0.3s ease;
        }
        .pagination a:hover {
            background-color: #007bff;
            color: #fff;
        }
        .pagination .active a {
            background-color: #007bff;
            color: #fff;
            pointer-events: none;
            border: 1px solid #007bff;
        }
    < / style >
< / head >
< body >
    < header >
        < h1 > آموزش ایجاد صفحه‌بندی < / h1 >
    < / header >
    < main >
        < nav aria-label="صفحه‌بندی" >
            < ul class="pagination" >
                < li > < a href="#prev" aria-label="صفحه قبلی" > « < / a > < / li >
                < li > < a href="#1" aria-label="صفحه ۱"> 1 < / a > < / li >
                < li > < a href="#2" aria-label="صفحه ۲"> 2 < / a > < / li >
                < li class="active" > < a href="#3" aria-label="صفحه ۳" aria-current="page" > 3 < / a > < / li >
                < li > < a href="#4" aria-label="صفحه ۴"> 4 < / a > < / li >
                < li > < a href="#next" aria-label="صفحه بعدی">» < / a > < / li >
            < / ul >
        < / nav >
    < / main >
    < footer >
        < p > © 2024 طراحی شده توسط نام شما < / p >
    < / footer >
< / body >
< / html >

 

جمع‌بندی

صفحه‌بندی (Pagination) بخش مهمی از طراحی وب است که با استفاده از HTML و CSS می‌توان به سادگی آن را ایجاد کرد. رعایت نکات دسترسی‌پذیری، استفاده از ویژگی‌های معنایی و بهینه‌سازی بر اساس استانداردهای گوگل، به بهبود تجربه کاربری و سئو سایت کمک می‌کند. با ترکیب خلاقانه استایل‌ها، می‌توانید صفحه‌بندی‌هایی زیبا و کاربردی طراحی کنید.

پرسش و پاسخ

نظری یافت نشد

مطالب مشابه

آموزش جامع توابع در جاوا اسکریپت: نحوه تعریف، فراخوانی و بازگشت مقادیر

آموزش جامع توابع در جاوا اسکریپت: نحوه تعریف، فراخوانی و بازگشت مقادیر

2م بهمن 1402

مطالعه بیشتر

پارامترها و بازگشت از توابع در جاوا اسکریپت: نحوه تعریف و مدیریت خروجی‌ها

پارامترها و بازگشت از توابع در جاوا اسکریپت: نحوه تعریف و مدیریت خروجی‌ها

2م بهمن 1402

مطالعه بیشتر

استفاده از calc در CSS: محاسبات پویا برای طراحی‌های منعطف

استفاده از calc در CSS: محاسبات پویا برای طراحی‌های منعطف

12م آبان 1403

مطالعه بیشتر

آموزش جامع حلقه‌های for و while در جاوا اسکریپت: نحوه استفاده و کاربردها

آموزش جامع حلقه‌های for و while در جاوا اسکریپت: نحوه استفاده و کاربردها

2م بهمن 1402

مطالعه بیشتر

مفهوم برنامه‌نویسی هم‌زمان و ناهم‌زمان در جاوا اسکریپت: تفاوت‌ها، مثال‌ها و کاربردها

مفهوم برنامه‌نویسی هم‌زمان و ناهم‌زمان در جاوا اسکریپت: تفاوت‌ها، مثال‌ها و کاربردها

29م مهر 1403

مطالعه بیشتر

آموزش کامل کار با آرایه‌ها و اشیاء در جاوا اسکریپت: ایجاد، دستکاری و پیمایش

آموزش کامل کار با آرایه‌ها و اشیاء در جاوا اسکریپت: ایجاد، دستکاری و پیمایش

2م شهریور 1403

مطالعه بیشتر

آموزش استفاده از جدول در HTML: طراحی و استایل‌دهی جدول‌های ساده و پیشرفته

آموزش استفاده از جدول در HTML: طراحی و استایل‌دهی جدول‌های ساده و پیشرفته

21م مرداد 1402

مطالعه بیشتر

چگونه یک فوتر چسبان در CSS بسازیم: آموزش ساخت فوتر ثابت و همیشگی

چگونه یک فوتر چسبان در CSS بسازیم: آموزش ساخت فوتر ثابت و همیشگی

2م شهریور 1403

مطالعه بیشتر

آموزش استایل‌دهی لینک‌ها در CSS: طراحی و تنظیمات ساده برای لینک‌های HTML

آموزش استایل‌دهی لینک‌ها در CSS: طراحی و تنظیمات ساده برای لینک‌های HTML

7م شهریور 1402

مطالعه بیشتر

آموزش تگ‌های زمان و مکان در HTML: استفاده از time و location در صفحات وب

آموزش تگ‌های زمان و مکان در HTML: استفاده از time و location در صفحات وب

29م مرداد 1402

مطالعه بیشتر

کار با فیلترهای CSS: آموزش استفاده از blur، brightness و contrast برای افکت‌های تصویری جذاب

کار با فیلترهای CSS: آموزش استفاده از blur، brightness و contrast برای افکت‌های تصویری جذاب

11م آبان 1403

مطالعه بیشتر

استفاده از visibility و opacity در CSS برای مخفی‌سازی عناصر: راهنمای کامل و کاربردی

استفاده از visibility و opacity در CSS برای مخفی‌سازی عناصر: راهنمای کامل و کاربردی

11م آبان 1403

مطالعه بیشتر

تمامی حقوق معتلق به ناشر سایت است و کپی از آن پیگرد قانونی دارد