Scribd
Upload
20 views

Awad

Uploaded by

chennaumadevi42
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
20 views

Awad

Uploaded by

chennaumadevi42
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 59

3)CREATING A TABLE:

CODE:
<html>
<body>
<h1 align="center">Time Table</h1>
<table border="5" cell spacing ="0" align="center">
<!--<caption> Time Table </caption>--->
<tr>
<td align="center" height="50" width="100"><br>
<b>Day/Period</b><br>
</td>
<td align="center" height="50" width="100">
<b>I<br> 9:25-10:15</b>
</td>
<td align="center" height="50" width="100">
<b>II<br> 10:15-11:05</b>
</td><td align="center" height="50" width="100">
<b><br> 11:05-11:20</b>
<td align="center" height="50" width="100">
<b>III<br> 11:20-12:05</b>
</td><td align="center" height="50" width="100">
<b>IV<br> 12:05-12:55</b>
<td align="center" height="50" width="100">
<b><br> 12:55-1:45</b>
</td><td align="center" height="50" width="100">
<b>V<br> 1:45-2:35</b>
</td><td align="center" height="50" width="100">
<b>VI<br> 2:35-3:25</b>
</td><td align="center" height="50" width="100">
<b>VII<br> 3:25-4:15</b>
</td>
</tr>
<tr>
<td align="center"height="50">
<b align="center"height="50">Monday</b></td>
<td align="center"height="50">SPM</td>
<td align="center"height="50">AI LAB</td>
<td rowspan="6" align="center"height="50">
<h2>B<br>R<br>E<br>A<br>K<br></h2>
</td>
<td colspan="2" align="center"height="50">AI LAB</td>
<td rowspan="6" align="center"height="50">
<h2>L<br>U<br>N<br>C<br>H<br></h2>
</td>
<td align="center"height="50">OT</td>
<td align="center"height="50">SPM</td>
<td align="center"height="50">CN</td>
</tr>
<tr>
<td align="center"height="50"><b>Tuesday</b></td>
<td align="center"height="50">AI</td>
<td align="center"height="50">CN</td>
<td align="center"height="50">FLAT</td>
<td align="center"height="50">OT</td>
<td colspan="3" align="center"height="50">SPORTS</td>
</tr>
<tr>
<td align="center"height="50"><b>Wednesday</b></td>
<td colspan="2" align="center"height="50">AWAD LAB</td>
<td align="center"height="50">AWAD LAB</td>
<td align="center"height="50">OT</td>
<td colspan="3" align="center"height="50">CN LAB</td>
</tr>
<tr>
<td align="center"height="50"><b>Thursday</b></td>
<td align="center"height="50">FLAT</td>
<td align="center"height="50">SPM</td>
<td align="center"height="50">AI</td>
<td align="center"height="50">CN</td>
<td align="center"height="50">OT</td>
<td align="center"height="50">FLAT</td>
<td align="center"height="50">AI</td>
</tr>
<tr>
<td align="center"height="50"><b>Friday</b></td>
<td align="center"height="50">CN</td>
<td align="center"height="50">FLAT</td>
<td align="center"height="50">OT</td>
<td align="center"height="50">SPM</td>
<td align="center"height="50">CN</td>
<td align="center"height="50">LIBRARY</td>
<td align="center"height="50">AI</td>
</tr>
<tr>
<td align="center"height="50"><b>Saturday</b></td>
<td align="center"height="50">CN</td>
<td align="center"height="50">FLAT</td>
<td align="center"height="50">SPM</td>
<td align="center"height="50">AI</td>
<td align="center"height="50">LIBRARY</td>
<td align="center"height="50">SPM</td>
<td align="center"height="50">OT</td>
</tr>
</table>
</body>
</html>
OUTPUT:
4)CREATING REGISTRATION FORM:
CODE:
<html>
<head>
<title>
Registration page
</title>
</head >
<body bgcolor = "lightskyblue">
<br>
<br>
<form>
<label>Firstname:</label>
<input type ="text " name = "first name " size = "15 "/> <br> <br>
<label >Middlename: </label >
<input type = "text " name = " middlename " size = "15"/> <br> <br>
<label>Lastname:</label>
<input type = "text" name = "last name" size = "15" /> <br> <br>
<label >
Course :
</label>
<select>
<option value = "course ">Course</option>
<option valve = "BCA">BCA</option>
<option valve = "BBA" > BBA </option>
<option valve = "B.tECH " > B.TECH </option>
<option value = "MBA " > MBA </option>
<option value = "MCA" > MCA </option>
<option valve = "M.Tech" > M.Tech </option>
</select >
<br>
<br>
<label>
Gender:
<><br>
<input type = "radio" name = "male" /> Male <br>
<input type = "radio" name = "Female"/> Female <br>
<input type = "radio" name = "other" /> other <br>
<label>
Phone :
</label>
<input type = "text" name = "country code" valve = "+91" size = "2 "/>
<input type = "text" name = "phone" size="10" /> <br> <br>
Address :
<br>
<textarea cols = "80" rows= "5" valve = "address">
</textarea>
<br> <br>
Email :
<input type = "email" id = "email" name = "email" /> <br>
<br> <br>
password :
<input type = "password" id = "pass" name = "pass"> <br>
<br> <br>
Re-type password :
<input type = "Password" id= "pass" name= "pass"> <br>
<br> <br>
<input type = "button" value = "submit"/>
</form>
</body >
</html>
OUTPUT:
5)
a) CREATING ORDERED LIST:
code:
<!DOCTYPE html>
<html>
<head>
<title>
Title of the document
</title>
</head>
<body>
<h3>A numbered list:</h3>
<ol>
<li>Peach</li>
<li>Apticot</li>
<li>Banana</li>
<li>Straberry</li>
</ol>
<h3>An alphhabet list:</h3>
<ol type="A">
<li>Peach</li>
<li>Apticot</li>
<li>Banana</li>
<li>Straberry</li>
</ol>
<h3>An alphhabet list(lowercase letters):</h3>
<ol type="a">
<li>Peach</li>
<li>Apticot</li>
<li>Banana</li>
<li>Straberry</li>
</ol>
<h3>A numbered list(Roman numerals):</h3>
<ol type="I">
<li>Peach</li>
<li>Apticot</li>
<li>Banana</li>
<li>Straberry</li>
</ol>
<h3>A numbered list(lowercase roman numerals):</h3>
<ol type="i">
<li>Peach</li>
<li>Apticot</li>
<li>Banana</li>
<li>Straberry</li>
</ol>
</body>
</html>
Output:
b) CREATING UNORDERED LIST:
code:
<!DOCTYPE html>
<html>
<head>
<title>Titl of the document</title>
</head>
<body>
<h2>Examples of Unordeeres lists:</h2>
<ul style="list-style-type: square;">
<li>Cold drinks</li>
<li>Hot drinks</li>
<li>Ice creams</li>
</ul>
<ul style="list-style-type: disc;">
<li>Coco-Cola</li>
<li>Fanta</li>
<li>Ice Tea</li>
</ul>
<ul style="list-style-type:circle;">
<li>Coco-Cola</li>
<li>Fanta</li>
<li>Ice Tea</li>
</ul>
</body>
</html>
Output:
6)
a)CREATING HTML DOCUMENT:
Code:
<!DOCTYPE html>
<html>
<head>
<title>Title of thw document</title>
<meta http-equiv="content-type" content="text/html:charset=UTF-8"/>
<style>
html,body{
height: 100%;
}
body{
display: flex;
flex-wrap: wrap;
margin: 0;
}
header,menu,footer{
display: flex;
align-items: center;
width: 100%;
}
header,menu{
justify-content: flex-end;
height: 60px;
background: #1c87c9;
color: #fff;
}
h2{
margin: 008px;
}
ul,li{
display: inline-block;
padding:010px ;
list-style: none;
}
aside{
flex:0.4;
padding-left: 165px;
border-left: 1px solid#666;
}
section{
flex: 1;
padding-right:15px ;
}
footer{
padding: 010px;
background: #ccc;
}
</style>
</head>
<body>
<header class="header-menu">
<nav>
<ul>
<li>Menu item 1</li>
<li>Menu item 2</li>
<li>Menu item 3</li>
</ul>
</nav>
</header>
<section>
<article>
<header>
<h2 >Learn HTML</h2>
<small>Hyper Text Markup Language</small>
</header>
<p>
Our free HTML tutorial for begineers will teach you HTML and how to create your own website from stratch. HTML
isn't difficult, so hoping you will enjoy learning.</p>
</article>
<article>
<header>
<h2>Start Quiz "HTML Basic"</h2>
<small>You can test your HTML skills with w3docs Quiz.</small>
</header>
<p>
You will get 5% for each correct answer for single chioce questions. On multiple choice question it might be up to
5%. At the end of thee Quiz, your score will be displayed. Maximum score is 100%.
</p>
</article>
</section>
<aside>
<h2>Our Books </h2>
<p>HTML</p>
<p>CSS</p>
</aside>
<footer>
<small>Company © W3docs. All rights reserved.</small>
</footer>
</body>
</html>
Output:
b)CREATING BLOCK LEVEL ELEMENTS:
Code:
<!DOCTYPE html>
<html>
<body>
<p style="border:1px solid black"> Hello World</p>
<div style="border: 1px solid black;">Hellow World</div>
<p>The P and the DIV elements are both block elements and they will always start on a new line and take up to the left and
right as far as it can.</p>
</body>
</html>
Output:
7)PROFILE PAGE:
Code:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="card">
</div class="left-container">
<img src="C:\Users\navee\OneDrive\Desktop\Profile-PNG-Photo.png" alt="profile image" width="100px" height="100px">
<h2 class="gradienttext"> NAVEEN SAI</h2>
<p>web developer</p>
</div>
<div class="right-container">
<h3 class="gradienttext"> Profile details</h3>
<table>
<tr>
<td>Name:</td>
<td>NAVEEN SAI</td>
</tr>
<tr>
<td>Age:</td>
<td>20</td>
</tr>
<tr>
<td>Mobile:</td>
<td>+91 9030xxxxxx</td>
</tr>
<tr>
<td>Email:</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Address:</td>
<td>123 Main st, Anytown,USA</td>
</tr>
</table>
<div class="credit">Made with<span style="color:tomato;font-size:20px;"> </span>by<a href="https://
www.learningrobo.com/">NAVEEN SAI</a></div>
</div>
</body>
</html>
Output:
8)PROFILE CARD:
Code:
<html>
<head>
<link rel="stylesheet" href="https:// cdnjs.coludflare.com/ajax/fontawesome/4.7.0/css/font-awesome.min.css">
<style>
card{
box-shadow: 0 4px 8px 0 rgba(0,0,0,0,2);
max-width: 300px;
margin: auto;
text-align: center;
font-family: arial;
}
title{
color: gray;
font-size: 18px;
}
button{
border: none;
outline: 0;
display: inline-block;
padding: 8px;
color: white;
background-color: #000;
text-align: center;
cursor: pointer;
width: 100%;
font-size: 18px;
}
a{
text-decoration: none;
font-size: 22px;
color: black;
}
button:hover,a:hover{
opacity: 0.7;
}
</style>
</head>
<body>
<h2 style="text-align: center;"> User Profile Card</h2>
<div class="card">
<img src="C:\Users\navee\OneDrive\Desktop\Profile-PNG-Photo.png" style="width: 100px;height: 100px;"
align="center">
<h3>NAVEEN SAI</h3>
<p class="title">3RD YEAR,Dept of CSE</p>
<p>TADIPATRI ENGINEERING COLLEGE</p>
<div style="margin: 24px 0;">
<a href="#"><i class="fa fa-dribbble"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-linkedin"></i></a>
<a href="#"><i class="fa fa-facebook"></i></a>
</div>
<p><button>Contact</button></p>
</div>
</body>
</html>
Output:
9)BIO-DATA FORM:
Code:
<html>
<head><title>Bio-Data</title>
<style>
h1{
text-align: center; text-decoration: underline;
}
</style>
</head>
<body>
<h1>Bio Data Form</h1>
<form>
<fieldset>
<legend>personal:</legend>
<table id="to2" align="center">
<tr><td><label id="name-lable" for="name" >Name:</label></td>
<td><input autofocus type="text" name="name" id="name" class="input-field" placeholder="enter your name"
required></td></tr>
<tr><td><label id="fname-lable" for="fname" >Father's Name:</label></td>
<td><input autofocus type="text" name="fname" id="fname" class="input-field" placeholder="enter your father's
name" required></td></tr>
<tr><td><label id="mname-lable" for="mname" >Moyther's Name:</label></td>
<td><input autofocus type="text" name="mname" id="mname" class="input-field" placeholder="enter your
mother's name" required></td></tr>
<tr><td><label id="email-lable" for="email" >Email:</label></td>
<td><input type="email" name="email" id="email" class="input-field" placeholder="enter your email"></td></tr>
<tr><td><label id="number-lable" for="age" >Age:</label></td>
<td><input type="number" name="age" id="number" min="1" max="125" class="input-field" placeholder="Age"
required></td></tr>
<tr><td><label id="dob-lable" for="dob" >DOB:</label></td>
<td><input type="date" name="dob" id="dob" class="input-field" required></td></tr>
<tr><td><label for="department" >Department:</label></td>
<td>
<select id="dropdown" name="department" class="dropdown">
<option disabled value> Select an option</option>
<option value="it">IT</option>
<option value="cse">CSE</option>
<option value="ece">ECE</option>
<option value="mech">MECH</option>
<option value="civil">MECH</option>
<option value="other">Other</option>
</select>
</td>
</tr>
</table>
</fieldset>
<table id="to3" align="center"><tr><td>
<label for="gender">Gender:</label>
<ul style="list-style: none;">
<li class="radio"><label><input name="radio-buttons" value="male" type="radio" class="user
ratings">Male</label></li>
<li class="radio"><label><input name="radio-buttons" value="female" type="radio" class="user
ratings">Female</label></li>
<li class="radio"><label><input name="radio-buttons" value="others" type="radio" class="user
ratings">Others</label></li>
</ul>
</td></tr>
<tr><td>
<label for="address">Address:</label></td>
<td><textarea id="comments" class="input-field" style="height: 50px;resize:vertical;"name:address placeholder="Enter
your address here......."></textarea></td></tr>
<tr><td><label for="pincode">Pincode:</label></td>
<td><input type="number" name="pincode" id="idpincode" class="input-field" style="height: 20px; resize:vertical"
placeholder="6-digits number"></td></tr>
<tr><td><label for="pincode">Phone number:</label></td>
<td><input type="number" name="phone number" id="idphonenumber" class="inputfield" style="height: 20px;
resize:vertical;" placeholder="10 digits of number"></td></tr>
<tr><td><label for="language">Language known:</label>
<ul id="language">
<li class="checkbox"><label><input name="prefer" value="english" type="checkbox" class="user
ratings">English</label></li>
<li class="checkbox"><label><input name="prefer" value="tamil" type="checkbox" class="user
ratings">Tamil</label></li>
<li class="checkbox"><label><input name="prefer" value="hindi" type="checkbox" class="user
ratings">Hindi</label></li>
<li class="checkbox"><label><input name="prefer" value="malayalam" type="checkbox" class="user
ratings">Malayalam</label></li>
<li class="checkbox"><label><input name="prefer" value="kannada" type="checkbox" class="user
ratings">Kannada</label></li>
<li class="checkbox"><label><input name="prefer" value="telugu" type="checkbox" class="user
ratings">Telugu</label></li>
</ul>
</td></tr>
<tr><td><button id="submit" type="submit">Submit</button></td>
<td><button id="reset" type="reset">Reset</button></td></tr>
</table>
</form>
</body>
</html>
Output:
10)
a)CREATING TABLE:
Code:
<!DOCTYPE html>
<html>
<head>
<title>
HTML Table
</title>
</head>
<body>
<table border="1" width="100%">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>john</td>
<td>10000</td>
</tr>
<tr>
<td>mark</td>
<td>10000</td>
</tr>
</table>
</body>
</html>
Output:
b)COLSPAN:
Code:
<!DOCTYPE html>
<html>
<head>
<title>Colspan</title>
</head>
<body>
<h2>Cell that spans two columns</h2>
<p>TO make a cell spans more than one column,Use the colspan attribte.</p>
<table style="width: 100%;">
<tr>
<th colspan="2">Name</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>43</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>57</td>
</tr>
</table>
</body>
</html>
Output:
c)ROWSPAN:
Code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Cell that sans two rows</h2>
<p>To make a cell span more than one row, use the rowspan attribute</p>
<table style="width:100%">
<tr>
<th>Name</th>
<td>Jill</td>
</tr>
<tr>
<th rowspan="2">Phone</th>
<td>555-1234</td>
</tr>
<tr>
<td>555-8745</td>
</tr>
</table>
</body>
</html>
Output:
11)CREATING SAMPLE WEBDEVELOPMENT TEMPLATE:
Code:
<!DOCTYPE html>
<html>
<head>
<title>Simple Web Development Template</title>
<style>
*{
margin:0;
padding:0 ;
}
.navbar{
display: flex;
align-items: center;
justify-content: center;
position: sticky;
top: 0;
cursor: pointer;
}
.background{
background: black;
background-blend-mode: darken;
background-size: cover;
}
.logo{
display: flex;
justify-content: center;
align-items: center;
}
.logo img{
width: 180px;
border-radius: 50px;
}
.nav-list li{
list-style: none;
padding: 26px 30px;
}
.nav-list li a:hover{
color: gray;
}
.rightnav{
width: 30%;
text-align: right;
}
#search{
padding: 5px;
font-size: 17px;
border: 2px solid gray;
border-radius: 2px;
}
.firstsection{
background-color: green;
height: 200px;
}
.secondsection{
background-color: green;
height: 400px;
}
.box-main{
display: flex;
justify-content: center;
align-items: center;
color: black;
max-width: 80%;
margin: auto;
height: 50%;
}
.firsthalf{
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
.secondhalf{
width: 30%;
}
.seconghalf img{
width: 70%;
border: 4px solid white;
border-radius: 150px;
display: block;
margin: auto;
}
.text big{
font-family: piazzolla,serif;
font-weight: bold;
font-size: 35px;
}
.text small{
font-size: 18px;
}
.btn{
padding: 8px 20px;
margin: 7px 0;
border: 2px solid white;
border-radius: 8px;
background: none;
color: white;
cursor: pointer;
}
.btn-sm{
padding: 6px 10px;
vertical-align: middle;
}
.section{
height: 120px;
display: flex;
align-items: center;
justify-content: center;
max-width: 90%;
margin: auto;
}
.section-left{
flex-direction: row-reverse;
}
.paras{
padding: 0px 65px;
}
.thumbnail img{
width: 250px;
border: 2px solid black;
border-radius: 26px;
margin-top: 19px;
}
.center{
text-align: center;
}
.footer{
text-align: center;
padding: 30px 0;
font-family: "ubuntu",sans-serif;
display: flex;
justify-content: center;
color: white;
}
</style>
</head>
<body>
<nav class="navbar background">
<ul class="nav-list">
<div class="logo">
<img src="D:\csp\th.jpeg">
</div>
<li><a href="#web">Web Technology</a></li>
<li><a href="#program">C Programming</a></li>
<li><a href="#course">Courses</a></li>
</ul>
<div class="right now">
<input type="text" name="search" id="search">
<button class="btn btn.sm">Search</button>
</div>
</nav>
<section class="firstsection">
<div class="box-main">
<div class="first-half">
<h1 class="text-big" id="web">Web Technology</h1>
<p class="text-small"> HTML stands for Hyper Text Markup Language. It is used to design webpages using a markup
language. HTML is the combination of Hypertext and Markup Language. Hypertext define the link b/w the web pages. A
markup language is used to define the text document within tag which defines the structure of web pages. HTML language that
is used by the browser to manipulate text, images and other content to display in the required format.</p>
</div>
</div>
</section>
<section class="second section">
<div class="box-main">
<div class="first-half">
<h1 class="text-big" id="program"> C programming</h1>
<p class="text-small"> C is a procedural programming language. It was initially developed by Dennis Ritchie as a
system programming language to write operating system. The main features of C language include loow-level ccess to memory.
Simple set of keywords and clean style, these features make C language suitable for system programming like operating system
or compiler development.</p>
</div>
</div>
</section>
<section class="section">
<div class="paras">
<h1 class="section Tag Text-big">Java</h1>
<p class="section sub Tag text-small">Java has been on of the most popular programming language for many years.
Java is object oriented. However it is not considered as pure object oriented as it provides support for primitive data types (like
int,char,etc). The Java codes are first compiled into byte code(machine independent code). Then the byte code is run on Java
Virtual Machine(JVM) regaurdless of the underlaying architecture.</p>
</div>
<div class="thumbnail">
<img src="D:\csp\th.jpeg" alt="laptop image">
</div>
</section><br><br><br><br><br><br><br><br>
<footer class="back ground" >
<p class="text-footer" text-align="center">
Copyright© - All rights are reserved
</p>
</footer>
</body>
</html>
Output:
12)CREATING A CALCULATOR:
Code:
<html>
<head>
</head>
<body>
<script>
function insert(num){
document.form.textview.value = document.form.textview.value + num;
}
function equal(){
var exp = document.form.textview.value;
if(exp){
document.form.textview.value = eval(exp);
}
}
function clearCalc(){
document.form.textview.value = "";
}
</script>
<center>
<form name="form">
<input type="text" name="textview"/><br>
<input type="button" value="1" onclick="insert(1)"/>
<input type="button" value="2" onclick="insert(2)"/>
<input type="button" value="3" onclick="insert(3)"/>
<input type="button" value="+" onclick="insert('+')"/><br><br>
<input type="button" value="4" onclick="insert(4)"/>
<input type="button" value="5" onclick="insert(5)"/>
<input type="button" value="6" onclick="insert(6)"/>
<input type="button" value="-" onclick="insert('-')"/><br><br>
<input type="button" value="7" onclick="insert(7)"/>
<input type="button" value="8" onclick="insert(8)"/>
<input type="button" value="9" onclick="insert(9)"/>
<input type="button" value="*" onclick="insert('*')"/><br><br>
<input type="button" value="0" onclick="insert(0)"/>
<input type="button" value="/" onclick="insert('/')"/>
<input type="button" value="=" onclick="equal()"/>
<input type="button" value="C" onclick="clearCalc()"/>
</form>
</center>
</body>
</html>
Output:
13)GRAPHS:
Code:
<!DOCTYPE html>
<html>
<body align="center">
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow">
</svg>
</body>
</html>

