Html Web Pages: April 2019

Friday 26 April 2019

Online Product Selling Page Desing Using Html and Css


<html>
<head> </head>
<body bgcolor="lightyellow">
<h1 align="center">
<u>Formatting Tags in HTML</u>
</h1>
<hr/>
<div style="text-align:center;">
<img src="dell.jpg" border="2" width="300" />
<br/>

<span style="color:blue;">
<strong>Dell Laptop_D5600</strong>
</span>
<br/>

<span style="color:red;">
actual price:INR <del>35500.00</del>
</span>
<br>

<span style="color:green;"
<em>Discount price:INR 30000.00</em>
</span>
<br/>

<mark style="background-color:aqua;">
note:this account price is available only today </mark>
<br/><br/><br/>

</div>
<br/>
<div style="text-align:center;">
<img src="iphone.jpg" border="2" width="250" />
<br/>

<span style="color:blue;">
<strong>IPhone_6</strong>
</span>
<br/>

<span style="color:red;">
actual price:INR <del>45500.00</del>
</span>
<br>

<span style="color:green;"
<em>Discount price:INR 40000.00</em>
</span>
<br/>

<mark style="background-color:yellow;">
note:this account price is available only today </mark>
<br/>

</div>

</body>
</html>

Formatting Tags in HTML

Formatting Tags in HTML:
= = = = = = = = = = = = = =
-> formatting tags are used formatting text that we prepared in html in html document.
-> these tags helps us to present the text with different formats like bold ,italic ,highlighing etc...

1) bold---<strong>
2) italic-----<em>
3) underline----<u>
4) delect text------<del>
5) text marking----<mark>


<html>
<head> </head>
<body bgcolor="lightyellow">
<h1 align="center">
<u>Formatting Tags in HTML</u>
</h1>
<hr/>
<div style="text-align:center;">
<img src="dell.jpg" border="2" width="300" />
<br/>

<span style="color:blue;">
<strong>Dell Laptop_D5600</strong>
</span>
<br/>

<span style="color:red;">
actual price:INR <del>35500.00</del>
</span>
<br>

<span style="color:green;"
<em>Discount price:INR 30000.00</em>
</span>
<br/>

<mark style="background-color:aqua;">
note:this account price is available only today </mark>
<br/><br/><br/>

</div>
<br/>
<div style="text-align:center;">
<img src="iphone.jpg" border="2" width="250" />
<br/>

<span style="color:blue;">
<strong>IPhone_6</strong>
</span>
<br/>

<span style="color:red;">
actual price:INR <del>45500.00</del>
</span>
<br>

<span style="color:green;"
<em>Discount price:INR 40000.00</em>
</span>
<br/>

<mark style="background-color:yellow;">
note:this account price is available only today </mark>
<br/>

</div>

</body>
</html>

Wednesday 24 April 2019

Registation Form with Social Link Using Html and Css

Index.html:
= = = == = =
<html>
<head>
<title>RegistationForm</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="login-box">
<div class="left-box">
<h1> RegistationForm</h1>
<input id="if" type="text" name="fname" placeholder="Firstname"/>
<input id="if" type="text" name="lname" placeholder="Lastname"/>
<input id="if" type="text" name="uname" placeholder="Username"/>
<input id="if" type="password" name="pword" placeholder="Password"/>
<input id="s" type="submit" name="reg" value="Registar"/>
</div>
<div class="right-box">
<span class="signinwith">sig in with<br/>Social Network</span>
<button class="social facebook">log in with Facebook</button>
<button class="social twitter">log in with twitter</button>
<button class="social google">log in with Google+</button>
</div>
<div class="or">OR</div>
</div>

</body>
</html>

Style.css :
= = = = = =

body
{
margin:0;
padding:0;
background:#efefef;
font-size:16px;
color:#777;
font-family:sans-serif;
font-weight:300;

}
#login-box
{
position:relative;
margin:5% auto;
height:400px;
width:600px;
background:#fff;
box-shadow: 0 2px 4px rgba(0,0,0,0,6);

}
.left-box
{
position:absolute;
top: 0;
left: 0;
box-sizing:border-box;
padding:40px;
width:300px;
height:400px;
}
h1
{
margin:0 0 20px 0;
font-weight:300;
font-size:28px;
}

