Tuesday, October 29, 2013
HOW TO MAKE A SIMPLE GAME IN PHP
In this tutorial, we will do the game 4pics 1 word. This game can be seen and played in your mobile. But now, you can also do this in php with just simple coding.
Step 1:
Let's create the file named index.php(You can name this code anything you like it can be game.php etc.)
1.1 html(we will use some image here. 'Let's find some pics that will be anwered as Electricity') :)
<html>
<head>
<title>
PHP GAME
</title>
<style>
#center_answer{
text-align: center;
}
</style>
</head>
<body>
<h1>4 PICS 1 WORD: PHP VERSION</h1>
<div>
<img alt="falls" src="falls.jpg" width="250" height="250">
<img alt="windmill" src="windmill.jpg" width="250" height="250">
</br>
<img alt="lightning" src="lightning.jpg" width="250" height="250">
<img alt="solar_panel" src="panel.jpg" width="250" height="250">
</div>
<form action="verify.php" method="post">
<div><input type="text" name="answer" placeholder="Your Answer here..." id="center_answer" size="78"></div>
<div><input type="submit" name="enter" value="Enter"></div>
</form>
</body>
</html>
2.) We will now verify if the answer is correct. if yes, it will say correct! and if not it will say wrong answer pls. try again or else Invalid answer/Pls Put your answer.
verify.php
<?php
if(isset($_POST["enter"])){
if(($_POST["answer"])== null){
echo "Please input your Answer.";
}
elseif($_POST["answer"]== "electricity"){
echo "Correct!";
}
else{
echo "Wrong/Invalid answer.";
}
}
?>
3.) After this its up to you to create new set of pics :) Enjoy!
If you have some questions you can comment here and ill try to answer it :) thank you. Happy PHP coding.
LAYOUT USING DIV IN HTML + CSS
This is an example of making a layout. In this tutorial we will use <div>
Name: index.html
<html>
<head>
<title>CREATE YOUR OWN LAYOUT USING DIV</title>
<link rel="stylesheet" type="text/css" href="my_design.css"><!-- link to my_design.css-->
</head>
<body>
<div id="myHeader"> <!-- This div is your header title -->
<h1 id="line">HTML, CSS, PHP tutorial</h1>
</div>
<div id="myMenu"><!-- This is your Menu -->
<a>HTML</a></br>
<a>CSS</a></br>
<a>PHP</a>
<div id="inner">
Inner information here
</div>
</div>
<div id="myFooter"><!-- lower part-->
<p>Here is your footer</p>
</div>
</body>
</html>
This code below is for the css of the page
CSS FILE: my_design.css
#myHeader{
background-color: green;
width: 600px;
padding: 1px;
color: white;
}
#line{
text-align: center;
}
#myMenu{
background-color: yellowgreen;
width: 80px;
height: 150px;
text-align: center;
color: white;
}
#myFooter{
background-color: green;
width: 600px;
height: 50px;
text-align: center;
padding: 1px;
color: white;
}
#inner{
color: green;
margin-left: 80px;
margin-top: -60px;
background-color: rgba(0,0,0,0.2);
width: 522px;
height: 150px;
text-align: left;
}
If this code helps you, please comment thank you :)
Name: index.html
<html>
<head>
<title>CREATE YOUR OWN LAYOUT USING DIV</title>
<link rel="stylesheet" type="text/css" href="my_design.css"><!-- link to my_design.css-->
</head>
<body>
<div id="myHeader"> <!-- This div is your header title -->
<h1 id="line">HTML, CSS, PHP tutorial</h1>
</div>
<div id="myMenu"><!-- This is your Menu -->
<a>HTML</a></br>
<a>CSS</a></br>
<a>PHP</a>
<div id="inner">
Inner information here
</div>
</div>
<div id="myFooter"><!-- lower part-->
<p>Here is your footer</p>
</div>
</body>
</html>
This code below is for the css of the page
CSS FILE: my_design.css
#myHeader{
background-color: green;
width: 600px;
padding: 1px;
color: white;
}
#line{
text-align: center;
}
#myMenu{
background-color: yellowgreen;
width: 80px;
height: 150px;
text-align: center;
color: white;
}
#myFooter{
background-color: green;
width: 600px;
height: 50px;
text-align: center;
padding: 1px;
color: white;
}
#inner{
color: green;
margin-left: 80px;
margin-top: -60px;
background-color: rgba(0,0,0,0.2);
width: 522px;
height: 150px;
text-align: left;
}
If this code helps you, please comment thank you :)
Location:
Angeles City, Philippines
Monday, October 28, 2013
HOW TO CREATE MY OWN LAYOUT IN HTML
<html>
<head>
<title>My Menu Deisgn</title>
<style>
a
{
border-top: 1px solid orange;
border-bottom: 1px solid gold;
border-right: 1px solid orange;
border-top-right-radius: 10px;
background-color: gold;
padding-left: 10px;
padding-right: 10px;
text-decoration: none;
color: black;
}
#tbl_bg
{
background-color: rgba(0,0,0,0.0);
}
#blk{
background-color: black;
}
#gl{
background-color: orange;
}
</style>
</head>
<body>
<table align='center' width='700' height='150' border='1' id="blk">
<tr>
<td>
</td>
</tr>
</table>
<table align='center' width='700' id="gl" border="1">
<tr>
<td>
<a href="#">Home</a>
<a href="#">Gallery</a>
<a href="#">About Us</a>
<a href="#">Contact Us</a>
</td>
</tr>
</table>
<table align='center' width='700' height='500' border='1' id="gl">
<tr>
<td>
</td>
</tr>
</table>
<table align='center' width='700' height='100' border='1' id="blk">
<tr>
<td>
</td>
</tr>
</table>
</body>
</html>
<head>
<title>My Menu Deisgn</title>
<style>
a
{
border-top: 1px solid orange;
border-bottom: 1px solid gold;
border-right: 1px solid orange;
border-top-right-radius: 10px;
background-color: gold;
padding-left: 10px;
padding-right: 10px;
text-decoration: none;
color: black;
}
#tbl_bg
{
background-color: rgba(0,0,0,0.0);
}
#blk{
background-color: black;
}
#gl{
background-color: orange;
}
</style>
</head>
<body>
<table align='center' width='700' height='150' border='1' id="blk">
<tr>
<td>
</td>
</tr>
</table>
<table align='center' width='700' id="gl" border="1">
<tr>
<td>
<a href="#">Home</a>
<a href="#">Gallery</a>
<a href="#">About Us</a>
<a href="#">Contact Us</a>
</td>
</tr>
</table>
<table align='center' width='700' height='500' border='1' id="gl">
<tr>
<td>
</td>
</tr>
</table>
<table align='center' width='700' height='100' border='1' id="blk">
<tr>
<td>
</td>
</tr>
</table>
</body>
</html>
Location:
Angeles City, Philippines
Sunday, October 27, 2013
HTML, CSS, PHP Tutorial -CREATING YOUR OWN MENU TAB by Rui Santos
1.) Copy this code, save it as my_menu.html
<html>
<head>
<title>My Menu Deisgn</title>
<style>
a
{
border-top: 1px solid orange;
border-bottom: 1px solid gold;
border-right: 1px solid orange;
border-top-right-radius: 10px;
background-color: gold;
padding-left: 10px;
padding-right: 10px;
text-decoration: none;
color: black;
}
#tbl_bg
{
background-color: rgba(0,0,0,0.0);
}
#blk{
background-color: black;
}
#gl{
background-color: orange;
}
</style>
</head>
<body>
<table align='center' width='700' height='150' border='1' id="blk">
<tr>
<td>
</td>
</tr>
</table>
<!--This is the menu tab-->
<table align='center' width='700' id="gl" border="1">
<tr>
<td>
<a href="#">Home</a>
<a href="#">Gallery</a>
<a href="#">About Us</a>
<a href="#">Contact Us</a>
</td>
</tr>
</table>
<table align='center' width='700' height='500' border='1' id="gl">
<tr>
<td>
</td>
</tr>
</table>
<table align='center' width='700' height='100' border='1' id="blk">
<tr>
<td>
</td>
</tr>
</table>
</body>
</html>
<html>
<head>
<title>My Menu Deisgn</title>
<style>
a
{
border-top: 1px solid orange;
border-bottom: 1px solid gold;
border-right: 1px solid orange;
border-top-right-radius: 10px;
background-color: gold;
padding-left: 10px;
padding-right: 10px;
text-decoration: none;
color: black;
}
#tbl_bg
{
background-color: rgba(0,0,0,0.0);
}
#blk{
background-color: black;
}
#gl{
background-color: orange;
}
</style>
</head>
<body>
<table align='center' width='700' height='150' border='1' id="blk">
<tr>
<td>
</td>
</tr>
</table>
<!--This is the menu tab-->
<table align='center' width='700' id="gl" border="1">
<tr>
<td>
<a href="#">Home</a>
<a href="#">Gallery</a>
<a href="#">About Us</a>
<a href="#">Contact Us</a>
</td>
</tr>
</table>
<table align='center' width='700' height='500' border='1' id="gl">
<tr>
<td>
</td>
</tr>
</table>
<table align='center' width='700' height='100' border='1' id="blk">
<tr>
<td>
</td>
</tr>
</table>
</body>
</html>
Location:
Angeles City, Philippines
Saturday, October 26, 2013
PHP tutorial for beginners - Simple Verification by Rui Santos
1.) First:
This time, we will do a verification in which when you dont input a word or text, name it will be verified
that you should input name in the field.
And when you input your name, it will say "G'day! 'entered_name' ";
For now copy the code below and save it as index.php
<html>
<head>
<title>My Verification</title>
</head>
<body>
<form action="verify.php" method="post">
Enter your name: <input type="text" name="your_name" placeholder="Input your name please">
<input type="submit" name="enter" value="Enter">
</form>
</body>
</html>
2.) Next:
Then copy this code and save it as verify.php
This verification is not too good for a real verification process
but this is a good start :) "Everything starts from small then go to big, and then go to huge lol." Enjoy. If this blog helps you please comment and if you want some
other tutorials, i'm always here to do it. :)
<?php
if(isset($_POST["enter"]))
{
if(($_POST["your_name"] == null))
{
echo "Please input your name!" . "<a href='index.php'>Click back</a>";
}
else{
echo "<h1>G'day " . $_POST["your_name"] . ". Welcome!</h1>";
}
}
?>
Labels:
beginner,
php,
process,
rui santos,
simple,
tutorial,
verification,
verify
Location:
Angeles City, Philippines
Friday, October 25, 2013
HOW TO CREATE BACKGROUND TRANSPARENT
CSS DESIGN - HOW TO DO A TRANSPARENT BACKGROUND-COLOR/ BACKGROUND-IMAGE
1st create this html code and save it as transparent.html
<html>
<head>
<title></title>
<style>
#transparent_effect{
background-color: rgba(0,0,0,0.25);
}
#transparent_image{
background-image:url('asd.jpg');
opacity: 0.5;<!-- this css will make an image, background-image, or even simple image to be transparent-->
}
Note: if your image is in a folder. do this: background-image:url('name_of_folder/your_image.jpg or png')
</style>
</head>
<body>
<!-- Lets implement it in a table -->
<!-- Now let's create the table -->
<table width="500" height="500" id="transparent_effect" border="1">
<tr>
<td>
</td>
</tr>
</table>
<table width="500" height="500" border="1" id="transparent_image">
<tr>
<td>
</td>
</tr>
</table>
</body>
</html>
2.) Run it through the browser
3.) Enjoy what you learn :)
4.) If this blog helps you, pls comment ^_^ I will make more blogs about things like this. You can also write comments about what you want to know :) thank you
1st create this html code and save it as transparent.html
<html>
<head>
<title></title>
<style>
#transparent_effect{
background-color: rgba(0,0,0,0.25);
}
#transparent_image{
background-image:url('asd.jpg');
opacity: 0.5;<!-- this css will make an image, background-image, or even simple image to be transparent-->
}
Note: if your image is in a folder. do this: background-image:url('name_of_folder/your_image.jpg or png')
</style>
</head>
<body>
<!-- Lets implement it in a table -->
<!-- Now let's create the table -->
<table width="500" height="500" id="transparent_effect" border="1">
<tr>
<td>
</td>
</tr>
</table>
<table width="500" height="500" border="1" id="transparent_image">
<tr>
<td>
</td>
</tr>
</table>
</body>
</html>
2.) Run it through the browser
3.) Enjoy what you learn :)
4.) If this blog helps you, pls comment ^_^ I will make more blogs about things like this. You can also write comments about what you want to know :) thank you
Labels:
beginner,
css,
html,
opacity,
php,
rui santos,
simple,
transparent,
tutorial
Location:
Angeles City, Philippines
Subscribe to:
Posts (Atom)