<!DOCTYPE html>
<html>
<body>
<svg width="200" height="200">
<polygon points="100,10 120,78 190,78 135,120 155,190 100,150 45,190 65,120 10,78 80,78"
style="fill:yellow;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
</body>
</html>

<!DOCTYPE html>
<html>
<body>
<svg height="130" width="500">
<defs>
<lineargradient id="grad" x1="0%" y1="05%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color: rgb(255,255, 05);stop-opacity :1px;"/>
</lineargradient>
</defs>
<elipse cx="100" cy="70" x%="85" y%="55" fill="uv(#grad1)"/>
<text fill="#++++++" font-size="45" font-family="veidana" x="50" y="86">SVG</text>
sorry, your browser does not support in lines svg
</svg>
</body>
</html>
Output:
14)LOGO:
Code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewpoint" content="width=device-width" initial-scale="1.0">
<title>logo example</title>
<style>
body{
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding:0;
background-color: rgb(0, 255, 191)
}
header{
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
h1{
margin: 0;
font-size: 100px;
}
</style>
</head>
<body>
<header>
<h1>
My Logo
</h1>
<img src="D:\Pictures\wp4586808.jpg" style="width: 50%;">
</header>
</body>
</html>
Output:
15)PIECHART:
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> <!-- Corrected charset from VTF-8 to UTF-8 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pie Chart Example</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <!-- Corrected invalid src link -->
</head>
<body align="center">
<canvas id="myPieChart" width="125" height="125"></canvas> <!-- Fixed ID formatting -->
<script>
document.addEventListener('DOMContentLoaded', function() { // Corrected event listener and syntax
var ctx = document.getElementById('myPieChart').getContext('2d'); // Fixed getElementById and getContext
var myPieChart = new Chart(ctx, {
type: 'pie',
data: {
labels: ['Red', 'Blue', 'Yellow'],
datasets: [{
label: 'My Pie Chart',
data: [300, 50, 100],
backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'],
}]
},
options: {
responsive: true
}
});
});
</script>
</body>
</html>
Output:
16)CLOCK:
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Digital Clock</title>
<style>
body{
font-family: Arial, Helvetica, sans-serif;
text-align: center;
margin-top: 100px;
font-size: 2rem;
}
</style>
</head>
<body>
<div id="clock"></div>
<script>
function updateClock() {
var now = new Date();
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds();

if (hours < 10) {


hours = "0" + hours;
}
if (minutes < 10) {
minutes = "0" + minutes;
}
if (seconds < 10) {
seconds = "0" + seconds;
}

var timeString = hours + ":" + minutes + ":" + seconds;


document.getElementById('clock').innerHTML = timeString;
}

