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>
</html>
0 comments:
Post a Comment