آموزش ایجاد تگ‌های صفحه‌بندی در 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 می‌توان به سادگی آن را ایجاد کرد. رعایت نکات دسترسی‌پذیری، استفاده از ویژگی‌های معنایی و بهینه‌سازی بر اساس استانداردهای گوگل، به بهبود تجربه کاربری و سئو سایت کمک می‌کند. با ترکیب خلاقانه استایل‌ها، می‌توانید صفحه‌بندی‌هایی زیبا و کاربردی طراحی کنید.

پرسش و پاسخ

نظری یافت نشد

مطالب مشابه

تنظیم عرض و ارتفاع عناصر در CSS: استفاده از width، height، max و min برای کنترل دقیق اندازه‌ها

تنظیم عرض و ارتفاع عناصر در CSS: استفاده از width، height، max و min برای کنترل دقیق اندازه‌ها

9م آبان 1403

مطالعه بیشتر

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

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

30م مهر 1403

مطالعه بیشتر

آموزش مدیریت Box Model و ترکیب اجزای آن با CSS: کنترل دقیق فاصله‌ها و ابعاد عناصر

آموزش مدیریت Box Model و ترکیب اجزای آن با CSS: کنترل دقیق فاصله‌ها و ابعاد عناصر

5م شهریور 1402

مطالعه بیشتر

کار با تصاویر SVG در CSS: کنترل استایل و استفاده از گرافیک‌های مقیاس‌پذیر

کار با تصاویر SVG در CSS: کنترل استایل و استفاده از گرافیک‌های مقیاس‌پذیر

16م آبان 1403

مطالعه بیشتر

آموزش ایجاد، دسترسی و اصلاح آرایه‌ها در جاوا اسکریپت: راهنمای کامل

آموزش ایجاد، دسترسی و اصلاح آرایه‌ها در جاوا اسکریپت: راهنمای کامل

4م مهر 1403

مطالعه بیشتر

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

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

10م شهریور 1402

مطالعه بیشتر

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

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

3م آبان 1403

مطالعه بیشتر

معرفی React.js و بررسی مزایای آن برای توسعه وب و اپلیکیشن

معرفی React.js و بررسی مزایای آن برای توسعه وب و اپلیکیشن

28م شهریور 1402

مطالعه بیشتر

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

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

4م آبان 1403

مطالعه بیشتر

آموزش تغییر نوع و اندازه فونت و رنگ متن با CSS: استایل‌دهی حرفه‌ای به متن‌ها

آموزش تغییر نوع و اندازه فونت و رنگ متن با CSS: استایل‌دهی حرفه‌ای به متن‌ها

5م شهریور 1402

مطالعه بیشتر

آموزش مفاهیم پایه‌ای اشیاء در جاوا اسکریپت: تعریف، ویژگی‌ها و متدها

آموزش مفاهیم پایه‌ای اشیاء در جاوا اسکریپت: تعریف، ویژگی‌ها و متدها

2م شهریور 1403

مطالعه بیشتر

JSX و رندرینگ مؤثر در React.js: بهینه‌سازی کامپوننت‌ها و بهبود عملکرد

JSX و رندرینگ مؤثر در React.js: بهینه‌سازی کامپوننت‌ها و بهبود عملکرد

28م شهریور 1402

مطالعه بیشتر

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