How to Code PHP with HTML and CSS together

HTML and CSS are client side scripts where as PHP is server side script. HTML and CSS are compiled in the browser but PHP is compiled into server. Plain HTML text is output after compiling which is delivered to user. Integrating PHP along with HTML and CSS together is very easy as integrating CSS into HTML. If you have installed Local Server in your PC and started coding your project but have no idea to work with PHP, HTML and CSS together then this article is going to help you.

For complete functional website; HTML, CSS and PHP are very important. HTML is used to build up the frame, CSS is used to decorate it or style it and PHP is used to make dynamic. You may have no idea what is “dynamic website” is actual. let’s take Facebook as example. When you open https://m.facebook.com/profile.php?id=idnum1 and another https://m.facebook.com/profile.php?id=idnum2 , you will see profile of different people in only one page profile.php . Here the parameter we pass after question mark (?) id=idnum1 and id=idnum2 to profile.php is different but the page is same. There is conditional PHP script given PHP code on Notepadalong with HTML and CSS inside profile.php to identify the people by that parameter (id) and display respective information from database as HTML. Displaying different information in one script page conditionally is known as Dynamic, the information are changed according to the condition given in the script. Where as in static page, information displayed is unchanged.  See the program examples below. You will know how it actually works.

Before going to code with PHP, HTML and CSS together, first you must know to integrate CSS with HTML and to apply CSS property to HTML elements. You can create PHP project in your Server and create “index.php” file inside it then start coding in that file. Use any one of latest browser (Google Chrome or Firefox) to test the output.

1. Integrating PHP with HTML

To integrate PHP into HTML use <?php  to start writing PHP code and ?> symbol to end PHP coding. See the example below.

<p>
 <?php //php start
   echo "Hello World";
 //php end
 ?>
<h1><?php echo "this is h1 line"; ?></h1>
</p>

Here <p><h1></h1></p1> is HTML code. I use <?php //php code here ?> to insert PHP code inside HTML. “echo” is keyword of PHP to print plain text. and // sigh is for one line comment in PHP.

HTML output of this code is:

<p>
Hello World
<h1>this is h1 line</h1>
</p>

2. Output HTML code with PHP

To output HTML with PHP, you can use echo keyword. See the example below:

<?php
 echo "<b>Hari Prasad Chaudhary</b>";
 echo "<h1>This is h1 line</h1>";
?>

Output of above code on Browser is:

<b>Hari Prasad Chaudhary</b>
<h1>This is h1 line</h1>

3. Working with PHP, CSS and HTML together:

You can also able to output CSS with PHP. See the example below:

<style>
  .box{
  <?php
  echo "width: 100px;";
  echo "height: 200px;";
  echo "border: 1px solid #bbb;";
  ?>
  backgroud: #069;
  }
</style>
<div class="box">
<?php echo "<b>Hari Prasad Chaudhary</b>"; ?>
</div>

Output on Browser of above code is:

<style>
 .box{
 width: 100px;
 height: 200px;
 border: 1px solid #bbb;
 backgroud: #069;
 }
</style>
<div class="box">
<b>Hari Prasad Chaudhary</b>
</div>

See the above codes carefully, you will know How it actually works. Join with me, I will further tell about coding on PHP.

Posted By : Hari Prasad Chaudhary | Comment RSS. Category : Web Development
Tag :