setInterval(updateClock, 1000);
</script>
</body>
</html>
Output:
17)ONLINE BOOKSTORE:
Code:
Home.html
<html>
<frameset rows="40%,60%">
<frame src="top.html" scrollong="no" Name="topframe">
<frameset cols="15%,20%">
<frame src="left.html" scrolling="no" Name="leftframe"></frame>
<frame src="right.html" scrolling="no" Name="rightframe"></frame>
</frameset>
</frame>
</frameset>
</html>

Top.html
<html>
<head>
<title>Top Frame</title>
</head>
<body bgcolor="yellowgreen">
<img src="logo.png" width="125" height="115" align="left">
<img src="cse.png" width="125" height="115" align="right">
<center>
<marquee bgcolor="yellow" width="650" behaviour="Alternative">
<font face="Brush Script Mt" size="8" color="green"><b><i>online book store</i></b></font>
</marquee><br>
<font face="Brush Script" size="6" color="white"><b>created & maintained by CSE</b></font>
</center>
<br>
<table width="106%" height="50%" cellspacing="10">
<tr align="center">
<td><a href="home.html" target="parent">
<font face="Brushscript" size="6" color="navy">HOME</font>
</a></td>
<td><a href="login.html" target="rightframe">
<font face="Brushscript" size="6" color="navy">LOGIN</font>
</a></td>
<td><a href="catalouge.html" target="rightframe">
<font face="Brushscript" size="6" color="navy">CATALOGUE</font>
</a></td>
<td><a href="registration.html" target="rightframe">
<font face="Brushscript" size="6" color="navy">REGISTERATION</font>
</a></td>
</tr>

