Showing posts with label HTML. Show all posts
Showing posts with label HTML. Show all posts

Saturday 11 April 2015

Image Slide Show in HTML

In HTML image addition we discussed already. Now we will make a image slideshow in HTML page. This is really very important article for those who wanna make a dynamic web page.
Let's start making a slideshow. 

1) First we will write our HTML page as usual.
    <html>
    <head><title>slideshow</title>
    </head>
    <body><?body>
    </html>

2) For image slideshow first we introduce our images. This will do by introducing script inside head tag.

<script type="text/javascript">
var a1 = new Image()
a1.src ="a.jpg"
var a2 = new Image()
a2.src = "b.jpg"
var a3 = new Image()
a3.src = "c.jpg"
var a4 = new Image()
a4.src = "d.jpg"
</script>


3) Now images are added. Let's start implements them into body of web page. For this we will add a first display image on web page using HTML image addition tag.

<img src = "a.jpg" name ="slide" height="400" width ="400">

4) Now we again introduce a script inside body of web page. This script will make slideshow operations.

<script type="text/javascript">
var number = 1
function slideit() {

document.images.slide.src = eval("a"+number+".src")
if(number<4)
number++
else
number=1
setTimeout("slideit()",1500)
}
slideit()
</script>


In above script we make a variable "number" (you can make any word you wants). This variable initialize as 1. After that we made a function "slideit", In this function we used a javascript command which evaluate images one by one. A loop introduced after that with will run till last image. The variable number will change in every count of the loop as 1,2,3,4. This will change image source as a1,a2,a3,a4. After that a timeout command introduced for slideit function with time difference 1500 ms.

Now run the program, I am sure it will work fine.

Thursday 9 April 2015

How to use PHP to access a Database

Databases are backbone of today's websites. PHP has support for over 20 databases. MySQL, PostgreSQL and Oracle are widely used databases. Databases are used for storing users registration data, credit card numbers, purchase history, product reviews and many other things.
PHP and phpmyadmin both are used to access databases. Relational database management system is a server which is used to manage data. Data is structured into tables where each table have some no. of columns, each of which has a name and a type. PHP communicates with relational databases such as MySQL and Oracle using structured query language (SQL). The syntax for SQL is divided into two parts. The first, Data Manipulation Language, or DML, is used to retrieve and modify data in an existing database. DML is remarkably compact, consisting of only four verbs: select, insert, update, and delete. The set of SQL commands, used to create and modify the database structures that hold the data, is known as Data Definition Language, or DDL. The syntax for DDL is not as standardized as that for DML, but as PHP just sends any SQL commands you give it to the database, you can use any SQL commands your database supports.

Assuming you have a table called movies, this SQL statement would insert a new row:
INSERT INTO movies VALUES(0, 'fast and furious 7', 2015, 2)
This SQL statement inserts a new row but lists the columns for which there are values:
INSERT INTO movies (title, year, actor) VALUES ('hercules', 2015, 2)
To delete all movies from 2015, we could use this SQL statement:
DELETE FROM movies WHERE year=2015
To change the year for hercules to 2014, use this SQL statement:
UPDATE movies SET year=2014 WHERE title='hercules'
To fetch only the movies made in the 2010s, use:
SELECT * FROM movies WHERE year >= 2010 AND year < 2015 .

 Example :  

This example will show you how to insert form data into database using PHP.

1) First create a html form.

2) Now create a connect.php file.


Submitting and Retrieving Forms data using PHP

Web forms are GUI element wherein the data to be processed is submitted to the web server. The whole process is called client/server data processing model. It is applicable in web sites and web applications. Web form contains text boxes, buttons, check boxes, which allows the user to enter the required information. Web form contains a submit button, when you clicked the submit button, the contents of the form is submitted to the server for processing.
Form is formed using <form> tag which having attributes like action, method, enctype and name. All attributes having their own functions, for example enctype is used for making encryption for form contents.

Submitting the form data

The data of the form cab be sent to the server using either the post() or get() method. The get() method having  attribute method equal to get() and post method having attribute method equal to post().
For example : <form name ="amar" method ="get" action="amar.php">.
Note : In post method information submitted by the user don't show whereas in get information entered by the user Shows in url.

Retrieving Form data

