FindingPHP : HTML | CSS | JavaScript | DOM | MySQL | PHP

What is Database?

noreply@blogger.com (Anonymous) — Mon, 01 Dec 2014 06:15:00 +0000

What is Database?

A database is a separate application that stores a collection of data. Each database has one or more distinct APIs for creating, accessing, managing, searching and replicating the data it holds.

Other kinds of data stores can be used, such as files on the file system or large hash tables in memory but data fetching and writing would not be so fast and easy with those types of systems.

So nowadays, we use relational database management systems (RDBMS) to store and manage huge volume of data. This is called relational database because all the data is stored into different tables and relations are established using primary keys or other keys known as foreign keys.

A Relational DataBase Management System (RDBMS) is a software that:

Enables you to implement a database with tables, columns and indexes.
Guarantees the Referential Integrity between rows of various tables.
Updates the indexes automatically.
Interprets an SQL query and combines information from various tables.

RDBMS Terminology:

Before we proceed to explain MySQL database system, let's revise few definitions related to database.

Database: A database is a collection of tables, with related data.
Table: A table is a matrix with data. A table in a database looks like a simple spreadsheet.
Column: One column (data element) contains data of one and the same kind, for example the column postcode.
Row: A row (= tuple, entry or record) is a group of related data, for example the data of one subscription.
Redundancy: Storing data twice, redundantly to make the system faster.
Primary Key: A primary key is unique. A key value can not occur twice in one table. With a key, you can find at most one row.
Foreign Key: A foreign key is the linking pin between two tables.
Compound Key: A compound key (composite key) is a key that consists of multiple columns, because one column is not sufficiently unique.
Index: An index in a database resembles an index at the back of a book.
Referential Integrity: Referential Integrity makes sure that a foreign key value always points to an existing row.

MySQL Database:

MySQL is a fast, easy-to-use RDBMS being used for many small and big businesses. MySQL is developed, marketed, and supported by MySQL AB, which is a Swedish company. MySQL is becoming so popular because of many good reasons:

MySQL is released under an open-source license. So you have nothing to pay to use it.
MySQL is a very powerful program in its own right. It handles a large subset of the functionality of the most expensive and powerful database packages.
MySQL uses a standard form of the well-known SQL data language.
MySQL works on many operating systems and with many languages including PHP, PERL, C, C++, JAVA, etc.
MySQL works very quickly and works well even with large data sets.
MySQL is very friendly to PHP, the most appreciated language for web development.
MySQL supports large databases, up to 50 million rows or more in a table. The default file size limit for a table is 4GB, but you can increase this (if your operating system can handle it) to a theoretical limit of 8 million terabytes (TB).
MySQL is customizable. The open-source GPL license allows programmers to modify the MySQL software to fit their own specific environments.

MySQL Introduction

noreply@blogger.com (Anonymous) — Mon, 01 Dec 2014 05:48:00 +0000

MySQL Introduction

MySQL is (as of July 2013) the world's most widely used open-source relational database management system (RDBMS), enabling the cost-effective delivery of reliable, high-performance and scalable Web-based and embedded database applications. It is widely-used as the database component of LAMP (Linux, Apache, MySQL, Perl/PHP/Python) web application software stack.

MySQL was developed by Michael Widenius and David Axmark in 1994. Presently MySQL is maintained by Oracle (formerly Sun, formerly MySQL AB).

MySQL tutorial of w3resource is a comprehensive tutorial to learn MySQL(5.6). We have hundreds of examples covered, often with PHP code. This helps you to learn how to create PHP-MySQL based web applications.

What is MySQL

MySQL is a database management system.
MySQL databases are relational.
MySQL software is Open Source.
The MySQL Database Server is fast, reliable, scalable, and easy to use.
MySQL Server works in client/server or embedded systems.
Initial release : 23 May 1995Current stable release : 5.6.13 / 30 July 2013
Written in : C, C++
Operating system : Cross-platform
Available in : English
License of MySQL is available under GNU General Public License (version 2) or proprietary EULA.
MySQL reduces the Total Cost of Ownership (TCO)

- Reducing database licensing costs by over 90%

                     - Cutting systems downtime by 60%
       - Lowering hardware expenditure by 70%
                      -Reducing administration, engineering and support costs by up to 50%

MySQL Editions

There are five types MySQL editions.

MySQL Enterprise Edition : This edition includes the most comprehensive set of advanced features, management tools and technical support to achieve the highest levels of MySQL scalability, security, reliability, and uptime.
MySQL Standard Edition : This edition enables you to deliver high performance and scalable Online Transaction Processing (OLTP) applications. It provides the ease of use that has made MySQL famous along with industrial-strength performance and reliability.
MySQL Classic Edition : This edition is the ideal embedded database for ISVs, OEMs and VARs developing read-intensive applications using the MyISAM storage engine.
MySQL Cluster CGE : MySQL Cluster is a scalable, real-time, ACID-compliant database, combining 5 x 9s availability and open source technology. With a distributed, multi-master architecture and no single point of failure, MySQL Cluster scales horizontally on commodity hardware accessed via SQL and NoSQL APIs.
MySQL Embedded (OEM/ISV) : MySQL Database is a full-featured, zero-administration database that more than 3000 ISVs, OEMs, and VARs rely on to bring their products to market faster and make them more competitive.

Who uses MySQL