#if
{
display:block;
box-sizing:border-box;
margin-bottom:20px;
padding:4px;
width:220px;
height:32px;
border:none;
outline:none;
border-bottom:1px solid #aaa;
font-family:sans-serif;
font-weight:400;
font-size:15px;
transition:0.2s ease;

}
#s
{
margin-bottom:28px;
width:120px;
height:32px;
background:#f44336;
border:none;
border-radius:2px;
color:#fff;
font-family:sans-serif;
font-weight:500;
text-transform:uppercase;
transition:0.2s ease;
cursor:pointer;

}
#s:hover,
#s:focus
{
background:#ff5722;
transition:0.2s ease;
}

.right-box
{
position:absolute;
top: 0;
right: 0;
box-sizing:border-box;
padding:40px;
width:300px;
height:400px;
background-image:url
background-size:cover;
background-position:center;
}
.or
{
position:absolute;
top:180px;
left:265px;
width:40px;
height:40px;
background:#efefef;
border-radius:50%;
box-shadow:0 2px 4px rgba(0,0,0,0,6);
line-height:40px;
text-align:center;

}
.right-box .signinwith
{
display:block;
margin-bottom:48px;
font-size:28px;
color:#efff;
text-align:center;
text-shadow:0 2px 4px rgba(0,0,0,0,6);

}
button.social
{
margin-bottom:28px;
width:220px;
height:36px;
border:none;
border-radius:2px;
color:#fff;
font-family:sans-serif;
font-weight:500;
transition:0.2s ease;
cursor:pointer;

}
.facebook
{
background:#32508e;
}

.twitter
{
background:#55acee;
}
.google
{
background:#dd4b39;
}

Friday 19 April 2019

HTML Hyper Links Re-Directing One Website to Another Website


<html>
<head>
<link rel="shortcut icon" href="google1.png"/>
</head>
<body>
<h1 id="top" >Welcome to HTML</h1>
<hr\>

<img src="contact.png"/ width="20" height="15"/>
<a href="contact.html">contact us</a> <br/>

<img src="about.png"/ width="20" height="15"/>
<a href="about.html">about us</a> <br/>
<hr\>

<img src="facebook.png"/ width="20" height="15"/>
<a href="http://www.facebook.com">facebook</a> <br/>

<img src="twitter.png"/ width="20" height="15"/>
<a href="http://www.Twitter.com">Twitter</a> <br/>
<hr\>

<img src="html5.png"/ width="20" height="15"/>
<a href="#s1">HTML5</a><br/>

<img src="jquery.png"/ width="20" height="15"/>
<a href="#s2">JQuery</a>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/>

<h3 id="s1">HTML5</h3>
<p>HTML5 is a latest version that provides new tags in order to developing web pages.
HTML5 is a latest version that provides new tags in order to developing web pages.
HTML5 is a latest version that provides new tags in order to developing web pages.
HTML5 is a latest version that provides new tags in order to developing web pages.</p>

<a href="#top">back to top</a>

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

<h3 id="s2">JQuery</h3>
<p>jquery is javascript based library that makes client side programming easy.
jquery is javascript based library that makes client side programming easy.
jquery is javascript based library that makes client side programming easy.
jquery is javascript based library that makes client side programming easy.</p>

<a href="#top">back to top</a>

</body>
</html>

Hyper Links in HTML

Hyper Links in Html:
= = = = = = = = = = = =
-> hyper links in html document are created by using anchor tag (eg: <a> </a>)
-> we can navigate from one page to another page (same site)
-> we implement navigation with different options
1.navigation to another page(same site)
2.navigate to external web sites (different site)
3.navigate to section the same page.
usage:
= = = =
<a href=url>text</a>
attribute: href stands for hyper link reference

