HTML5
Note: Save the code in your local folder and click to see output
Note: Save the code in your local folder and click to see output
HTML5 Table Example(table.html)
<!DOCTYPE html>
<html>
<head>
<title>Table Example</title>
<link rel="stylesheet" href="mystyle1.css">
</head>
<body>
<h2>Table Example</h2>
<p>The <u>HTML</u> table element <b>represents</b> tabular <i>data</i> — that is, information presented in a two-dimensional table comprised of rows and columns of cells containing data.
</p>
<hr>
<table>
<tr>
<th>Roll Number</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>101</td>
<td>Raja</td>
<td>20</td>
</tr>
<tr>
<td>102</td>
<td>Kannan</td>
<td>22</td>
</tr>
<tr>
<td>103</td>
<td>Madan</td>
<td>21</td>
</tr>
</table>
<p>This is an example page for demonstrating table tags</p>
</body>
</html>
Html5 List Example(list.html)
<!DOCTYPE html>
<html>
<head>
<title>List Example</title>
</head>
<body>
<h1 style="color:red; font-size:40px;">List Example</h1>
<hr>
<h2>Departments:</h2>
<ol type="a">
<li>CSE</li>
<li>ECE</li>
<li>EEE</li>
<li>MECH</li>
</ol>
<h2>Facilities:</h2>
<ul style="list-style-type:disc">
<li>WiFi</li>
<li>Gym</li>
<li>Canteen</li>
<li>Sports Complex</li>
<li>Library</li>
</ul>
<p>This is an example page for demonstrating list tags</p>
</body>
</html>
Form Example(form.html)
<!DOCTYPE html>
<html>
<head>
<title>Form Example</title>
<style>
</style>
<link href="mystyle.css">
</head>
<body>
<h1>Online Form Example</h1>
<hr>
<form name="myform" method="get">
<input type="text" name="name1" placeholder="Enter Name" required><br><br>
<input type="text" name="age" placeholder="Enter Age" required><br><br>
Gender: <input type="radio" name="gender">Male
<input type="radio" name="gender">Female
<br><br>
Favorite Color:<input type="color" name="favcolor" value="#ff0000">
<br><br>
Date of Birth:<input type="date" name="dob"><br><br>
Skills:<input type="checkbox" name="c">C
<input type="checkbox" name="cplus">C++
<input type="checkbox" name="java">Java
<br><br>
<input type="email" name="uname" placeholder="Enter Email" required>
<input type="password" name="pwd" placeholder="Enter Password" required>
<br><br>
Department:
<select>
<option>CSE</option>
<option>EEE</option>
<option>ECE</option>
<option>MECH</option>
</select>
<br><br>
Range:<input type="range" id="vol" name="vol" min="0" max="50">
<br><br>
Search:<input type="search" id="gsearch" name="gsearch">
<br><br>
Upload your Resume:<input type="file" name="resume">
<br><br>
<input type="submit" value="Submit">
<input type="reset" value="Clear">
</form>
</body>
</html>
CSS
CSS Element Type Class and Id Selector(selector.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of CSS element type selector</title>
<style>
h1
{
color: Yellow;
}
p
{
color: green;
}
#question
{
color: #ff0000;
}
#answer
{
color: #0000ff;
}
.question
{
color: #ff0000;
}
.answer
{
color: #0000ff;
}
</style>
</head>
<body>
<h1>This is heading</h1>
<p>This is a paragraph.</p>
<br>
<p id="question">What is computer?</p>
<br>
<p id="answer">Its an electronic computing device.</p>
<br>
<p id="question">What is HTML?</p>
<br>
<p id="answer">Markup language for developing wep paegs.</p>
<br>
<p class="question">What is CSS?</p>
<br>
<p class="answer">It is used for formatting contents to be displayed on the web page</p>
</body>
</html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of CSS element type selector</title>
<style>
h1
{
color: Yellow;
}
p
{
color: green;
}
#question
{
color: #ff0000;
}
#answer
{
color: #0000ff;
}
.question
{
color: #ff0000;
}
.answer
{
color: #0000ff;
}
</style>
</head>
<body>
<h1>This is heading</h1>
<p>This is a paragraph.</p>
<br>
<p id="question">What is computer?</p>
<br>
<p id="answer">Its an electronic computing device.</p>
<br>
<p id="question">What is HTML?</p>
<br>
<p id="answer">Markup language for developing wep paegs.</p>
<br>
<p class="question">What is CSS?</p>
<br>
<p class="answer">It is used for formatting contents to be displayed on the web page</p>
</body>
</html>
CSS Descendant Selector(selector1.html)
<!DOCTYPE html>
<html>
<head>
<title>Descendant Selectors</title>
<style>
h1 em
{
color:green;
}
ul.menu
{
padding: 20;
list-style: none;
}
ul.menu li
{
display: inline;
}
ul.menu li a
{
margin: 50px;
text-decoration: none;
}
</style>
</head>
<body>
<h1>This is a <em>heading</em></h1>
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</body>
</html>
CSS Inheritance(inheritance.html)
<!DOCTYPE html>
<html>
<head>
<style>
body
{
color: blue;
font-family: Arial;
}
h1
{
color: Yellow;
}
p
{
text-align:justify;
font-size:20px;
}
b
{
color:red;
}
</style>
</head>
<body>
<h1 style="colro:red;">Inheritance Example</h1>
<p>Some CSS properties by default <b>inherit</b> values set on the current
element's parent element.For example, if you set a color and font-family
on an element, every element inside it will also be styled with that color and font, unless you've applied different color and font values directly to them.
</p>
</body>
</html>
CSS Grouping Selectors(grouping.html)
<!DOCTYPE html>
<html>
<head>
<title>Descendant Selectors</title>
<style>
h1,h2,h3
{
color:green;
text-align:center;
}
</style>
</head>
<body>
<h1>K.RAMAKRISHNAN COLLEGE OF TECHNOLOGY</h1>
<h3>(Autonomous)</h3>
<h2>Samayapuram, Trichy - 621 112</h2>
</body>
</html>
CSS Box Animation Example-1(animation1.html)
<!DOCTYPE html><html>
<head>
<title>CSS Animation</title>
<style>
div {
width: 100px;
height: 100px;
background-color:red;
position: relative;
animation-name: example;
animation-duration: 4s;
}
@keyframes example
{
0% {left:0px; top:0px;}
25% {left:400px; top:0px;}
75%{left:400px; top:400px;}
100%{left:0px; top:400px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
<head>
<title>CSS Animation</title>
<style>
div {
width: 100px;
height: 100px;
background-color:red;
position: relative;
animation-name: example;
animation-duration: 4s;
}
@keyframes example
{
0% {left:0px; top:0px;}
25% {left:400px; top:0px;}
75%{left:400px; top:400px;}
100%{left:0px; top:400px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
CSS Text Animation Example-2(animation2.html)
<!DOCTYPE html>
<html>
<head>
<title>Animation Example</title>
<style>
h1,h2
{
text-align:center;
}
@keyframes example
{
from {font-size: 20px;}
to {font-size:40px;}
}
h1
{
animation-name:example;
animation-duration: 4s;
}
</style>
</head>
<body>
<h1>K.RAMAKRISHNAN COLLEGE OF TECHNOLOGY</h1>
<h2>SAMAYAPURAM, TRICHY</h2>
<hr>
</body>
</html>
CSS Text Animation Example(animation3.html)
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width: 50px;
height: 20px;
color:green;
position: relative;
animation-name: example;
animation-duration: 4s;
}
@keyframes example
{
from { left:0px; top:0px;}
to {left:400px; top:0px;}
}
</style>
</head>
<body>
<h1>Animation Example</h1>
<div>hello</div>
</body>
</html>
CSS Animation Example - Text Blink(animation4.html)
<!DOCTYPE html>
<html>
<head>
<title>Blinking Text</title>
<style>
div
{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
h2
{
font-size: 5em;
font-family: serif;
color: #008000;
text-align: center;
animation: blink 1.5s linear infinite;
}
@keyframes blink
{
0%{opacity:0;}
50%{opacity: 0.7;}
100%{opacity: 0;}
}
</style>
</head>
<body>
<div>
<h2>WELCOME</h2>
</div>
</body>
</html>
Drag and Drop Image(dradanddrop.html)
<!DOCTYPE HTML>
<html>
<head>
<style>
#div1 {
width: 150px;
height: 100px;
padding: 10px;
border: 1px solid #aaaaaa;
}
</style>
<script>
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<p>Drag the image into the rectangle:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="krctlogo.jpg" draggable="true" ondragstart="drag(event)"
width="150" height="100">
</body>
</html>
