Saturday, 20 February 2021

HTML5 and CSS Programs

HTML5

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>

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>

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>


at
Labels: ,