Advanced Web Designing
Design a web page that
accept Employee’s Personal Details like, employee name, company name, gender
along with attendance time details.
Form1.html
<!DOCTYPE html>
<html>
<head>
<title>Date and
Time element</title>
</head>
<body>
<h1
align="center">Employee Details</h1>
<hr
color="red">
<form
name="f1">
Employee Name :
<input type="text" name="t1"
autocomplete="on"> <br><br>
Company Name : <input
type="text" name="c1"> <br><br>
Gender : Male <input
type="radio" name="r1"> Female <input
type="radio" name="r1"> <br><br>
Present Date : <input
type="date"> <br><br>
Current Month :
<input type="month"> <br><br>
Current Date: <input
type="datetime-local"> <br><br>
Entering Time :
<input type="time"> <br><br>
Working Week : <input
type="week"> <br><br>
<input
type="submit" value="Submit">
</form>
</body>
</html>
Form2.html
<!DOCTYPE html>
<html>
<head>
<title>Form
2</title>
</head>
<body>
<h1
align="center">Employee Details</h1>
<hr
color="orange">
<form
name="f1">
Employee Name :
<input type="text" name="t1"
autocomplete="on"> <br><br>
Employee DoB : <input
type="date"> <br><br>
Gender : Male <input
type="radio" name="r1"> Female <input
type="radio" name="r1"> <br><br>
Years Complited :
<input type="number" min="1" max="58">
<br><br>
Enter Email id :
<input type="email" placeholder="abc@gmail.com">
<br><br>
Contact No : <input
type="tel" pattern="[0-9]{2}-[0-9]{10}" required
placeholder="00-0000000000"> <br><br>
Select Favourite Color :
<input type="color"> <br><br>
Upload Project File :
<input type="file"> <br><br>
Enter Web site Url :
<input type="url" placeholder="http://example.com">
<br><br>
Search Here : <input
type="search"> <br>
<input
type="image" src="submit.png" height="150"
width="200">
</form>
</body>
</html>
Meta.html
<!DOCTYPE html>
<html>
<head>
<title>Meta
Tag</title>
<meta
charset="utf-8">
<meta
name="keywords" content="html form">
<meta
name="description" content="input elements">
<meta
name="author" content="Publication">
<meta http-equiv="refresh"
content="url=file:///C:/Users/HRP/Desktop/Skill%20Oriented%20Practicals/XII%20SOP/HTML/form2.html">
</head>
<body>
<h1>Example of
Meta Tag</h1>
<hr
color="blue">
<p>This program
shows the use of meta tag within an html document</p>
</body>
</html>
Inline.html
<html>
<head>
<title>Inline
Css</title>
</head>
<body
style="background-color:yellow;">
<h2
style="background-color:red;font-family:Arial">This is a
heading</h2>
<p
style="background-color:green;">This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>
</html>
Internal.html
<html>
<head>
<title>Internal
CSS</title>
<style>
h2{
color: purple;
text-align:center;
background-color:pink;
font-family:Arial;
border-style: dotted;
}
p{background-color:yellow;
text-decoration:Underline; color:blue;}
</style>
</head>
<body>
<h2>This is
example of internal CSS</h2>
<p>This is
paragraph tag</p>
</body>
</html>
External.html
<html>
<head>
<title>Internal
CSS</title>
<link
rel="stylesheet" type="text/css"
href="mystyle.css">
</head>
<body>
<h1>Baarta maaJaa
doSa Aaho.</h1>
<p>This is
paragraph tag</p>
</body>
</html>
mystyle.css
body{
background-image:url("nature.jpg");
color:red
}
h1{
font-family:Aarti;
color:orange;text-decoration:blink;
font-weight:bold;
}
idsel.html
<!DOCTYPE html>
<html>
<head>
<title>ID
Selector</title>
<style>
#abc{
color: blue;
background-color:yellow;
font-family:Times New Roman; font-style:italic;}
</style>
</head>
<body>
<p
id="abc">This paragraph style define using the ID
selector</p>
</body>
</html>
Class.html
<html>
<head>
<title>Class
Selector</title>
<link
rel="stylesheet" type="text/css"
href="style.css">
</head>
<body
class="body">
<h1>This is
heading level 1</h1><br>
<h2>This is
heading level 2</h2><br>
<h3
class="abc">This is heading level 3</h3><br>
<p
class="abc">This is paragraph tag with font-family: Times New
Roman and font-size: 100%;font-style: italic ,font-weight: bold;</p>
</body>
</html>
Style.css
.body {
background-image:
url("nature.jpg");color:orange;
}
h1 {text-decoration:
overline;background-color:red}
h2 {text-decoration:
line-through;background-color:green}
h3 {text-decoration:
underline;background-color:blue}
.abc{font-family: Comic
Sans MS;font-size: 100%;font-style:italic; font-weight:bolder;}
Classsel.html
<!DOCTYPE html>
<html>
<head>
<title>Class
Selector</title>
<style>
.myclass{
font-family:Times New
Roman;
font-style:italic;
font-size:medium;
color:red;
text-decoration:blink;
text-indent:12px;
text-transform:capitalize;
text-shadow:blue 1px 4px
5px;
}
</style>
</head>
<body>
<p class="myclass">This
is paragraph which having the properties like - Font Times New Roman,
Font style is Italic,
font size is medium, text color is orange, text decoration is blink,
text indent is 12px,
text transform is capitalize and text having the shadow effect.</p>
</body>
</html>
Universal.html
<!DOCTYPE html>
<html>
<head>
<title>Universal
Selector</title>
<style
type="text/css">
*{
color: orange;
font-family: Lucida
Console;
font-size: 20px;
}
#heading{
font-family: Lucida
Handwriting;
color: red;
text-decoration:
overline;
margin-left:20px;
}
</style>
</head>
<body>
<p>This css style
will be applied on entire page. it does not check tag or plain text <br>
</p>
<h2
id="heading">This css is applied to h2 heading level</h2>
<h1>This css is
applied to h1 heading level</h1>
</body>
</html>
Group.html
<!DOCTYPE html>
<html>
<head>
<title>Group
Selector</title>
<style
type="text/css">
h1,h2,h3,h4{
background-color: pink;
font-style: italic;
text-align: center;
color: blue;
border: dashed;
}
</style>
</head>
<body>
<h1>This is
heading level 1</h1>
<h2>This is
heading level 2</h2>
<h3>This is
heading level 3</h3>
<h4>This is
heading level 4</h4>
</body>
</html>
Static.html
<!DOCTYPE html>
<html>
<head>
<title>Static
Position</title>
<style
type="text/css">
.static{
position: static;
color: orange;
background-color: pink;
padding: 20pt;
}
</style>
</head>
<body>
<h2>This is
heading level</h2>
<h2>This is
heading level</h2>
<h2>This is
heading level</h2>
<h1
class="static">This is heading level 1</h1>
</body>
</html>
Fixed.html
<!DOCTYPE html>
<html>
<head>
<title>Position
CSS</title>
<style
type="text/css">
h1{
position: static;
right:50px;
top:70px;
}
#image{
position: fixed;
right: 30px;
top: 150px;
}
</style>
</head>
<body>
<h1>This element
is positioned using static position</h1>
<img
src="images.jpg" alt="" id="image">
<h2>This is h2
element</h2><h2>This is h2 element</h2><h2>This is h2
element</h2><h2>This is h2 element</h2><h2>This is h2
element</h2><h2>This is h2 element</h2><h2>This is h2
element</h2><h2>This is h2 element</h2><h2>This is h2
element</h2><h2>This is h2 element</h2><h2>This is h2
element</h2><h2>This is h2 element</h2><h2>This is h2
element</h2><h2>This is h2 element</h2><h2>This is h2
element</h2><h2>This is h2 element</h2><h2>This is h2
element</h2><h2>This is h2 element</h2><h2>This is h2
element</h2><h2>This is h2 element</h2><h2>This is h2
element</h2><h2>This is h2 element</h2><h2>This is h2
element</h2><h2>This is h2 element</h2><h2>This is h2
element</h2><h2>This is h2 element</h2><h2>This is h2
element</h2><h2>This is h2 element</h2><h2>This is h2
element</h2>
</body>
</html>
relative.html
<!DOCTYPE html>
<html>
<head>
<title>Relative
Positioning</title>
<style
type="text/css">
p{
position: absolute;
top: 50px;
left: 100px;
color: blue;
font-family: Times New
Roman;
float: right;
}
</style>
</head>
<body>
<h2>Nature
information</h2>
<p>Nature can
refer to the general realm of living plants and animals, and in some cases to
the processes associated with inanimate objects—the way that particular types
of things exist and change of their own accord, such as the weather and geology
of the Earth.</p>
</body>
</html>
absolute.html
<!DOCTYPE html>
<html>
<head>
<title>Absolute
Position</title>
<style
type="text/css">
#abs{
position: absolute;
top: 20px;
left: 20px;
color: blue;
}
</style>
</head>
<body>
<p>Pollution is
the introduction of harmful materials into the environment. These harmful
materials are called pollutants. Pollutants can be natural, such as volcanic
ash. They can also be created by human activity, such as trash or runoff
produced by factories.</p>
<p
id="abs">Pollution is the process of making land, water, and air
dirty by doing a lot of damage to the earth. Or we can say that Pollution is
the introduction of impure and harmful substances into the environment. These
harmful and impure substances are known as pollutants.</p>
</body>
</html>
float.html
<!DOCTYPE html>
<html>
<head>
<title>Float
Property</title>
<style
type="text/css">
.left{
float: left;
font-family: Arial
Narrow;
background-color:
skyblue;
text-decoration:
overline;
}
.right{
float: right;
font-family: Monotype
Corsiva;
background-color:
skyblue;
text-decoration:
underline;
}
</style>
</head>
<body>
<h1
class="right">Yoga is best therapy to keep your mind and body calm.</h1>
<p>Yoga is
essentially a spiritual discipline based on an extremely subtle science, which
focuses on bringing harmony between mind and body.</p>
<h3
class="left">It helps in positive thinking.</h2>
</body>
</html>
display.html
<!DOCTYPE html>
<html>
<head>
<title>Display
Property</title>
<style
type="text/css">
h1{
display: inline;
background-color: red;
font-family: Monotype
Corsiva;;
}
h2{
display: block;
background-color: green;
font-family: Monotype
Corsiva;;
}
h3{
display: inline-block;
background-color: blue;
font-family: Monotype
Corsiva;;
}
</style>
</head>
<body>
<h1>This heading
tag is displayed as inline element.</h1>
<h2>This heading
tag is displayed as block element.</h2>
<h3>This heading
tag is displayed as inline-block element.</h3>
</body>
</html>
ordered.html
<!DOCTYPE html>
<html>
<head>
<title>Ordered
List</title>
</head>
<body>
<h1>Title of the
chapter</h1>
<ol
type="1" start=10 reversed>
<li>Advanced Web
Designing</li>
<li>Introduction
to SEO</li>
<li>Advanced
Javascript</li>
<li>Emerging
Technologies</li>
<li>Server Side
Scripting</li>
<li>E-Commerce and
E-Governance</li>
</ol>
</body>
</html>
unordered.html
<!DOCTYPE html>
<html>
<head>
<title>Ordered
List</title>
</head>
<body>
<h1>Title of the
chapter</h1>
<ul
style="list-style-type:square">
<li>Advanced Web
Designing</li>
<li>Introduction
to SEO</li>
<li>Advanced
Javascript</li>
<li>Emerging
Technologies</li>
<li>Server Side
Scripting</li>
<li>E-Commerce and
E-Governance</li>
</ul>
</body>
</html>
definition.html
<!DOCTYPE html>
<html>
<head>
<title>Definition
List</title>
</head>
<body
bgcolor="orange">
<h1>Terms in
Information Technology</h1>
<dl>
<dt>Computer</dt>
<dd>A computer is
a machine that can be programmed to carry out sequences of arithmetic or
logical operations (computation) automatically.
</dd>
<dt>Hardware</dt>
<dd>Hardware
refers to the computer's tangible components or delivery systems that store and
run the written instructions provided by the software</dd>
</dl>
</body>
</html>
nested.html
<!DOCTYPE html>
<html>
<head>
<title>Nested
List</title>
</head>
<body>
<ol>
<li>Introduction
to IT</li>
<li>Introduction
to DBMS</li>
<ul
style="list-style-type:circle">
<li>Definition of
DBMS</li>
<li>Application of
DBMS</li>
<li>Advantages of
DBMS</li>
</ul>
<li>Postgresql</li>
</ol>
</body>
</html>
Multilevel.html
<!DOCTYPE html>
<html>
<head>
<title>Multilevel
List</title>
</head>
<body>
<ol type=I>
<li>First Term
Syllabus</li>
<ul
style="list-style-type:disc">
<li>Advanced Web
Designing</li>
<ul
style="list-style-type:circle">
<li>Forms in
HTML5</li>
<li>CSS</li>
<li>Inserting
Audio and Video</li>
</ul>
<li>Introduction
To SEO</li>
<li>Advanced
Javascript</li>
</ul>
<li>Second Term
Syllabus</li>
<ul
style="list-style-type:Square">
<li>Emerging
Technology</li>
<li>Server Side
Scripting (PHP)</li>
<li>E-Commerce and
E-Governance</li>
</ul>
</ol>
</body>
</html>
audio.html
<!DOCTYPE html>
<html>
<head>
<title>Audio
Tag</title>
</head>
<body>
<h1
align="center">Inserting Audio into web page</h1>
<hr>
<audio
src="sample.mp3" controls autoplay></audio>
</body>
</html>
Audio1.html
<!DOCTYPE html>
<html>
<head>
<title>Audio
Tag</title>
</head>
<body>
<h1
align="center">Inserting Audio into web page</h1>
<hr>
<audio controls
autoplay>
<source
src="sample.mp3" type="audio/mp3">
<source
src="sample.ogg" type="audio/ogg">
<source
src="sample.opus" type="audio/ogg">
</audio>
</body>
</html>
Video.html
<!DOCTYPE html>
<html>
<head>
<title>Video
Tag</title>
</head>
<body>
<h1>Inserting
video in to web page</h1>
<hr>
<video
src="nature.mp4" controls height="300"
width="400" loop="2" muted
poster="poster.jpg"></video>
</body>
</html>
Video1.html
<!DOCTYPE html>
<html>
<head>
<title>Video
Tag</title>
</head>
<body>
<h1>Inserting
video in to web page</h1>
<hr>
<video
src="nature.mp4" controls height="300"
width="400" loop="2" muted
poster="poster.jpg"></video>
</body>
</html>
Video1.html
<!DOCTYPE html>
<html>
<head>
<title>Video
Tag</title>
</head>
<body>
<h1
align="center">Inserting video in to web page</h1>
<hr>
<video controls
height="300" width="400" loop="2" muted
autoplay>
<source
src="nature.mp4" type="video/mp4">
<source
src="nature.ogg" type="video/ogg">
<source
src="nature.webM" type="video/webM">
Your browser does not
support the video tag.
</video>
</body>
</html>
imagemap.html
<!DOCTYPE html>
<html>
<head>
<title>Image
Mapping</title>
</head>
<body>
<img
src="nature.jpg" alt="Nature Image"
usemap="#myfile" alt="Nature Image">
<map
name="myfile">
<area
shape="rect" coords="19,21,226,97"
href="http://www.google.com">
<area
shape="circle" coords="168,225,60" href="">
<area
shape="poly"
coords="418,194,622,193,513,298,486,131,610,292"
href="">
</map>
</body>
</html>
Iframe.html
<!DOCTYPE html>
<html>
<head>
<title>Iframe
Practical</title>
</head>
<body
bgcolor="orange">
<iframe
src="nature.mp4" height="300" width="500"
name="myframe" scrolling="no"></iframe>
<iframe
srcdoc="<h1>This is nature video</h1>"></iframe>
</body>
No comments:
Post a Comment