HTML TAGE:
a.html
<html>
<head>
<title>Personal INFO</title>
</head>
<body>
<form method="post" >
First Name:<input type="text" name="Fname">:<br />
Last Name:<input type="text" name="Lname">:<br />
<input type="submit" value=”Submit Query”/>
</form>
</body>
</html>
OUTPUT:
Password
b.html
<html>
<head>
<title>Login INFO</title>
</head>
<body>
<form method="post">
User Name:<input type="text" name="Fname"><br /><br />
Password:<input type="password" name="Lname"><br /><br />
<input type="submit" />
</form>
</body>
</html>
OUTPUT:
Radio Buttons
c.html
<html>
<body>
<form name="gender” method="post" action="c.html">
<b>Gender</b><br />
<input type="radio" name="gen" value="male" /> Male<br />
<input type="radio" name="gen" value="female" /> Female <br />
<input type="submit" />
</form>
</body>
</html>
OUTPUT:
Checkboxes
d.html
<html>
<body>
<form name="Check” method="post" action="d.html">
<b>Course</b><br />
<input type="checkbox" name="course" value="B.sc" /> B.sc<br />
<input type="checkbox" name="course" value="Bca" /> Bca<br />
<input type="checkbox" name="course" value="Bcom" /> Bcom<br />
<input type="submit" />
</form>
</body>
</html>
OUTPUT:
Drop Down Lists
College.html
<html>
<body>
<form method="post" action="college.html">
College Degree?
<select name="degree">
<option>Choose One</option>
<option>Some High School</option>
<option>High School Degree</option>
<option>Some College</option>
<option>Bachelor's Degree</option>
<option>Doctorate</option>
<input type="submit" >
</select>
</form>
</body>
</html>
OUTPUT:
HTML Upload Forms
Upload.html
<html >
<head>
<title>Upload</title>
</head>
<body>
<input type="hidden" name="MAX_FILE_SIZE" value="100" />
<input name="file" type="file" />
</body>
</html>
OUTPUT:
Text Areas
ta.html
<html >
<head>
<title>address</title>
</head>
<body>
<form method="post" action="tarea.html" name="ta.html">
Enter Your Address Here<br>
<textarea rows="5" cols="20" name="comments">
</textarea>
<input type="submit">
</form>
</body>
</html>
OUTPUT:
Application Form
App.html
<html >
<head>
<title>Application Form</title>
</head>
<body>
**************APPLICATION FORM***************
<form name="frm" method="post">
<table>
<tr>
<td>NAME</td>
<td><input type="text" name="na" /></td>
</tr>
<tr>
<td>FATHER NAME</td>
<td><input type="text" name="fa" /></td>
</tr>
<tr>
<td>ADDRESS</td>
<td><input type="text" name="ad" /></td>
</tr>
<tr>
<td>PHONE NUMBER</td>
<td><input type="text" name="ph" /></td>
</tr>
<tr>
<td>GENDER</td>
<td><input type="radio" name="ra" value=”male”/>Male
<input type="radio" name="ra" value=”female "/>Female</td>
</tr>
<td>EDUCATIONAL QUALIFICATION</td> <tr>
<td>UG</td>
<td><select name="sl">
<option value="BCA" >BCA</option>
<option value="BBA">BBA</option>
<option value="BCOM">BCOM</option>
<option value="BSC">BSc</option>
<option value="B.ED">B.ED</option>
</select>
</td>
</tr>
<tr>
<td>BG</td>
<td><select name="sl1">
<option value="MCA">MCA</option>
<option value="MBA">MBA</option>
<option value="MCOM">MCOM</option>
<option value="MSC">MSc</option>
<option value="M.ED">M.ED</option>
</select>
</td>
</tr>
<tr>
<td>EXPERIENCE</td>
<td><select name="sl2"><option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>YEAR </td> </tr>
<tr> <td>ABOUT YOURSELF</td>
<td><textarea rows="5" name="txa"></textarea>
</td> </tr>
<tr>
<td><input type="submit" name="sm" value="submit" />
<input type="reset" name="sm1" value="cancel" />
</td>
</tr>
</table>
</form>
</body>
</html>
CSS:
CSS stands for Cascading Style Sheets
CSS describes how HTML elements are to be displayed on screen, paper, or in other
media
CSS saves a lot of work. It can control the layout of multiple web pages all at once
External stylesheets are stored in CSS files
CSS Syntax
The CSS id Selector
The id selector uses the id attribute of an HTML element to select a specific element.
The id of an element is unique within a page, so the id selector is used to select one unique
element!
To select an element with a specific id, write a hash (#) character, followed by the id of the
element
#para1 {
text-align: center;
color: red;
}
CSS class Selector
To select elements with a specific class, write a period (.) character, followed by the class name.
.center {
text-align: center;
color: red;
User Defined Tag :
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p{
text-align: center;
color: red;
}
Three Ways to Insert CSS
There are three ways of inserting a style sheet:
External CSS
Internal CSS
Inline CSS
External CSS
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
"style.css"
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
Internal CSS
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Inline CSS
<html>
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>
<html> p{
<head> font-family: sans-serif;
<link rel="stylesheet" href="style.css"> font-size: xx-large;
</head> font-weight: 900;
<body> color: green;
<p>Hello GFG</p> }
</body>
</html>
<html> button {
<head> background-color: greenyellow;
<link rel="stylesheet" href="style.css"> color: white;
</head> padding: 10px 20px;
<body> border: none;
<button>Hover me</button> border-radius: 5px;
</body> transition: background-color 0.3s ease;
</html> }
button:hover {
background-color: blue;
}
body {
<html> margin: 0;
<head> display: flex;
<link rel="stylesheet" href="style.css"> justify-content: center;
</head> align-items: center;
<body> height: 100vh;
<div class="container">Centered</div> background: #f4f4f4;
</body> }
</html> .container {
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height: 200px;
background: #4caf50;
color: white;
}
Index.html
<html>
<head>
<title>My Simple Website</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Welcome to My Website</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>Welcome to My Website</h2>
<p>This is a simple HTML website styled using an external CSS file.</p>
</section>
</main>
<footer>
<p>© 2025 My Simple Website</p>
</footer>
</body>
</html>
Style.css
/* General Styles */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f2f2f2;
}
/* Header */
header {
background-color: #008000;
color: white;
padding: 20px;
text-align: center;
}
/* Navigation */
nav ul {
list-style-type: none;
padding: 0;
}
nav ul li {
display: inline;
margin: 0 15px;
}
nav ul li a {
color: white;
text-decoration: none;
}
/* Main Content */
main {
padding: 20px;
background-color: white;
}
/* Footer */
footer {
text-align: center;
padding: 10px;
background-color: #FFFF00;
color: #000; }
