<html>
<head>
<title>Internal Script</title>
<script type="text/javascript">
function internal(){
alert("Internal Script");
}
</script>
</head>
<body>
<h2>Example for Internal script</h2>
<input type="button"
onclick="internal();
"value="Click here" />
</body>
</html>
 |
| sk.1 |
 |
| sk.2 |
<html> <head> <title>External Script</title> <script src="/html/External.js" type="text/javascript"/> </script> </head> <body> <h2>Example for External Script</h2> <input type="button" onclick="External(); " value="Click here" /> </body> </html>
 |
| sk. |
<html> <body> <iframe width="100%" height="300px" src="d_iframe.htm" name="iframe_ex"> </iframe> <a href="http://www.google.com /demo12" target="iframe_ex"> IFRAME-TARGET</a> <p>When the target of a link matches the name of an iframe, the link will open in the iframe.</p> </body> </html>
OUTPUT:-
 |
| sk.1 |
 |
| sk.2 |
<html> <body> <iframe src="edit_exiframe.htm" style="border:4px outset red"> </iframe> </body> </html>
OUTPUT:-
 |
| sk. |
<html> <body> <iframe src="example_iframe.htm" width="200" height="200"></iframe> </body> </html>
 |
| sk. |
<html> <head> <title>Layout using Tables</title> </head> <body> <table width="100%" border="0"> <tr> <td colspan="2"bgcolor="steelblue"> <center> <h1>BIG CATS</h1> </center> </td> </tr> <tr valign="top"> <td bgcolor="#48D1CC" width="50"> <b>Main Menu</b><br /> Tiger<br /> Lion<br /> Cheetah </td> <td bgcolor="#eee" width="100" height="200"> The tiger (Panthera tigris) is the largest cat species </td> </tr> <tr> <td colspan="2"bgcolor="steelblue"> <center> Copyright 2019 </center> </td> </tr> </table> </body> </html>
 |
| sk. |
<html>
<head>
<style>
#header {
background-color:steelblue;
color:white;
text-align:center;
padding:5px;
}
#nav {
line-height:30px;
background-color:#48D1CC;
color:white;
height:350px;
width:110px;
float:left;
padding:5px;
}
#section {
width:350px;
float:left;
padding:10px;
}
#footer {
background-color:steelblue;
color:white;
clear:both;
text-align:center;
padding:5px;
}
</style>
</head>
<body>
<div id="header">
<h1>BIG CATS</h1>
</div>
<div id="nav">
Tiger<br>
Lion<br>
Cheetah<br>
</div>
<div id="section">
<h2>Tiger</h2>
<p>
The tiger (Panthera tigris)
is the largest cat species,
reaching a total body length
of up to 3.38 m (11.1 ft) over
curves and weighing up to 388.7
kg (857 lb) in the wild.
<p>
The tiger populations
occurring in small pockets
isolated from each other, of
which about 2,000 exist on the
Indian subcontinent.
</p>
</div>
<div id="footer">
Copyright 2015
</div>
</body>
</html>
 |