The form data retrieve using php file(amar.php. You must have a web server like apache or wampserver and the both HTML and PHP files should be in same directory(root directory) of the server. The server is used for transmitting data and retrieving data. Lei's see how we can do it.
First make a form in HTML file.
<html>
<head>
<title>Data transmission</title>
</head>
<body>
<form name="amar" method="get" action="amar.php">
First name:
<input type="text" name="first" />
</br>
Last name:
<input type="text" name="last" />
</br>
<input type="submit" value="submit" name="button">
</body>
</html>

 

Now retrieve data using these lines.

<html>
<head>
<title>retrieving data</title>
</head>
<body>
first name is :
<?php
echo $_GET["first"];
?>
</br>
last name is :
<?php
echo $_GET["last"];
?>
</body>
</html>


It's all about HTML and PHP form data transmission.In next article we will focus on Database connection using PHP.

 

Javascript with HTML

Script is a small program that can add interactivity to your website. A script could generate a pop-up alert message or drop down menu. These scripts can write in javascript or VBScript.
In javascript we can write small functions called event handlers, then we can trigger those functions using HTML attributes. Now days Javascript is widely used web scripting language.
We can add javascript using external .js file or internally in HTML document. Let's start both cases one by one.

Externally use of javascript : If we wanna add functionality in various HTML documents then we should add external javascript file. In HTML document we will make a syntax inside <head> tag as - 
<html>
<head>
<title>javascript</title>
<script type = "text/javascript" src = "amar.js"></script>
</head>
<body>
<input type="button" value="click me" onclick="amar();">
</body>
</html>

and "amar.js"  is :
function amar() {
alert("hello amar");
}

when we will click the button then output will be-



Similarly we can add javascript inside the HTML document without using external .js file. Let's see the syntax for making it.
<html>
<head>
<title>Javascript</title>
<script type="text/javascript">
function amar(){
alert("hello amar");
}
</script>
</head>
<body>
<input type="button" onclick="amar();" name="ok" value="Click Me" />
</body>
</html>


Output will be the same as above. Now we should know about Event Handlers. Event handlers are small function which responds on mouse or keyboard actions. Let's see how.

<html>
<head>
<title>Javascript</title>
<script type="text/javascript">
function amar(){
alert("hello amar");
}
</script>
</head>
<body>
<p onmouseover="amar();">Bring your mouse here to see an alert</p>
</body>
</html>


When we will bring our mouse over text the we will see the same alert as above. Now we will focus on <noscript> tag. This tag is used when browser of user doesn't supports javascript or they disabled javascript. At that time this tag shows them a alert.
<script type="text/javascript">
<!--
document.write("Hello Javascript!");
//-->
</script>
<noscript>Your browser does not support Javascript!</noscript>


NOTE : When we will use multiple script files or multiple <script> tags  then we should make default scripting language for all tags by following syntax.
<meta http-equiv="Content-Script-Type" content="text/JavaScript" /> 

Thanx everyone, we will continue HTML in next article.

Image addition in HTML

As we know that HTML is widely used web development language. Images are also most important part of Web pages. These are used for making attractive web pages and other graphic properties. Here we will discuss about addition and linking of images in web pages through HTML.
In HTML we uses <img> tag for inserting images. The attributes used for <img> tag are:
1) src : In this attribute we defines the path of image file.
2) height : defines height of the image in pixels.
3) width : defines width of the image.
4) border : defines image border.
5) style : this attribute defines style of the image. By introducing style attribute we don't need to insert external css.
6) alt : defines the image tag line.

Let's start how to add images in HTML.
NOTE : The thing we should remember is that both image file and HTML web page file must be in same folder.
 <html>
<head>
<title>First image</title>
</head>
<body>
 <img src="d.jpg" height="500px" width="500px" boder="5px" alt=""My image></img>
</body>
</html>

preview:

How to make image as a redirect link in HTML:
 Let's see how we can make a image as a link. We know that a link is make my anchor tag in HTML, so we will use it in image link formation.
<body>
<a href="http://techtutorialszone.blogspot.com"><img src="d.jpg" height="500px" width="500px" boder="5px" alt=""My image></img></a>
</body> 
Above syntax is a image redirect link. When we will click on image on web page then this will redirect us on "http://techtutrialzone.blogspot.com".
In next article we will discuss on HTML with javascript. 

PHP with HTML

PHP(Hypertext Preprocessor) is a server side scripting language that is used to develop dynamic web pages. PHP also have capability to communicate with dayabase. PHP free software released under PHP License, they don't contains GNU norms.
There are several versions of PHP released:

1)PHP version 2 : Released on june 8,1995.
2)PHP version 3: Released on 1997.
3)PHP version 4: Released on May 22, 2000.
4) PHP version 5: Released on July 13, 2004.
5)PHP version 6: this is under development.

