15-HTML
AIM- Create Your Resume in HTML.
PROCEDURE:
1. Go to start-> All programs-> Accessories-> Notepad.
2. Type the html code.
3. Create different list using <ul>…</ul>tag.
4. Use <p class> tag and define heading of list
5. Enter the elements in list using<li>…</li> tag.
6. Go to file –> save-> save the [Link] extension.
7. Run the html file using chrome browser.
CODE:
<html>
<head><title> Program 15 </title>
</head><body>
<h1>Resume</h1><h2>Priyamvada</h2><p class="head">Basic Information</p>
<ul><li>Age-19</li>
<li>Father's Name- [Link] Krishan</li>
<li>Mother's Name-Amrita</li>
<li>Phone No. 2343256335</li>
<li>Mail Id- pri@[Link]</li>
</ul>
<p class="head">Interests</p>
<ul>
<li>Painting</li>
<li>Photography</li>
<li>Design</li>
<li>Programming</li>
<li>Writing</li>
</ul>
<p class="head">Skills</p>
<ul>
<li>Web Design With HTML</li>
</ul>
<p class="head">Education</p>
<ul>
<li>Arwachin International School<br>10TH(2020)-96.2%<br>12TH(2022)-80%</li>
<li>Pursuing Btech in MGMCOET</li>
</ul>
<p class="head">Achievements</p>
<ul>
<li>Blue Air Champion</li>
<li>Rank-1 Hindi Olympiad</li>
<li>Runner Up-Japan On Canvas</li>
<li>Editor(2021-2022)
</ul></body></html>
OUTPUT:
16-HTML
AIM: Write a code to make your registration form using html
PROCEDURE:
1. Start the HTML Structure: Begin by setting up the basic HTML page with the
necessary tags.
2. Create the Form Tag: Use the <form> tag to define the form, and specify the method
(usually POST or GET) and action (the URL to which the form will be submitted).
3. Add Input Fields: Use input elements such as text fields, radio buttons, checkboxes,
etc., for the different registration details (like name, email, password, etc.).
4. Add Labels: Use <label> tags to describe each form field for accessibility and clarity.
5. Submit Button: Add a button to submit the form data to the server.
CODE:
<!Doctype Html>
<Html> <Head>
<Title> Registration form </Title>
</Head> <Body>
<br> <form>
<label> Firstname </label>
<input type="text" name="firstname" size="15"/> <br> <br>
<label> Lastname: </label>
<input type="text" name="lastname" size="15"/> <br> <br>
<label> Course : </label>
<select>
<option value="Course">Course</option>
<option value="BCA">BCA</option>
<option value="BBA">BBA</option>
<option value="[Link]">[Link]</option>
<option value="MBA">MBA</option>
<option value="MCA">MCA</option>
<option value="[Link]">[Link]</option>
</select> <br> <br>
<label> Gender : </label><br>
<input type="radio" name="gender"/> Male <br>
<input type="radio" name="gender"/> Female <br>
<input type="radio" name="gender"/> Other
<br> <br>
<label> Hobbies: </label> <br>
<input type="checkbox" name="Programming"> Programming <br>
<input type="checkbox" name="Cricket"> Cricket <br>
<input type="checkbox" name="Football"> Football <br>
<input type="checkbox" name="reading Novel"> Reading Novel <br>
<br> <br>
<label> Phone : </label>
<input type="text" name="phone" size="10"> <br> <br>
Address
<br>
<textarea cols="80" rows="5"
value="address"> </textarea> <br>
Email:
<input type="email" id="email" name="email">
<br> <br> Password:
<input type="Password" id="pass" name="pass"> <br>
<br>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form> </Body> </Html>
OUTPUT:
17-HTML
AIM:. Write a code to create your Application form using html.
PROCEDURE:
[Link] the HTML Structure: Begin by setting up the basic HTML page with thenecessary
tags.
[Link] the Form Tag: Use the <form> tag to define the form, and specify the method
(usually POST or GET) and action (the URL to which the form will be submitted).
[Link] Input Fields: Use input elements such as text fields, radio buttons, checkboxes,
etc., for the different registration details (like name, email, password, etc.).
[Link] Labels: Use <label> tags to describe each form field for accessibility and clarity.
[Link] Button: Add a button to submit the form data to the server.
CODE:
<!DOCTYPE html>
<html>
<head>
<title>application form </title>
</head>
<body>
<center>
<h1><u> APPLICATION FORM</u> </h1>
</center>
<form name="myform" action="" method="">
<table>
<tr> <td> First Name: </td><td> <input type="text" name="fname" size=""></td>
</tr>
<tr> <td> Last Name: </td><td> <input type="text" name="lname" size=""></td>
</tr>
<tr> <td> Father's Name: </td><td> <input type="text" name="fathername" size=""></td>
</tr> <tr> <td> Mother's Name: </td><td> <input type="text" name="mname" size=""></td>
</tr>
<tr> <td> Date of Birth: </td><td> <input type="date" name="date" size=""></td>
</tr> <tr> <td> Email: </td><td> <input type="email" name="date" size=""></td>
</tr>
<tr> <td> Gender: </td><td> <input type="radio" name="gender" size=""> Male <input
type="radio" name="gender" size=""> Female</td>
</tr>
<tr> <td> Choose Course: </td><td>
<select name="course">
<option name=""> ---Select--- </option>
<option name=""> HTML </option>
<option name=""> PHP </option>
<option name=""> JAVA </option>
<option name=""> ASP </option>
</select>
<tr> <td> Hobbies: </td><td> <input type="checkbox" name="singing" size=""> Singing <input
type="checkbox" name="dancing" size=""> Dancing <input type="checkbox" name="reading"
size=""> Reading books <input type="checkbox" name="playing" size="">Playing Cricket</td>
</tr>
<tr> <td> Address: </td><td> <textarea name="address"></textarea></td> </tr>
<tr> <td> Photo: </td><td> <input type="file" name="date" size=""></td></tr>
</table>
</form>
</body>
OUTPUT:
20-HTML
AIM: : Create a List of Capital Of Cities using <div class> tag.
PROCUDURE:
1. Go to start-> all programs-> accessories-> notepad.
2. Type the html code.
3. Use <ol> ---- </ol> tag to display ordered list of all subject.
4. Inside <ol>tag use <li> -- </li> tag to list each subject.
5. Go to file –>save->save the file with html extension.
6. Run the html code using browser.
CODE:
<!DOCTYPE html>
<html>
<head>LIST OF CITIES</head>
<body>
<div class="city">
<h2>London</h2>
<p>London is the capital of England.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div></body></html>
OUTPUT:
21-HTML
AIM: Create a web page using HTML id tag.
PROCEDURE:
1. Go to Start → All Programs → Accessories → Notepad.
2. Type the HTML code (using anchor links and id attributes).
3. Use the <a href="#section1"></a> tag to create navigation links for each section.
4. Inside <body>, create sections with <div id="section1"></div> and assign a unique id to
each section.
5. Go to File → Save → Save the file with an .html extension (e.g., [Link]).
6. Run the HTML code by opening the saved .html file in a web browser.
CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML ID</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p><a href="#section1">Go to Section 1</a></p>
<p><a href="#section2">Go to Section 2</a></p>
<p><a href="#section3">Go to Section 3</a></p>
<div id="section1">
<h2>Section 1</h2>
<p>This is the first section of the page. You can navigate to it using the "Go to Section 1" link
above.</p>
</div>
<div id="section2">
<h2>Section 2</h2>
<p>This is the second section of the page. You can navigate to it using the "Go to Section 2"
link above.</p>
</div>
<div id="section3">
<h2>Section 3</h2>
<p>This is the third section of the page. You can navigate to it using the "Go to Section 3" link
above</p>
</div></body></html>
OUTPUT:
22-CSS
AIM: Create a CSS sheet.
PROCEDURE:
1. Go to Start → All Programs → Accessories → Notepad.
2. Type the HTML code.
3. Add the <link> tag in the <head> section to link the HTML file to the CSS file.
4. Use various HTML tags like <div>, <h1>, <h2>, <p>, <a>, <ul>, <li>, <form>, <input>,
<textarea> to structure your HTML content.
5. Save the HTML file:
o Go to File → Save → Save the file with an .html extension (e.g., [Link]).
6. Create a new file in Notepad for the CSS code.
7. Type the CSS code for styling the HTML elements.
8. Save the CSS file:
o Go to File → Save → Save the file with a .css extension (e.g., [Link]) in a
folder named CSS.
9. Ensure the file paths in the HTML code correctly link to the CSS file.
10. Run the HTML code:
o Open the saved .html file in a web browser to see the styled webpage.
CODE:
<!DOCTYPE html>
<html>
<head>
<title>css cheat sheet</title>
<link rel="stylesheet"type="text/CSS" href="[Link]">
</head>
<body>
<div class="container">
<div class="box-1">
<h1> Hello world </h1>
<p> creating <b>CSS using html where CSS is using for design and for
pattern </p>
</p>
</div>
<div class="box-2">
<h2> This is CSS world </h2>
<p>CSS was first developed in 1997 as a way for web developers to define
the visual appearance of the web pages that they were creating. It was intended to
allow developers to separate the content and structure of a website’s code from the
visual design, something that had not been possible prior to this time.
The separation of structure and style allows HTML to perform more
of the function that it was originally based on — the markup of content, without
having to worry about the design and layout of the page itself, something commonly
known as the “look and feel” of the page.
</p>
<a class="button" href="" >Read more</a>
</div>
<div class="categories">
<h2>categories</h2>
<ul>
<li><a href="#">categories 1</a> </li>
<li><a href="#">categories 2</a> </li>
<li><a href="#">categories 3</a> </li>
<li><a href="#">categories 4</a> </li>
<li><a href="#">categories 5</a> </li>
</ul>
</div>
<form class="my-form">
<div class = "form-group">
<label>Name : </label>
<input type="text" name="name">
</div>
<div class="form-group">
<label > Email :</label>
<input type="text" name="email">
</div>
<div class="form-group">
<label > Message :</label>
<textarea name=" message"></textarea>
</div>
<input class="button" type="submit" value="Submit" name="submit">
</form>
<div class="block">
<h3>Heading</h3>
<p>
Enriched pearl is a series of book for classes of school and colleges
</p>
</div>
<div class="block">
<h3>Heading</h3>
<p>
Enriched pearl is a series of book for classes of school and colleges
<br>
try to learn things from college
</p>
</div>
<div class="block">
<h3>Heading</h3>
<p>
classes of school and colleges <br>
try to learn things from college
</p>
</div>
<div class="clr"> </div>
<div id="main-block">
<h3>Heading</h3>
<p>
classes of school and colleges <br>
try to learn things from college
</p>
</div>
<div id="sidebar">
<p>
classes of school and colleges <br>
try to learn things from college
</p>
</div>
<div class ="p-box " >
<H1>Good Morning</H1>
<H2>Have a good day!!</H2>
</div>
</div> <!----./containier-->
<a class="fix-me button" href= ""></a>
<div style="margin-top: 500px;"></div>
</body>
</html> /*{
margin: 0;
padding: 10;
} */
body{ background-color: powderblue;
color: darkgreen; font-family: Arial,
Helvetica, sans-serif; font-size: medium ;
font-weight: 400; line-height: normal;
margin: 0;
a{ text-decoration: none;
color: black;
a:hover{ color: rgb(30,
7, 233);
a:active
{ color:
green;
}
a:visited{
.container{
width: 80%;
margin: auto;
.button{
background-color: rgb(93, 93, 105);
color: white; padding: 10px 15px;
border:none;
.button:hover{
background:red ;
color: #fff;
} .clr{ clear:
both;
.box-1{ background-color:
coral; border :5px black
dashed;
padding: 20px;
margin-top: 20px;
margin: 10px 0;
.box-1 h1{ font-family:
tahoma; font-weight: 700;
font-style: italic; text-
transform: uppercase; text-
decoration:underline; letter-
spacing: 0.5; word-spacing:
0.2em ;
.box-2
border: 3px dotted gray;
padding: 20px; margin:
20px 0;
.categories{ border:1px
gray solid;
padding:10px; border-
radius: 15px;
}
.categories h2{
text-align: center;
color: blue; }
.categories ul{ font-
size: 20px; padding:
20px; list-style:
square;
.categories li{ padding-top: 5px;
padding-bottom: 5px ; border-bottom:
dotted 1px lightgray;
.my-form{
padding: 20px;
.my-form .form-group {
padding-bottom: 15px;
.my-form .form-group
display:block;
}
.my-form input[type="text"], .my-form textarea{
padding: 8px; width:100%;
}
.block{
float: left; width: 33.3%;
border: 1px solid rgb(165, 163, 163);
padding: 10px; box-sizing: border-box;
#main-block{
float: left; width:
70%; padding: 15px;
box-sizing: border-box;
#sidebar{
float: right; width:
30%; background-color:
#333;
color: #fff;
}
.p-box { width: 800px; height:
500px; border: 1px #000 solid;
margin-top: 120px; position: relative;
background-image:url("[Link]") ;
.p-box H1{
position: absolute;
top:40px;
left:100px;
.p-box h2{ position:
absolute; bottom:
40px; right: 100px;
.fix-me{
position:fixed;
top: 400px;
}
OUTPUT
23-JSS VALIDATION
AIM: Write a code for JSS validation in HTML.
PROCEDURE:
1. Open Notepad:
a. Go to Start → All Programs → Accessories → Notepad.
2. Type the HTML Code:
a. Create a form in HTML with fields to be validated.
3. Add JavaScript for Validation:
a. Include JavaScript code within a <script> tag to handle form validation.
4. Save the HTML File:
a. Go to File → Save → Save the file with an .html extension (e.g.,
form_validation.html).
5. Run the HTML File:
a. Open the saved .html file in a web browser to see the form and test the
validation.
CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Validation Example</title>
<script>
function validateForm() { var name =
[Link]["myForm"]["name"].value; var email =
[Link]["myForm"]["email"].value; var message =
[Link]["myForm"]["message"].value;
if (name == "") {
alert("Name must be filled out");
return false;
}
if (email == "") {
alert("Email must be filled out");
return false;
}
if (message == "") {
alert("Message must be filled out");
return false;
}
return true;
}
</script>
</head>
<body>
<h1>Contact Form</h1>
<form name="myForm" action="submit_form.php" onsubmit="return
validateForm()" method="post">
<label for="name">Name:</label><br>
<input type="text" id="name" name="name"><br><br>
<label for="email">Email:</label><br>
<input type="text" id="email" name="email"><br><br>
<label for="message">Message:</label><br>
<textarea id="message" name="message"></textarea><br><br>
<input type="submit" value="Submit">
</form>
</body></html>