Documents that can be viewed by a web browser are called hypertext documents. (To fetch such a document, your browser uses http:, hypertext transfer protocol.) Hypertext documents are ordinary text documents that you could edit in any text editor. However, they contain tags, which are special combinations of characters that tell the web browser to do something, for example, to make certain text bold or to insert a picture. The collection of tags and other features of hypertext documents is called the hypertext markup language, or HTML, and most hypertext documents have HTML or HTM extensions (the shorter extension generally is for older operating systems that could only handle three-letter extensions).
Here is an example of an HTML document (note that I had to use special tags to tell your browser to just show you the text, and not interpret it). If you want to view the HTML source for a web page you are currently viewing (including this one), in the "View" menu of your browser, click on "Source."
| <!doctype html public
"-//w3c//dtd html 4.0 transitional//en"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>CS101 Homework 3</title> </head> <body> <center> <b><font size=+1>Homework 3</font></b><br> CS101A1 <Br> (due Tuesday, April 3, 2001) <p align="left">In this assignment, you are to create a personal web page. I recommend you use Macromedia Dreamweaver, which is on the computers in the lab, although you may use other web-authoring software so long as you meet all the requirements of the assignment. <p align="left">I strongly recommend that you get started early on this assignment. There is a built-in 24-hour delay in getting your web-page directory up and running. Moreover, it is highly likely that the computers will be busy the night the assignment is due. Before the deadline, you must get on the computer and at a minimum familiarize yourself with the process of getting the web page up and running. <p align="left">I will not accept e-mailed, gsubmitted, or printed submissions for this assignment. To receive any credit whatsoever, you must have a <b>working web page.</b> Again, I cannot stress enough that you should get down to the lab and figure out how to do that <b>before</b> the deadline. (If you want to wait until the last minute to fill in all the details, so be it; but do not wait until the last minute to get your initial web page up and running.) <div align="left"> <ol> <li> While logged into CSA, from the UNIX prompt use the <i>web-ok</i> command. Follow the instructions. <font color="#FF0000">Note that it will take <b>24 hours</b> before your web-page directory is created.</font></li> <Br> <li> Create a personal web page with the following elements:</li> <Br> <ol type=a> <li> a title (page properties): The title should show up on the title bar of the web browser. For instance, the title of this homework assignment's web page is "CS101 Homework 3." A sample title might be "Joe Smith's Personal Page."</li> <li> a heading</li> <li> three or more fonts</li> <li> one or more pictures</li> <li> a page color or background</li> <li> one or more lists (bullets or numbers)</li> <li> one or more tables</li> <li> three or more links to other web pages</li> <Br> </ol> <li> Save your web page with the name <i>index.html.</i></li> <Br> <li> Place your file in the <i>public_html</i> subdirectory in your directory.</Li> <Br> <li> Change the protection so that everyone can read it (use <i>chmod a+rx *</i>).</li> </ol> You should test your web page by attempting to view it under your directory. Use a web browser and enter <i>http:/cs-people.bu.edu/yourname</i> as the url:. </div> <p align="left">You do not need to hand anything in. Your grader will evaluate your web page by viewing it. </center> </body> </html> |
You may recognize from the text that this was the last homework assignment.
The HTML tags all begin with < and end with >. Most tags come in pairs, with the second tag the same as the first except for a leading /. For instance, above you can see a number of list items. Each item begins with <li> and ends with </li>. There are six main tags that every hypertext document has: <html>, </html>, <head>, </head>, <body>, and </body>. Accordingly, the simplest hypertext document looks like this:
<html> <head> </head> <body> </body> </html> |
The initial tag, <html>, tells your browser that this is a hypertext document. The tag <head> tells your browser that certain information about your document is coming (such as, the title of the document, the author, and other things that are not displayed in the browser window). The tag </head> tells your browser that the header is finished and <body> tells your browser that the part of your document to display is coming next. Between <body> and </body> is where all the stuff goes which is actually displayed in your browser window. Finally, </body> tells your browser that its reached the end of the body, and </html>, the end of the hypertext.
PHP (Hypertext Pre-Processing) is basically one big HTML tag. It begins with <?php and ends with ?>. In between the <?php and ?> are commands to the web server, where the web page is located.
Let's back up a minute. When you type a url: into your web browser or click on a link, here's what happens: Your web browser sends a request over the Internet for the web page. The request is addressed to a web server, which is a program running on a computer somewhere, which has web pages on its hard drive. The web server gets the request and sends back the hypertext document your browser requested, along with pictures and other things that should be displayed with the document.

The hypertext document is written in HTML, a language your web browser understands. The HTML tags in the hypertext document instruct your browser how to display the document and what to include in the way of pictures and the like.
PHP, by contrast, is a language that is interpreted by the web server that sent the document to your web browser. PHP commands tell the web server to do certain things, including, usually, to insert additional HTML commands into the hypertext document. Therefore, your web browser never sees the PHP.
If PHP simply produces HTML, then why do we need it? The beauty of PHP is that it can change the HTML it produces based upon input it receives and processing it does.
How does PHP receive input? There are some HTML tags which are designed to get input from a user. These tags specify the construction of forms that the user can fill out. Usually, the user then clicks on a button to submit the information on the form. HTML tags for forms can specify that the information in the form be sent to PHP for processing.
To summarize, then, PHP is a bunch of commands embedded in an html tag; the commands are processed by a web server which replaces them with HTML code; and your web browser displays the resulting hypertext document. To let the web server know that there are PHP commands to be interpreted, hypertext documents containing PHP usually have the file extension php.