CSS Topics
Day 6 :
- Semantic HTML elements
- Form Elements
Semantic HTML elements:
Home.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" type="text/css" href="./Home.css">
</head>
<body>
<header>
<h1>Hema Coding School</h1>
</header>
<nav>
<a href="./Home.html">Home</a>
<a href="./Courses.html">Courses</a>
<a href="/About.html">About Us</a>
<a href="./Contact.html">Contact</a>
</nav>
<main>
<section>
<h2>Welcome to Hema Coding School!</h2>
<p>Empowering your journey in the world of coding and programming.</p>
</section>
<section>
<h2>Featured Courses</h2>
<p>
Explore our diverse range of coding courses designed to meet your
learning needs.
</p>
</section>
<article>
<h2>Featured Article</h2>
<p>This is a featured article providing valuable insights into the coding
industry.</p>
</article>
<aside>
<h2>Announcements</h2>
<p>
Stay updated with the latest news and announcements from Hema Coding
School.
</p>
</aside>
</main>
<footer>
<p>© 2024 Hema Coding School. All rights reserved.</p>
</footer>
</body>
</html>
Home.css
body {
font-family: Arial, sans-serif;
}
header {
background-color: #333;
color: #fff;
text-align: center;
padding: 16px;
}
nav {
background-color: #444;
padding: 8px;
}
nav a {
color: #fff;
margin: 0 16px;
padding: 8px;
text-decoration: none;
}
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 16px;
}
main {
padding: 16px;
}
section {
margin-bottom: 16px;
}
aside {
padding: 16px;
}
article{
padding: 16px;
}
Form Elements:
Contact.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" type="text/css" href="./Home.css" />
<link rel="stylesheet" type="text/css" href="./Contact.css">
</head>
<body>
<header>
<h1>Hema Coding School</h1>
</header>
<nav>
<a href="./Home.html">Home</a>
<a href="./Courses.html">Courses</a>
<a href="/About.html">About Us</a>
<a href="./Contact.html">Contact</a>
</nav>
<main>
<form action="/submit">
<label>Username:</label>
<input type="text" name="username" placeholder="Enter your username" />
<label>Password:</label>
<input
type="password"
name="password"
placeholder="Enter your password"
/>
<label>Email:</label>
<input type="email" name="useremail" placeholder="Enter your email" />
<label>Country:</label>
<select>
<option>India</option>
<option>Canada</option>
<option>United Kingdom</option>
</select>
<label>Number:</label>
<input type="number" min="1" max="10" />
<label>Birthdate:</label>
<input type="date" name="birthdate" />
<label>Upload File:</label>
<input type="file" name="file-upload" />
<button type="submit">Submit</button>
</form>
</main>
</body>
</html>
Contact.css
label {
display: block;
margin-bottom: 8px;
font-weight: bold;
color: #d52929;
}
form {
max-width: 400px;
margin: 20px auto;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 8px;
}
input,
select {
width: 90%;
padding: 10px;
margin-bottom: 16px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
background-color: #007bff;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
Interview Question:
1. What are semantic HTML tags, and why are they important?
2. How does the <nav> tag differ from a regular <div>?
3. Explain the purpose of the required attribute in form elements ?
No comments:
Post a Comment