web-example

Ví dụ về tạo trang web

Thời gian thực hiện: 2 tiết

Certainly! Below is an example of a simple project structure for a basic HTML website with a main HTML file that includes a header, a navigation menu with multiple topics, each with a popup menu, a main content area, and a footer. Each navigation link uses JavaScript to open another HTML file.

Directory Structure

/simple-project
│
├── index.html
├── about.html
├── services.html
├── contact.html
├── css
│   └── styles.css
└── js
    └── scripts.js

Main HTML File (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Project with Navigation</title>
    <!-- Reference to the local CSS file -->
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <header>
        <h1>Welcome to My Simple Project</h1>
        <nav>
            <ul>
                <li><a href="#" onclick="navigateTo('index.html')">Home</a></li>
                <li><a href="#" onclick="navigateTo('about.html')">About</a></li>
                <li><a href="#" onclick="navigateTo('services.html')">Services</a></li>
                <li><a href="#" onclick="navigateTo('contact.html')">Contact</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <h2>Main Content Area</h2>
        <p>This is the Home page of the simple project example.</p>
    </main>

    <footer>
        <p>&copy; 2024 Simple Project. All rights reserved.</p>
    </footer>

    <!-- Reference to the local JavaScript file -->
    <script src="js/scripts.js"></script>
</body>
</html>

About Page (about.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>About Us</title>
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <header>
        <h1>About Us</h1>
        <nav>
            <ul>
                <li><a href="#" onclick="navigateTo('index.html')">Home</a></li>
                <li><a href="#" onclick="navigateTo('about.html')">About</a></li>
                <li><a href="#" onclick="navigateTo('services.html')">Services</a></li>
                <li><a href="#" onclick="navigateTo('contact.html')">Contact</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <h2>About Us</h2>
        <p>This is the About page of the simple project example.</p>
    </main>

    <footer>
        <p>&copy; 2024 Simple Project. All rights reserved.</p>
    </footer>

    <script src="js/scripts.js"></script>
</body>
</html>

Services Page (services.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Our Services</title>
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <header>
        <h1>Our Services</h1>
        <nav>
            <ul>
                <li><a href="#" onclick="navigateTo('index.html')">Home</a></li>
                <li><a href="#" onclick="navigateTo('about.html')">About</a></li>
                <li><a href="#" onclick="navigateTo('services.html')">Services</a></li>
                <li><a href="#" onclick="navigateTo('contact.html')">Contact</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <h2>Our Services</h2>
        <p>This is the Services page of the simple project example.</p>
    </main>

    <footer>
        <p>&copy; 2024 Simple Project. All rights reserved.</p>
    </footer>

    <script src="js/scripts.js"></script>
</body>
</html>

Contact Page (contact.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact Us</title>
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <header>
        <h1>Contact Us</h1>
        <nav>
            <ul>
                <li><a href="#" onclick="navigateTo('index.html')">Home</a></li>
                <li><a href="#" onclick="navigateTo('about.html')">About</a></li>
                <li><a href="#" onclick="navigateTo('services.html')">Services</a></li>
                <li><a href="#" onclick="navigateTo('contact.html')">Contact</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <h2>Contact Us</h2>
        <p>This is the Contact page of the simple project example.</p>
    </main>

    <footer>
        <p>&copy; 2024 Simple Project. All rights reserved.</p>
    </footer>

    <script src="js/scripts.js"></script>
</body>
</html>

CSS File (css/styles.css)

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

header {
    background-color: #4CAF50;
    color: white;
    padding: 10px 0;
    text-align: center;
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

nav ul li {
    display: inline;
    margin: 0 10px;
}

nav ul li a {
    color: white;
    text-decoration: none;
    cursor: pointer;
}

nav ul li a:hover {
    text-decoration: underline;
}

main {
    padding: 20px;
    background-color: white;
}

footer {
    background-color: #4CAF50;
    color: white;
    text-align: center;
    padding: 10px 0;
    position: fixed;
    width: 100%;
    bottom: 0;
}

/* Modal styles */
.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
    background-color: white;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 500px;
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

JavaScript File (js/scripts.js)

function navigateTo(page) {
    window.location.href = page;
}

Explanation

index.html, about.html, services.html, contact.html: Each HTML file includes the structure of the page with a header, navigation menu, main content area, footer, and a script reference to scripts.js. The navigation links call the navigateTo function to navigate to the respective pages.
styles.css: Contains the styling for the page, including basic styles for the body, header, navigation, main content, and footer.
scripts.js: Contains the JavaScript function navigateTo which takes a page URL as a parameter and sets window.location.href to navigate to that page.

This setup creates a basic HTML project with a navigation menu and popup modals for each topic, using local references for CSS and JavaScript files. Each navigation link uses JavaScript to open another HTML file.