What is HTML

HTML is a Markup Language for creating Web pages.

Description

HTML stands for HyperText Markup Language. It is used to create Web pages. That is, Web pages all over the world consist of HTML.
We can look at how other people have coded their Web pages. Click on the "View" menu and then on "Source".

<!doctype html>

<head>

<title>Sample Web page</title>

</head>

<body>

<p>Here is a paragraph</p>

</body>

</html>

History

The HyperText Markup Language (HTML) is the publishing language of the World Wide Web. The first version of HTML was described by Tim Berners-Lee in late 1991. For its first five years (1990-1995), HTML went through a number of revisions and experienced a number of extensions, primarily hosted first at CERN, and then at the IETF.

With the creation of the W3C, HTML's development changed venue again. A first abortive attempt at extending HTML in 1995 known as HTML 3.0 then made way to a more pragmatic approach known as HTML 3.2, which was completed in 1997. HTML4 followed, reaching completion in 1998.

Version	Published year
HTML+	1993
HTML2.0	1995
HTML3.2	1997
HTML4.01	1999

Tag

HTML uses markup tags to create Web pages. All content on the Web page is meant by tag. For examples, "Here is a paragraph", "This is a image" and so on.

Tag syntax

HTML is using tags for its syntax. A tag is composed with special characters: <, > and /. They are interpreted by softwares to compose an HTML element.

Decomposition of HTML elements

HTML Elements comes usually by tag pairs.

For opening a simple element with a start tag

it starts with <
then a list of characters without space, the tagname (or element)
ends usually with a >.

Then closing the simple element with a end tag

it starts with </
then the same list of characters without space, the tagname (or element)
ends usually with a >.

If the tagname is "cite", then you get

Some elements do not have an end tag (because they are implied by the following tags). For example you might have seen.

<br>

An element can have attributes to refine its meaning.

These attributes are specified on the start tag. They consist of a name and a value, separated by an "=" character. Such as:

