دسته : آموزش رایگان 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 میتوان به سادگی آن را ایجاد کرد. رعایت نکات دسترسیپذیری، استفاده از ویژگیهای معنایی و بهینهسازی بر اساس استانداردهای گوگل، به بهبود تجربه کاربری و سئو سایت کمک میکند. با ترکیب خلاقانه استایلها، میتوانید صفحهبندیهایی زیبا و کاربردی طراحی کنید.
نظری یافت نشد
تنظیم عرض و ارتفاع عناصر در CSS: استفاده از width، height، max و min برای کنترل دقیق اندازهها
9م آبان 1403
مطالعه بیشتر
مفاهیم Promise و چگونگی استفاده از آن در جاوا اسکریپت: راهنمای کامل همراه با مثالها
30م مهر 1403
مطالعه بیشتر
آموزش مدیریت Box Model و ترکیب اجزای آن با CSS: کنترل دقیق فاصلهها و ابعاد عناصر
5م شهریور 1402
مطالعه بیشتر
کار با تصاویر SVG در CSS: کنترل استایل و استفاده از گرافیکهای مقیاسپذیر
16م آبان 1403
مطالعه بیشتر
آموزش ایجاد، دسترسی و اصلاح آرایهها در جاوا اسکریپت: راهنمای کامل
4م مهر 1403
مطالعه بیشتر
آموزش طراحی و استایلدهی جدولها در CSS: راهنمای ساده و کاربردی
10م شهریور 1402
مطالعه بیشتر
آموزش کار با رویدادهای فرم و اعتبارسنجی فرمها در جاوا اسکریپت: راهنمای جامع
3م آبان 1403
مطالعه بیشتر
معرفی React.js و بررسی مزایای آن برای توسعه وب و اپلیکیشن
28م شهریور 1402
مطالعه بیشتر
آموزش توسعه و مدیریت پروژههای بزرگ در جاوا اسکریپت: آشنایی با ابزارها و فریمورکهای کاربردی
4م آبان 1403
مطالعه بیشتر
آموزش تغییر نوع و اندازه فونت و رنگ متن با CSS: استایلدهی حرفهای به متنها
5م شهریور 1402
مطالعه بیشتر
آموزش مفاهیم پایهای اشیاء در جاوا اسکریپت: تعریف، ویژگیها و متدها
2م شهریور 1403
مطالعه بیشتر
JSX و رندرینگ مؤثر در React.js: بهینهسازی کامپوننتها و بهبود عملکرد
28م شهریور 1402
مطالعه بیشتر
تمامی حقوق معتلق به ناشر سایت است و کپی از آن پیگرد قانونی دارد