Some of the most visited websites like Flickr, Facebook, Wikipedia, Google (not for search), YouTube.
Content Management Systems like WordPress, phpBB, Drupal, Joomla, TYPO3, MODx.
Last but not least, a large number of web developers across the world.

MySQL supported platforms

MySQL runs on

    -Linux (RedHat, SUSE, Mandrake, Debian)
    -Embedded Linux (MontaVista, LynuxWorks BlueCat)
    -Unix (Solaris, HP-UX, AIX)
    -BSD (Mac OS X, FreeBSD)
    -Windows (Windows 2000, Windows NT)
    -RTOS (QNX)

MySQL supported third party tools

Drivers :

    -ODBC
    -JDBC
    -.NET
    -C++

Languages :

    C
    C++
    C#
    Java
    Delphi
    Visual Basic
    Perl
    Python
    PHP

Development Tools :

    Microsoft Visual Studio
    Borland Delphi and JBuilder
    Eclipse
    NetBeans

Some of the widely used MySQL front ends (tools for managing MySQL)

The MySQL GUI Tools Bundle is a cross-platform open source suite of desktop applications, building and manipulating the data within MySQL databases Development on the GUI Tools bundle has stopped, The GUI Tools bundle has been replaced by MySQL Workbench with the beta releases of MySQL Workbench 5.2. Currently MySQL Workbench Team are working on Version 6.0. The first public beta, labeled version 6.0.2, was released on June 14, 2013.
There are lot of third-party free and proprietary graphical administration applications available that integrate with MySQL and users to work with database. Here are some third-party tools for managing

MySQL :

Tools                            Description
phpMyAdmin                Third party, Free, Web based
HeidiSQL                      Third party, Free, For Windows
Adminer                        Third party, Free
DBEdit                          Third party, Free
dbForge GUI Tools        Third party, Free
Navicat                          Third party, Commercial
Maatkit                           Third party, Command line, free
MySQL Sandbox           Third party, Command line, free
SQLBuddy                     A free Web-based front end, developed in PHP.
SQLyog                          Commercial, but a free 'community' edition is available.
Toad for MySQL            Third party, free from Quest Software

Key features of MySQL

    MySQL follows ANSI SQL 99, the standard SQL.
    Cross Platform.
    Unicode support
    ACID compliance
    Stored procedures
    Triggers
    Cursors
    Views
    Information schema
    Strict mode (ensures MySQL does not truncate or otherwise modify data to conform to an underlying data type, when an incompatible value is inserted into that type)
    Independent storage engines
    Transactions with the InnoDB and NDB Cluster storage engines; savepoints with InnoDB
    SSL support
    Query caching
    Sub-SELECTs (i.e. nested SELECTs)
    Replication support (i.e. Master-Master Replication & Master-Slave Replication) with one master per slave, many slaves per master
    Full-text indexing and searching using MyISAM engine
    Embedded database library
    Shared-nothing clustering through MySQL Cluster
    Support for hotbackup
    Multiple storage engines, allowing one to choose the one that is most effective for each table in the application
    Commit grouping, gathering multiple transactions from multiple connections together to increase the number of commits per second.

Key relational database features supported by MySQL

    High-performance
    Main-memory tables with disk-based tables
    Single-User and Multi-User
    Multi-Threaded
    Multi-Process
    SQL-92 and SQL-99
    ACID Transactions
    Referential Integrity
    Cascading Updates and Deletes
    Multi-table Joins
    Row-level Locking
    Online Hot Backup
    Replication
    Clustering
    BLOBs (Binary Large Objects)
    UDFs (User Defined Objects)
    OLTP (On-Line Transaction Processing)
    Unicode and Double-Byte character support
    Drivers for ODBC, JDBC, .NET and C++

Tutorial objectives

1. A short and concise description to help you to understand about the topic / MySQL command.

2. Syntax of the MySQL command with descriptions of all the parameters used.

3. Display of the actual table on which the MySQL command is being applied.

4. How that MySQL command can be executed with PHP.

5. Explanation of the code.

6. Output of the MySQL command when executed form windows command prompt.

7. Display of the output with PHP in a separate browser window.

8. After reading this largest third party online MySQL tutorial by w3resource, you will be able to install, manage and develop PHP-MySQL web applications by your own.

9. You may refer MySQL Documentation along with this tutorial.

We have a comprehensive, SQL TUTORIAL -2003 standard , which will help you to understand how to prepare queries to fetch data against various conditions.

MySQL :

Tools	Description
phpMyAdmin	Third party, Free, Web based
HeidiSQL	Third party, Free, For Windows
Adminer	Third party, Free
DBEdit	Third party, Free
dbForge GUI Tools	Third party, Free
Navicat	Third party, Commercial
Maatkit	Third party, Command line, free
MySQL Sandbox	Third party, Command line, free
SQLBuddy	A free Web-based front end, developed in PHP.
SQLyog	Commercial, but a free 'community' edition is available.
Toad for MySQL	Third party, free from Quest Software

- See more at: http://www.w3resource.com/mysql/mysql-tutorials.php#sthash.hzaVFuZW.dpuf

MySQL :

Tools	Description
phpMyAdmin	Third party, Free, Web based
HeidiSQL	Third party, Free, For Windows
Adminer	Third party, Free
DBEdit	Third party, Free
dbForge GUI Tools	Third party, Free
Navicat	Third party, Commercial
Maatkit	Third party, Command line, free
MySQL Sandbox	Third party, Command line, free
SQLBuddy	A free Web-based front end, developed in PHP.
SQLyog	Commercial, but a free 'community' edition is available.
Toad for MySQL	Third party, free from Quest Software

