Simple web page layouts examples

in this i share three types of very simple web page layouts you can donwload them from my facebook group the .html was uploaded here.

Download File from following Links:

---

Web Layout No 1.

Web Layout No 2

Web Layout No 3

---

---

<style>

h1,h2,p{text-align: center;color:#eee;}

.top h1{font-size: 800%;}

table{margin:3% auto;}

.top .top_left table td{padding: 20px;background-color: #b3b3b3;}

*{margin:0px;padding:0px;}

body{background-color: #f2ccff;}

.top{border: 2px solid;width: 95%;margin: auto;height: 45%;}

.top .top_left{border: 0px solid;width: 25%;height: 100%;float: left;background-color: #404040}

.top .top_right{border: 1px solid;width: 75%;height: 100%;margin: 0% 25%;background-color: #4f404f;}

.top .top_left .logo{width: 40%;margin:3% auto;height: 50%;border-radius: 100%;background-color:#b3b3b3;}

.menu{border: 2px solid;width: 95%;margin: auto;height: 8%;border-radius: 0px 0px 20px  20px; background-color: #737373;}

.mid{width: 95%;margin: auto;}

.mid .link_item{border: 2px solid olive;width: 25%;height: 100%;margin: 1% 1% 0% 0%;float: left;position: relative;background-color: #eee;border-radius: 10px; }

.mid .main_body{border: 2px solid olive;width:50%;margin: 1% 0%;height: 100%;float:left; position: relative;background-color: #eee;border-radius: 10px;}

.mid .right_links{border: 2px solid olive;width: 22%;height: 100%;margin: 1% 0% 0% 1%;position: relative;float: left;background-color: #eee;border-radius: 10px;}

.footer{width: 95%;margin: auto;height: 10%;float:left;margin-left: 2.5%;background-color: skyblue;}

</style>

---

<div class="top">

<div class="top_left">

<div class="logo">

</div>

<h2>Beginners Heap</h2><p>Some info about site</p>

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

</div>

<div class="top_right">

<h1>Slider here</h1>

</div>

</div>

<div class="menu">

</div>

<div class="mid">

<div class="link_item">

</div>

<div class="main_body">

</div>

<div class="right_links">

</div>

</div>

<div class="footer">

</div>

---

Delete Data in SQL Database using PHP

In my last three posts i covers the topics that how to create connection insert data and then if we want to update that data so then how to update data in in sql database table using php.

For step by step learning see my privies posts on database and php.

---

Create-table-in-sql Database

Create-primary-key-in-sql-table

Create-connection-with-sql-database-in-PHP

Insert-data-in-sql-database-using-php

Up-Date-data-in-sql-database-using-php

---

Today in this post we delete a record from login table we take a form inputs from user where he gave us the name and password of the user which he want to delete.

---

<?php

include "conn.php";

$user = $_POST['user'];

$pass = $_POST['password'];

$sql = "DELETE from login 

        where user='".$user."' and PASSWORD='".$pass."' ";

if ($conn->query($sql) === TRUE) {

    echo "Record Deleted successfully";

} else {

    echo "Error: " . $sql . "<br>" . $conn->error;

}

$conn->close();

?>

Create Connection with SQL Database in PHP

How to create connection with mysql database using PHP ?

So for this first create a database in myPhpAdmin and then use that name in mysqli default constructor by default the password was null and user name is root. If you are using XAMP then the servername is localhost.

---

<?php
$servername = "localhost";
$username = "root";
$password = Null;
$dbname = "paging";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);

// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
} else{
echo "Connection Sucssful";
}

?>

---

copy paste above code save in conn.php file and run on localhost like localhost/conn.php

View Details On Mouse Click Using Java-Script and HTML

If You Click on the element then it will show its description.

---

This is First Option

here
is some 
description

This is Second Option

here
is some 
description

This is Third Option

here
is some
 description

This is Fourth Option

here
is some
 description

This is Fifth Option

here
is some
 description

---

Download Complete Code From Here

---

HTML Code:

<body>

<div class="main">

<p class="option" onclick="foo(this)" id="1">This is First Option<img src="http://www.clipartbest.com/cliparts/dT6/xXE/dT6xXEpT9.png"></p>

<div class="dec" id="a1"><pre>here

is some 

description</pre></div>

</div>

<div class="main">

<p class="option" onclick="foo(this)" id="2">This is Second Option<img src="http://www.clipartbest.com/cliparts/dT6/xXE/dT6xXEpT9.png"></p>

<div class="dec" id="a2"><pre>here

is some 

description</pre></div>

</div>

<div class="main">

<p class="option" onclick="foo(this)" id="3">This is Third Option<img src="http://www.clipartbest.com/cliparts/dT6/xXE/dT6xXEpT9.png"></p>

<div class="dec" id="a3"><pre>here

is some

 description</pre></div>

</div>

<div class="main">

<p class="option" onclick="foo(this)" id="4">This is Fourth Option<img src="http://www.clipartbest.com/cliparts/dT6/xXE/dT6xXEpT9.png"></p>

<div class="dec" id="a4"><pre>here

is some

 description</pre></div>

</div>

<div class="main">

<p class="option" onclick="foo(this)" id="5">This is Fifth Option<img src="http://www.clipartbest.com/cliparts/dT6/xXE/dT6xXEpT9.png"></p>

<div class="dec" id="a5"><pre>here

is some

 description</pre></div>

</div>

<h1 style="text-align:center;text-shadow:10px 10px 10px red;">""Click on Option to View its Discription""<br><span style="color:blue">Develper:Usman Siddique</span></h1>

</body>

---

Java-Script Code:

<script>

function foo(getid){

var x = document.getElementById('a'+(getid.id));

if(x.style.display=="block")

{

x.style.display="none";}

else{x.style.display="block";}

}

</script>

---

CSS Code:

<style>

.main p img{height: 3%;float: left;width: 10%;}

body{background-color:wheat;}

.main{border: 2px solid;width: 20%;margin: auto;background-color:skyblue;box-shadow: 2px 2px 50px hotpink;padding: 10px;}

.option{border: 2px solid wheat;padding:5px;text-align:center;margin: 0px;cursor:pointer}

.dec{background-color: whitesmoke;padding: 5px;display: none; }

</style>

Show Details On Mouse Hover Using CSS HTML

This will show details of an option when the mouse pointer is on that specific option.

---

This is First Option

here
is some 
description

This is Second Option

here
is some 
description

This is Third Option

here
is some
 description

This is Fourth Option

here
is some
 description

This is Fifth Option

here
is some
 description

---

Download The Complete Code From here

The HTML Code is:
<body>
<div class="main">
<p class="option" onclick="foo()">This is First Option</p>
<div class="dec"><pre>here
is some
description</pre></div>
</div>

<div class="main">
<p class="option" onclick="foo()">This is Second Option</p>
<div class="dec"><pre>here
is some
description</pre></div>
</div>

<div class="main">
<p class="option" onclick="foo()">This is Third Option</p>
<div class="dec"><pre>here
is some
 description</pre></div>
</div>

<div class="main">
<p class="option" onclick="foo()">This is Fourth Option</p>
<div class="dec"><pre>here
is some
 description</pre></div>
</div>

<div class="main">
<p class="option" onclick="foo()">This is Fifth Option</p>
<div class="dec"><pre>here
is some
 description</pre></div>
</div>
<h1 style="text-align:center;text-shadow:10px 10px 10px red;">""Take Pointer on Option to View its Discription""<br><span style="color:blue">Develper:Usman Siddique</span></h1>


</body>

---

CSS Code:

<style>

body{background-color:wheat;}

.main{border: 2px solid;width: 20%;margin: auto;background-color:skyblue;box-shadow: 2px 2px 50px hotpink;padding: 10px;}

.option{border: 2px solid wheat;padding:5px;text-align:center;margin: 0px;cursor:pointer}

.dec{background-color: whitesmoke;padding: 5px;display: none; }

.option:hover + .dec{display: block;}

.dec:hover{display: block;}

</style>

---

Type Casting in Java: Type Conversion in Java

Convert Sting to Int:

String str = "1234";
int foo = Integer.praseInt(str);

Convert Char to Int:

char a = '3';
int foo = (int) a-48;

String to Char Array:

String str = "1234";
char [] charary = str.toCharArray();

Covert Int to String:

int w=1234;
String se=Integer.toString(w);

Convert Double to int:

double x=22.4;
int a= (int)x;

Convert long to int:

long a =10;
int  s = (int) a;

Convert String to BigInteger:


String b="1234422";

BigInteger a=new BigInteger(b); 

File Handling in Java::Reading and Writing

Reading and writing files in Java using Formatter, Scanner and bufferedreader:

Simple Open a File in Java:

package myfirstproject;
import java.io.*;
public class MyFirstProject {  
    public static void main(String args[]) throws IOException
   {
      File name=new File("C:\\usman\\input.txt");
      if(name.exists()){
          System.out.println(name.getName()+"File is exists");
      }
      else{
          System.out.println("File does not exists");
      }
}
}

---

Craete New File in Java:

package myfirstproject;
import java.io.*;
import java.util.*;

public class MyFirstProject {  
    public static void main(String args[]) throws IOException
   {
       /*final Formatter x;
       x =new  Formatter("C:\\usman\\fatima.txt");
     
     
*/      File name=new File("C:\\usman\\input1.txt");
        name.createNewFile();
      if(name.exists()){
          System.out.println(name.getName()+"File is exists");
      }
      else{
          System.out.println("File does not exists");
      }
}

---

}Write in File Using Formatter in Java:
package myfirstproject;
import java.io.*;
import java.util.*;
import java.lang.*;

public class MyFirstProject {  
    public static void main(String args[]) throws IOException
   {
       final Formatter x;
       x = new Formatter("C:\\usman\\usman.txt");
       x.format("%s%s%s%d", "usman " ,"Siddique ", "fatima " ,3);
     
       File name=new File("C:\\usman\\usman.txt");
       if(name.exists()){
           System.out.println("true");
      }
     
       x.close();
}

}

---

Reading File Using Scanner in Java:
package myfirstproject;
import java.io.*;
import java.util.*;
import java.lang.*;

public class MyFirstProject {  
    private Scanner a;
    public static void main(String args[]) throws IOException
   {
       final Formatter x;
       x = new Formatter("C:\\usman\\input.txt");
     
        MyFirstProject obj=new MyFirstProject();
        obj.a=new Scanner(new File("C:\\usman\\usman.txt"));
        while(obj.a.hasNext()){
            String value=obj.a.next();
       x.format("\n%s\t%d", value  ,3);
        }
       File name=new File("C:\\usman\\usman.txt");
       if(name.exists()){
           System.out.println("true");
      }
     
       x.close();
}

}