1.
TEXT FORMATTING
SOURCE CODE:-
<html>
<head>
<title>Text Formatting</title>
</head>
<body>
<h3 align="center"><b><u>Text Formatting</u></b></h3>
The Text is <p>paragraph</p><br>
The Text is <pre>preformatted</pre><br>
The Text is <b>bold</b><br>
The Text is <i>italic</i><br>
The Text is <u>underline</u><br>
The Text is <big>big</big><br>
The Text is <small>small</small><br>
The Text is <strong>strong</strong><br>
The Text is <h1>heading1</h1><br>
The Text is <div>div</div><br>
The Text is <em>emphasis</em><br>
The Text is <strike>strike</strike><br>
</body>
</html>
OUTPUT:-
2.ABOUT MY FAMILY
SOURCE CODE:-
<html>
<head>
<title>About My Family</title>
</head>
<body>
<h1>My Father Name is <u><a href="father.html">KRISHNA</a></u></h1>
<h1>My Mother Name is <u><a href="mother.html">RADHA</a></u></h1>
<h1>My Sister Name is <u><a href="sister.html">MENAKA</a></u></h1>
<h1>My Brother Name is <u><a href="brother.html">RAHUL</a></u></h1>
</body>
</html>
OUTPUT:-
FATHER
SOURCE CODE:-
<html>
<head>
<title>My Father</title>
<body>
<img src="C:\Users\Public\Pictures\Sample Pictures\father.jpg" height="200"
width="200">
<p>He is my Father,a Philosopher.</p>
</body>
</html>
OUTPUT:-
MOTHER
SOURCE CODE:-
<html>
<head>
<title>My Mother</title>
<body>
<img src="C:\Users\Public\Pictures\Sample Pictures\mother.jpg" height="200"
width="200">
<p>She is my Mother,a Bank Manager.</p>
</body>
</html>
OUTPUT:-
SISTER
SOURCE CODE:-
<html>
<head>
<title>My Sister</title>
<body>
<img src="C:\Users\Public\Pictures\Sample Pictures\sister.jpg" height="200"
width="200">
<p>She is my Sister.She is studying.</p>
</body>
</html>
OUTPUT:-
BROTHER
SOURCE CODE:-
<html>
<head>
<title>My Brother</title>
<body>
<img src="C:\Users\Public\Pictures\Sample Pictures\brother.jpg" height="200"
width="200">
<p>He is my brother.</p>
</body>
</html>
OUTPUT:-
3.LISTS
SOURCE CODE:-
<html>
<head>
<title>Lists</title>
</head>
<body bgcolor="skyblue">
<h1 align="center">Illustrating the List of HTML</h1>
<h3>Operating System</h3>
<ul type="circle">
<li>Unix</li>
<li>Dos</li>
<li>Windows</li>
</ul>
<h3>Languages for Web Design</h3>
<ol type="1">
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
</ol>
<h3>Definition</h3>
<dl>
<dt><h4>HTML:</h4></dt>
<dd>HTML Stands for Hypertext Markup Language, a standardized system for
tagging text files to achieve font, colour, graphic, and hyperlink effects on World
Wide Web pages.</dd>
<dt><h4>CSS:</h4></dt>
<dd>CSS Stands for Cascading Style Sheets is a style sheet language used for
describing the presentation of a document written in a markup language.</dd>
<dt><h4>Javascript:</h4></dt>
<dd>Javascript is an object-oriented computer programming language commonly
used to create interactive effects within web browsers.</dd>
</dl>
</body>
</html>
OUTPUT:-
4.STUDENT DETAILS
SOURCE CODE:-
<html>
<head>
<title>Student Details</title>
</head>
<body>
<table border="3" align="center">
<caption><b><u>Student Details</u></b></caption>
<tr align="center">
<th>SNO</th>
<th>SName</th>
<th>Course</th>
<th>M1</th>
<th>M2</th>
<th>M3</th>
<th>Total</th>
</tr>
<tr align="center">
<td>1</td>
<td>Krishna</td>
<td>B.sc</td>
<td>75</td>
<td>89</td>
<td>16</td>
<td>180</td>
</tr>
<tr align="center">
<td>2</td>
<td>Rahul</td>
<td>B.com</td>
<td>25</td>
<td>73</td>
<td>61</td>
<td>159</td>
</tr>
<tr align="center">
<td>3</td>
<td>Menaka</td>
<td>B.C.A</td>
<td>93</td>
<td>80</td>
<td>63</td>
<td>236</td>
</tr>
</table>
</body>
</html>
OUTPUT:-
5.USING FRAMES
SOURCE CODE:-
<html>
<head>
<title>Using Frames</title>
<frameset cols="50%,50%">
<frame src="frame1.html" name="frame1">
<frame src="frame2.html" name="frame2">
</frameset>
</head>
</html>
FRAME1
SOURCE CODE:-
<html>
<body>
<h1>Contents:</h1>
<ol><li><a href="Animal.html" target="frame2">Animal</li>
<li><a href="Bird.html" target="frame2">Bird</li>
<li><a href="Flower.html" target="frame2">Flower</li></ol>
</body>
</html>
OUTPUT:-
ANIMAL
SOURCE CODE:-
<html>
<body>
<h1>Contents:</h1>
<img src="C:\Users\Public\Pictures\Sample Pictures\tiger.jpg" height="200"
width="200">
<h1>Tiger is our National Animal.</h1>
</body>
</html>
OUTPUT:-
BIRD
SOURCE CODE:-
<html>
<title>Peacock</title>
<body>
<img src="C:\Users\Public\Pictures\Sample Pictures\peacock.jpg" height="200"
width="200">
<h1>Peacock is our National Bird.</h1>
</body>
</html>
OUTPUT:-
FLOWER
SOURCE CODE:-
<html>
<title>Flower</title>
<body>
<img src="C:\Users\Public\Pictures\Sample Pictures\daisyflower.jpg"
height="200" width="200">
<h1>Bunches of Daisy Flower.</h1>
</body>
</html>
OUTPUT:-
6.HTML FORM
Source code:-
<html>
<head>
<title>Forms in HTML</title>
</head>
<body>
<h1><u><center>Student Bio-Data</center></u></h1>
<center>
<form>
Name : <input type ="text" name="myname"><br><br>
Email.ID : <input type="email" name="emailid"><br><br>
C.Number : <input type="number" name="number"><br><br>
Gender : <input type="radio" name="gender">Male
<input type="radio" name="gender">Female
<input type="radio" name="gender">Other <br><br>
Course : <select>
<option>B.sc</option>
<option>B.com</option>
<option>B.C.A</option>
</select><br><br>
Address:<br>
<textarea>Enter Here...</textarea><br><br>
Photo: <input type="file" name="file"><br><br>
<input type="checkbox" name="chkb1">I verified the above
information<br><br>
<input type="submit" name="button" onclick="submitted()" value="submit">
<script type="text/javascript">
function submitted()
{
alert("Your application is submitted");
}
</script>
</form>
</center>
</body>
</html>
OUTPUT:-
7.INTERNAL STYLE SHEET
SOURCE CODE:-
<html>
<head>
<title>Internal Style Sheet</title>
<style type="text/css">
h1.ISS
{
text-align:center;
font-family:Footlight MT;
background-color:pink;
}
h2
{
color:skyblue;
}
</style>
</head>
<body>
<h1 class="ISS">Internal Style Sheet</h1>
<h2>Hello World</h2>
<img src="C:\Users\Public\Pictures\Sample Pictures\Penguins.jpg" height="300"
width="300">
<p>It is Emperor Penguin and its Life Span is 20 Years.</p>
</body>
</html>
OUTPUT:-
8.EXTERNAL STYLE SHEET
SOURCE CODE:-
<html>
<head>
<title>External Style Sheet</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>External Style Sheet</h1>
<img src="C:\Users\Public\Pictures\Sample Pictures\Web Design.jpg"
height="200" width="200">
<h2><p>We Can design Web Pages by learning HTML,CSS,Javascript</p><h2>
</body>
</html>
STYLE.CSS:-
h1
{
text-align:center;
color:#00ff00;
text-decoration:underline;
}
h2
{
font-style:italic;
font-size:30;
}
OUTPUT:-
9.LAYERS
Source Code:-
<html>
<head>
<title>Layers</title>
<style type="text/css">
.first{
background-color:red;
z-index:1;
}
.second{
background-color:green;
left:50px;
top:-75px;
z-index:2;
}
.third{
background-color:#0000ff;
left:100px;
top:-150px;
z-index:3;
}
#same{
height:100px;
width:200px;
position:relative;
}
</style>
</head>
<body>
<div class="first" id="same"><h3>First Information</h3>
</div>
<div class="second" id="same"><h3>Second Information</h3>
</div>
<div class="third" id="same"><h3>Third Information</h3>
</div>
</body>
</html>
OUTPUT:-
10.ARITHMETIC OPERATIONS
SOURCE CODE:-
<html>
<head>
<title>Arithmetic Operation</title>
</head>
<body>
<script type="text/javascript">
var a,b,c,x;
a=parseInt(prompt("Enter the first value:"));
b=parseInt(prompt("Enter the second value:"));
x=prompt("1.Add,2.Sub,3.Mul,4.Div,5.Mod.....Enter your choice:");
document.write("Entered Values are : "+a+","+b+"<br>");
document.write("1.Addition<br>2.Substraction<br>3.Multiplication<br>4.Divisi
on<br>5.Modulo<br><br>");
document.write("Your option : "+x+"<br>");
switch(eval(x*1))
{
case 1: c=a+b;
document.write("Addition value is : "+c);
break;
case 2: c=a-b;
document.write("Substraction value is : "+c);
break;
case 3: c=a*b;
document.write("Multiplication value is : "+c);
break;
case 4: c=a/b;
document.write("Division value is : "+c);
break;
case 5: c=a%b;
document.write("Modulo value is : "+c);
break;
default: document.write("Invalid option...Enter correct option");
}
</script></body></html>
OUTPUT:-
11.STRING MANIPULATION
SOURCE CODE:-
<html>
<head>
<title>String Maniputlation</title>
</head>
<body>
<h3 align="Center">String Manipulation</h3>
<h3 align="center">********************</h3>
<script type="text/javascript">
var s1="Welcome";
var s2="Javascript";
document.write("The First String is "+s1+"<br>");
document.write("The Second String is "+s2+"<br>");
document.write("The Concatenation of the string is "+s1.concat(s2)+"<br>");
document.write("Character at 5th position in first string :"+s1.charAt(5)+"<br>");
document.write("The Length of the Second string :"+s2.length+"<br>");
document.write("UpperCase for the first string:"+s1.toUpperCase()+"<br>");
document.write("LowerCase for the second string:"+s2.toLowerCase()+"<br>");
document.write("Value of second string is :"+s2.valueOf()+"<br>");
document.write("Substring for the first string :"+s1.substring(3,7)+"<br>");
document.write("Index value for the s in second string is
:"+s2.indexOf("s")+"<br>");
</script>
</body>
</html>
OUTPUT:-
12.MATHEMATICAL FUNCTIONS
SOURCE CODE:-
<html>
<head>
<title>Mathematical Functions</title>
<script type="text/javascript">
function MathFunction()
{
document.write("<b><u>Mathematical Functions</u></b><br><br>");
document.write("Square Root value for 4 is ..."+Math.sqrt(4)+"<br>");
document.write("Absoulte value of 4.9 is ..."+Math.abs(4.9)+"<br>");
document.write("Ceil value of 9.1 is ..."+Math.ceil(9.1)+"<br>");
document.write("Floor value of 5.9 is ..."+Math.floor(5.9)+"<br>");
document.write("Round value of 10.5 is ..."+Math.round(10.5)+"<br>");
document.write("Log value for 1 is ..."+Math.log(1)+"<br>");
document.write("3 Power 4 is ..."+Math.pow(3,4)+"<br>");
document.write("Minimum value from(6,8) is ..."+Math.min(6,8)+"<br>");
document.write("Maximum value from(9,10) is ..."+Math.max(9,10)+"<br>");
document.write("SIN value for 5 is ..."+Math.sin(5)+"<br>");
document.write("COS value for 5 is ..."+Math.cos(5)+"<br>");
document.write("TAN value for 5 is ..."+Math.tan(5)+"<br>");
}
</script>
</head>
<body align="center" onLoad="MathFunction()">
</body>
</html>
OUTPUT:-