Left.html
<html>
<body align="center" bgcolor="bisque"><br>
<a href="cse.html" target="rightframe"><font size="6">CSE</font></a><br><br>
<a href="ece.html" target="rightframe"><font size="6">ECE</font></a><br><br>
<a href="eee.html" target="rightframe"><font size="6">EEE</font></a><br><br>
<a href="mech.html" target="rightframe"><font size="6">MECH</font></a><br><br>
</body>
</html>
Right.html
<html>
<body>
<center>
<img src="book.jpg" height="170"><br>
<font face="Brushscript" size="5" color="blue">
<h1><b>Welcome to the online book store</b></h1>
</font>
<font face="BrushscriptMT" size="5" color="red">
<h2><b>"A huge collection of engineering E-books"</b></h2>
</font>
</center>
</body>
</html>

Login.html
<html>
<body color="pink">
<base fontface="Combria" size="4"><br>
<center>
<img src="login.jpg" width="385" height="135">
<br>
<font face="BrushscriptMT" size="7" color="purple">
<b>Enter login details:</b>
</font>
</center>
<form name="fr" method="post" action="right.html">
<table align="center" width="100" height="150" cellspacing="15">
<tr><td><b>login:</b></td>
<td><input type="text" name="t1"></td>
</tr>
<tr>
<td><b>Password:</b></td>
<td><input type="password" name="t2"></td>
</tr>
<tr align="center">
<td><input type="submit" name="b1" value="submit"></td>
<td><input type="reset" name="b2" value="reset"></td>
</tr>
</table>
</form>
</body>
</html>