| sk. |
<html>
<head>
<style>
#a {
width: 100px;
height: 100px;
background: steelblue;
-webkit-transition: width 2s;
transition: width 2s;
}
#a:hover {
width: 400px;
}
#b {
width: 100px;
height: 100px;
background: turquoise;
-webkit-transition: width 2s,
height 2s, -webkit-transform 2s;
transition: width 2s, height 2s,
transform 2s;
}
#b:hover {
width: 300px;
height: 300px;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
</style>
</head>
<body>
<h3> Transition </h3>
<div id ="a">
</div>
<p>Hover over the div element above,
to see the transition effect.</p>
<div id ="b">
</div>
</body>
</html>
OUTPUT:-
<html>
<head>
<style>
div {
width: 200px;
height: 150px;
background-color: steelblue;
position: relative;
-webkit-animation-name: example;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count:3;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
}
@-webkit-keyframes example {
0% {background-color:steelblue;
left:0px; top:0px;}
25% {background-color:yellow;
left:200px; top:0px;}
50% {background-color:blue;
left:200px; top:200px;}
75% {background-color:green;
left:0px; top:200px;}
100% {background-color:orange;
left:0px; top:0px;}
}
</style>
</head>
<body>
<p><h3>ANIMATION</h3> </p>
<div></div>
</body>
</html>
OUTPUT:-
<html>
<head>
<style>
<!-- This is for Padded field -->
input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
<!-- This is for Bordered Field -->
input[type=text1] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 4px solid steelblue;
border-radius: 4px;
}
<!-- This is for image Field -->
input[type=text2] {
width: 100%;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url
('sicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
}
<!-- This is for Animated Field -->
input[type=text3] {
width: 130px;
box-sizing: border-box;
border: 3px solid steelblue;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url('sicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s
ease-in-out;
transition: width 0.4s ease-in-out;
}
input[type=text3]:focus {
width: 60%;
}
</style>
</head>
<body>
<h3>Padded Text fields:</h3>
<form>
<label for="fname">First Name
</label>
<input type="text" id="fname"
name="fname">
<label for="fname">Last Name</label>
<input type="text" id="lname"
name="lname">
</form>
<h3> Bordered Text Fields</h3>
<form>
<label for="fname">First Name</label>
<input type="text1" id="fname"
name="fname">
<label for="lname">Last Name</label>
<input type="text1" id="lname"
name="lname">
</form>
<h3>Text Fields with icon/image </h3>
<form>
<input type="text2" name="search"
placeholder="Search..">
</form>
<h3> Animated Text Field </h3>
<form>
<input type="text3" name="search"
placeholder="Search..">
</form>
</body>
</html>
 |
| sk. |
<html>
<head>
<style>
.dropdown1 {
position: relative;
display: inline-block;
}
.dropdown1-content {
display: none;
position: absolute;
background-color: lightgrey;
min-width: 160px;
box-shadow: 0px 8px 16px 0px
rgba(0,0,0,0.2);
padding: 12px 16px;
}
.dropdown1:hover .dropdown1-content {
display: block;
}
.dropbtn {
background-color: steelblue;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px
rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover
{background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: turquoise;
}
</style>
</head>
<body>
<h2>Dropdown Menu</h2>
<p>Move the mouse over the button to
open the dropdown menu.</p>
<div class="dropdown">
<button class="dropbtn">Dropdown
</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<h2>Hoverable Dropdown</h2>
<p>Move the mouse over the text
below to open the dropdown
content.</p>
<div class="dropdown1">
<span>Mouse over me</span>
<div class="dropdown1-content">
<p>Hoverable Dropdown</p>
</div>
</div>
</body>
</html>
OUTPUT:-
 |
| sk.1 |
 |
| sk.2 |
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: turquoise;
}
.active {
background-color: steelblue;
}
</style>
</head>
<body>
<h3> Horizontal Navigation Bar </h3>
<p>In this example, Active class is
in a Steelblue background color and
a white text.</p>
<ul>
<li><a class="active" href="#home">
Home</a></li>
<li><a href="#news">Content</a>
</li>
<li><a href="#contact">Contact</a>
</li>
<li><a href="#about">About</a>
</li>
</ul>
</body>
</html>
OUTPUT:-
 |
| sk. |
<html>
<head>
<style>
body {
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 26%;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
}
li a {
display: block;
color: #000;
padding: 8px 0 8px 16px;
text-decoration: none;
}
li a.active {
background-color: steelblue;
color: white;
}
li a:hover:not(.active) {
background-color: turquoise;
color: white;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">
Home</a></li>
<li><a href="#news">News</a>
</li>
<li><a href="#contact">Contact</a>
</li>
<li><a href="#about">About</a>
</li>
</ul>
<div style="margin-left:26%;
padding:2px 16px;height:1000px;">
<h2>Fixed Side Nav Bar</h2>
<h3>Try to scroll this area, and
see how the sidenav sticks
to the page</h3>
<p>Notice that this div element
has a left margin of 26%. This
is because the side navigation
is set to 26% width. If you
remove the margin, the sidenav
will overlay/sit on top of
this div.</p>
<p>Also notice that we have set
overflow:auto to sidenav. This
will add a scrollbar when the
sidenav is too long (for
example if it has over 50 links
inside of it).</p>
<p>Text 1</p>
<p>Text 2</p>
<p>Text 3</p>
<p>Text 4</p>
<p>Text 5</p>
<p>Text 6</p>
<p>Text 7</p>
<p>Text 8</p>
<p>Text 9</p>
</div>
</body>
</html>
 |
| sk. |
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: ;
}
li a {
display: block;
color: #000;
padding: 8px 0 8px 16px;
text-decoration: none;
}
li a.active {
background-color: steelblue;
color: white;
}
li a:hover:not(.active) {
background-color: turquoise;
color: white;
}
</style>
</head>
<body>
<h2>Vertical Navigation Bar</h2>
<p>In this example, Active class is
in a Steelblue background color and
a white text.</p>
<ul>
<li><a class="active" href="#home">
Home</a></li>
<li><a href="#Content">Content</a>
</li>
<li><a href="#contact">Contact</a>
</li>
<li><a href="#about">About</a>
</li>
</ul>
</body>
</html>
 |
| sk. |
<html>
<head>
<style>
p {
border:5px solid steelblue;
padding:10px;
margin:30px;
}
div {
width: 320px;
padding: 10px;
border: 5px solid Turquoise;
margin: 30px;
}
</style>
</head>
<body>
<p>CSS BOX EXAMPLE</p>
<div>
<p> This a Box </p>
</div>
</body>
</html>
 |
| sk. |
<html> <body> <h1>This is Heading</h1> <p> This is paragraph</p> </body> </html>
 |
| sk. |
 |
| sk. |
 |
| sk. |
 |
| sk. |
 |
| sk. |
 |
| sk. |
 |
| sk. |
Internal Javascripts : The script code can be written directly into the HTML document. script code is placed in header of the docume...