HTML (HyperText Markup Language) is the main markup language for creating web pages and other information to be displayed in a web browser, providing both the structure and content for what is sent from a web server through the use of tags. The current implementation of the HTML specification is HTML5.

Share tech news, updates, or what's on your mind.

Sign up to Post

The Google Maps API offers various ways to draw dynamic and static maps.  Using a combination of PHP and JavaScript, you can draw active JavaScript maps that allow pan-and-zoom in the client browser window.  You can also draw "static" maps that are rendered in the form of PNG images (see below).  Each approach has its advantages.  This E-E question inspired the following example that uses a JSON object of map points to place markers on an active map.

A key concept in mapping is the "geocode," a numerical designation of a location on the earth.  A geocode is part of a GPS coordinate.  The geocode gives the latitude and longitude in the form of a pair of signed decimal numbers, separated by a comma.  The latitude is always given first.  Here is an example of a geocode that shows the location of my house: 38.930445,-77.148075.  Six digits to the right of the decimal point is generally considered to be "rooftop accuracy" in mapping.  The geocode can have greater accuracy, but as a practical matter, greater accuracy doesn't matter much to map applications.

Zoom, Center and Size
The usefulness of your maps and markers will depend on three principal components. …
LVL 36

Expert Comment

by:Loganathan Natarajan
Could you please suggest which one to use Static map or javascript based map? I have a requirement like display multiple address with custom icon (it is simlar airbnb browse & display location details?)
LVL 111

Author Comment

by:Ray Paseur
@logudotcom: I think the choice would have a lot of dependencies on the application design.  You might want to cross-post a question in the PHP and JavaScript Zones to get some variety of opinions from the EE community.
Popularity Can Be Measured
Sometimes we deal with questions of popularity, and we need a way to collect opinions from our clients.  This article shows a simple teaching example of how we might elect a favorite color by letting our clients vote for it.  Once our tables are created, our entire process is contained in a single PHP script that collects the votes and shows the aggregate results.

Setting Up Our Data Base Tables
The first thing we need to do is create two tables.  One table will contain the color choices.  There will be one row for each color.  The other table will contain the votes.  There will be one row for each vote.  You might be wondering why we don't just add a counter to the color table and accumulate the sum of votes directly in the color row.  We certainly could do that, but data base storage is cheap and we might be interested in knowing more than just how many votes each color received.  If we have each vote recorded separately along with a little information about our client (we keep just the IP address in this example) we would be able to do popularity trend analysis over time or use an IP-to-location service to answer questions like, "Which color is most popular in New York?"  With a little creativity you might extend these concepts to cover other questions and other answers.

Our first script creates these tables.  We connect and select the data base and once we have gotten to line 28 of our script, we know the data base is ready…

Expert Comment

by:Rishab tata
Getting this error:

Notice: Undefined variable: mysql in C:\xampp\htdocs\boot\RAY_EE_voting_create.php on line 32

Fatal error: Call to a member function query() on null in C:\xampp\htdocs\boot\RAY_EE_voting_create.php on line 32
LVL 111

Author Comment

by:Ray Paseur
@Rishab: Thanks for the heads-up.  Those lines are commented out in the sample script, so they didn't throw any errors when I tested.  Try changing $mysql to $mysqli if you want to use them.  I'll update the scripts right now. There were some other "code rot" things that needed refactoring, as well.  Glad you caught this!
PHP Warning about Register GlobalsDeprecated and Headed for the Dustbin
By now, you have probably heard that some PHP features, while convenient, can also cause PHP security problems.  This article discusses one of those, called register_globals.  It is a thing you do not want.  You probably do not have it turned on (you can use <?php phpinfo(); to check).  But if you do have it turned on, you may have a lot of work ahead of you, just to keep your scripts running in the current PHP environment.

PHP is Both Easy and Powerful
At the confluence of easy, powerful, and complex, we find a lot of assumptions.  We assume certain things just happen automatically, like the contents of the URL GET arguments showing up in the $_GET array when we start our script.  $_GET is always there, always set, as dependable as gravity.  However the contents of $_GET may not be something that we want to use in our scripts, at least not until we have filtered or sanitized the external data.  Consider this interesting notion: the exact same PHP script, with the exact same URL arguments can produce two different outputs.  How could this confusion have happened?  We tried to make PHP too easy.

What Register_Globals Intended
The PHP directive was intended to make it easy for novice programmers to get access to external data.  It was thought that the syntax for assigning variables was "too much work" if you had to write something like this.
$x = $_GET["x"];

Open in new window


Expert Comment

Ray I have a somewhat silly question for you.