Catlouge.html
<html>
<head>
</head>
<body>
<form action="order.html">
<table border="1" width="100">
<tr>
<td>
<img src="wt.jpg" width="100" height="100">
</td>
<td>Book=web technologies<br>Author:Uttam K.Roy<br>Publication:Oxford university
Press</td>
<td>531&Absp:Znbs:&nbsp;</td>
<td><input type="submit" value="Add to cart"></td>
</tr>
<tr>
<td><img src="php.jpg" width="100" height="100"></td>
<td>Book:PHP & My SQL web development<br>Author:LAke Welling & LUra
THompson<br>Publication:PERSON</td>
<td>8984 nbsp:&nbsp:&nbsp;</td>
<td><input type="submit" value="Add to cart"></td>
</tr>
</table>
</form>
</body>
</html>

Registration.html
<html>
<head><title>Registration Form</title></head>
<body bgcolor="#EFFF8">
<center><font color="blue" size="6" face="axial">Registration form</font></center><br>
<form action="right.html">
First Name(min 6 characters)<font color="red">*</font>
<input type="text" id="firstname"><br><br>
Last Name<font color="red">*</font>
&nbsp;&nbsp;&nbsp;
<input type="text" id="Email"><br>
<font color="red">(one emailonly):</font>&nbsp;&nbsp;&nbsp;
<font color="redblue">E.g. [email protected]</font><br><br>
Password(min 6 characters):<font color="red">*</font>&nbsp;&nbsp;&nbsp;
<input type="password" id="pass"><br><br>
Address:<font color="red">*</font>&nbsp;&nbsp;&nbsp;
<textarea rows="2" cols="20" id="dddr"></textarea>
<br><br>
MObile.NO:<font color="red">*</font>&nbsp;&nbsp;&nbsp;
<input type="text" id="Mobile no"><br>
Gender:<input type="radio" name="gender">Male
<input type="radio" name="gender">Female<br><br>
<input type="submit" value="submit">
<input type="reset" value="reset">
</form>
</body>
</html>

