html5andphp: August 2013

Saturday, 17 August 2013

web layout

Web layout using html css


Save this file in index.html format

<!DOCTYPE html >
<head>
<link rel="stylesheet" type="text/css" href="9.CSS" />
</head>
<body>
<div align="center">
<div class="cantane">
<div class="header"><img id="uk" src="uk..jpg"/>
<h1><div id="title"><a  href="index.php">home </a></div></h1>

<div style="margin-top:-20px; float:right; width: 100%; text-align:right; padding-right:10px;"><?php echo date("dS F Y")    ?></div>
</div>
<div class="navbar">
<div class="menu">
<ul>
<li>jokes
<ul>
<li><a href="#">funny</a></li>
<li><a href="#">funny</a></li>
<li><a href="#">funny</a></li>
<li><a href="#">funny</a></li>
</ul>
</li>
</ul>
</div>

<div class="menu">
<ul>
<li>jokes
<ul>
<li><a href="#">funny</a></li>
<li><a href="#">funny</a></li>
<li><a href="#">funny</a></li>
<li><a href="#">funny</a></li>
</ul>
</li>
</ul>
</div>
<div class="menu">
<ul>
<li>jokes
<ul>
<li><a href="#">funny</a></li>
<li><a href="#">funny</a></li>
<li><a href="#">funny</a></li>
<li><a href="#">funny</a></li>
</ul>
</li>
</ul>
</div>

<div class="menu">
<ul>
<li>jokes
<ul>
<li><a href="#">funny</a></li>
<li><a href="#">funny</a></li>
<li><a href="#">funny</a></li>
<li><a href="#">funny</a></li>
</ul>
</li>
</ul>
</div>
<div class="menu">
<ul>
<li>jokes
<ul>
<li><a href="#">funny</a></li>
<li><a href="#">funny</a></li>
<li><a href="#">funny</a></li>
<li><a href="#">funny</a></li>
</ul>
</li>
</ul>
</div>

<div class="menu">
<ul>
<li>jokes
<ul>
<li><a href="#">funny</a></li>
<li><a href="#">funny</a></li>
<li><a href="#">funny</a></li>
<li><a href="#">funny</a></li>
</ul>
</li>
</ul>
</div>
<div class="menu">
<ul>
<li>jokes
<ul>
<li><a href="#">funny</a></li>
<li><a href="#">funny</a></li>
<li><a href="#">funny</a></li>
<li><a href="#">funny</a></li>
</ul>
</li>
</ul>
</div>
<div class="menu">
<ul>
<li>jokes
<ul>
<li><a href="#">funny</a></li>
<li><a href="#">funny</a></li>
<li><a href="#">funny</a></li>
<li><a href="#">funny</a></li>
</ul>
</li>
</ul>
</div>
</div>


<div class="left"><div class="im">uk

</div>
</div>


<div class="right">
<h3><font color="#0000A0"><b><i><u>Updates</u></i></b></font></h3>
<marquee direction="up" height="430" scrollamount="4" onMouseOver="this.stop();" onMouseOut="this.start();"> <a href="#">Updates</a> * Bollywood legend Pran no more...read more<br><br><br>
 *I was victim of Hospital snooping by Kim Kardashian<br><br>*Hrithik Roshan raring to get back in action<br><br>*Bhaah Milkha Bhaag moves to blockb</marquee>
 </div>



<div class="body">
<ul>
<li>The quick brwown fox jumps over the lazy dogThe quick br;own fox jumps over the lazy dogThe quick br;own fox jumps over the lazy dogThe quick br;own
</li>
<li>The quick brwown fox jumps over the lazy dogThe quick br;own fox jumps over the lazy dogThe quick br;own fox jumps over the lazy dogThe quick br;own
</li>
<li>The quick brwown fox jumps over the lazy dogThe quick br;own fox jumps over the lazy dogThe quick br;own fox jumps over the lazy dogThe quick br;own
</li>
<li>The quick brwown fox jumps over the lazy dogThe quick br;own fox jumps over the lazy dogThe quick br;own fox jumps over the lazy dogThe quick br;own
</li>
<li>The quick brwown fox jumps over the lazy dogThe quick br;own fox jumps over the lazy dogThe quick br;own fox jumps over the lazy dogThe quick br;own
</li>
<li>The quick brwown fox jumps over the lazy dogThe quick br;own fox jumps over the lazy dogThe quick br;own fox jumps over the lazy dogThe quick br;own
</li>
<li>The quick brwown fox jumps over the lazy dogThe quick br;own fox jumps over the lazy dogThe quick br;own fox jumps over the lazy dogThe quick br;own
</li>
<li>The quick brwown fox jumps over the lazy dogThe quick br;own fox jumps over the lazy dogThe quick br;own fox jumps over the lazy dogThe quick br;own
</li>
<li>The quick brwown fox jumps over the lazy dogThe quick br;own fox jumps over the lazy dogThe quick br;own fox jumps over the lazy dogThe quick br;own
</li>