In HTML, the attribute value can remain unquoted if it doesn't contain spaces or any of the following characters: " ' ` = < or >. Otherwise, it has to be quoted using either single or double quotes. The value, along with the "=" character, can be omitted altogether if the value is the empty string. Once you are working in a team you might want to choose a common way of authoring your code.

These are examples of syntaxes you might see on the Web:

The following tags have been introduced for better structure:

· section: This tag represents a generic document or application section. It can be used together with h1-h6 to indicate the document structure.

· article: This tag represents an independent piece of content of a document, such as a blog entry or newspaper article.

· aside: This tag represents a piece of content that is only slightly related to the rest of the page.

· header: This tag represents the header of a section.

· footer: This tag represents a footer for a section and can contain information about the author, copyright information, et cetera.

· nav: This tag represents a section of the document intended for navigation.

· dialog: This tag can be used to mark up a conversation.

· figure: This tag can be used to associate a caption together with some embedded content, such as a graphic or video.

Class Note:
------------

Creating dynamic gallery

Opacity range (0-1) (0.1,0.2,0.3 etc)

Help of the opacity we can generate the transparent form content our contender. The opacity value we can specify between 0 to 1. 1 is full colour and 0 is full transparency.

Syntax:- opacity(0.5)

Transition:-we can use the transition attributes and properties create a sequence movement between two positions of the objects. The position distance how much time to finish to specify in the help of the seconds.

In the transition it is possible to specify delay time also.

Delay time to specify below

-liner (starting to ending same motion)

-easy-in (starting it slow ending in speed.)

-easy-out(starting in speed ending in slow)

<html>

<head>

<title>Working with Dynamic Gallery</title>

<style>

dl#gallery

{position:relative;}

dl#gallery dt

{width:150px; height:120px; margin:2%; border:solid black;}

dl#gallery dt img

{width:150px; height:120px;}

dl#gallery dd

{width:1000px;

height:600px;

border:dotted red;

position:absolute;

left:220;

top:0px;

opacity:0;

transition:1s all;}

dl#gallery dt:hover+dd

{opacity:1;}

dl#gallery dd img

{width:1000px;

height:500px;}

</style>

</head>

<body>

<dd>

<p>This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version. </p>

</dd>

</dl>

</body>

</html>

Syntax:- transition: 1s(time in sec) all(property)

Working with OVER FLOW

What are the content is there more than the container that one we going to call over flow. Those content for controlling purpose we use over flow properties:

1. Hide

2. Visible

3. Auto

4. Scroll

Overflow Hide:- What are the content is there more than container those contain for hiding purpose we use over flow.

Syntax:- overflow:hidden

Overflow visible:- What are the content is there in hiding mode those content for enabling purpose we use overflow visible.

Syntax:-overflow: visible

Auto:- We can enable the vertical scroll bar in the browser we use auto.

Syntax: overflow:auto

Scroll:- We can enable the horizontal and vertical scroll bar in the contender we use overflow scroll.

Syntax: overflow:scroll

Create a newspaper column or Working with columns

Create a magazine or newspaper column in the page we use columns.

The column attributes are:-

1. Column count

2. Column gap

3. Column rule

Column Count:- Help of this attribute to specify the number of column.

Syntax:- -browserselector-column-count:number

Column Gap:- We can specify the space between columns.

Syntax:- -webkit-column-gap:20px;

Column Rule:- We can maintain a vertical line between the columns we use column rule.

Syntax:- -webkit-column-rule:2px #000 solid

Ex:-

<!doctype html>

<html>

<head>

<title>Working with column</title>

</head>

<body>

<h1>Working with column</h1>

<hr>

</body>

</html>

article

{column-count:3;

column-gap:30px;

column-rule:solid 2px #000;

-webkit-column-count:3;

-webkit-column-gap:30px;

-webkit-column-rule:solid 2px #000;}

article

{column-count:3;

column-gap:30px;

column-rule:solid 2px #000;

-webkit-column-count:3;

-webkit-column-gap:30px;

-webkit-column-rule:solid 2px #000;}

Defining custom fonts or @ Font-face

Help of tis selector to define a custom font family in our root folder we use @font-face.

Syntax:- @font-face:

{font-family: mystyle1; src:url(font/mystyle/name.ttf);}

Working with RGBA (color)

RGBA means Red Green Blue Alpha. It is one color mode. Help of this mode the particular content or container we can use in the transparent mode. RGBA is alternate to the opacity. When to use the opacity the transparent effect its apply to the all contents in the container. When to use the RGBA to transparent particular contain in the container.

Syntax:- background:RGBA(0,0,0,0.5) color:RGBA(0,0,0,0.5)

Ex:-

<style>

body

{background:#f00;}

article{

width:400px; height:280px;

background:rgba(0,0,0,0.5);

color:#fff; text-align:center;

line-height:280px; font-size:70px;

font-weight:bold; margin:0px auto;}

</style>

<body>

<article>WELCOME</article>

</body>

Working with Transform

We can transforming the content or container in the custom format of the designer. (Transforming means modifying the content or object).

Syntax:- -webkit-transform:transform format( );

Rotate:- We can rotate the content or container in the clock wise or counter clock wise. The rotating value to specify in the +ve and –ve value. The value you need to specify in the degree.

Syntax:- -browser selector-transform:rotate(45deg);

Ex:-

<html>

<head>

<title>Working with rotate</title>

</head>

<body>

</article>

</section>

</body>

</html>

article

{width:256px; height:256px;

background:url(ak/project/05.png);

margin:100px auto;

border-radius:256px;

transition:1s all;}

article:hover

{-webkit-transform:rotate(-360deg);}

Scale:- help of the scale it is possible to increase or decrease the size of the content or container at a time in all direction. And also its possible we can increase or decrease size of the content or container x,y axis. Less than 1 decrease the size and greater than 1 increase the size.

Syntax:-

-webkit-transform:scale(2);

-webkit-transform:scaleX(4) scaleY(2);

-webkit-transform:scale(0.5); //for decreasing size.

Ex:-

<html>

<head>

<title>

working with scale

</title>

</head>

<body>

<h1>Welcome to Scale</h1>

</section>

</body>

</html>

section

{width:150px; height:150px;

background:#f00; margin:200px auto;

transition:5s all;}

section:hover

{border-radius:150px;

-webkit-transform:scale(2);}

section h1

{text-align:center;

font-size:20px;

line-height:150px;}

section h1:hover

{color:#fff;

border-radius:150px;

background-color:#0f0}

Skew:- Help of the skew property we can transform a object or container in angle wise we use skew. The skew angle value to specify in the degrees and X and Y axis.

Syntax:

-webkit-transform:skew(-45deg);

-webkit-transform:skewX(20deg);

Ex:-

<html>

<head>

<title>

working with scale

</title>

</head>

<body>

<h1>Welcome to Scale</h1>

</section>

</body>

</html>

section

{width:200px; height:200px;

margin:200px auto;

transition:1s all;

background:#f00;}

section:hover

{-webkit-transform:skewX(20deg) skewY(-40deg);}

section h1

{text-align:center;

font-size:20px;

line-height:200px;

transition:5s all;}

section h1:hover

{color:#fff;

background-color:#0f0}

Translate:- Help of the translate command possible to move the content or container from one location to another location in the various direction. The translate value possible to specify in X & Y axis help of the measure units in pixels.

Syntax:-

-webkit-transform:translateX(200px)translateY(200px);

<!doctype html>

<html>

<head>

<title>Working with translate</title>

</head>

<body>

</body>

</html>

article

{width:200px; height:200px;

background:#0f0;

margin:200px auto;

line-height:200px;

text-align:center;

font-weight:bold;

transition:2s all;}

article:hover

{-webkit-transform:translateX(100px);}

@keyframes Animation

Animation:- Animation means sequence of images or movement of the object. The animation to create help of the keyframe support.

Syntax:-

-webkit-Animation:name of the key frame time to finish the animation format of the animation;

-webkit-Animation:myanimation 1s infinite;

Keyframes:- Keyframes means it’s a position of the object. Help of the keyframes we can specify the object position where we want. And also the total animation we can control help of the keyframes only. The keyframes range we can use 0% to 100%.

Syntax:-

@-webkit-keyframes:name of the animation{0%{…}100%{…}}

@-webkit-keyframes:myanimation{0%{…}100%{…}}

<!doctype html>

<html>

<head>

<title>Working with animation</title>

</head>

<body>

</body>

</html>

article

{width:100px; height:100px;

background:#f00; border-radius:100px;

text-align:center; line-height:100px;

position:relative;

-webkit-animation:5s myanimation infinite alternate;}

@-webkit-keyframes myanimation

{

0%{left:0px; top:0px; background:#0f0;}

10% {left:100px; top:200px; background:#ff0;}

20% {left:200px; top:0px; background:#0ff;}

30% {left:300px; top:200px; background:#0ee;}

40% {left:400px; top:0px; background:#0dd;}

50% {left:500px; top:200px; background:#0cc;}

60% {left:600px; top:0px; background:#0bb;}

70% {left:700px; top:200px; background:#aa0;}

80% {left:800px; top:0px; background:#099;}

}

Sliding Image

<!DOCTYPE html>

<html><head><title>Working with image</title><style>

div#slideshow {

position: relative;

background: #000;

overflow:hidden;}

div#slideshow, figure#imagestrip img {

width: 500px;

height: 400px;

float: left;}

figure#imagestrip {

position: absolute;

width: 2000px;

margin: 0;}

@keyframes slider {

0% { transform: translateX(0px); }

20% { transform: translateX(0px); }

25% { transform: translateX(-500px); }

45% { transform: translateX(-500px); }

50% { transform: translateX(-1000px); }

70% { transform: translateX(-1000px); }

75% { transform: translateX(-1500px); }

95% { transform: translateX(-1500px); }

100% { transform: translateX(-2000px); }

}

@-webkit-keyframes slider {

0% { transform: translateX(0px); }

20% { transform: translateX(0px); }

25% { transform: translateX(-500px); }

45% { transform: translateX(-500px); }

50% { transform: translateX(-1000px); }

70% { transform: translateX(-1000px); }

75% { transform: translateX(-1500px); }

95% { transform: translateX(-1500px); }

100% { transform: translateX(-2000px); }

}

figure#imagestrip {

-webkit-animation: slider 10s infinite;

-moz-animation: slider 10s infinite;

-ms-animation: slider 10s infinite;}

</style></head><body><div id=slideshow><figure id=imagestrip>

</body></html>

Working with media quarry (Media only Screen)

Quarry means a condition. Help of the selector we can show the website layout by using various condition. That means the particular website or application how you want in the desktop, tablet or mobile.

Desktop

>780

Mobile

<380

Tablet

<780

Syntax:-

@media only screen and (max-width:780)

Validation

-required

-pattern

-autofocus

-placeholder

-input valid

-input invalid

-span title

-span attribute

-contact: attribute

Form layout attributes and properties

-field set

-legend

-form name

-form method

-post

-get

-form action

Working with Web Form 2.0

Input types

-text

-number

-tel

-email

-date

-time

-datetime-local

-week

-data list

-list

-search

-URL

-color

-file

-submit

-button

-reset

-ID

-name

-size

Working with web form 2.0

The form we can use for communication purpose. Help of the form to get the data from the user and to send the data to user.

Form layout attributes and properties

Field:- Help of the field set to create a layout of the form. It work like a set.

Define all form input fields

</fieldset>

Legend:- Help of the legend to define a title in the field set.

<legend>title here</legend>

</fieldset>

Form name:- Help of the form name to define a name of the form. The name its help for identification.

<legend>title here</legend>

</fieldset>

From method:- Help of the method to specify the communication format of the form we use method there its content 2 format i.e. get and post.

here to define all input fields

</form>

Action:- Help of action we can link a server side script in our html document by using action.

here to define all input fields

</form>

Foem Input Fields

Input text:- We can create a input text field in the form to use input type text.

Size:- Help of the size attribute to specify the width of the input field.

ID:- Help of the id to link the client side script.

Name:- Help of the name to link the server side script.

Number:- we can create a input type number field in the form to use input type number.

Minimum/Maximum:- Help of the minimum and maximum to specify the length of the number field.

Tel:- We can create a telephone number field in the form to use input type tel.

Input Email:- We can create a email field in the form to use input type email. When to use the email type its automatically add email condition in the input field.

Input list & data list:- Help of this two commands possible to create a combo list.

<option="ind">

<option="aus">

</datalist>

Input File:- We can create a file upload field in the form, we use input type file.

Input Button:- We can create a input type button in the form, we use input type button. When to use input type button we can call the function individually. When to use input type submit its automatically add submit function.

<button>Submit</button>

Form Validation

Required:- required means it a condition. When to add the required field in the input, the input field compulsory to enter a value.

Pattern:- Help of the pattern to specify the input format. The formats are numbers, alphabets, special character. And also possible to specify input length.

<input type="text" required pattern="[a-z A-Z]{1,20}"> =[0-9 - + @ : ; $]

Place Holder:- We can write a water mark in the input field, we use place holder.

Autofocus:- We can specify the cursor point where to redirect after submitting the form.

Input Valid:- After entering valid information in the input field the input field appearance how you want to specify in the input valid.

Input:valid{attribute and property}

Input Invalid:- After entering invalid information in the input field the input appearance how you want to specify in the input invalid position.

Input:invalid{attribute and property}

Span title and content attribute

Help of this selector and attribute we can show the alert information inside of the form set we use span title and content attribute. Span It is a inline element. In a element you need to any special property inside of the parent element we use span title.

Ex:-

<!doctype html>

<html><head><title>Working with web form</title>

</head><body>

<h1>Working with web form 2.0</h1><hr>

<fieldset><legend>User Interface design</legend>

<input type="text" id="username" name="username"

size="30" placeholder="Username" required>

<li><label style="list-style:none;">Email</label></li>

<input type="text" id="email" name="email" size="30"

placeholder="Email ID" required>

<li><label style="list-style:none;">Phone No.</label></li>

<li><label style="list-style:none;">URL Address</label></li>

<li><label style="list-style:none;">Search</label></li>

<li><label style="list-style:none;">Color</label></li>

<li><label style="list-style:none;">State</label></li>

</datalist><br>

</ul></form></fieldset></body></html>

}

body{

background:#ddd;}

fieldset{

width:30%;

margin:0px auto;

background:#a9a9a9;

border:none;}

legend{

background:#a9a9a9;

line-height:40px;

padding:0px 30px;}

legend fieldset{

border-radius:5px;}

label{

font-family:verdana;}

input

{

height:30px;

border-radius:5px;

border:#4d4d4d solid 1px;}

ul{

padding-left:15;}

li{

list-style:none;

line-height:35px;}

Working with Audio and Video

-video <video></video>

-audio <audio></audio>

-source

-src

-width

-height

-controls

-autoplay

-muted

-poster

-loop

-type

Video:- HTML5 defines a new element which specific a standard way to embed a video /movie on a web page.

Audio:- Help of the audio element its possible to call the audio.

Source Src:- Specify the URL of the video and audio file.

Type:- We can specify the format of the audio and video. We use type.

Width and Height:- Help of this two attributes we can specify the video and audio player’s width and height. The major unit we can use pixels and percentage (%).

Controls:- Specifies that video control should be display (such as a play /pause button etc.). we can enable all player controls.

Autoplay:- Specifies that the video will start playing as soon as it load. When to open the page the audio or video will play automatically.

Poster:- We can add a thumbnail in the video player we use poster. When to play the video the posted it automatically hide.

Loop:- Specifies that the video will start over again, every it is finish.

Muted:- Specifies that the audio output of the video should be muted. We can put the audio in disable mode video and audio player we use muted.

<body><h1>Working with video and audio</h1>

<hr>

<br>

</body>

JavaScript

JavaScript it is a client side script language. We can use the JavaScript to create dynamic effects in the web application and websites. Help of the java script we can see the particular output in the webpage or website by using a particular condition. The javascript we can write in various methods. They are :

Inline script, internal script and external script.

Inline Script:- the script we can write in an element, what are the function we are defining inline, the function it work in single element.

Internal Script:- what are the script we define in internal format the script we can use only defining page.

function here

</script>

External script:- what are the script we are defining in the external the script we can use more than one page.

Basic Features in JavaScript

-structure of the java script

-defining variables

-using operators

-define functions

-using events

-display dialog box

-navigating windows

Printing in javascript

document.write("Welcome to JavaScript")

document.write("<br>")

document.write("Welcome again to JavaScript")

</script>

Dialog boxes in JavaScript

function fun1()

{

alert("Hi! Amit")

}

function fun2()

{

confirm("Click OK to proceed else cancel to stop")

}

function fun3()

{

prompt("Enter your name")

}

</script>

<button onclick="fun1()">Alert</button>

<button onclick="fun2()">Conform</button>

<button onclick="fun3()">Prompt</button>

Working with Canvas (API- Application Progress Interface)

The canvas is an API container. API means Application Progress Interface. Container means work area. Inside of the API container it’s possible to draw various graphic objects and also possible to play the graphic objects help of the scripting.

here not accept any information directly

</canvas>

Context(variable)=canvas(Element ID).getContext(method for print)('2d')(containt type)

Help of this line possible to connect HTML document element to script.

getContext(‘2d’):-Help of this method it’s possible to specify the format of the content to print in the canvas.

context.fillText: - Help of this method its possible to print text in the canvas.

Syn:- variable.fillText("text here"x,y);

Ex: -context.fillText("Hi Context"50,50);

context.font: - help of this method possible to specify the formats of the text.

Syn: -context.font="32px arial"

Example for print text in a canvas

<!doctype html>

<html>

<head>

<title>Canvas</title>

<style>

canvas

{background:silver;}

</style>

</head>

<body>

<h1>Welcome to Canvas</h1>

<hr>

</canvas>

context=canvas.getContext('2d');

context.font="30px arial";

context.fillStyle="red";

context.fillText("hi from Canvas", 50, 50);

context.fillText("hello from Canvas", 50, 80);

</script>

</body>

</html>

context.fillStyle:- help of this method it’s possible to define color of the contain in the canvas.

Syn: - context.fillStyle="red";

context.fillRect: - help of this to print a rectangle in the canvas.

context.fillRect(x,y, W, H);

Ex:- context.fillRect(50,100, 100,100);

context. strokeRect: - help of this method to apply a outline for the rectangle.

context. strokeRect(x,y, W, H);

context.lineWidth: - help of this method to specify the outline depth.

context.lineWidth=”6”

context. strokeStyle: - help of this to specify the outline color .

<!doctype html><html><head><title>Canvas</title><style>

canvas

{background:silver;}

</style></head><body>

<h1>Welcome to Canvas</h1><hr>

context=canvas.getContext('2d');

context.fillStyle="green";

context.strokeStyle="red";

context.fillRect(50,50, 100, 100);

context.strokeRect(50,50, 100, 100);

context.fillRect(150,150, 100, 100);

context.strokeRect(150,150, 100, 100);

context.fillRect(250,50, 100, 100);

context.strokeRect(250,50, 100, 100);

</script></body></html>

How To draw a line and triangle shape in a canvas

context.moveTo: - help of this method to specify the starting point of the line.

Syn:- context.moveTo(x,y);

lineTo: - help of this method to specify the line ending position.

Syn: - context.lineTo(x,y);

context.closePath: - help of this method we can join the starting and ending point.

Syn:- context.closePath();

context.beginPath: - help of this method we can enable the outline path.

Syn: - context.beginPath();

context.fill: - help of this method we can fill color in the particular container we use context.fill. this method its work for color closing. Means it will not overlap any other container.

Syn: - context.fill();

context.stroke: -We can close all above properties.

Syn: - context.stroke();

<!doctype html><html><head><title>Canvas</title><style>canvas{background:silver;}

</style></head><body>

<h1>Welcome to Canvas</h1><hr>

</canvas><script>

context=canvas.getContext('2d');

context.lineWidth=3;

context.beginPath();

context.moveTo(50,50);

context.lineTo(100,100);

context.lineTo(150,50);

context.lineTo(200,100);

context.lineTo(250,50);

context.fillStyle="blue";

context.strokeStyle="red";

context.closePath();

context.fill();

context.stroke();

</script></body></html>

Point in the canvas PI and arc: - We can draw a circle or half circle in the canvas. We use context.arc().

context.arec(x,y,50,50, math.PI true);

<!doctype html>

<html>

<head>

<title>Canvas</title>

<style>

canvas

{background:silver;

align:center;}

</style>

</head>

<body>

<h1>Welcome to Canvas</h1>

<hr>

</canvas>

var context=canvas.getContext('2d');

context.lineWidth=6;

context.beginPath();

context.arc(100,100,50,5, Math.PI, false);

context.strokeStyle="red";

context.stroke();

</script>

</body>

</html>

Working with Image filling

context.draw.Image: - help of this method it’s possible to draw a image in the canvas.

context.drawImage(image, 50, 50);

<!doctype html>

<html>

<head>

<title>Canvas</title>

<style>

canvas

{background:silver;}

</style>

</head>

<body>

<h1>Welcome to Canvas</h1>

<hr>

</canvas>

var context=canvas.getContext('2d');

var imageone=new Image();

imageone.onload=function()

{

context.drawImage(imageone,50,50);

}

imageone.src="1.png";

var imagetwo=new Image();

imagetwo.onload=function()

{

context.drawImage(imagetwo,100,50);

}

imagetwo.src="2.png";

</script>

</body>

</html>

Working with web storage

localstorage.setItem: - help of this method we can store a data in the browser page. What are the data we can store into the browser page help of the local storage, the data it will be store permanently, there is no any expire date. When to enter the new entry in the application we will loss previous storage contents.

localstorage.setItem();

sessionstorage.setItem: - help of this method it’s possible to store data temporarily in the browser page. This data it’s available in the browser page up to the browser page open.

sessionstorage.setItem();

NOTE: - It is similar to the cookie.

<!doctype html>

<html>

<head>

<title>Workign with Storage</title>

function save()

{

fieldvalue=document.getElementById('uname').value;

localStorage.setItem('Username', fieldvalue);

fieldvalue=document.getElementById('email').value;

localStorage.setItem('User_email', fieldvalue);

fieldvalue=document.getElementById('phno').value;

localStorage.setItem('User_Phone', fieldvalue);

}

</script>

</head>

<body>

<h1>Working with Storage</h1>

<hr>

<ul>

<li>Username:</li>

<li>Email:</li>

<li>Phone Number</li>

</ul>

</form>

</body>

</html>

Working with server Storage

Form.html

<ul>

<li>Username:</li>

<li>Email:</li>

<li>Phone Number</li>

<li>Address</li>

</ul>

</form>

Connect.php

<?php

if(isset($_POST['sub']))

{

$uname=$_POST['uname'];

$email=$_POST['email'];

$phone=$_POST['phone'];

$address=$_POST['address'];

mysql_connect("localhost","root","");

mysql_select_db("test");

$data=mysql_query("insert into mytable values('$uname','$email','$phone','$address')");

if ($data)

echo "<script>alert('Submitted Successfully')</script>";

else

echo "<script>alert('Please try after some time. Your form not submitted.')</script>";

}

Working with GEO Location

if(!navigator.geolocation)

{

alert("Your browser dosn't support geo location.");

}

else

{

navigator.geolocation.getCurrentPosition(success,error);

}

function success(position)

{

var lat=position.coords.latitude;

var lng=position.coords.longitude;

}

function error(error)

{

alert("sorry an error occured:"+error)

}

</script>

Site Implementation / Publishing Website

Filezila

Webassist.com

Dynamicdrive.com

Device enter software

Search This Blog

Visually Teach By Mr. Jeevan

HTML5

Tag syntax

Comments

Post a Comment

Popular posts from this blog

jQuery-Banner

JQUERY-BANNER-FADEIN AND FADEOUT

Static Web site Creating By Using Tables