- See more at: http://www.w3resource.com/mysql/mysql-tutorials.php#sthash.hzaVFuZW.dpuf

MySQL :

Tools	Description
phpMyAdmin	Third party, Free, Web based
HeidiSQL	Third party, Free, For Windows
Adminer	Third party, Free
DBEdit	Third party, Free
dbForge GUI Tools	Third party, Free
Navicat	Third party, Commercial
Maatkit	Third party, Command line, free
MySQL Sandbox	Third party, Command line, free
SQLBuddy	A free Web-based front end, developed in PHP.
SQLyog	Commercial, but a free 'community' edition is available.
Toad for MySQL	Third party, free from Quest Software

- See more at: http://www.w3resource.com/mysql/mysql-tutorials.php#sthash.hzaVFuZW.dpuf

PHP Installation

noreply@blogger.com (Anonymous) — Thu, 20 Nov 2014 11:01:00 +0000

PHP Installation

What Do I Need?

To start using PHP, you can:

Find a web host with PHP and MySQL support
Install a web server on your own PC, and then install PHP and MySQL

Use a Web Host With PHP Support

If your server has activated support for PHP you do not need to do anything.

Just create some .php files, place them in your web directory, and the server will automatically parse them for you.

You do not need to compile anything or install any extra tools.

Because PHP is free, most web hosts offer PHP support.

Set Up PHP on Your Own PC

However, if your server does not support PHP, you must:

install a web server
install PHP
install a database, such as MySQL

The official PHP website (PHP.net) has installation instructions for PHP: http://php.net/manual/en/install.php

Tip: To get PHP up and running immediately for Windows, you can:
Download WebMatrix

PHP Introduction

noreply@blogger.com (Anonymous) — Wed, 19 Nov 2014 07:12:00 +0000

PHP Introduction

PHP scripts are executed on the server.

What You Should Already Know

Before you continue you should have a basic understanding of the following:

HTML
CSS
JavaScript

If you want to study these subjects first, find the tutorials on our Home page.

What is PHP?

PHP is an acronym for "PHP: Hypertext Preprocessor"
PHP is a widely-used, open source scripting language
PHP scripts are executed on the server
PHP is free to download and use

*PHP is an amazing and popular language!
It is powerful enough to be at the core of the biggest blogging system on the web (WordPress)!
It is deep enough to run the largest social network (Facebook)!
It is also easy enough to be a beginner's first server side language!

What is a PHP File?

PHP files can contain text, HTML, CSS, JavaScript, and PHP code
PHP code are executed on the server, and the result is returned to the browser as plain HTML
PHP files have extension ".php"

What Can PHP Do?

PHP can generate dynamic page content
PHP can create, open, read, write, delete, and close files on the server
PHP can collect form data
PHP can send and receive cookies
PHP can add, delete, modify data in your database
PHP can be used to control user-access
PHP can encrypt data

With PHP you are not limited to output HTML. You can output images, PDF files, and even Flash movies. You can also output any text, such as XHTML and XML.

Why PHP?

PHP runs on various platforms (Windows, Linux, Unix, Mac OS X, etc.)
PHP is compatible with almost all servers used today (Apache, IIS, etc.)
PHP supports a wide range of databases
PHP is free. Download it from the official PHP resource: www.php.net
PHP is easy to learn and runs efficiently on the server side

HTML Attributes

noreply@blogger.com (Anonymous) — Tue, 18 Nov 2014 08:00:00 +0000

HTML Attributes

Attributes provide additional information about HTML elements.

HTML Attributes

    HTML elements can have attributes
    Attributes provide additional information about an element
    Attributes are always specified in the start tag
    Attributes come in name/value pairs like: name="value"

The lang Attribute

The document language can be declared in the <html> tag.

The language is declared in the lang attribute.

Declaring a language is important for accessibility applications (screen readers) and search engines:

Example:

<!DOCTYPE html>

<html lang="en-US">
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

The first two letters specify the language (en). If there is a dialect, use two more letters (US).

The title Attribute

HTML paragraphs are defined with the <p> tag.

In this example, the <p> element has a title attribute. The value of the attribute is "About FindingPHP":

<!DOCTYPE html>
<html>
<body>

<h1>About FindingPHP</h1>

<p title="About FindingPHP">
FindingPHP is a web developer's site.
It provides tutorials and references covering
many aspects of web programming,
including HTML, CSS, JavaScript, MySQL, DOM, PHP.
</p>

<p><b>
If you move the mouse over the paragraph above,
the title will display as a tooltip.
</b></p>

</body>
</html>

*When you move the mouse over the element, the title will be displayed as a tooltip.

The href Attribute

HTML links are defined with the <a> tag. The link address is specified in the href attribute:

<!DOCTYPE html>
<html>
<body>

<a href="http://findingphp.blogspot.in/">This is a link</a>

</body>
</html>

You will learn more about links and the <a> tag later in this tutorial.

Size Attributes

HTML images are defined with the <img> tag.
The filename of the source (src), and the size of the image (width and height) are all provided as attributes:

<!DOCTYPE html>
<html>
<body>

<img src="http://i.imgur.com/QdEj8Lf.jpg" width="100" height="100">

</body>
</html>

