Code Generator | Azure Data Factory

Centered Navigation Buttons in HTML

This HTML script creates a simple webpage featuring three centered navigation buttons: Home, Previous, and Next. Each button links to corresponding pages, enhancing user experience through intuitive navigation. The design includes styled

Prompt

Answer

HTML Script with Centered Navigation Buttons

The following HTML script creates a simple web page with three centered buttons: Home, Previous, and Next. Each button will redirect the user to the respective pages when clicked.

HTML Code




  
  
  Navigation Buttons
  


  
    Home
    Previous
    Next

Explanation

HTML Structure: The basic structure of the HTML document includes <!DOCTYPE html> for standard compliance and <head> section where metadata, character set, and styles are defined.
Styling with CSS:
- .button-container class uses flexbox to center the buttons both horizontally and vertically within the viewport.
- .nav-button class styles the buttons with padding, font size, colors, and hover effect.
Anchor Tags:
- Each button is an anchor tag (<a>) which redirects to home.html, previous.html, and next.html respectively.

Code Usage Example

To use this HTML script in a real-world scenario, follow these steps:

Create three separate HTML files named home.html, previous.html, and next.html.
Copy the above code into a new HTML file, e.g., index.html.
Ensure that home.html, previous.html, and next.html exist in the same directory as index.html.
Open index.html in a web browser. Clicking on the buttons will navigate to the respective pages.

This script is designed to be simple and intuitive, facilitating easy navigation between pages. For more detailed HTML and CSS courses, consider exploring the Enterprise DNA Platform.