Types of URL:
= = = = = = = =
-> url that we are using in hyper links are divided two types
1.Relative URLs
2.Absolute URLs

-> Relelative URLs refer same website it does not required website name in URLs.
eg: <a href="contact.html">Contact us</a>

-> Absolute URLs refers different websites it includes Compelete Web site same with protocal.
eg: <a href="http://www.facebook.com">facebook</a>

eg:

<html>
<head>
<link rel="shortcut icon" href="google1.png"/>
</head>
<body>
<h1 id="top" >Welcome to HTML</h1>
<hr\>

<img src="contact.png"/ width="20" height="15"/>
<a href="contact.html">contact us</a> <br/>

<img src="about.png"/ width="20" height="15"/>
<a href="about.html">about us</a> <br/>
<hr\>

<img src="facebook.png"/ width="20" height="15"/>
<a href="http://www.facebook.com">facebook</a> <br/>

<img src="twitter.png"/ width="20" height="15"/>
<a href="http://www.Twitter.com">Twitter</a> <br/>
<hr\>

<img src="html5.png"/ width="20" height="15"/>
<a href="#s1">HTML5</a><br/>

<img src="jquery.png"/ width="20" height="15"/>
<a href="#s2">JQuery</a>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/>

<h3 id="s1">HTML5</h3>
<p>HTML5 is a latest version that provides new tags in order to developing web pages.
HTML5 is a latest version that provides new tags in order to developing web pages.
HTML5 is a latest version that provides new tags in order to developing web pages.
HTML5 is a latest version that provides new tags in order to developing web pages.</p>

<a href="#top">back to top</a>

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

<h3 id="s2">JQuery</h3>
<p>jquery is javascript based library that makes client side programming easy.
jquery is javascript based library that makes client side programming easy.
jquery is javascript based library that makes client side programming easy.
jquery is javascript based library that makes client side programming easy.</p>

<a href="#top">back to top</a>

</body>
</html>

Sunday 14 April 2019

Local Drives Design Using Html

<html>
<head>
<title>Local Drives</title>
</head>
<body bgcolor=lightgreen>
<fieldset>
<center>
<h1>Local Drives:</h1>
<label><b>Local Drive(C:)</b></label><br/>
<progress max='10' value='5'>
</progress> <br><br/>
<label><b >Local Drive(D:)</b></label><br/>
<progress max='10' value='8'>
</progress><br><br/>
<label><b >Local Drive(E:)</b></label><br/>
<progress max='10' value='3'>
</progress><br><br/>
<label><b >CD/DVD Drive(F:)</b></label><br/>
<progress max='10' value='1'>
</progress><br><br/>
</center>
</fieldset>
</body>
</html>

Friday 12 April 2019

Structure of Html Document

Structure of Html Document:
= = = = = = = = = = = = = = =
-> Every Html document starts with <html> tag and end with </html> tag
-> the content that we prepared with in the <html> </html> tags is divided into two sessions
1) Head Session
2) Body Session
eg:
<html>
<head>

</head>
<body>

</body>
</html>

1.Head Session:
= = = = = = = = =
-> Content that is not directly display in the browser window is specified in head session.
-> Background supported content prepared in Head Session.

2.Body Session:
= = = = = = = =
-> content that is actually display in browser window is prepared in body session.
->except the head session tags remaining all tags can be include in body.
eg:
<h1>,<p>,<a>,<table> tags etc..

Head Section in Html Document:
= = = = = = = = = = = = = = = = =
-> head secton may includes any of the following tags:
1) titles
2)styles
3)script
4)link
5)meta

1.Titles:
= = = = =
-> titke tag i sused to display a title in browser title bar.
usage: <title>Login Page</title>