Features of PHP :
1) Access control : Provides built in web based configuration screen to handle access control configuration.
2) File upload support : Allow users to upload files to a web server. PHP provides the multipurpose internet mail extension decoding process to upload the files onto the server.
3) HTTP based authentication control : Allows the user to create customized HTTP-based authentication mechanism for the web server.
4) Conditional statements and loops : Allow user to work with loops and conditional statements same as C language.
5) Extended regular expressions : Supports all regular expression operations. They are mainly used for pattern matching, pattern substitution and general string manipulation.
6) Access logging : Allow user to record the number of times website  or web page accessed.
7) Safe mode support : Allow multiple users to run php scripts on the same server simultaneously.
8) Open source : Allow user to work with multiple software development languages.
9) Third party application support : PHP also supports third party appliactions like MYSQL database etc.
10) Extensible architecture  : Allow the user to read and write in various formats, such as GIF, JPEG, PNG. Sends and receive emails using SMTP, IMAP, POP3.PHP also allow user to access C libraries, java classes.

PHP code can be embedded in HTML and XHTML in three ways :
1) XML style : <?php
                        //php code
                        ?>
2) Short style : <?
                         //php code
                         ?>
3) Script style : <script language ="php"> 
                           //php code
                         </script>

Creating PHP script : PHP scripts are plain text files containing PHP instructions. Let's see how to create PHP script with HTML:

<html>
<head><title>first php</title>
</head>
<body>
<?php
echo "this is my first PHP.";
?>
</body>
</html>    

output will be:


We should remember that for running PHP scripts we must have PHP installed on system.

Official link for PHP  download   http://php.net/

Introduction to Forms and HTML Controls

HTML is also designed to introduce forms those are also primary part of web page and gather information from the user. The basic function of the form is to allow a user to enter data on one end and send the data on the other end through the server. Forms are used in purchasing goods,sign up for newsletters,mail accounts etc. Each form having a submit button which helps to send data through the server to the action url.

Creating HTML Form :

HTML forms are created by the <form> tag. The attributes use for form tag are action and method. These attributes are used for processing HTML form. Action is used to entering action url and method is used for entering methods which will be use to transferring data to the server. There are to methods which are used in HTML forms POST and GET.

Now i am going to give you an example regarding forms.Let's see :

<html>
<head>
<title>My First Form</title>
</head>
<body>
<form action="physical address of server" method="post">
First Name :
<input type="text" name="firstname">
<br>
Last Name:
<input type="text" name="lastname">
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>

The following page will open on running this html page :

HTML Form


For using form action we should need the server address where we wanna send form data.
<input type="submit"  makes a button which is use for sending data to action url and <input type="text" are used to create text fields for entering data.
Name attribute is used to make both text fields different. These name attribute will use in PHP when we will try to connect database server. This will be the most important part pf the HTML forms.
In next article we will discuss about HTML with javascript.

HTML with CSS

As we know that view of HTML web page is the most important part.In my previous article we discussed about HTML layouts using tables, and now i will tell you about HTML layouts using CSS.
CSS is named as cascade style sheet. Style sheet means it makes styles like fonts style, page style, backgrounds,borders etc.So let's start.......
First we should know how to make css file?
CSS don't need any external IDE or anything else. We only needs a text editor as notepad++.
  • open editor and make a new file and saved as "myfile.css".
  • Now create a new File and make a HTML web page and add the following line inside the <head> tag :
   <link rel="stylesheet" type="text/css" href="myfile.css" media="screen" /> .

One thing should be remember that both your HTML web page and CSS file in same folder.
Now program CSS file as:

.h1
  {
    color:red;
    font-family:comic sans ms;
   }
.b1{
  font-size:5;
  font-family:arial;
  font-style:bold;
  color:green;
}

.td1{
    background-color:yellow;
    border-width:10px;
    border-color:red;
    border-right-width:10px;
    border-right-color:red;

}


Now put this HTML file :

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<title>Layouts</title>
</head>
<body>
<table width="100%" border="5px">
<tr>
<td colspan="2" bgcolor="aqua">
<center>
<h1 class="h1">This is my first web page</h1>
</center>
</td>
</tr>
<tr valign="top">
<td class="td1"  width="10%">
<b class="b1">Main Menu<br><br>
About us<br><br>
Contact us<br><br>
Downloads
</b>
</td>
<td bgcolor="#eee" width="100" height="400">
</td>
</tr>
<tr>
<td colspan="2" bgcolor="#b5dcb3">
<center>
<font size = "5">
<b>Powered by : Amar Gangwar</b>
</center>
</td>
</tr>
</table>
</body>
</html>


this result will shown.

HTML Layout using CSS


This all about introducing CSS to HTML.In next article we will discuss about PHP inside HTML.

