Web design encompasses various coding languages and techniques. Here are some key components and sample code snippets commonly used in web design:
### HTML (HyperText Markup Language)
HTML is the standard markup language used to create web pages. It provides the structure of a webpage.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Webpage</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>
<main>
<section id="home">
<h2>Home</h2>
<p>This is the home section.</p>
</section>
<section id="about">
<h2>About</h2>
<p>This is the about section.</p>
</section>
<section id="contact">
<h2>Contact</h2>
<p>This is the contact section.</p>
</section>
</main>
<footer>
<p>© 2024 My Webpage</p>
</footer>
</body>
</html>
```
### CSS (Cascading Style Sheets)
CSS is used to style HTML elements. It defines how HTML elements should be displayed.
```css
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #4CAF50;
color: white;
padding: 1em 0;
text-align: center;
}
nav ul {
list-style-type: none;
padding: 0;
}
nav ul li {
display: inline;
margin: 0 10px;
}
nav ul li a {
color: white;
text-decoration: none;
}
main {
padding: 20px;
}
footer {
background-color: #f1f1f1;
text-align: center;
padding: 10px 0;
position: fixed;
width: 100%;
bottom: 0;
}
```
### JavaScript
JavaScript is a scripting language used to create dynamic content on a webpage.
```javascript
document.addEventListener("DOMContentLoaded", function() {
const homeSection = document.getElementById('home');
const aboutSection = document.getElementById('about');
const contactSection = document.getElementById('contact');
document.querySelector('nav ul').addEventListener('click', function(e) {
if(e.target.tagName === 'A') {
e.preventDefault();
const targetId = e.target.getAttribute('href').substring(1);
document.getElementById(targetId).scrollIntoView({ behavior: 'smooth' });
}
});
});
```
### Responsive Design
To make a webpage responsive, you can use media queries in CSS.
```css
@media (max-width: 600px) {
nav ul {
display: block;
}
nav ul li {
display: block;
margin: 5px 0;
}
}
```
### Putting It All Together
Here is how you would integrate these codes into a cohesive webpage:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Web Design</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #4CAF50;
color: white;
padding: 1em 0;
text-align: center;
}
nav ul {
list-style-type: none;
padding: 0;
}
nav ul li {
display: inline;
margin: 0 10px;
}
nav ul li a {
color: white;
text-decoration: none;
}
main {
padding: 20px;
}
footer {
background-color: #f1f1f1;
text-align: center;
padding: 10px 0;
position: fixed;
width: 100%;
bottom: 0;
}
@media (max-width: 600px) {
nav ul {
display: block;
}
nav ul li {
display: block;
margin: 5px 0;
}
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
document.querySelector('nav ul').addEventListener('click', function(e) {
if(e.target.tagName === 'A') {
e.preventDefault();
const targetId = e.target.getAttribute('href').substring(1);
document.getElementById(targetId).scrollIntoView({ behavior: 'smooth' });
}
});
});
</script>
</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>
<main>
<section id="home">
<h2>Home</h2>
<p>This is the home section.</p>
</section>
<section id="about">
<h2>About</h2>
<p>This is the about section.</p>
</section>
<section id="contact">
<h2>Contact</h2>
<p>This is the contact section.</p>
</section>
</main>
<footer>
<p>© 2024 My Webpage</p>
</footer>
</body>
</html>
```
This example illustrates a simple yet complete webpage using HTML for structure, CSS for styling and responsiveness, and JavaScript for interactivity.
No comments:
Post a Comment