Html Web Pages

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>

Friday, 29 March 2019

Registration Form web page desing using html

<--Create a web page Registration Form using Html--!>

<html>

<body bgcolor=pink text=blue>

<center>

<table border=5>

<h1><u>Registration Form</u></h1>

<form action=reg>

<tr><th>first name:</th><td><input type=text name=fname><br><br></td></tr>

<tr><th>last name:</th><td><input type=text name=lname><br><br></td></tr>

<tr><th>Address:</th><td><textarea rows=3 columns=20> </textarea> <br><br></tr></td>

<tr><th>Gender:</th><td> <input type=radio name=gender value=male>male

<input type=radio name=gender value=female>female<br><br></tr></td>

<tr><th>Languages known:</th><td><input type=checkbox name=language value=English>English

<input type=checkbox name=language value=Hindi>Hindi

<input type=checkbox name=language value=Telugu>Telugu<br><br></td></tr>

<tr><th>country:</th><td>

<select name=reg>

<option value="india">india

</select><br><br></td></tr>

<tr><th>Hobbies:</th><td>

<select name=reg size=3 multiple>

<option value="Reading Books">Reading Books

<option value="Playing Chess">Playing Chess

<option value="Playing Cricket">Playing Cricket

<option value="Watching Movies">Watching Movies

<option value="Watching Cricket">Watching Cricket

</select><br><br></td></tr>

<tr><th>username</th><td> <input type=text name=uname><br><br></td></tr>

<tr><th>password</th><td> <input type=password name=pword><br><br></td></tr>

<tr><th><input type=submit> </th>

<td><input type=reset></td></tr>

</table>

</form>

</center>

</body>

</html>

Html Web Pages

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

Friday, 29 March 2019

Registration Form web page desing using html

Blogroll

About