1. Basic HTML Document Structure
<!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>
<link rel="stylesheet" href="styles.css"> <!-- Link to your CSS file -->
<script src="script.js" defer></script> <!-- Link to your JavaScript file -->
</head>
<body>
<header>
<h1>Welcome to Your Website</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section id="home">
<h2>Home</h2>
<p>Your home content goes here.</p>
</section>
<section id="about">
<h2>About Us</h2>
<p>Your about content goes here.</p>
</section>
<section id="services">
<h2>Our Services</h2>
<p>Your services content goes here.</p>
</section>
<section id="contact">
<h2>Contact Us</h2>
<!-- Contact Form -->
<form action="/submit-form" method="POST">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="message">Message:</label>
<textarea id="message" name="message" required></textarea>
<button type="submit">Send Message</button>
</form>
</section>
</main>
<footer>
<p>© 2024 Your Company Name. All rights reserved.</p>
</footer>
</body>
</html>2. Responsive Image
<img src="image.jpg" alt="Description of the image" style="max-width: 100%; height: auto;">3. Button with JavaScript
<button onclick="alert('Button clicked!')">Click Me</button>4. Navigation Bar
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>5. Google Maps Embed
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3151.8354345098277!2d144.95373531531696!3d-37.81720997975188!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6ad642af0f0c1f09%3A0x5045675218ceed30!2sYour+Location!5e0!3m2!1sen!2sus!4v1614692460374!5m2!1sen!2sus" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>6. Image Gallery
<div class="gallery">
<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
<img src="image3.jpg" alt="Image 3">
</div>
<style>
.gallery {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.gallery img {
max-width: 30%;
height: auto;
margin: 10px;
}
</style>7. Meta Tags for SEO
<meta name="description" content="Your website description here">
<meta name="keywords" content="keyword1, keyword2, keyword3">
<meta name="author" content="Your Name">
<meta property="og:title" content="Your Website Title">
<meta property="og:description" content="Your website description for social media.">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com">8. Google Analytics Tracking Code
<!-- Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=YOUR_TRACKING_ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'YOUR_TRACKING_ID');
</script>9. CSS Styles for a Simple Layout
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background: #333;
color: #fff;
padding: 10px 0;
text-align: center;
}
nav ul {
list-style-type: none;
padding: 0;
}
nav ul li {
display: inline;
margin: 0 15px;
}
nav a {
color: #fff;
text-decoration: none;
}
footer {
background: #333;
color: #fff;
text-align: center;
padding: 10px 0;
position: relative;
bottom: 0;
width: 100%;
}
</style>10. Responsive Grid Layout
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
</div>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
gap: 10px;
padding: 10px;
}
.grid-item {
background-color: #4CAF50;
color: white;
padding: 20px;
text-align: center;
border: 1px solid #ccc;
}
</style>Conclusion
These code snippets provide a solid foundation for building a wide range of websites. You can adapt and modify them based on your specific requirements, such as adding styles, scripts, and other functionalities to enhance user experience and functionality.