HTML and PHP
       by kirupa : 23 June 2004

PHP is not simply about outputting random values and simple text. You can seamlessly integrate PHP with HTML and output tables, formatted text, and more. You are probably wondering, what's the big deal about this? The deal is that you can control what is displayed on your site by integrating PHP and HTML. Best of all, PHP does not have its own set of formatting tags for you to learn. You use HTML.

So let's get started. First, copy and paste the following code into a PHP page:

<html>
<body>
<?php
print("Can gophers really code PHP?");
?>
</body>
</html>

When you preview the page containing the above code, you should see the text "Can gophers really code PHP?" The text is not formatted at all. You will see the text displayed in whatever the default font is set to on your browser.

You don't have to suffer through dull, boring text though. You can format it - all inside the PHP tag area. Let's say you want to Bold the text. Add the HTML tags for bold, <b> and </b> tags to your text:

<?php
print("<b>Can gophers really code PHP?</b>");
?>

When you modify the code within your PHP tags with your Bold tags (see above code) and preview the page in your browser, you will find that the text is now bolded. Pretty cool, ehh? Now, let's try adding a horizontal line below the text. The html tag for displaying a horizontal line is <hr>.

Let's add that tag to our code:

<?php
print("<b>Can gophers really code PHP?</b>");
print("<hr>");
?>

Now, test this code. You should now see your text with a horizontal line displayed. Just remember, all we used was standard HTML tags using the print command.

Outputting Data Involving Quotes
While all of this is pretty straightforward, there will be situations where you simply cannot place a series of HTML tags within the confines of the print command. The following is one such example

Let's say we want to make our text a hyperlink. The HTML for doing such a trick is:

<a href="http://www.kirupa.com/">Can gophers really code PHP?</a>

Now, we cannot simply place the above HTML inside the print command. The reason is because of the dreaded quotation marks surrounding the URL. PHP misinterprets the quotation marks as referring to the end of the print command. You will probably end up with an error.

The solution for outputting quotation marks, is to use the following two characters (quotation mark and back slash) in the place of a quotation mark: \" . Therefore, the print command for the above HTML code becomes:

<?php
print("<a href=\"http://www.kirupa.com/\">Can gophers really code PHP?</a>");
?>

I emphasized the areas where a " was replaced with \" by coloring those characters in pink color. Whenever you see a quote, simply add a \ in front of it (or replace the quotation mark with a \"). I know I am repeating that again and again, but that is a minor detail that you may end up forgetting in the heat of the coding!

 Quick Summary
Review time! You use HTML tags in PHP by using the print tags and normal, everyday HTML.

All you do is use the exact HTML tags you would normally use in an HTML document, but the difference is that you place those tags in between print("   and  "); The only time you deviate from that format is when your HTML contains quotes.

When you encounter quotes, replace your quote with the following two characters: \"

More Involved Example
The following code snippet is an example of PHP and HTML used together. Hopefully it provides some insight into how PHP and HTML can be used together to display several tables, a graphic, and formatted text:

<?php
print("<font size=\"2\" face=\"Arial\">");
print("<table style=\"BORDER-COLLAPSE: collapse\" width=\"350\" border=\"2\">");
print("<tr><td width=\"2%\" bgColor=\"#b7d0e3\"><font size=\"2\">");
print("<img src=\"http://www.kirupa.com/mini_icons/robot_metal.gif\">
</font></td>"
);
print("<td width=\"98%\" bgColor=\"#eaf1f7\"><font size=\"2\">&nbsp;<b>Quick Summary </b>");
print("</font></td></tr><tr><td widt\"100%\" colSpan=\"2\">");
print("<table borderColor=\"#111111\" cellPadding=\"15\" border=\"0\">");
print("<tr><td width=\"100%\"></font><font size=\"2\" face=\"Arial\">A complicated
example involving tables and images.</font></td>");
print("</tr></table></td></tr></table>");
?>

The above example does not use anything new, but it does involve a good deal of backslashing.

I hope the information helped. If you have any questions or comments, please don't hesitate to post them on the kirupa.com Forums. Just post your question and I, or our friendly forum helpers, will help answer it.

The following is a list of related tutorial and help resources that you may find useful:

How to use the Forums
New, Upcoming, and In-Progress Tutorials
How to Help out kirupa.com
Writing Tutorials
 
Cheers!
Kirupa Chinnathambi
kirupaBlog

 

 



SUPPORTERS:

kirupa.com's fast and reliable hosting provided by Media Temple.