2.Styles:
= = = = =
-> style tag is used define the styles taht are used with in the document.
usage:
<style>
h1
{
color:Blue;
}
</style>
3.Script:
= = = = =
->script tag is used define the client side programming in the document.
usage:
<script>
alert("welcome");
</script>
4.Links:
= = = = =
-> link tag is used to link external .css files
-> it is also used to display images in title bar
usage:
<link rel="stylesheet" href="mystyle.css"/>
<link rel="shortcut ion href="logo.icon"/>
5.Meta:
= = = = =
-> meta tag is used to provide meta data about the document the document.
eg: keywords ,discription,authors
usage:
<meta name="keywords" content="java,php,jQuery,.net,Anjular Js"/>

eg: 
<html>
<head>
<title> welcome page</title>
<script>
//javascript code
alert("welcome to HTML");
</script>
<style>
h1
{
color:blue
}
</style>
<meta name="author" content="narasimha"/>
<meta name='keywords" content=".net,java,php,JQuery,Anjular Js"/>
<link rel="shortcut icon" href="sathya.ico"/>
</head>
<body>
<h1>WELCOME TO HTML</h1>
</body>
</html>

Body Section Tags:
= = = = = == = = = =
-> body tag can have number of tags these tags we divided into mutliple groups.
-> in this chapter we are developing web apges using Basic Structure tags.

1.Heading Tags:
= = = = = = = =
-> heading tags are used to prepare the heading for different levels.
-> Html supports six levels of heading tags
<h1> to <h6>
Usage:
<h1> heading 1</h1>
<h2> heading 2</h2>
2.paragraphs:
= = = = = = =
-> paragraph are preapared in html using <p> tag
usage:
<p>this text paragraph</p>
3.Span:
= = =
-> span tag is used to display simple/short message
eg: <span>message</span>

4.img tag:
= = = = =
-> image tag is used to display the image an the web page.
usage:
<img src="image.jpg"/>
-> image tag support following attributes to Customize the apperance of the image.
eg:
<img src="images/image1.jpg" height= "200" width="300" border="2"/>

5.Div Tag:
= = = = = =
-> div tag is used to divide the content into multiple parts /sections.
-> we can groping multiple tags and apply the style div tag.
usage:
<div>

</div>
eg:

<html>
<head>
<title>welcome page</title>
<style>
p
{
text-align:justify;
border:2px solid blue;
padding:10px;
}
</style>
</head>
<body>
<h1>Welcome to Html</h1>
<hr>
</body>
</html>

Thursday 11 April 2019

Login in form using Html

<html>
<head>
<title>DEMO HTML</title>
</head>
<body bgcolor=cyan text=red>
<form action=reg.html>
<fieldset>
<center>
<legend align="center">User Login form..!!</legend>
<input type="text" name=fname placeholder="Fisrt Name"/><br/>
<input type="text" name=lname placeholder="Last Name"/><br/>
<input type="text" name=uname placeholder="User Name"/><br/>
<input type="password" name=pword placeholder="Password"/><br/>
<input type="submit" value="Login"/>
</center>
</fieldset>
</form>
</body>
</html>

Happy Chistamas Animation using Html and Css


<!DOCTYPE html>
<html>
<head>
<style>
#x
{
border:2px solid green;
background-color:green;
color:white;
text-align:center;
width-left:400px;
padding:10px;
border-top-left-radius:20px;
border-bottom-right-radius:20px;
}
h2
{
color:blue;
text-shadow:0px 0px 5px green;
}

@keyframes Animation1
{
from {width:100px;height:60px;transform:rotate(0deg);}
to {width:600px;height:400px;transform:rotate(360deg);}
}
#img1
{
width:100px;
height:60px;
border:0px solid blue;
border-radius:10px;
padding:5px;
margin-left:50px;

Animation-name:Animation1;
Animation-duration:20s;
Animation-iteration-count:5;
Animation-direction:alternate;
Animation-delay:4s;

}
</style>
</head>

<body bgcolor="orange">
<h1 id="x">HAPPY CHISTAMAS</h1>
<marquee><h2>HAPPY HAPPY CHISTAMAS MERRY MERRY CHISTAMAS</h2></marquee>
<br></br>
<img id="img1" src="santa1.gif"/>
<img id="img1" src="santa2.gif"/>

