Front End Assignments
[Link]
1. Write a program to design semantic and non - semantic tags with web page
form layout to get this desired output ?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Assignment_1</title>
</head>
<body>
<h2>Welcome to my Website!</h2>
<p>This is the home page of my website.</p>
<h2>About Me</h2>
<p>My name is John Doe and I'm a Web Developer.</p>
<ol>
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
</ol>
<p>Row 1,Column 1 Row 1,Column 2</p>
<p>Row 2, Column 1 Row 2,Column 2</p>
<h2>Contact Me</h2>
<label for="name">Name: </label>
<input type="text" id="name"> <br><br>
<label for="email">Email: </label>
<input type="email" id="email"> <br><br>
<label for="message">Message: </label>
<textarea id="message"></textarea> <br><br>
<button type="button">Send</button>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tenetur deleniti
veritatis, officia blanditiis eius ad!
Praesentium, ratione magnam? Vitae, enim.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Placeat et im-
pedit blanditiis atque, facilis
consectetur?</p>
</body>
</html>
OUTPUT
[Link] a program to display the menucard using table and using inline css
properties for color?
[Link]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Menu Card</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<div class="main_container">
<table>
<tr>
<th class="menucard">MENU CARD</th>
</tr>
</table>
<div class="container_A">
<div class="container1">
<table>
<tr>
<th class="heading" colspan="2">PURE VEG</th>
</tr>
<tr>
<td colspan="2" class="image"><img src="[Link]"
alt=""></td>
</tr>
<tr>
<td class="menu">Menu</td>
<td class="price">Price</td>
</tr>
<tr>
<td>Mutter Paneer</td>
<td>200</td>
</tr>
<tr>
<td>Shahi Paneer</td>
<td>220</td>
</tr><tr>
<td>Kajoo Masala</td>
<td>220</td>
</tr><tr>
<td>Palak Paneer</td>
<td>180</td>
</tr><tr>
<td>Veg Kolhapuri</td>
<td>160</td>
</tr><tr>
<td>Dal Tadka</td>
<td>150</td>
</tr><tr>
<td>Bhendi Fry</td>
<td>170</td>
</tr>
</table>
</div>
<div class="container2">
<table>
<tr>
<th class="heading" colspan="2">BREAD'S</th>
</tr>
<tr>
<td colspan="2" class="image"><img src="[Link]"
alt=""></td>
</tr>
<tr>
<td class="menu">Menu</td>
<td class="price">Price</td>
</tr>
<tr>
<td>Tanduri Roti</td>
<td>20</td>
</tr>
<tr>
<td>Lachha Paratha</td>
<td>30</td>
</tr><tr>
<td>Butter Naan</td>
<td>25</td>
</tr><tr>
<td>Roomali Roti</td>
<td>10</td>
</tr><tr>
<td>Aloo Paratha</td>
<td>50</td>
</tr><tr>
<td>Plain Naan</td>
<td>20</td>
</tr><tr>
<td>Garlic Naan</td>
<td>30</td>
</tr>
</table>
</div>
<div class="container3">
<table>
<tr>
<th class="heading" colspan="2">NON-VEG</th>
</tr>
<tr>
<td colspan="2" class="image"><img src="[Link]"
alt=""></td>
</tr>
<tr>
<td class="menu">Menu</td>
<td class="price">Price</td>
</tr>
<tr>
<td>Butter Chicken</td>
<td>350</td>
</tr>
<tr>
<td>Kadai Chicken</td>
<td>250</td>
</tr><tr>
<td>Chicken Curry</td>
<td>300</td>
</tr><tr>
<td>Fish Curry</td>
<td>400</td>
</tr><tr>
<td>Egg Curry</td>
<td>150</td>
</tr><tr>
<td>Chicken Handi sp</td>
<td>270</td>
</tr><tr>
<td>Prawns Fry</td>
<td>450</td>
</tr>
</table>
</div>
</div>
<div class="container_B">
<div class="container4">
<table>
<tr>
<th class="heading" colspan="2">RICE</th>
</tr>
<tr>
<td colspan="2" class="image"><img src="[Link]"
alt=""></td>
</tr>
<tr>
<td class="menu">Menu</td>
<td class="price">Price</td>
</tr>
<tr>
<td>Jeera Rice</td>
<td>130</td>
</tr>
<tr>
<td>Veg Pulao</td>
<td>130</td>
</tr><tr>
<td>Plain Rice</td>
<td>90</td>
</tr><tr>
<td>Biryani</td>
<td>150</td>
</tr><tr>
<td>Tawa Pulao</td>
<td>100</td>
</tr><tr>
<td>Paneer Pulao</td>
<td>140</td>
</tr><tr>
<td>Mutter Pulao</td>
<td>140</td>
</tr><tr>
<td>Chicken Pulao</td>
<td>210</td>
</tr>
</table>
</div>
<div class="container5">
<table>
<tr>
<th class="heading" colspan="3">CHINESE</th>
</tr>
<tr>
<td colspan="3" class="image"><img src="[Link]"
alt=""></td>
</tr>
<tr>
<td class="menu">Menu</td>
<td class="full">Full</td>
<td class="half">Half</td>
</tr>
<tr>
<td>Noodles</td>
<td>140</td>
<td>70</td>
</tr>
<tr>
<td>Manchurian</td>
<td>130</td>
<td>65</td>
</tr><tr>
<td>Fried Rice</td>
<td>100</td>
<td>50</td>
</tr><tr>
<td>Manchew Rice</td>
<td>90</td>
<td>-</td>
</tr><tr>
<td>Szechwan Chilli</td>
<td>160</td>
<td>80</td>
</tr><tr>
<td>Szechwan Noodles</td>
<td>160</td>
<td>80</td>
</tr><tr>
<td>Szechwan Fried Rice</td>
<td>160</td>
<td>80</td>
</tr><tr>
<td>Chicken manchow soup</td>
<td>170</td>
<td>90</td>
</tr>
</table>
</div>
<div class="container6">
<table>
<tr>
<th class="heading" colspan="2">SOUTH-INDIAN</th>
</tr>
<tr>
<td colspan="2" class="image"><img src="[Link]"
alt=""></td>
</tr>
<tr>
<td class="menu">Menu</td>
<td class="price">Price</td>
</tr>
<tr>
<td>Plain Dosa</td>
<td>35</td>
</tr>
<tr>
<td>Masala Dosa</td>
<td>45</td>
</tr><tr>
<td>Vada Sambar</td>
<td>40</td>
</tr><tr>
<td>Idli Sambar</td>
<td>50</td>
</tr><tr>
<td>Pulihora</td>
<td>110</td>
</tr><tr>
<td>Uttapam</td>
<td>70</td>
</tr><tr>
<td>Loni-Spanj dosa</td>
<td>60</td>
</tr><tr>
<td>Rasam-Rice</td>
<td>50</td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
[Link]
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.main_container{
border:5px solid black;
width: 900px;
/* margin-left: 700px; */
justify-content: center;
align-items: center;
}
table,tr,th,td{
border: 1px solid #fff;
background-color: black;
/* border-collapse: collapse; */
}
.menucard{
width: 920px;
color: black;
background-color: yellow;
}
.container_A{
display: flex;
flex-direction: row;
}
.container_B{
display: flex;
flex-direction: row;
}
.heading,td{
color: gold;
}
.menu,.price,.full,.half{
color: white;
text-align: center;
font-weight: bold;
}
.image{
width: 300px;
height: 215px;
background-color: black;
align-items: center;
justify-content: center;
}
.container2{
display: flex;
flex-direction: row;
justify-content: center;
}
[Link] [Link]
[Link] [Link]
[Link] [Link]
OUTPUT
[Link] a program to show all form input controls in HTML5 as given below ?
[Link]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form</title>
</head>
<body>
<!-- [Link] a program to show all the form input controls in HTML5 as given
below ? -->
<h2>Form Input Controls Example</h2>
<form action="">
Name: <input type="text" name="name" placeholder="Enter your name">
Password: <input type="text" name="password" placeholder="Enter your password">
Email: <input type="text" name="mail" placeholder="enter your email"> Age: <input
type="number">
Rating:<input type="range" name="" id=""> Date of Birth: <input
type="date">Time: <input type="time"> Image: <input type="image" src="skoda-
[Link]" style="width: 120px ;height: 70px;"><br><br>
Week:<input type="week"><br><br>
Month:<input type="month"><br><br>
Datetime-Local:<input type="datetime-local"><br><br>
Url:<input type="url"><br><br>
Search:<input type="search"><br><br>
Gender: <br><br>
<input type="radio" value="m" name="gender">Male
<input type="radio" value="f" name="gender">Female <br><br>
Interests: <br><br>
<input type="checkbox">Reading
<input type="checkbox">Sports
Country: <select name="" id="">
<option value=" ">United States</option>
<option value="ind">India</option>
<option value="ch">China</option>
<option value="ja">Japan</option>
<option value="russ">Russia</option>
</select>
</form>
Message: <textarea name="message" id="" cols="50" rows="4" placeholder="Enter
Your Message"></textarea>
<input type="submit" value="Submit">
</body>
</html>
OUTPUT