The image size is specified in pixels: width="100" means 100 screen pixels wide.

You will learn more about images and the <img> tag later in this tutorial.

The alt Attribute

The alt attribute specifies an alternative text to be used, when an HTML element cannot be displayed.

The value of the attribute can be read by "screen readers". This way, someone "listening" to the webpage, i.e. a blind person, can "hear" the element.

<!DOCTYPE html>
<html>
<body>

<img src="http://i.imgur.com/QdEj8Lf.jpg" alt="FindingPHP" width="100" height="100">

</body>
</html>

We Suggest: Always Use Lowercase Attributes

The HTML5 standard does not require lower case attribute names.

The title attribute can be written with upper or lower case like Title and/or TITLE.

W3C recommends lowercase in HTML4, and demands lowercase for stricter document types like XHTML.

*Lower case is the most common. Lower case is easier to type.
At FindingPHP we always use lower case attribute names.

We Suggest: Always Quote Attribute Values

The HTML5 standard does not require quotes around attribute values.

The href attribute, demonstrated above, can be written as:

<!DOCTYPE html>
<html>
<body>

<a href=http://findingphp.blogspot.in/>This is a link</a>

</body>
</html>

W3C recommends quotes in HTML4, and demands quotes for stricter document types like XHTML.
Sometimes it is necessary to use quotes. This will not display correctly, because it contains a space:

<!DOCTYPE html>
<html>
<body>

<h1>About FindingPHP</h1>

<p title=About FindingPHP>
You cannot ommit qoutes around an attribute value
if the value contains spaces.
</p>

<p><b>
If you move the mouse over the paragraph above,
your browser will only display the first word from the title.
</b></p>

</body>
</html>

*Using quotes are the most common. Omitting quotes can produce errors.
At FindingPHP we always use quotes around attribute values.

Single or Double Quotes?

Double style quotes are the most common in HTML, but single style can also be used.

In some situations, when the attribute value itself contains double quotes, it is necessary to use single quotes:

Or vice versa:

Chapter Summary

All HTML elements can have attributes
The HTML title attribute provides additional "tool-tip" information
The HTML href attribute provides address information for links
The HTML width and height attributes provide size information for images
The HTML alt attribute provides text for screen readers
At FindingPHP we always use lowercase HTML attribute names
At FindingPHP we always quote attributes with double quotes

HTML Elements

noreply@blogger.com (Anonymous) — Tue, 18 Nov 2014 06:36:00 +0000

HTML Elements

HTML documents are made up by HTML elements.

HTML elements are written with a start tag, with an end tag, with the content in between:

<tagname>content</tagname>

The HTML element is everything from the start tag to the end tag:

<p>My first HTML paragraph.</p>

Start tag     Element content     End tag
<h1>          My First Heading     </h1>
<p>    My first paragraph.    </p>
<br>

*~~Some HTML elements do not have an end tag.~~

Nested HTML Elements

HTML elements can be nested (elements can contain elements).

All HTML documents consist of nested HTML elements.

This example contains 4 HTML elements:

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

HTML Example Explained

The <html> element defines the whole document.

It has a start tag <html> and an end tag </html>.

The element content is another HTML element (the <body> element).

<html>

<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>

</html>

The <body> element defines the document body.

It has a start tag <body> and an end tag </body>.

The element content is two other HTML elements (<h1> and <p>).

<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>

The <h1> element defines a heading.

It has a start tag <h1> and an end tag </h1>.

The element content is: My First Heading.

<h1>My First Heading</h1>

The <p> element defines a paragraph.

It has a start tag <p> and an end tag </p>.

The element content is: My first paragraph.

<p>My first paragraph.</p>

Don't Forget the End Tag

Some HTML elements will display correctly, even if you forget the end tag:

<!DOCTYPE html>
<html>
<body>

<p>This is a paragraph.
<p>This is a paragraph.

</body>
</html>

The example above works in all browsers, because the closing tag is considered optional.

Never rely on this. It might produce unexpected results and/or errors if you forget the end tag.

Empty HTML Elements

HTML elements with no content are called empty elements.

<br> is an empty element without a closing tag (the <br> tag defines a line break).

Empty element can be "closed" in the opening tag like this: <br />.

HTML5 does not require empty elements to be closed. But if you need stricter validation, and make your document readable by XML parsers, please close all HTML elements.

HTML Tip: Use Lowercase Tags

HTML tags are not case sensitive: <P> means the same as <p>.

The HTML5 standard does not require lowercase tags, but W3C recommends lowercase in HTML4, and demands lowercase for stricter document types like XHTML.

JavaScript - Document Object Model or DOM

noreply@blogger.com (Anonymous) — Mon, 10 Nov 2014 15:15:00 +0000

A Document object represents the HTML document that is displayed in that window. The Document object has various properties that refer to other objects which allow access to and modification of document content.

The way that document content is accessed and modified is called the Document Object Model, or DOM. The Objects are organized in a hierarchy. This hierarchical structure applies to the organization of objects in a Web document.

Window object: Top of the hierarchy. It is the outmost element of the object hierarchy.
Document object: Each HTML document that gets loaded into a window becomes a document object. The document contains the content of the page.
Form object: Everything enclosed in the <form>...</form> tags sets the form object.
Form control elements: The form object contains all the elements defined for that object such as text fields, buttons, radio buttons, and checkboxes.

Here is a simple hierarchy of few important objects:

There are several DOMs in existence. The following sections explain each of these DOMs in detail and describe how you can use them to access and modify document content.

    The Legacy DOM: This is the model which was introduced in early versions of JavaScript language. It is well supported by all browsers, but allows access only to certain key portions of documents, such as forms, form elements, and images.

    The W3C DOM: This document object model allows access and modification of all document content and is standardized by the World Wide Web Consortium (W3C). This model is supported by almost all the modern browsers.

    The IE4 DOM: This document object model was introduced in Version 4 of Microsoft's Internet Explorer browser. IE 5 and later versions include support for most basic W3C DOM features.

DOM compatibility:

If you want to write a script that uses the W3C DOM when it is available, and otherwise uses the IE 4 DOM if it is available, you can use a capability-testing approach that first checks for the existence of a method or property to determine whether the browser has the capability you desire.

For example:

if (document.getElementById) {

  // If the W3C method exists, use it

}

else if (document.all) {

  // If the all[] array exists, use it

}

else {

  // Otherwise use the legacy DOM

}

What is JavaScript ?

noreply@blogger.com (Anonymous) — Thu, 06 Nov 2014 09:52:00 +0000

What is JavaScript ?

JavaScript started life as LiveScript, but Netscape changed the name, possibly because of the excitement being generated by Java.to JavaScript. JavaScript made its first appearance in Netscape 2.0 in 1995 with a name LiveScript.

JavaScript is a lightweight, interpreted programming language with object-oriented capabilities that allows you to build interactivity into otherwise static HTML pages.

The general-purpose core of the language has been embedded in Netscape, Internet Explorer, and other web browsers

The ECMA-262 Specification defined a standard version of the core JavaScript language.

JavaScript is:JavaScript is a lightweight, interpreted programming language
Designed for creating network-centric applications
Complementary to and integrated with Java
Complementary to and integrated with HTML
Open and cross-platform

Client-side JavaScript:

Client-side JavaScript is the most common form of the language. The script should be included in or referenced by an HTML document for the code to be interpreted by the browser.

It means that a web page need no longer be static HTML, but can include programs that interact with the user, control the browser, and dynamically create HTML content.

The JavaScript client-side mechanism features many advantages over traditional CGI server-side scripts. For example, you might use JavaScript to check if the user has entered a valid e-mail address in a form field.

The JavaScript code is executed when the user submits the form, and only if all the entries are valid they would be submitted to the Web Server.

JavaScript can be used to trap user-initiated events such as button clicks, link navigation, and other actions that the user explicitly or implicitly initiates.

Advantages of JavaScript:

The merits of using JavaScript are:

Less server interaction: You can validate user input before sending the page off to the server. This saves server traffic, which means less load on your server.
Immediate feedback to the visitors: They don't have to wait for a page reload to see if they have forgotten to enter something.
Increased interactivity: You can create interfaces that react when the user hovers over them with a mouse or activates them via the keyboard.
Richer interfaces: You can use JavaScript to include such items as drag-and-drop components and sliders to give a Rich Interface to your site visitors.

Limitations with JavaScript:

We can not treat JavaScript as a full fledged programming language. It lacks the following important features:

Client-side JavaScript does not allow the reading or writing of files. This has been kept for security reason.
JavaScript can not be used for Networking applications because there is no such support available.
JavaScript doesn't have any multithreading or multiprocess capabilities.

Once again, JavaScript is a lightweight, interpreted programming language that allows you to build interactivity into otherwise static HTML pages.

JavaScript Development Tools:

One of JavaScript's strengths is that expensive development tools are not usually required. You can start with a simple text editor such as Notepad.

Since it is an interpreted language inside the context of a web browser, you don't even need to buy a compiler.

To make our life simpler, various vendors have come up with very nice JavaScript editing tools. Few of them are listed here:

Microsoft FrontPage: Microsoft has developed a popular HTML editor called FrontPage. FrontPage also provides web developers with a number of JavaScript tools to assist in the creation of an interactive web site.

Macromedia Dreamweaver MX: Macromedia Dreamweaver MX is a very popular HTML and JavaScript editor in the professional web development crowd. It provides several handy prebuilt JavaScript components, integrates well with databases, and conforms to new standards such as XHTML and XML.

Macromedia HomeSite 5: This provided a well-liked HTML and JavaScript editor, which will manage their personal web site just fine.

JavaScript Introduction

noreply@blogger.com (Anonymous) — Thu, 06 Nov 2014 08:03:00 +0000

JavaScript Introduction

JavaScript is the most popular programming language in the world.

It is the language for HTML, for the Web, for computers, servers, laptops, tablets, smart phones, and more.

This page contains some examples of what JavaScript can do in HTML.

JavaScript Can Change HTML Elements:

The HTML DOM (the Document Object Model) is the official W3C standard for accessing HTML elements.

JavaScript can manipulate the DOM (change HTML contents).

The following example changes the content (innerHTML) of an HTML element identified with id="demo":

Example:
Coding:

<!DOCTYPE html>
<html>
<body>

<h1>My First JavaScript</h1>

<p>JavaScript can change the content of an HTML element:</p>

<button type="button" onclick="myFunction()">Click Me!</button>

<p id="demo">This is a demonstration.</p>

<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>

</body>
</html>

The method document.getElementById() is one of many methods in the HTML DOM.

You can use JavaScript to:

Change HTML elements
Delete HTML elements
Create new HTML elements
Copy and clone HTML elements
And much more ...

There are several chapters, about the HTML DOM, later in this tutorial.

JavaScript Can Change HTML Attributes:

This example changes the value of the source attribute (src) of an HTML <img> element:

Example:
Coding:

<!DOCTYPE html>
<html>
<body>

<img id="myImage" onclick="changeImage()" src="pic_bulboff.gif" width="100" height="180">

<p>Click the light bulb to turn on/off the light.</p>

<script>
function changeImage() {
    var image = document.getElementById('myImage');
    if (image.src.match("bulbon")) {
        image.src = "pic_bulboff.gif";
    } else {
        image.src = "pic_bulbon.gif";
    }
}
</script>

</body>
</html>

With JavaScript, you can change almost any HTML attribute.

JavaScript Can Change HTML Styles (CSS):

Changing the style of an HTML element, is a variant of changing an HTML attribute.

Example:

Coding:

<!DOCTYPE html>
<html>
<body>

<h1>My First JavaScript</h1>

<p id="demo">JavaScript can change the style of an HTML element.</p>

<script>
function myFunction() {
    var x = document.getElementById("demo");
    x.style.fontSize = "25px";
    x.style.color = "red";
}
</script>

<button type="button" onclick="myFunction()">Click Me!</button>

</body>
</html>

With JavaScript, you can change almost any CSS value.

JavaScript Can Validate Data:

JavaScript is often used to validate input:

Example:

Coding:

<!DOCTYPE html>
<html>
<body>

<p>Please input a number between 1 and 10:</p>

<input id="numb" type="number">

<button type="button" onclick="myFunction()">Submit</button>

<p id="demo"></p>

<script>
function myFunction() {
    var x, text;

    // Get the value of input field with id="numb"

    x = document.getElementById("numb").value;

    // If x is Not a Number or less than one or greater than 10

    if (isNaN(x) || x < 1 || x > 10) {
        text = "Input not valid";
    } else {
        text = "Input OK";
    }
    document.getElementById("demo").innerHTML = text;
}
</script>

</body>
</html>

Did You Know?

*JavaScript and Java are different languages, both in concept and design.

JavaScript was invented by Brendan Eich, to be used in Netscape (a no longer existing browser) in 1995,
and was adopted by the ECMA standard association in 1997.

ECMA-262 is the official name. ECMAScript 5 (version 1.8.5 - July 2010) is the latest standard.

CSS Selectors

noreply@blogger.com (Anonymous) — Tue, 04 Nov 2014 07:23:00 +0000

CSS Selectors

CSS selectors allow you to select and manipulate HTML element(s).

CSS selectors are used to "find" (or select) HTML elements based on their id, classes, types, attributes, values of attributes and much more.

The element Selector:

The element selector selects elements based on the element name.

You can select all <p> elements on a page like this: (all <p> elements will be center-aligned, with a red text color)

Example:
Coding:

<!DOCTYPE html>
<html>
<head>
<style>
p {
text-align: center;
color: red;
}
</style>
</head>
<body>

<p>Every paragraph will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>

</body>
</html>

Every paragraph will be affected by the style.

Me too!

And me!

The id Selector:

The id selector uses the id attribute of an HTML tag to find the specific element.

An id should be unique within a page, so you should use the id selector when you want to find a single, unique element.

To find an element with a specific id, write a hash character, followed by the id of the element.

The style rule below will be applied to the HTML element with id="para1":

Example:

Coding:

<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>

<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>

</body>
</html>

Hello World!

This paragraph is not affected by the style.

*~~Do NOT start an ID name with a number!~~

The class Selector:

The class selector finds elements with the specific class.

The class selector uses the HTML class attribute.

To find elements with a specific class, write a period character, followed by the name of the class:

In the example below, all HTML elements with class="center" will be center-aligned:

Example:
Coding:

<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>

<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p>

</body>
</html>

Red and center-aligned heading

Red and center-aligned paragraph.

You can also specify that only specific HTML elements should be affected by a class.

In the example below, all p elements with class="center" will be center-aligned:

Example:
Coding:

<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
color: red;
}
</style>
</head>
<body>

<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be red and center-aligned.</p>

</body>
</html>

This heading will not be affected

This paragraph will be red and center-aligned.

*~~Do NOT start a class name with a number!~~

Grouping Selectors:

In style sheets there are often elements with the same style:

h1 {
    text-align: center;
    color: red;
}

h2 {
    text-align: center;
    color: red;
}

p {
    text-align: center;
    color: red;
}

To minimize the code, you can group selectors.

To group selectors, separate each selector with a comma.

In the example below we have grouped the selectors from the code above:

Example:
Coding:

<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: red;
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>

</body>
</html>

Hello World!

Smaller heading!

This is a paragraph.

CSS syntax

noreply@blogger.com (Anonymous) — Sun, 02 Nov 2014 07:48:00 +0000

CSS syntax

A CSS rule set consists of a selector and a declaration block:

The selector points to the HTML element you want to style.

The declaration block contains one or more declarations separated by semicolons.

Each declaration includes a property name and a value, separated by a colon.

CSS Example:

A CSS declaration always ends with a semicolon, and declaration groups are surrounded by curly braces:

p {color:red;text-align:center;}

To make the CSS code more readable, you can put one declaration on each line, like this:

Coding:

<!DOCTYPE html>

<html>

<head>

<style>