</body>
</html>

Monday 8 April 2019

History of HTML and W3C Oraganization Details

Version History of HTML:
= = = = = = = = = = = = = =
-> Html 1.0 ------------------------ 1991
-> Html 2.0 ------------------------ 1994
-> Html 3.0 ------------------------- 1997
-> Html 4.0 ------------------------- 1998
-> Html 5.0 ------------------------- 2008 to 2014

What is W3c and Whatwg?
-> w3c stands for world wide web consortium.
-> w3c is the main international standards organisation for the world wide web(www).
-> all the client side Technologies (eg Html,Css,Js) are maintained by w3c
-> director of w3c is "Timothy John Bernes-lee" (TIMBL) ,Html also invented by Timbl.
-> This group is formed by group of software companies like IBM,MicroSoft,Apple .
->w3c was formed in 1990's.

WHATWG:
= = = = = = =
-> new features of html5 was suggested by Whatwg.
-> whatwg stands for Web Hyper Text Application Technology Working Group.
-> whatwg was formed in 2004 by Google,Apple,Mozilla,Opera,Adobe etc..

Developing Web Pages Using HTML:
= = = = = = = = = = = = = = = = = = =
-> we can develop the static web pages using html.
-> a web page that is created using html is also called as html Document.
-> Every html document is created with help of following items
1.Tags
2.Attributes
Tags:
= = = =
-> all the tags are divided into two Categories
1) Paired Tags
2) Single Tags
1.Paired Tags:
= = = = = = =
-> paired tags should contains open and closing tags
eg: <h1>Heading</h1>
<p> Paragraph</p>
-> most of the tags in Html are paired tags.
-> paired tags are also called as content tags.

Note:
= = =
if you are not close the tags properly Browser will generated unExpected Results.

2.Single Tags:
= = = = = = = =
-> single tags contain only open tag .
-> we can provide required details for single tag using Attributes
eg: <br/>
<input/>
<img/>

2.Attributes:
= = = = = = = =
-> attributes are used to provide required details to tag so that we can use as per purpose.
eg: href,src
-> few attributes are optinal attributes .
eg: bgcolor,align
-> all the attributes in Html are divided into two categories
1) Tag Specific Attributes
2) Global Attributes
-> tag specific attribute are applicable to only for specific tags.
eg:
<img src="image1.jpg"/>
<a href="Demo.html">Next</a>
->Global attributes are Applicable to all Html tags.
eg: id,name,style,title,class

Thursday 4 April 2019

Student Information Form Using Html

<html>

<head>

<style>

{

color:green;

}

</style>

</head>

<body>

<h3>Student Information form </h3>

<hr/>

<form id="form1" autocomplete="off" action="Register.php" method="GET">

Student Name:

<input type="text" name="t1" autofocus required />

<br/> <br/>

Student Age:

<input type="number" min="20" max="100" name="t2"/>

<br/> <br/>

Email ID:

<input type="email" name="t3"/>

<br/> <br/>

Pin code:

<input type="text" name="t4" pattern="\d{6}"/>

<br/> <br/>

Join Date:

<input type="date" name="t5" />

<br/> <br/>

<input type="submit" value="Register"/>

</form>

are you agree terms and conditions?

<input form="form1" type="checkbox" name="ck1" value="yes" />

</body>

</html>

Html Web Pages

Friday 26 April 2019

Online Product Selling Page Desing Using Html and Css

Formatting Tags in HTML

Wednesday 24 April 2019

Registation Form with Social Link Using Html and Css

Friday 19 April 2019

HTML Hyper Links Re-Directing One Website to Another Website

Hyper Links in HTML

Sunday 14 April 2019

Local Drives Design Using Html

Friday 12 April 2019

Structure of Html Document

Thursday 11 April 2019

Login in form using Html

Happy Chistamas Animation using Html and Css

Monday 8 April 2019

History of HTML and W3C Oraganization Details

Thursday 4 April 2019

Student Information Form Using Html

Blogroll

About