cse.html
<html>
<head><title>CSE</title></head>
<body bgcolor="cyan">
<center><font color="blue"><h1>Computer Science and Engineering</h1></font></center>
<br>
<table align="center">
<tr>
<td>Text Book</td>
<td>
<select>
<option value="Select the book" selected>Select the book</option>
<option value="CFDS">CFDS</option>
<option value="ADS">ADS</option>
<option value="Java">Java</option>
<option value="Oracle">Oracle</option>
<option value="MS SQL Server">MS SQL Server</option>
<option value="My SQL">My SQL</option>
</select>
</td>
</tr>
<tr>
<td>Quantity</td>
<td><input type="text" id="q"></td>
</tr>
<tr>
<td></td>
<td>
<form method="post" action="order.html">
<input type="submit" value="ok">
</form>
</td>
</tr>
</table>
<center>
<pre>cost of one book is"500"+shipping"100"</pre>
</center>
</body>
</html>

ece.html
<html>
<body bgcolor="plum">
<h1><font color="blue">Electronics and Communication Engineering</font></h1>
<h2>
<ul>
<li>Digital Circuits</li>
<li>Signals and Systems</li>
<li>Digital Communication</li>
</ul>
</h2>
</body>
</html>

eee.html
<html>
<body bgcolor="plum">
<h1><font color="blue">Electrical and Electronics Engineering</font></h1>
<h2>
<ul type="square">
<li>Concepts in Electrical Engineering</li>
<li>Introduction to Engineering</li>
<li>Electrical Power</li>
</ul>
</h2>
</body>
</html>
mech.html
<html>
<body bgcolor="plum">
<h1><font color="blue">Mechnacial Engineering</font></h1>
<h2>
<ul type=10">
<li>Theory of Machines</li>
<li>Automaata and Robotics</li>
<li>Engineering fluid mechanics</li>
</ul>
</h2>
</body>
</html>

