Adam B. answered • 10/18/23
Front-End Development Tutor & Corporate App Developer with UX Skills
It looks like you're attempting to implement a basic pagination system on your website using HTML. However, there are a few issues with your current code that might be causing the problems you described. Let's address these issues step by step:
Hyperlinks without Proper HREF Attributes:
In your pagination links, it seems like you're using # as the href attribute value. This would cause the links to navigate to the top of the page (www.mysite.com/#). Instead, you need to specify the actual URLs of the pages you want to link to.
Highlighting the Active Page:
To highlight the active page, you can use a combination of HTML and CSS. You can add a class like active to the active page link and then use CSS to style it differently. It seems like you've mentioned removing the <active> code, but HTML typically uses classes for styling.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Website Title</title>
<style>
.pagination {
list-style: none;
display: flex;
}
.pagination li {
margin: 0 5px;
}
.pagination a {
text-decoration: none;
padding: 5px 10px;
border: 1px solid #ccc;
border-radius: 3px;
}
.pagination .active {
background-color: #007bff;
color: #fff;
}
</style>
</head>
<body>
<h1>Your Website Title</h1>
<p>Content of the page...</p>
<ul class="pagination">
<li><a href="page1.html"><< Previous</a></li>
<li><a href="page1.html">1</a></li>
<li><a href="page2.html">2</a></li>
<li><a href="page3.html">3</a></li>
<li><a href="page4.html" class="active">4</a></li>
<li><a href="page5.html">5</a></li>
<li><a href="page5.html">Next >></a></li>
</ul>
</body>
</html>
Replace "page1.html", "page2.html", etc., with the actual URLs of your pages. This code includes some basic CSS for styling and uses the active class for highlighting the active page. Customize the styles as needed for your design