Is it a bad practice to initialize all of your variables with PHP?
I always initialize all of my variables to NULL or some preset value so I don't have any issues.  I think it comes from VB coding.
LVL 111

Author Comment

by:Ray Paseur
I recommend that you initialize variables.  Not all of my code does this but it is a really great idea.  PHP does not require it.  Quel Fromage.
HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is not checked?  Unlike the text-type input controls, the unchecked checkbox is simply absent from the request.  This situation makes it necessary for our action script to know in advance what checkboxes might or might not be present.  What if we have several checkboxes that are related and we want an all-or-nothing option?  We can use an array of checkboxes and a little JavaScript to make our forms easier for the client.  This script demonstrates some of the popular design patterns for using checkboxes in HTML, JavaScript and PHP.  

In the code example, script initialization starts at line 10.  We set up an associative array of key=>value pairs.  This array is our data model.  It lets the script produce checkboxes that are generated dynamically, depending on the contents of the array.  If you wanted to add, for example, "Graduates" you just add that to the $options array following the pattern shown in the code snippet.  No other changes to either the form or action script would be needed.  The new option would appear automatically.  If you think creatively about this array you realize that it does not need to be hard-coded.  It might come from the results of a data base query.

The "Action" Script
This article was written many years ago, in the days when PHP supported the MySQL extensionToday you would not use MySQL examples, instead choose MySQLi or PDO.  When you see mysql_function() examples here, or anywhere else, be aware that the examples are getting old, and should be considered with an historical understanding of the times, context, and modern alternatives.

Both Easy and Powerful
How easy is PHP?  Very easy.  It has been described as "a programming language even my grandmother can use."

How powerful is PHP?  Very powerful.  But also very complex.  My grandmother is pretty smart, but I don't think she has been thinking about class abstraction or late static bindings very much.

At the confluence of easy, powerful, and complex, we find a lot of assumptions.  We assume certain things just happen automatically, like the contents of the URL GET arguments showing up in the $_GET array when we start our script.  $_GET is always there, always set, as dependable as gravity.  Unfortunately the contents of $_GET is not as dependable.  In fact, the exact same PHP script, with the exact same URL arguments can produce two different outputs.  How could this confusion have happened?  We tried to make PHP too easy.

Special Characters
LVL 70

Expert Comment

by:Jason C. Levine

Excellent description of the headache that has been magic quotes and nice resolution and sample code.

Expert Comment

Ray - Great article.

I really like the foreach pointer to go through the super globals.

I've always used something like this that I typically just through into my database class:


class MySQLDatabase {
	private $magic_quotes_active;
	private $new_enough_string_exists;
	function __construct(){
		$this->magic_quotes_active = get_magic_quotes_gpc();
		$this->new_enough_string_exists = function_exists("mysql_real_escape_string");
	public function escape_value($value){
	  return $value;

$db=new MySQLDatabase();

<form method="post">
<input type="text"   name="my_INPUT_Field"   value="<?php echo htmlentities($db->escape_value($_GET['name'])); ?>" />
<input type="submit" name="my_SUBMIT_Button" value="go" />

Open in new window

"I want to put my photos online, but I don't want them stolen.  What settings should I use?"

When You Put Photos Online
First and foremost, any digital file published on the WWW can be copied, stored, modified, retransmitted, etc.  Remember Napster?  In other words once you produce a URL (web address), the resource there (in this case your picture) has been released into the wild, and you're 100% dependent on the copyright registration (you did register your copyright, didn't you??) to protect you from electronic thievery.  So if you have a really good, high-quality image, do not publish the image URL and instead publish a URL of a degraded or adulterated version of this image, either highly compressed or watermarked or both.  Most of the royalty-free online galleries use a watermark.  You should, too.  See the examples here:

Can I Watermark my Images Automatically?
Yes.  See this article for some ideas.

OK, I Understand the Risks
Great.  Let's get started with a sample photograph.  Here is the original, uncompressed bitmap version.  Save it some place safe, preferably in a folder that you have backed up.  If you have the camera RAW images, save those, too.  Your original…
LVL 37

Expert Comment

Nice article! It got my "Yes" vote above.
A colleague recently asked me about how to give his client a small part of the web site that could be completely under the client's control.  Since I have done this sort of thing before to add emergency banners to a web site, I decided I would create a generalized case that illustrated the principles.  There are five parts to this application.  

A Background Image that Looks Like a Chalk Board
First, there is a background image that sets the stage for the messages.  In this case we wanted to use white writing on a black chalk board.  I found an open-source image of a chalk board and used Photoshop to resize it to 350 pixels wide and 450 pixels high.  I named it chalkboard_background and stored it in the form of a png image. The background image - a traditional wood-framed chalk board.Our Very Simple Data Model
Second, there is a data storage requirement.  In this case, there is very little data to be stored - just a string of text that we will write on the chalk board.  I created a little text file on the server and named it chalkboard.txt.  It can be anywhere that makes sense for your application needs, so long as its permission set makes it writable by PHP.

A Chalkboard Class
Third, there is a need for a Chalkboard class to encapsulate our data and functions.  The class has three methods - a constructor, a render and an update.  Let's look at each one separately.  

The Class Constructor
The constructor starts on line 6 and does most of the work of the class.  We define three variables: file
This warning has to be one of the most commonly issued warnings in the history of PHP.  The article explains why this warning arises and what to do to mitigate the problem.

How this Happens
HTTP headers include many different kinds of information that can be exchanged between the browser and the server.  But as the name "header" implies, they must come only at the beginning of the server's response to the client request.  It is a law of the HTTP protocol that all headers must come first, have been sent, and completed before any browser output can be sent.  In PHP, the "Cannot Modify Header Information" always means that some browser output was sent, and then a PHP header() function was called.  To quote the PHP web site, "Remember that header() must be called before any actual output is sent, either by normal HTML tags, blank lines in a file, or from PHP.  It is a very common error to read code with include(), or require(), functions, or another file access function, and have spaces or empty lines that are output before header() is called.  The same problem exists when using a single PHP/HTML file."

All by itself, "whitespace" can cause this error.  Consider this code snippet.  The middle line apparently contains "nothing" but it actually contains a newline character and that single (invisible) character is sufficient to cause the warning.  

Open in new window

One of the frequent application design questions goes something like this: "How can I confirm when a client registers on my web site?"

The registration might be for general use of a self-administered site like a forum, or for attendance at a specific event.  But the registration is a public page - anyone can register, and that means that any hacker or 'bot can attack your form.  When a client registers, you want to know that the registration is valid, so some kind of "handshake" makes sense.  One common method of getting this handshake is to send a confirmation email to the registrant, with a clickable link to a confirmation page.  When the client clicks the link to the confirmation page, the handshake can be completed.

Many sites use this register-and-confirm pattern, and all of them work the same way.  Once you see the moving parts of the application it is easy to understand and implement a similar design for your registration needs.  Once the registration table is set up in your data base, you can accomplish all of the pieces of the handshake within a single PHP script!

Common Basis for All Scripts
All of our scripts will need to connect to the data base, so we can begin by isolating this commonly used code into a separate "common" script.  We also have a specialized local function to validate an email address, so we will put that into the common script, too.  We will include the common script into our specialized scripts with …

Expert Comment

by:Luca Bonacina
I greately appreciated these scripts, even if on my hosting probably it doesn't work due to a version problem (I'm using 5.6.28).

It seem failing all the occurrence of instance like this:  $num = $res->num_rows();

In example:  Fatal error: Call to undefined method mysqli_result::num_rows() in /RAY_register_and_confirm.php on line 162

Do you think it is a version problem?

Expert Comment

by:Dexter Marx
@Luca Bonacina

I ran into the same problem. For everybody who is going to use this script with up to date PHP Versiions:

change num_rows() to num_rows
it's not a function anymore, but a variable

for instance, here:
    if ( $res->num_rows == 0 ){

further you have to replace
    $row = mysql_fetch_assoc($res);
    $row = mysqli_fetch_assoc($res);
A frequent question goes something like this, "How can I show an introductory page to my clients on the first site visit, but not show it again on every visit?"  The answer is by using a cookie.  This article shows the design pattern for a home page that is aware of the need or lack of need for an introductory "splash" page.  It also allows the client to see the splash page on demand.

Using Cookies to Preserve "Stateful" Information
In HTTP, cookies are sent from the browser to the server at the time of the page request.  PHP puts these cookies into the $_COOKIE associative array.  See:  There is an important characteristic to this data flow -- the cookies you set in your PHP script are NOT put into $_COOKIE by PHP.  This means that we can test the contents of $_COOKIE to see the historical record of the cookies, and that record will not change during the execution of our script.  Cookies we set in our current script are only presented to future scripts.

The setcookie() function is used to set cookies on the client browser.  See for the details.  Cookies are part of the HTTP headers.  This means that you may only call setcookie() before any browser output has been sent, including whitespace.  There are no exceptions to this rule.

In this script we do the following things.

(1) Unconditionally set a cookie …

Expert Comment

'voted' for this nice article, Ray ...


Expert Comment

by:Rowby Goren
I've heard about cookies but really never knew the technical side of it.

This article fills that gap!

This article explains how to make it harder to copy a html page's content (text/images). It is almost impossible to totally prevent displayed content from being copied, after all, someone can simply start typing if they are really determined. But we can make it more difficult by disabling the more obvious methods.

To accomplish this functionality you need to:
1) Disable the right clicks, so that users can't use the right click to save the images.
2) Disable the text selection.
3) Disable Drag and drop of images