Order.html
<html>
<head><title>Order Confirmation</title></head>
<body bgcolor="cyan">
<center>
<pre><strong>Your order is confirmed</strong></pre>
<h2><b>THANK YOU.... VISIT AGAIN</b></h2>
</center>
</body>
</html>
Output:
18)PAGE FOR FINDING CAPITALS OF CITIES:
Code:
<html>
<head>
<title>City Capitals</title>
</head>
<style>
body {
color: red;
text-align: center;
}
.textbox1 {
color: blue;
font-size: 30px;
font-weight: bold;
}
</style>
<body>
<center>
<h1>Select the country name to find its capital</h1>
<form name="myform">
Select country:
<select name="country" id="sbox1" onchange="myFunction()" required>
<option value=""></option>
<option value="New Delhi">India</option>
<option value="Canberra">Australia</option>
<option value="Washington">America</option>
<option value="Berlin">Germany</option>
</select><br><br>
Capital: <input type="text" class="textbox1" id="sbox2" readonly>
</form>
</center>

<script>
function myFunction() {
var a = document.getElementById("sbox1").value;
document.getElementById("sbox2").value = a;
}
</script>
</body>
</html>
Output:
19)PAGE FOR SELF INTRO AND HOBBIES:
Code:
<html>
<head>
<title>Myself</title>
</head>
<body>
<h1>Hobbies and personal details</h1>
<p>My name is ______________.
<br> I am ______________ years old.
<br> I study in class ____________.
<br> My college name is ____________________.
<br> My father name is ___________________.
<br> He is in Army.
<br> My mother name is ___________________.
<br> She is house holder.
<br> My favourite subject is ______________.
<br> I want to become a/an ________________.
</p>
</body>
</html>
Output:
20)WEBPAGE FOR FRAMES:
Code:
Main.html
<html>
<head>
<title>online food order</title>
</head>
<frameset cols="20%,80%">
<frame src="list.html"></frame>
<frameset rows="80%,20%">
<frame src="table.html"></frame>
<frame src="hyperlink.html"></frame>
</frameset>
</frameset>
</html>

