Web 101 - Class 5 - Files and Scripting | Back to Class

Topic 1: Review of Last Week

We began with a review of last week - Web 101 - Class 4 - Installing a Local Web Server

Topic 2: File Extensions

Files that end with .HTM, .HTML are pure HTML pages

Files that end with .ASP, .ASPX are Active Server pages - Microsoft's scripting language

Files that end with .PHP, .PHP3 are PHP Hypertext Processor pages - An open source scripting language

The file extension tells the web server what type of scripting language to look for.

Topic 3: PHP Scripting

Embedded PHP Script appears between <? ?> tags like this:

<? echo "Hello World"; ?>

echo is the PHP command to output to a web page.

Topic 4: Simple Script to Draw a Web Page

Here is a simple script that creates a simple web page. \n is the newline symbol. Run the script then View | Source. See how pretty it is? Without the newlines it would all run together.

<? 
echo "<html>\n";

echo "<head>\n";
echo "<title>My Title</title>\n";
echo "</head>\n";

echo "<body>\n";
echo "<h1>My Heading</h1>\n";
echo "<p>My Para</p>\n";
echo "</body>\n";

echo "</html>\n";
?>

Topic 5: Modular Script that Combines Script and HTML

Next let's make the script more useful with a couple functions. Notice that we pass the Title of the page to the PageBegin() function.

<? 
function PageBegin( $sTitle)
{
	echo "<html>\n";
	echo "<head>\n";
	echo "<title>$sTitle</title>\n";
	echo "</head>\n";
	echo "<body>\n";
}

function PageEnd()
{
	echo "</body>\n";
	echo "</html>\n";
}
?>

<? PageBegin( "My Title"); ?>

<h1>My Heading</h1>
<p>My Para</p>

<? PageEnd(); ?>

Topic 6: Reusable Scripts

Let's break the script into 2 files so we can reuse our functions.

<? 
require_once( "page3.php");
PageBegin( "My Title"); 
?>

<h1>My Heading</h1>
<p>My Para</p>

<? PageEnd(); ?>

Here is page3.php. Notice the comments which document how to use the functions.

<? 
// Write the beginning of the HTML page.
// Pass the title of the page as the first and only parameter.
function PageBegin( $sTitle)
{
	echo "<html>\n";
	echo "<head>\n";
	echo "<title>$sTitle</title>\n";
	echo "</head>\n";
	echo "<body>\n";
}

// Write the end of the HTML page.
function PageEnd()
{
	echo "</body>\n";
	echo "</html>\n";
}
?>

If this is ALL you ever learn about scripting, you will still be a happy webmaster.

Topic 7: Lets Add Some Style

Now let's give the script a little color. All we do is add a WriteStyles() function and call it from PageBegin().

<? 
// Write the beginning of the HTML page.
// Pass the title of the page as the first and only parameter.
function PageBegin( $sTitle)
{
	echo "<html>\n";
	echo "<head>\n";
	echo "<title>$sTitle</title>\n";
	WriteStyles();
	echo "</head>\n";
	echo "<body>\n";
}

// Write our CCS declarations
function WriteStyles()
{
	echo "<style>\n";
	echo "h1 { color:maroon; background-color:silver; }\n";
	echo "p { color:blue; font-style:italic; }\n";
	echo "</style>\n";
}

// Write the end of the HTML page.
function PageEnd()
{
	echo "</body>\n";
	echo "</html>\n";
}
?>

Topic 8: Then Put the Styles in Their Own File

In this script PageBegin is told what style sheet to use.

<? 
require_once( "page5.php");
PageBegin( "My Title", "style5.css"); 
?>

<h1>My Heading</h1>
<p>My Para</p>

<? PageEnd(); ?>

Because we change PageBegin to call WriteFileStyles which refers to an external CSS file.

<? 
// Write the beginning of the HTML page.
function PageBegin( 
	$sTitle, 		// Title of the page
	$sCSSFile		// Name of the CSS file
	)
{
	echo "<html>\n";
	echo "<head>\n";
	echo "<title>$sTitle</title>\n";
	WriteFileStyles( $sCSSFile);
	echo "</head>\n";
	echo "<body>\n";
}

// Write our CCS declarations as a reference to a separate file
function WriteFileStyles( $sFile)
{
	echo '<meta http-equiv="Content-Style-Type" content="text/css">'."\n";
	echo '<link rel="stylesheet" href="'.$sFile.'" type="text/css">'."\n";
}

// Write our CCS declarations inline
function WriteStyles()
{
	echo "<style>\n";
	echo "h1 { color:maroon; background-color:silver; }\n";
	echo "p { color:blue; font-style:italic; }\n";
	echo "</style>\n";
}

// Write the end of the HTML page.
function PageEnd()
{
	echo "</body>\n";
	echo "</html>\n";
}
?>

And here is what the style4.css file looks like.

h1 
{ 
	color:maroon; 
	background-color:silver; 
}

p 
{ 
	color:blue; 
	font-style:italic; 
}