<li>The quick brwown fox jumps over the lazy dogThe quick br;own fox jumps over the lazy dogThe quick br;own fox jumps over the lazy dogThe quick br;own
</li>
<li>The quick brwown fox jumps over the lazy dogThe quick br;own fox jumps over the lazy dogThe quick br;own fox jumps over the lazy dogThe quick br;own
</li>

</ul>
</div>



<div class="footer">@khan software pvt. ltd.
<div id="counter">
</div>
</div>
</div>
</div>
</body>
</html>

Save this file 9.css and then open in any web browser

.cantane {
width: 900px;
}
.left {
float: left;
height: 800px;
width: 150px;
border-left:solid #000000;
font-family: "Times New Roman", Times, serif;
font-size: 14px;
font-style: normal;
background: #660099;
 

}
.right {
background-color: #660099;
float: right;
height: 800px;
width: 150px;
font-family: "Times New Roman", Times, serif;
font-size: 14px;
font-style: normal;
    border-right:solid #000000;
}
.body {

padding:20px;
text-align:justify;
width:550px;
height:700px;
}



.footer {
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
font-style: italic;
color: #00CC66;
text-decoration: underline;
background-color: #000000;
clear: both;
height: 70px;
width: 900px;
}


.header {
background-repeat: no-repeat;
height: 100px;
width: 900px;
border-bottom-width: medium;
border-bottom-style: solid;
border-bottom-color: #0000CC;
position: relative;
background-color: #990000;
}
.navbar {
height: 30px;
width: 900px;
margin-top: 5px;
position: relative;
}

#image {
position: relative;
height: 500px;
width: 149px;
}

.link {
position:absolute ;
top:5px;
left:50px;
}
.link ul{
margin:5px;
overflow:visible;
}
.link li{
margin:0px 5px 0px 0px;
list-style: none;
display: inline;
}

.link li a{
color:#FF0000;
padding:5px 10px 5px;
text-decoration:none;
}
link li a:hover
{
color:#0000FF;
text-decoration:none;
}

h1
{color:#8000FF;
size:22px;
float:left;
}
#uk
{height:90px;
width:100px;
float:left;
margin:5px 5px 5px;
}
.uk1
{float:right;

}

.uk1 td
{
color:#000099;
font-size:16px;
}

.uk1 tr
{
color:#000099;
font-size:16px;
}


.menu
{
padding:0px;
margin:0px;
}
.menu ul
{
padding:0px;
margin:0px;
line-height:30px;
}
.menu li
{
list-style:none;
position:relative;
float:left;
background-color: #006600;
height:30px;
width:108px;
display:block;
border:solid 2px #FFFFFF;

}
.menu a
{
height:30px;
width:108px;
display:block;
border:solid 2px #FFFFFF;
text-decoration:none;
color:black;
text-align:center;
}
.menu ul ul
{
visibility: hidden;
position:absolute;
top:30px;
}
.menu ul li:hover ul
{
visibility:visible;
}
.menu a:hover
{color:#660000;
background-color:pink;
}
.menu ul li:hover ul li a:hover
{
background: #FF0099;
}

#title
{text-decoration:none;}
web layout

Posted by at No comments: image image
Labels:

Thursday, 15 August 2013

Digital clock

Making Simple Digital Clock Using Java Script 


<!DOCTYPE html>
<head>
<script>
      setInterval(update, 1000);//It is used to update function every seconds.
function update() //function to find time
{
  var date = new Date();//date variable store all date and time data
  var hours = date.getHours();//store hour
  var minutes = date.getMinutes();//store minutes
  var seconds = date.getSeconds();//store seconds
  if(minutes<10)//it is used to add "0" together 1 to 9
  {                       //such as if second=1 then show 01
  minutes="0"+minutes;
  }
  if(seconds<10)
  {
  seconds="0"+seconds;
  }
 
if(minutes<12) //it is used to show am or pm
  {
  sort1="AM";
  }
  else
  {
  sort1="PM";//it is used to show 12 hours clock
  }
  if(hours>12)
  {
  hours=hours-12;
  }
  document.getElementById("demo").innerHTML="<font size='14'>"+hours+":"+minutes+":"+seconds+":"+sort1+"</font>";//for calling using id in html
}

</script>
<style type="text/css">   //some css used to design clock
.uk
{
border:solid 2px #009933;
display:table;
color:#CC0033;


}
</style>
</head>
<body>
<center>//it is used to show data in centre
</br></br></br></br></br></br></br>
</br></br></br></br></br></br></br>
<div class="uk"> //it is used to call css
uk clock
<div id="demo"></div> //it is used to call java script
</div>
</center>
</body>
</html>

Output

simple output
digital clock

Posted by at No comments: image image
Labels:

Monday, 5 August 2013

Cookies

Cookies


A cookie is often used to identify a user. Cookies are text files stored on the client computer and they are kept of use tracking purpose.

Each time the same computer requests a page with a browser, it will send the cookie too. PHP transparently supports HTTP cookies.