p {

color: red;

text-align: center;

}

</style>

</head>

<body>

<p>Hello World!</p>

<p>This paragraph is styled with CSS.</p>

</body>

</html>

Hello World!

This paragraph is styled with CSS.

CSS Comments:

Comments are used to explain your code, and may help you when you edit the source code at a later date. Comments are ignored by browsers.

A CSS comment starts with /* and ends with */. Comments can also span multiple lines:

Example:
Coding:

<!DOCTYPE html>
<html>
<head>
<style>
p {
    color: red;
    /* This is a single-line comment */
    text-align: center;
}

/* This is
a multi-line
comment */
</style>
</head>
<body>

<p>Hello World!</p>
<p>This paragraph is styled with CSS.</p>
<p>CSS comments are not shown in the output.</p>

</body>
</html>

Hello World!

This paragraph is styled with CSS.

CSS comments are not shown in the output.

HTML Basics

noreply@blogger.com (Anonymous) — Sat, 01 Nov 2014 09:12:00 +0000

HTML Basics

HTML Headings

HTML headings are defined with the <h1> to <h6> tags:

Example:
Coding:

<!DOCTYPE html>
<html>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

</body>
</html>

This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5

This is heading 6

HTML Paragraphs

HTML paragraphs are defined with the <p> tag:

Example:

coding:

<!DOCTYPE html>
<html>
<body>

<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>

</body>
</html>

This is a paragraph.
This is a paragraph.
This is a paragraph.

HTML Links

HTML links are defined with the <a> tag:

The link address is specified in the href attribute.
Attributes are used to provide additional information about HTML elements.

Example:

coding:

<!DOCTYPE html>
<html>
<body>

<a href="http://findingphp.blogspot.com/">This is a link</a>

</body>
</html>

This is a link

HTML Images

HTML images are defined with the <img> tag.
The source file (src), alternative text (alt), and size (width and height) are provided as attributes:

Example:
Coding:

<!DOCTYPE html>
<html>
<body>

<img src="http://i.imgur.com/QdEj8Lf.jpg" alt="Findingphp" width="100" height="128">

</body>
</html>

HTML Editors

noreply@blogger.com (Anonymous) — Sat, 01 Nov 2014 07:37:00 +0000

HTML Editors

Write HTML Using Notepad or TextEdit

HTML can be edited by using a professional HTML editor like:

Adobe Dreamweaver
Microsoft Expression Web
CoffeeCup HTML Editor

However, for learning HTML we recommend a text editor like Notepad (PC) or TextEdit (Mac).

We believe using a simple text editor is a good way to learn HTML.

Follow the 4 steps below to create your first web page with Notepad.

Step 1: Open Notepad

To open Notepad in Windows 7 or earlier:

Click Start (bottom left on your screen). Click All Programs. Click Accessories. Click Notepad.

To open Notepad in Windows 8 or later:

Open the Start Screen (the window symbol at the bottom left on your screen). Type Notepad.

Step 2: Write Some HTML

Write or copy some HTML into Notepad.

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

Step 3: Save the HTML Page

Save the file on your computer.

Select File -> Save as in the Notepad menu.

When saving an HTML file, use either the .htm or the .html file extension. There is no difference, it is entirely up to you.

Step 4: View HTML Page in Your Browser

Double-click your saved HTML file, and the result will look much like this:

My First Heading

My first paragraph.

HTML versions list

noreply@blogger.com (Anonymous) — Sat, 01 Nov 2014 06:49:00 +0000

HTML versions list

Version Year

HTML 1991

HTML+ 1993

HTML 2.0 1995

HTML 3.2 1997

HTML 4.01 1999

XHTML 1.0 2000

HTML5 2012

XHTML5 2013

Why learn HTML ?

noreply@blogger.com (Anonymous) — Sat, 01 Nov 2014 06:20:00 +0000

It is possible to create webpages without knowing anything about the HTML source behind the page.

There are excellent editors on the market that will take care of the HTML parts. All you need to do is layout the page.

However, if you want to make it above average in webdesign, it is strongly recommended that you understand these tags.

The most important benefits are:

You can use tags the editor does not support.

You can read the code of other people's pages, and "borrow" the cool effects.

You can do the work yourself, when the editor simply refuses to create the effects you want.

You can write your HTML by hand with almost any available text editor, including notepad that comes as a standard program with Windows.

All you need to do is type in the code, then save the document, making sure to put an .html extension or an .htm extension to the file (for instance "mypage.html").

What is CSS ?

noreply@blogger.com (Anonymous) — Sat, 13 Sep 2014 17:14:00 +0000

CSS

A CSS (cascading style sheet) file allows you to separate your web sites (X)HTML content from it’s style. As always you use your (X)HTML file to arrange the content, but all of the presentation (fonts, colors, background, borders, text formatting, link effects & so on…) are accomplished within a CSS.

At this point you have some choices of how to use the CSS, either internally or externally.

Advantages of CSS:

CSS saves time: You can write CSS once and then reuse same sheet in multiple HTML pages. You can define a style for each HTML element and apply it to as many Web pages as you want.
Pages load faster: If you are using CSS, you do not need to write HTML tag attributes every time. Just write one CSS rule of a tag and apply to all the occurrences of that tag. So less code means faster download times.
Easy maintenance: To make a global change, simply change the style, and all elements in all the web pages will be updated automatically.
Superior styles to HTML: CSS has a much wider array of attributes than HTML so you can give far better look to your HTML page in comparison of HTML attributes.
Multiple Device Compatibility: Style sheets allow content to be optimized for more than one type of device. By using the same HTML document, different versions of a website can be presented for handheld devices such as PDAs and cell phones or for printing.
Global web standards: Now HTML attributes are being deprecated and it is being recommended to use CSS. So its a good idea to start using CSS in all the HTML pages to make them compatible to future browsers.