List.html
<html>
<body bgcolor="yellow">
<br><br>
<h2>Soup and Momos</h2>
<br>

<h2>Soups</h2>
<ul>
<li>Mushroom Soup</li>
<li>Vegetable Soup</li>
<li>Chicken Soup</li>
<li>Paya Soup</li>
<li>Crab Soup</li>
</ul>

<br>
<h2>Momos</h2>
<ul>
<li>Veg Momo</li>
<li>Chicken Momo</li>
</ul>
</body>
</html>

Table.html
<html>
<head>
<title>Table</title>
<style>
table, th, td {
border: 1px solid black;
padding: 15px;
border-collapse: collapse;
}
</style>
</head>
<body bgcolor="yellow">
<table align="center">
<tr>
<th colspan="2">************ PRICE *************</th>
</tr>
<tr>
<th>Names</th>
<th>Price</th>
</tr>
<tr style="color: white; text-align: center; background: black;">
<td colspan="2">Soups</td>
</tr>
<tr>
<td>Mushroom Soup</td>
<td>25/-</td>
</tr>
<tr>
<td>Vegetable Soup</td>
<td>25/-</td>
</tr>
<tr>
<td>Chicken Soup</td>
<td>35/-</td>
</tr>
<tr>
<td>Paya Soup</td>
<td>45/-</td>
</tr>
<tr>
<td>Crab Soup</td>
<td>45/-</td>
</tr>
<tr style="color: white; text-align: center; background: black;">
<td colspan="2">Momos</td>
</tr>
<tr>
<td>Veg Momos</td>
<td>60/-</td>
</tr>
<tr>
<td>Chicken Momos</td>
<td>70/-</td>
</tr>
</table>
</body>
</html>

Hyperlink.html
<html>
<head>
<title>Hyperlink</title>
</head>
<body bgcolor="lightgray">
<table align="center">
<tr>
<td>
<img src="D:\csp\th (1).jpeg" height="60px" width="40px" alt="Momo's Image">
</td>
<td>
<a
href="https://www.google.co.in/maps/place/Momofeast+momos%26rolls%26shawarma/@17.9175485,83.261353
6,10.22z/data=!4m10!1m2!2m1!1ssouops+and+momos+shops+!3m6!1s0x3a3945ebc8fef31b:0x847c3654e3cb546
0!8m2!3d17.728668!4d83.3399044!15sChRzb3VwcyBhbmQgbW9tb3Mgc2hvcFoWIhRzb3VwcyBhbmQgbW9tb3Mg
c2hvcJIBD21vbW9fcmVzdGF1cmFudJoBI0NoWkRTVWhOTUc5blMwVkpRMEZuU1VReU5XOXlNRlJCRUFF4AEA!16s%2
Fg%2F11rn0ccmx2?entry=ttu&g_ep=EgoyMDI0MDkxMS4wIKXMDSoASAFQAw%3D%3D">
<h2>STVS Soups & Momos</h2>
</a>
</td>
</tr>
</table>
</body>
</html>
Output:
21)WEBPAGE FOR GEOLOCATION COORDINATES:
Code:
<!DOCTYPE html>
<html>
<body>
<h1>HTML Geolocation</h1>
<p>Click on the button to get your coordinates:</p>
<button onclick="getLocation()">Try it</button>
<p id="demo"></p>

<script>
const x = document.getElementById("demo");

function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition, showError);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}

function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}

function showError(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
x.innerHTML = "User denied the request for Geolocation.";
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML = "Location information is unavailable.";
break;
case error.TIMEOUT:
x.innerHTML = "The request to get user location timed out.";
break;
case error.UNKNOWN_ERROR:
x.innerHTML = "An unknown error occurred.";
break;
}
}
</script>
</body>
</html>
Output:
22)LETTER FORMAT USING HTML:
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width" initial-scale="10">
<title>Letter example</title>
<style>
body{
font-family: Arial, Helvetica, sans-serif;
height:16px;
margin: 20px;
}
leaders{
text-align: center;
margin-bottom: 20px;
}
main{
margin-bottom: 40px;
}
footer{
text-align: center;
font-style: italic;
}
</style>
</head>
<header>
<h1>Letter example</h1>
<p>sent on november 29,2023</p>
<p>Dear[Recipients name]</p>
<p>I hope this letter finds you in good health and high sprits, I am writing to formally request a leave
of absence from school for [number of days], starting from[starting date] to [end date], I am [your full
name], a [your grade/class] student in [your section/class],</p>
<p>The reason for my leave is[ provide a brief explanation of the reason for your leave].I understand
the importance of regular attendence and I'm commited to making of for any missed assignment or
lessons during my absence. I will make every effort to ensure minimal description to my studies</p>
<p>Thankyou for your time and attention. I look forward to hearing from you soon.</p>
<p>sincerely<br>
[your name]</p>
</header>
<footer>
<p>This is a sample letter created using HTML.</p>
</footer>
</html>
Output:

You might also like