HTML Layouts

Layout is a important part of web page. This is used for making web page attractive. Today css and javascript uses in making layouts but HTML is also fulfills same. Here i will teach you how to make HTML Layouts using tables.
Table is the part of HTML, it is denoted by <table /> tag.The full table tag is :

<table>
<tr>
 <td></td>
</tr>
</table>

These tables are arranged in rows and columns, so you an use these rows and columns as you want. Here <tr> tag used to create table rows and <td> tag is used for creating data cells.
The following Layout we will get via html table.Let's see :

<!DOCTYPE html>
<html>
<head>
<title>Layouts</title>
</head>
<body>
<table width="100%" border="5px">
<tr>
<td colspan="2" bgcolor="aqua">
<center>
<h1>This is my first web page</h1>
</center>
</td>
</tr>
<tr valign="top">
<td bgcolor="pink" width="10%">
<b>Main Menu</b><br><br>
About us<br><br>
Contact us<br><br>
Downloads
</td>
<td bgcolor="#eee" width="100" height="400">
</td>
</tr>
<tr>
<td colspan="2" bgcolor="#b5dcb3">
<center>
<font size = "5">
<b>Powered by : Amar Gangwar</b>
</center>
</td>
</tr>
</table>
</body>
</html> .


The output for above code will be :

HTML layout using tables

 We can say that HTML is also able to making attractive layouts for web pages.We just need complete knowledge about it. We can also make buttons,text area,images and many more things inside web page.
In my next article i will show you how to introduce CSS stylesheet in HTML.

HTML Meta Tags

HTML meta tags are really very important tags.Metadata usually define the additional important information about the documents in many ways. Meta elements used to include name/value pairs describing properties of the HTML document, such as author, keyword, expiry date, author etc.
<meta> : This tag is a empty element so it doesn't have closing tag. It carries information within the attributes.
You can add any no. of meta tags, this is based on your requirements. Meta tags doesn't affect the appearance of the HTML document. The data stored within the meta tag is called metadata.
Meta tag always used within the <head> tag of HTML document. The following attributes can placed in meta tag :

1) Name: Name for the property, can be anything. For example, keywords, description, author, revised, generator etc.

2) content : It specify the property's value.

3) scheme : It specify a scheme to interpret the property's value.

4) http-equiv : It can use to refresh the page or to set the cookie. Values include content-type, expires, refresh, set-cookie.

How to add keywords related to the document : you can use <meta> tag to specify important keywords related to document.Let's see how :

<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name="keywords" content="HTML, Meta Tags, Metadata" />
</head>
<body>
<p>Hello HTML</p>
</body>
</html> 


There are some important examples related to <meta> tags : 
  • If you want to refresh your page in every 10 min the use the following syntax :   <meta http-equiv="refresh" content="10" /> 
  • If you wanna show last date update of your web page then use following syntax  <meta name="revised" content="techtutorialszone, 3/18/2015" />
  • If you wanna add description about web page then use the following syntax :      <meta name="description" content="techtutorialszone is about technology" /> 
  • If you wanna redirect your web page after a certain time then use the following <meta http-equiv="refresh" content="5"  url="http://www.techtutorialszone.blogspot.com" />
  •  If you wanna add cookies storing process within your web page then use it :       <meta http-equiv="cookie" content="userid=xyz; expires=Wednesday, 08-Aug-15 23:59:59 GMT;" />    
NOTE :  If you will not use expires date the cookies will treated as the session cookies, means when you close the browser then cookies will automatically deleted.

THIS IS ALL ABOUT META TAGS, THANK YOU !                                                                                     

HTML Overview

HTML is basically hypertext markup language.It is use to develop web pages.It is the most widely used programming language in web developing areas.

1) Hypertext refers to the way in which web pages are linked together, that's why link available on web page are called Hypertext. 
2) HTML is a Markup Language which means you use HTML to simply "mark up" a text document with tags that tell a Web browser how to structure it to display.

Basically HTML was developed for defining structures of documents like headings,paragraphs,lists and so forth to facilitate the sharing of scientific information between researchers.
Basic Structure of HTML document is :

 <!DOCTYPE html>
<html>
<head>
<title>welcome</title>
</head>
<body>this is my first html page</body>
</html>

DOCTYPE defines the document type and html version also.
HEAD defines the document's header which can keep other html tag like title and link.
TITLE defines the documents title and it used between head tag always.
BODY defines the body of the document.It is the main tag of html because everything that define inside the body tag will be the main html document body.

resolution of above example
So this was the basic of HTML.We will continue in next post.