دسته : آموزش رایگان HTML
صفحهبندی (Pagination) یکی از عناصر مهم در طراحی وبسایت است که به کاربران کمک میکند بین صفحات مختلف محتوا حرکت کنند. این ویژگی بهویژه در وبسایتهای دارای تعداد زیادی مقاله، محصولات یا دادههای صفحهای بسیار کاربرد دارد. در این مقاله، با نحوه ایجاد صفحهبندی با استفاده از HTML و CSS و بهینهسازی آن بر اساس استانداردهای گوگل آشنا میشویم.
صفحهبندی مجموعهای از لینکهاست که کاربر را به صفحات مختلف هدایت میکند. این ویژگی معمولاً در پایین صفحه یا بالای لیست محتوا قرار میگیرد.
ساختار صفحهبندی با استفاده از تگهای < 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:
.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;
}
برای بهبود دسترسیپذیری صفحهبندی، از ویژگیهای 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 بهینه استفاده کنید تا سرعت بارگذاری صفحه کاهش پیدا نکند.
< ! 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: محاسبات پویا برای طراحیهای منعطف
12م آبان 1403
مطالعه بیشتر
آموزش جامع حلقههای for و while در جاوا اسکریپت: نحوه استفاده و کاربردها
2م بهمن 1402
مطالعه بیشتر
مفهوم برنامهنویسی همزمان و ناهمزمان در جاوا اسکریپت: تفاوتها، مثالها و کاربردها
29م مهر 1403
مطالعه بیشتر
آموزش کامل کار با آرایهها و اشیاء در جاوا اسکریپت: ایجاد، دستکاری و پیمایش
2م شهریور 1403
مطالعه بیشتر
آموزش استفاده از جدول در HTML: طراحی و استایلدهی جدولهای ساده و پیشرفته
21م مرداد 1402
مطالعه بیشتر
چگونه یک فوتر چسبان در CSS بسازیم: آموزش ساخت فوتر ثابت و همیشگی
2م شهریور 1403
مطالعه بیشتر
آموزش استایلدهی لینکها در CSS: طراحی و تنظیمات ساده برای لینکهای HTML
7م شهریور 1402
مطالعه بیشتر
آموزش تگهای زمان و مکان در HTML: استفاده از time و location در صفحات وب
29م مرداد 1402
مطالعه بیشتر
کار با فیلترهای CSS: آموزش استفاده از blur، brightness و contrast برای افکتهای تصویری جذاب
11م آبان 1403
مطالعه بیشتر
استفاده از visibility و opacity در CSS برای مخفیسازی عناصر: راهنمای کامل و کاربردی
11م آبان 1403
مطالعه بیشتر
تمامی حقوق معتلق به ناشر سایت است و کپی از آن پیگرد قانونی دارد