What is HTML ?

noreply@blogger.com (Anonymous) — Fri, 12 Sep 2014 08:01:00 +0000

HTML

HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages.

Description:

Hypertext is text displayed on a computer or other electronic device with references to other text that the reader can immediately access, usually by a mouse click or key press sequence.

Apart from text, hypertext may contain tables, images and other presentational elements. It is an easy-to-use and flexible format to share information over the Internet.

Markup Languages use sets of markup tags to characterize text elements within a document, which gives instructions to the Web browser on how the document should appear.

HTML Gives You Ability To:

Publish documents online with text, headings, images, lists, tables, etc.
Accessing online information or other web resources such as images, videos or other HTML document via hyperlinks.
Create forms to collect user input like login information, feedback, comments or conducting transactions with remote servers, etc.
Include videos, sound clips, flash movies, applications and other HTML document directly inside an HTML document.

Note:HyperText Markup Language (HTML), as described earlier is a markup language not a programming language.

HTML Tags:

HTML is written in the form of HTML elements consisting of markup tags. These markup tags are the fundamental characteristic of HTML. Every markup tag is composed of a keyword, surrounded by angle brackets (like <html>).

HTML tags normally come in pairs like <html> and </html>. The first tag in a pair is the opening tags the second tag is the closing tags. An opening tag and a closing tag are identical, except a "slash" (/) after the opening angle bracket of a closing tag, to tell the browser that the command has been completed. In between these tags web designers can add text, tables, images, etc.

For example, a paragraph, which is represented by the p element, would be written as:

<p>In the HTML syntax, most elements are written ...</p>

Document Overview:

All HTML document seem to be plain text files. They contain no images,sounds, videos etc. but just plain text. However, they may contain links to images, sounds, videos and animations.

Note:The browser does not display the HTML tags, but uses the tags to interpret the content of the page.

Button With Line Breaks

noreply@blogger.com (Anonymous) — Wed, 10 Sep 2014 16:58:00 +0000

You can use carriage return characters to break the line: 


<input type="button" value="Really&#x00A;Tall&#x00A; Button">

Hide url in address bar

noreply@blogger.com (Anonymous) — Sat, 06 Sep 2014 18:13:00 +0000

Qus: How to hide url in address bar ?

Ans:

The HTML script above works on both Internet Explorer and Netscape/Firefox, etc.

This is First Method:

This is Second Method:

JavaScript-Validation Script

noreply@blogger.com (Anonymous) — Wed, 27 Aug 2014 17:52:00 +0000

JavaScript-Validation Script

email validation:

/^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i

******************************************************************************

Alphabets, numbers and space(' ') no special characters min 3 and max 20

characters.

var ck_name = /^[A-Za-z0-9 ]{3,20}$/;

******************************************************************************

Supports alphabets and numbers no special characters except underscore('_') min 3

and max 20 characters.

var ck_username = /^[A-Za-z0-9_]{3,20}$/;

******************************************************************************

Password

Password supports special characters and here min length 6 max 20 charters.

var ck_password = /^[A-Za-z0-9!@#$%^&*()_]{6,20}$/;

FindingPHP : HTML | CSS | JavaScript | DOM | MySQL | PHP

What is Database?

What is Database?

MySQL Introduction

MySQL Introduction

PHP Installation

PHP Installation

PHP Introduction

PHP Introduction

HTML Attributes

HTML Attributes

HTML Attributes

The lang Attribute

The title Attribute

The href Attribute

Size Attributes

The alt Attribute

Chapter Summary

HTML Elements

HTML Elements

Nested HTML Elements

HTML Example Explained

Don't Forget the End Tag

Empty HTML Elements

HTML Tip: Use Lowercase Tags

JavaScript - Document Object Model or DOM

DOM compatibility:

What is JavaScript ?

What is JavaScript ?

Client-side JavaScript:

Advantages of JavaScript:

Limitations with JavaScript:

JavaScript Development Tools:

JavaScript Introduction

JavaScript Introduction

JavaScript Can Change HTML Elements:

JavaScript Can Change HTML Attributes:

JavaScript Can Change HTML Styles (CSS):

JavaScript Can Validate Data:

CSS Selectors

CSS Selectors

The element Selector:

The id Selector:

The class Selector:

Red and center-aligned heading

This heading will not be affected

Grouping Selectors:

Hello World!

Smaller heading!

CSS syntax

CSS syntax

CSS Example:

CSS Comments:

HTML Basics

HTML Basics

HTML Headings

This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5

This is heading 6

HTML Paragraphs

HTML Links

HTML Images

HTML Editors

HTML Editors

Write HTML Using Notepad or TextEdit

Step 1: Open Notepad

Step 2: Write Some HTML

Step 3: Save the HTML Page

Step 4: View HTML Page in Your Browser

My First Heading

HTML versions list

HTML versions list

Version Year

Why learn HTML ?

What is CSS ?

CSS

Advantages of CSS:

Nested HTML Elements