HTML codes 1

Date: 21 September 2020
Class: XII
Subject: Information Technology
Teacher: Aditi Bhushan
Chapter 1 - ADVANCE WEB TECHNOLOGY
Topics:
Table 3. 1
ADVANCED WEB DESIGNING
1 FORMS
A INPUT ELEMENTS
B INPUT RESTRICTIONS
2 META TAG - ATTRIBUTES
3 CSS
A INTO
B PROPERTIES
HTML CODES:
CODE 1: Revision of HTML Forms - <input type=”checkbox”>
Table 3. 2
<!DOCTYPE HTML>

<html>
<head>
<title>Hotel Menu</title>
</head>
<body>
<form>
<h1>Hotel Derbi</h1>
<h3>Veg</h3>
<input type="checkbox" name="c1" /> Chilli Paneer <br>
<input type="checkbox" name="c2" /> Spring Roll <br>
<input type="checkbox" name="c3" /> Chana Chaat <br>
<h3>Non-Veg</h3>
<input type="checkbox" name="c1" /> Chicken Chilli<br>
<input type="checkbox" name="c2" /> Chicken Butter Masala<br>
<input type="checkbox" name="c3" /> Chicken Handi <br> <br>
<input type="submit" value="ORDER" name="b1" />
</form>
</body>
</html>

Output of Code 1:
CODE 2: Revision of HTML Forms - <select> tag
Table 3. 3
<HTML>
<head>
<title> Details </title>
</head>
<body>
<h1> My Details </h1>
<form name="f1">
Student Name <input type="text" name="t1"><br>
Select College
<select name="s1">
<option>Narayana Junior College</option>
<option>Mutha Junior College</option>
<option>RKT College</option>
<option>Vivekananda College</option>
</select><br>
<input type="submit" value="Submit" name="b1"/>

<input type="reset" value="Clear" name="b2">
</form>
</body>
</HTML>
Output of Code 2:
CODE 3: Revision of HTML Forms and JavaScript
Table 3. 4
<html>
<head>
<title>Registration Form</title>
<script type="text/javascript">
function f1()
{
var name = document.form1.t1.value;
alert(name + " The form is submitted");
}
</script>
</head>
<body bgcolor="lightblue">
<h1>Student Registration Form</h1>
<hr >
<form name="form1"
method=post
action="add.html"
onSubmit=f1();>

ENTER NAME:
<input type="textbox" maxlength=10 required name=t1>
<br>
<br>
ENTER ADDRESS:
<textarea rows="5" cols="70" name=t3></textarea>
<br>
<br>
GENDER:
<br>
<input type="radio" name=r1>MALE
<br>
<input type="radio" name=r1 >FEMALE <BR>
Select Board: <br><BR>
<select name=s1>
<option value=1>State Board</option>
<option value=2>CBSE</option>
<option value=3>ICSE</option>
<option value=4>IB</option>
</select>
<br> <br>
Extra Curricular Activity: <br>
<input type="checkbox" name=c1 checked>Dance<br>
<input type="checkbox" name=c1>Music<br>
<input type="checkbox" name=c1>Paint<br>
<br>
<input type="reset" value="Clear">
<input type="submit" value="submit">
</form>
</body>
</html>
Output of Code 3:

CODE 3.1: add.html (obtained from code 3)
Table 3. 5
<!DOCTYPE HTML>
<html>
<head>
<title>MYPAGE</TITLE>
</head>
<body bgcolor="yellow">
<h1><u>
<font face="Cooper">WELCOME TO MUMBAI</font>
</u></h1>
</body>
</html>
Output of Code 3.1:
CODE 4: <meta> tag and its attributes
Table 3. 6
<html>
<head>
<meta name="aditi" contents="chapter1">
<meta name="class-xii" contents="advance web technology">
<meta name="keywords" contents="html5,css,js">
<meta http-equiv="refresh" content="5">
<meta http-equiv="expires" content="username=aditi; expires="Tuesday 15-09-2020, 23:59:59
IST;"
<title>FORMS IN HTML 5</title>
</head>
<body>
<h1>HELLO WORLD</h1>
CHOOSE A COLOR:<INPUT type="color">
Enter your Email: <input type="email">
</body>
</html>

Output of Code 4:
CODE 5: ADVANCED W.T. : <input> tag introduced elements of HTML 5
Table 3. 7
<!DOCTYPE HTML>
<html>
<head>
<title>Input Elements of HTML 5</title>
</head>
<body bgcolor="#F99B87">
<h1 align="center"><u>Enter Your Details</u></h1>
<table align="center" height="600" width="800" border=20>
<tr bgcolor="YELLOW">
<td>
<form name="f1" method=post action="h2.html">
Enter Text you want to search: <input type="search" /> <br><br><br>
WELCOME <input type="image" src="D:SUBJECTSHTML 5logo1.jpg" height=100 width=100
alt="click here to submit"/> <br><br><br>
Enter Full Name: <input type="text" required maxlength= 10/> <br><br><br>
Pick a color to customise your web page: <input type="color" value="#ff0000"/> <br><br><br>
Enter estimated number of user per day visit: <input type="number" /> <br><br><br>
Enter Company's Email: <input type="email" /> <br><br><br>
Enter Website URL: <input type="url" /> <br><br><br>
Enter company logo: <input type="file" /> <br><br><br>
Enter Date of Commencement: <input type="date" /> <br><br><br>
Enter Month of highest sale recorded: <input type="month" /> <br><br><br>
Enter today's date and time: <input type="datetime-local" /> <br><br><br>
Enter Company's Contact Mobile No.: <input type="tel" pattern="[0-9]{2}-[0-9]{10}"/>
<br><br><br>
<input type="Submit" Value="Submit Data"/>
<input type="Reset" Value="Clear Form"/> <br><br><br>
</form>
</td>
</tr>
</table>
</body>
</html>

Output of Code 5:
CODE 5.1: h2.html (obtained from code 3)
Table 3. 8
<html>
<head>
<meta name="aditi" contents="chapter1">
<meta name="class-xii" contents="advance web technology">
<meta name="keywords" contents="html5,css,js">
<meta http-equiv="refresh" content="5">
<title>Submitted</title>
</head>
<body>
<h1>Your Form is submitted.</h1>
</body>
</html>
Output of Code 5.1:

CODE 6: CSS Introduction – INTERNAL CSS
Table 3. 9
<html>
<head>
<meta name="css" contents="basic">
<title>CSS</title>
<style>
h1{
color: green;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
}
</style>
</head>
<body>
<h1>
Stream: SCIENCE
<P>Stream: Commerce</P>
</h1>
</body>
</html>
Output of Code 6:

HTML codes 1

Recommended

Recommended

More Related Content

Similar to HTML codes 1

Similar to HTML codes 1 (20)

More from Aditi Bhushan

More from Aditi Bhushan (20)

Recently uploaded

Recently uploaded (20)

HTML codes 1