All of the above mentioned conditions relates with the mouse events, so we will manipulate the mouse events using the JavaScript (which is the default client-side script supported by browsers).

Most of the scripts available on internet can do this but these are not cross browser compatible.
The JavaScript code I am using in this article is also drawn from various URL's searched by googling.
(Check the code file attached old javascript.txt)

When I applied the code (old javascript.txt) it was able to:
1) disable the right click works on all browsers
2) disable the text selection

But the main drawback of the code was that the text selection blocking JavaScript code, in Mozilla Firefox prevents click on the text boxes, as a result you can't type into the input boxes.
The below line of code is creating the problem:

After googling and some r&d I somehow managed to get this working, what I did was
a) removed
LVL 29

Expert Comment


My apologies if any of my feedback seemed harsh. It was not my intent.

Nice job and thank you for contributing to our collection of articles.

Best regards,

LVL 75

Expert Comment

by:Michel Plungjan
Instead of

2) The above Javascript code doesn't works in Firefox so you need to manually add a preventDefault attribute on each image tag.
<img alt="Banner Image" src="http://someurl/abc.gif" onmousedown="if (event.preventDefault) event.preventDefault()" />

you could do
window.onload=function() {
  var imgs = document.getElementsByTagName('img');
  for (var i=0, n=imgs.length;i<n;i++)  {
    imgs[i].onmousedown=function(e) { if (e && e.preventDefault)e.preventDefault() } // or perhaps just return false;

Open in new window

I often run into questions on Experts Exchange asking "Why does my site look different in FireFox than it does in IE"  and "My site looks great in Firefox/Safari, but looks messed up in IE".  I often suggest a quick fix for people, and that is to use conditional statements for Internet Explorer.

I am not going to focus so much on why the problem happens (that's another several articles in and of itself), but how to implement IE conditional statements, and when to use them.  The very basic explanation of why web pages display differently is because each browser interprets HTML, CSS, and other programming languages in its own way.  W3C (World Wide Web consortium [learn more at]) sets "standards" for web development, however it is up to the developer of each browser how closely they want to comply with those "standards".  Firefox and Safari comply fairly closely, where as Internet Explorer does it more their own way (it should be noted that IE standards compliance has gotten better with each new version - 8 being the most recent).

Some styles that commonly need attention are position, paddings and margins, float elements, and in the dreaded IE6, transparent images.

So now that we have a basic idea of why my site looks "weird" in some browsers.  How do we fix it?  Here's how I design a site.  I layout my site, test/preview in Firefox, than add a conditional statement, and "fix" it for IE.  And here is how you apply the "fix" for IE:

to the head of your …

Expert Comment

Hi there and thanx for your post it is helpful,

my problem is that I don't know how to use conditional statements for something very specific.

I have designed my perfonal portfolio website and I'm encountering one specific problem both in Internet Explorer and Firefox. I am an amateur and would really appreciate an expert's help.

My navigation bar and the div below it (solid color) are absolute but I have applied the following javascript to keep them fixed (meaning they remain apparent/fixed when scrolling sideways):

<script type="text/javascript">
window.pos = function() {
  if (window.scrollX != null && window.scrollY != null) return { x: window.scrollX, y : window.scrollY };
  else return { x: document.body.parentNode.scrollLeft, y : document.body.parentNode.scrollTop };

window.onscroll = function(e) {
  document.getElementById('navigation').style.left = window.pos().x + 'px';
  document.getElementById('under_nav').style.left = window.pos().x + 'px';

The probelm in IE and Firefox is major jerking of the navigation bar when scrolling sideways. I do not have this problem is Safari. And I really don't want to change the design. IF there is no solution to stop the jerking, how can I cancel the javascript only on IE and firefox?
LVL 37

Administrative Comment


I see you have asked that as a separate question (which is the appropriate thing to do) here:

Any responses to the question you have posed should go there as well, so they don't clutter up this article.

Experts Exchange Page Editor






HTML (HyperText Markup Language) is the main markup language for creating web pages and other information to be displayed in a web browser, providing both the structure and content for what is sent from a web server through the use of tags. The current implementation of the HTML specification is HTML5.