| Introduction to HTML |
|---|
| Introduction to HTML |
|---|
| HTML Attributes |
|---|
| HTML5 Semantic Elements |
|---|
| HTML Graphics |
|---|
Creating a web page using HTML, CSS, and JavaScript involves structuring the content with HTML, styling it with CSS, and adding interactivity using JavaScript. Below, I’ll explain each part in detail with examples.
1. HTML (HyperText Markup Language)
HTML is the standard markup language used to create the structure of web pages. It consists of a series of elements that define the different parts of the web page.
Example HTML Structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Web Page</title>
</head>
<body>
<header>
<h1>Welcome to My Website</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<section id="home">
<h2>Home Section</h2>
<p>This is the home section of the website.</p>
</section>
<section id="about">
<h2>About Section</h2>
<p>This is the about section of the website.</p>
</section>
<section id="contact">
<h2>Contact Section</h2>
<form id="contact-form">
<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>
<button type="submit">Submit</button>
</form>
</section>
<footer>
<p>© 2024 My Website. All rights reserved.</p>
</footer>
</body>
</html>
2. CSS (Cascading Style Sheets)
CSS is used to control the presentation, formatting, and layout of the elements on a web page.
Example CSS:
/* External CSS file */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
header {
background-color: #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 ul li a {
color: #fff;
text-decoration: none;
}
section {
padding: 20px;
margin: 10px;
background-color: #fff;
border: 1px solid #ddd;
}
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px 0;
position: fixed;
width: 100%;
bottom: 0;
}
3. JavaScript (JS)
JavaScript is a scripting language used to create dynamic content and control the behavior of the web page.
Example JavaScript:
// External JavaScript file
document.addEventListener('DOMContentLoaded', function() {
const form = document.getElementById('contact-form');
form.addEventListener('submit', function(event) {
event.preventDefault(); // Prevent form from submitting normally
// Get form data
const name = document.getElementById('name').value;
const email = document.getElementById('email').value;
// Display form data
alert(`Thank you, ${name}! We will contact you at ${email}.`);
});
});
Complete Example Putting It All Together
Here is how the HTML, CSS, and JavaScript can be used together:
Example JavaScript:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Web Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Welcome to My Website</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<section id="home">
<h2>Home Section</h2>
<p>This is the home section of the website.</p>
</section>
<section id="about">
<h2>About Section</h2>
<p>This is the about section of the website.</p>
</section>
<section id="contact">
<h2>Contact Section</h2>
<form id="contact-form">
<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>
<button type="submit">Submit</button>
</form>
</section>
<footer>
<p>© 2024 My Website. All rights reserved.</p>
</footer>
<script src="script.js"></script>
</body>
</html>
Breakdown:
- HTML defines the structure with ‘
<header>‘, ‘<nav>‘, ‘<section>‘, and ‘<footer>‘ tags. - CSS styles the page by applying colors, margins, padding, and other styles to elements.
- JavaScript adds interactivity, such as handling the form submission and showing an alert with the user’s input.
This combination of HTML, CSS, and JavaScript is fundamental in web development, allowing developers to create functional, styled, and interactive web pages.