A cookie is a small file that the server embeds on the user's computer.
Server script sends a set of cookies to the browser.
such as user name ,password etc.
Browser stores this information on local machine for future use.

How to Create a Cookie?



** The setcookie() function must appear before the <html> tag.
setcookie(name, value, expire, path, domain, security);
 There are six arguments explain in detail below.

Name - This sets the name of the cookie and is stored in an environment variable called HTTP_COOKIE_VARS. This variable is used while accessing cookies.

Value -This sets the value of the named variable and is the content that you actually want to store.

Expiry – This specify a future time in seconds since 00:00:00 GMT on 1st Jan 1970. After this time cookie will become inaccessible. If this parameter is not set then cookie will automatically expire when the Web Browser is closed.

Path -This specifies the directories for which the cookie is valid. A single forward slash character permits the cookie to be valid for all directories.

Domain - This can be used to specify the domain name in very large domains and must contain at least two periods to be valid. All cookies are only valid for the host and domain which created them.

Security – This can be set to 1 to specify that the cookie should only be sent by secure transmission using HTTPS otherwise set to 0 which mean cookie can be sent by regular HTTP.
Syntax
setcookie(name, value, expire, path, domain,security);

Example
Generaly we use three orgument because of other three orgument used in web servers not in local machines.
<?php
setcookie("cookies_name", "umar farooque khan", time()+3600);
?>
<html>
<head>
.............
.............
</html>
Read more »
Posted by at No comments: image image
Labels:

Sunday, 4 August 2013

Changing image using php random function

Random function in image

In this code simpl use of random function and switch case.First of all random function call in switch case and pass the initial and final value of case such as no of cases =16( 1 to 16 ) then first orgument is 1 and second orgument is 16 and seprated by comma.Then starting a switch case curly braces  and then start the first case,make a variable which store the the image same as all cases and assign the image and then use break keyword (break is used for stop a particular case ,if you don't use break all the case excuted and all the values ).Lastly print the variable which store the image using html img embed tag.

Check this code in your browser .
<?php

Download PHP PDF php basic tutorial pdf


echo "Making by umar farooque khan";
switch(rand(1,16))
{
   case 1:
$greet ="1.jpg";
break;
   case 2:
$greet ="2.jpg";
break;
   case 3:
$greet ="3.jpg";
break;
   case 4:
$greet ="4.jpg";
break;
case 5:
$greet ="a(1).jpg";
break;
   case 6:
$greet ="a(2).jpg";
break;
   case 7:
$greet ="a(3).jpg";
break;
   case 8:
$greet ="a(4).jpg";
break;


case 9:
$greet ="a(5).jpg";
break;
   case 10:
$greet ="a(6).jpg";
break;
   case 11:
$greet ="a(7).jpg";
break;
   case 12:
$greet ="a(8).jpg";
break;


case 13:
$greet ="a(9).jpg";
break;
   case 14:
$greet ="a(10).jpg";
break;
   case 15:
$greet ="a(11).jpg";
break;
   case 16:
$greet ="a(12).jpg";
break;

}
echo"<img src='$greet' height='900px' width='1200px'>";
?>



For more on php visit php-tutorial
Posted by at No comments: image image
Labels:

Thursday, 1 August 2013

Upload File Using Php

Making Upload File Script Using Php html and java script with validation


<pre><!DOCTYPE html>
<head>
</head>
<body></pre>  //use pre tag to not show these tags in server
<center>
< form action = " upload.php" method = " post " enctype = " multipart / form-data " 
name = " upload  " >
  < table width =" 200 " border = " 2 " cellspacing = " 2 " cellpadding = " 2 " >
    < tr >
      < td > Upload a file< /td >
      < td > < input name = " file " type = " file "  / > < / td >
    < / tr >
    < tr >
      < td colspan = " 2 " > < center >
          < input name = " sub " type = " submit " value = " upload " />
        < / center >< / td >
    </tr>
  </table>

</form>
</center>
</body>
</html>
<?php
error_reporting(0);
if(isset($_POST['sub'])) 
     { 
      $name=$_FILES['file']['name'];
 $type=$_FILES['file']['type'];
 $size=$_FILES['file']['size'];
 $tmp=$_FILES['file']['tmp_name'];
        
if($name=='')
{
echo"<script>alert('upload file')</script>";
exit();
}

if(( $type == "image/jpeg" )||($type=="image/gif")||($type=="image/png"))
{
if($size<=500000)
{
if (file_exists("upload file" . $_FILES["file"]["name"]))
 {
 echo $_FILES["file"]["name"] . " already exists. ";
 exit();
 }
 move_uploaded_file($tmp,"$name");
                      echo"<center> <font color='pink' ><h2>successfully uploaded</h2></font><br>".""."<img src=$name> </center>";   
   }
 
 else
 {
 echo"more size";
 }
 
}   
 else
 {
 echo"type not support";
 } 
 
 
 
 
 }

?>

For more php tutorial PHP-tutorial
Output

upload

Posted by at No comments: image image
Labels:
Subscribe to: Posts (Atom)