Web Development Quiz Review Terms and Tags
from lectures and online samples.

These terms will be the basis of the 10 to 20 question quizzes that will be given in class via Canvas once a week. All questions are very short multiple choice questions with very short answers. Almost all students finish these very short 10 question quizzes in 3 minutes. However, the 10-question exams  exam will be extended to 7 minutes to accommodate any student with special needs or who is not a native English speaker.

If a term, concept, or tag was not adequately defined in the in-class lecture or review below, use the Web to get a full understanding of that term, concept, or tag.


Quiz 1: Intro | Quiz 2: Links | Quiz 3: Images | Quiz 4: Colors | Quiz 5: Lists | Quiz 6: Styles
Quiz 7: Tables | Quiz 8: Forms | Quiz 9: JS | Quiz 10: Media | Quiz 11: PHP


Quiz 1 Review: Intro

Know: www, http:// (protocol), .htm, .html, tag, <html> (begin a Web page), <head>, <title> (places title in Titlebar and Task pane), <body> (contains ALL content that displays on screen), <br> (or <br /> for HTML 4), <p>, <strong>, <em>, <h1>, <h2>, <h3>, comments: <!-- Place Notes and non-displaying comments or remarks here -->, </html> (end a Web page)

For a good review see:
https://bradentonwebsitedesign.com/NotePad_Tutorials/FirstWebPage.htm

You can copy the code below and paste it in to Notepad (Start > Programs > Accessories) then edit it for your first Web page. (Be sure to save it as a .html or .htm file.)

Know all the tags for the following:
<html>
<head>
    <title>Quiz Review Terms and Tags</title>
</head>
<!-- Created on September 04, 2011 -->
<body>
   <h1>My Heading Goes Here</h1>
   <p><em>Demo Text for my first Web page </em></p> <!-- Note tag "nesting" -->
      Line 1<br> <!-- Line breaks (BR) provide less vertical spacing than P tags -->
      Line 2<br>
      <a href="http://msn.com">MSN</a>  <!-- Absolute path to another External site -->
</body>
</html>

Know: <a href, id ( # placed in front of an ID for an Internal link on the same page), Relative path - to a file on the same site, Absolute path - full address starting with http:// for an External link on another site, target="_blank", mailto:, ?Subject=
Protocol: is a set of rules that governs how information is exchanged - ex: http:// or ftp://
A URL consists of the Protocol (ex: http:), the Domain (SiteName.com), and a path (such as the folder) and file (ContactUs.htm)  Ex: http://SiteName.com/ContactUs.htm  
If the path and file name are left off of the URL, the browser searches in the root folder (the main folder) of the Web server for the home page which is named: index.htm or index.html, or default.htm or home.htm, or index.php
To direct the path up one folder level, precede the file name by ../

For a good review see:
https://bradentonwebsitedesign.com/NotePad_Tutorials/Hyperlinks.htm

For the following 6 links, assume a folder (it could be in My Documents or on a Web server) called MySite contains an Admin folder and a public_html folder
* MySite > Admin folder contains a file called: admin.htm
* MySite > public_html folder contains: index.htm, ContactUs.htm, AboutUs and a Products folder
* MySite > public_html > Products folder contains: Computers.htm, Monitors.htm, Printers.htm
Assuming the above, the file index.htm has the following ID and 6 links:

<h2 id="OurPledge">Our Pledge </h2>
<!-- Set an Internal ID called OurPledge that an internal hyperlink can jump to -->

<a href=#OurPledge">Our Pledge</a>
<!-- 1 Jump to Internal ID <h2 id="OurPledge"> (or anchor) on index.htm -->

<a href="ContactUs.htm">Contact Us</a>
<!-- 2 No path because ContactUs.htm is in same folder as index.htm -->

<a href="Products/Monitors.htm">Monitors</a>
<!-- 3 A Relative path DOWN one level to Products folder in same site -->

<a href="../admin/admin.htm">Admin Login</a>
<!-- 4 A Relative path UP one level (../) to Admin folder in same site -->

<a href="http://msn.com" target="_blank">MSN</a>
<!-- 5 Absolute path (starts with http://) to an External link to another site -->
<!-- target="_blank" displays the page in a new separate browser window -->

<a href="mailto:Bob@abc.com?Subject=Request Quote">myName@abc.com </a>
<!-- 6 An email link with an optional default subject (?Subject=) -->

<a href="tel://+18885550000">(888) 555-0000</a>
<!-- 7 A telephone link -->

Quiz 3 Review: Image formats

Know: The Graphics Interchange Format (GIF) was introduced by CompuServe in 1987. The format allows a single image to reference a palette of up to 256 distinct colors in a relatively small file size. Drawings and simple animations tend to be .gif files.

The Joint Photographic Experts Group (JPEG or JPG) is a commonly used method of compression for photographic images. JPEG typically achieves 10:1 compression with little perceptible loss in image quality.  As JPEG is a lossy compression method, meaning that some visual quality is lost in the process and cannot be restored. JPG files can displays a spectrum of 16.7 million colors.

Lossless data compression is a class of data compression algorithms that allows the exact original data to be reconstructed from the compressed data. Some image file formats, like PNG or GIF, use only lossless compression.

Portable Network Graphics (PNG) is an image format that employs lossless data compression. PNG was created to improve upon and replace GIF as an image-file format not requiring a patent license. The motivation for creating the PNG format was in early 1995, when it came to light that the data compression algorithm used in the GIF format, had been patented by Unisys and there might be an issue with using GIF files on the Web. PNG files are very high quality, work well with photographs, and are sometimes smaller in size than a similar quality JPG file.

In 1998, Congress amended the Rehabilitation Act to require Federal agencies to make their electronic and information technology accessible to people with disabilities. Section 508 was enacted to eliminate barriers in information technology. “Color coding shall not be used as the only means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.

Below is a typical line for adding an image to a Web page:
<img src="images/dog.png" height="200" width="200" alt="Picture of a big dog" />
Note1: the path is set to the images folder
Note2: the height and width are set, but this only affects the way it is rendered in the browser. If the actual uploaded file came directly from a camera, it may be well over a megabyte in size, and will cause your Web page to load slowly.
Note3: the alt tag is used so that screen readers can provide alternate text for visually impaired visitors to the page.

For a good review see:
https://bradentonwebsitedesign.com/NotePad_Tutorials/Images.htm

Quiz 4 Review: Colors

Know: The World Wide Web Consortium (W3C) has listed 16 valid color names for HTML and CSS: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.

There are also some Extended color names such as: darkblue, dodgerblue, mediumblue, skyblue, aquamarine, brown, beige, crimson, gold, hotpink, indigo, magenta, tan, violet…

(At one time it was suggested that Webweavers avoid extended color names and limit their colors to 216 Web safe colors. But with today's modern browsers, this is no longer necessary.)

Hexidecimal is a base 16 numbering system. (As a comparison, Decimal is a base 10 numbering system, and Binary is a base 2 numbering system.)
Hex triplet values or RGB (Red, Green, Blue) triplets can be used to represent literally thousands of other colors:

Hex: base 16: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9,  A,  B,  C,  D,  E,  F, 10, 11...

Dec: base 10: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17...

Hex and RGB can represent FF* FF*FF colors or 255*255*255 colors or over 16 million colors.

For a good review see:
https://bradentonwebsitedesign.com/NotePad_Tutorials/Colors.htm

The following three in-line style statements all display the text “abc” in the highest value of red:

<p style="color:RGB(255, 0, 0)">abc</p>
<!-- the above code uses an RGB triplet to represent the color red -->

Or

<h2 style="color:#FF0000">abc</h2>
<!-- the above code uses a Hex value to represent the color red -->

Or

<div style="color:red">abc</div>

All <h1> tags for the entire Website can be set to dark blue with the following CSS statement:

h1 {color: #000099;}     /* dark blue*/

(The /*  … */ is used to add comments or remarks to style sheets. Comment are ignored by the browser)

<body style="background-color:yellow; font-weight:bold; color:#3300FF">

(<body bgcolor=”yellow”> has been deprecated)

Red or #FF0000 or RGB(255,0,0)
Lime (Green) or #00FF00 or RGB(0,255,0)
Green or #008000 or RGB(0,128,0)
Blue or #0000FF or RGB(0,0,255)
Yellow or #FFFF00 or RGB(255,255,0)
Aqua or #00FFFF or RGB(0,255,255)
Fushsia or #FF00FF or RGB(255,0,255)
Black or #000000 or RGB(0,0,0)
White or #FFFFFF or RGB(255,255,255)

Gray or #808080 or RGB(128,128,128) or #333333 or #666666 or #999999 or #CCCCCC
Also Maroon (128,0,0), Navy (0,0,128), Purple(128,0,128), Olive (128,128,0), Teal (0,128,128), Silver (192,192,192)

Also see: http://en.wikipedia.org/wiki/Web_colors

For color code chart see: http://faculty.scf.edu/WinterF/0ClassFolders/2820Web/SamplesHTMLcode/HTMLcolors.htm

Quiz 5 Review: Lists

Know: Ordered list <ol> (uses numbers - the default, letters, roman numerals), list-style type: decimal, decimal-leading zero, upper-roman, lower-roman, upper-alpha, lower-alpha; Unordered list <ul> (uses bullets - the default, circles, squares, or images), list-style type: disc, circle, square, url image; List item <li> (lists each item for both ordered and unordered lists), nesting lists (such as adding an <ul> inside an <li> within an <ol>), what happens if there is no type or list-style attribute - that is - what will be the list-style? (test and find out)

For a good review see:
https://bradentonwebsitedesign.com/NotePad_Tutorials/Lists.htm

<ol style="list-style-type:lower-roman">
   <li>
Item 1</li>
   <li>
Item 2/li>
</ol>

<ul style="list-style:square">
   <li>
Item One</li>
   <li>
Item Two</li>
</ul>

<!-- image: point.gif referenced below will appear before each item -->
<ul style="list-style-image: url(images/point.gif)">

   <li>Item One</li>
   <li>
Item Two</li>
</ul>

Also see: WinWebTutor

Quiz 6 Review: Styles

Know: <span, <div, style, &nbsp; font-family, font-size, font-weight, color, Inline style (attributes are defined within p, div, span, td tag), Internal style (defined in style tag in the <head> of the same page), External style (defined in a separate page with the extention .css), Class (user defined style, begins with .), css, text/css, proportional font (each character takes up as much room as needed - the letter M will use more horizontal space than the letter i. Ex: Arial & Times Roman), monospaced or fixed-width (each letter takes up as much space as every other letter - the letter M will use as much horizontal space as the letter i. Ex: Courier), Serif (extra details on the ends of some font strokes; ex: Times Roman), Sans-serif (without a serif; ex: Arial), <pre>Text in a pre (as in previously formatted) element is displayed in a fixed-width font, and it preserves both spaces and line breaks</pre>, deprecated (being phased out: ex: <font> tag which is replaced by <style="font-family...>, <center> tag is replaced by <style="text-align:center...> )

For a good review see:
https://bradentonwebsitedesign.com/NotePad_Tutorials/Styles.htm
https://bradentonwebsitedesign.com/NotePad_Tutorials/CSS.htm
https://bradentonwebsitedesign.com/NotePad_Tutorials/Divs.htm
https://bradentonwebsitedesign.com/NotePad_Tutorials/Html5.htm
http://faculty.scf.edu/winterf/0ClassFolders/2820Web/WinWebTutor/1HTML_tags.shtm

<head>
<meta name="author" content="Floyd Jay Winters" />
<meta name="description" content="Syllabus Web Development - CGS 2820C, SCF, Professor Floyd Winters" />
<meta name="keywords" content="Web Page, Web Development, Web Site, HTML, Syllabus, CGS 2820" />
<!-- The line below links to an External Cascading Style Sheet -->
<link href="Web.css" rel="stylesheet" type="text/css" />

<!-- Below is an example of an Internal style within a <head> tag -->
<style type="text/css">
<!--
h1 {font-family: Courier; color: #0000FF}

a:hover {color: #0000CC; background-color: #FFFF00}

.ImportantTopic {      /* This is a Class. It starts with a . */
  color: #FF0000;  /* Each attribute line ends with a ; */
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px
}         /* Close each style with a closing brace } */
-->
</style>
</head>

<!-- Below are examples of Inline Styles withIN a Tag -->
<body style="color:#FF00FF; background-image:url(Images/BackgroundWater.jpg)">

<p style="color:blue; font-size: 14px>

The above custom .ImportantTopic class could also be written on one line as shown below:
.ImportantTopic {color: red; font-weight: bold; font-family: Arial; font-size: 18px}

Components of a style are separated by semicolons (;)
Style values are assigned by colons (:)
Programmer defined new styles or Classes begin with a period (.)
Modified existing tag styles (like body h1 and p) do not begin with a period

<!-- Inline Styles can used in body, h1, p, span, div, td tags -->
<span style="font-size:18px; font-family:Arial; color:#0000FF">Style demo</span>

<p class="ImportantTopic">Caution</p>

The following is the basic setup for an index.htm linked to a .CSS file named siteLayout.css:
<div id="masthead"> <!-- Note the ID is in quotes -->

<!— The .CSS file may define the masthead’s banner image so no other code is needed -->

</div>
<div id="top_nav">
       <a href="index.htm">
Home</a> |
       <a href="about.htm">About Us</a> |
       <a href="contact.htm">Contact Us</a>
</div>
<div id="page_content">

= = =

The .CSS file (such as siteLayout.css) to go along with the above file might have the following statements:

#masthead {background-image: images/myHeader.jpg}

#top_nav {background-color:#99CCFF; border-bottom-style:solid; border-bottom-color:blue}

Also see: WinWebTutor > CSS

Quiz 7 Review: Tables

Know: <table>, width, background-color, background-image, <tr> (table row), <td> (table data: cells or columns), colspan (combine or span columns), rowspan, border, cellpadding (between data and cell borders: abc  |), cellspacing (between cells - between cell borders: | |), rules="none" (no borders inside the table), nowrap (do not let text wrap in a cell), <td style="text-align:center">, <td valign="top"> (align contents vertically to the top of the cell), <td style="background-color:#CCCCCC">. (rules="none" was the older way to keep the inside table borders from displaying. It has been replaced by the styles="border attribute.)
Note: all empty table cells should have at least a &nbsp; inside the <td> tag to prevent it from collapsing.

For a good review see:
https://bradentonwebsitedesign.com/NotePad_Tutorials/Tables.htm

<table style="width:790px; background-color:#FFF; background-image:url(images/bg.jpg); border:2px solid blue" cellpadding="0" cellspacing="2">
<!-- cellpadding should be defined in the stylesheet -->
  <tr>                 <!-- 1st Row -->
    <td>&nbsp;</td>    <!-- 1st column, 1st row -->
    <td>&nbsp;</td>    <!-- 2nd column, 1st row -->
    <td>&nbsp;</td>    <!-- 3nd column, 1st row -->
  </tr>
  <tr>
    <td colspan="3" valign="top">&nbsp;</td>
<!-- every row must accomodate the same amount of columns -->
  </tr>
  <tr>
    <td style="background-color:#CCCCCC">&nbsp;</td>
    <td nowrap="nowrap">&nbsp;</td>
    <td rowspan="2">&nbsp;</td>
  </tr>
  <tr>
    <td style="text-align:center">&nbsp;</td>
    <td valign="top">&nbsp;</td>
  </tr>
</table>

Quiz  8 Review on Forms 20 questions, for 20 points will be selected from below

Know: Form action, method (post or get), fields (individual control elements on a form that allows the user to enter information for a person, place, date, or thing), type="text", type="radio" (option button), type="checkbox", type="password" (entered text is hidden or masked, with a * or bullet, from user), type="submit", type="reset", textarea, value (the data that is entered into the field, or the default value that may be set), hidden (the user does not see the value or execution of the statement. Another reason for a hidden type might be to hide the recipients email address), select, option, client-side, server side,

Server Side processing: The processing of the form data is done on the Web Server. This is the way professional forms are done.

Client Side processing: The processing of the form data is done on the Client's computer using the user's email client program, such as Outlook. This is seldom done for two reasons: 1. Windows will often display a warning message indicating that a process is trying to access their email client. 2. If a form is filled out in the library or in a computer lab, typically an email client has not been configured so the from data will not be submitted, so in those circumstance, a client side submission will not even work.

Form Action: What happens after submit is clicked. Usually a server-side file called to handle the submitted data. This is the preferred method.

Server side samples:

<form name="contactForm" id="contactForm" action="FormProcess.php" method="post">
OR

<form name="contactForm" id="contactForm" action="webformmailer.php" method="post">
<!-- In the above case, gdForm.php is a script file that may be automatically installed in the root folder of a Godaddy customer. When a site visitor taps [Submit], the "action" in essence links to gdForm.php which receives the submitted data and to send it to the appropriate email address. -->

Or action="/cgi-bin/FormMail.pl" (check with your hosting company)

Client side sample (avoid using):

<form action="mailto:name@domain.com?Subject=Inquiry" method="post" enctype="text/plain">

Form Method: Post the data to the Server or Get or download data from a database. Post is most common

Practice in Dreamweaver:
Insert > Form to insert a (as in only one) <form> tag. Inside the single <form> tag, insert the various form elements, such as Text Fields, TextAreas, CheckBoxes, Radio (Option), Buttons...

Practice in Expression Web:
You can drag these elements to your form from the Form Controls section of your Toolbox, which is typically located on the right side of the window.

Note: you should only have one form tag on your Form!

The Text Fields, TextAreas, CheckBoxes, and Radio button elements on your form are Fields.

If you do not include the type attribute in an <input> tag, it becomes a text field by default. But for clarity, you should enter each form element type.

[Tab] allows the user to move from field to field to enter values (or use mouse).
[Shift] + [Tab] moves to the previous field.
[Enter] will "Submit" the form.
[Ctrl] can be used to select two or more noncontiguous items in a option dropdown list.
[Shift] can be to select a contiguous series of items in a option dropdown list.

You can enter default values for fields by using the value=" " attribute (see below).
The default size for text boxes is 20 characters wide.
You could change this default by using the pattern below:
<input name="areaCode" type="text" size="3" />
<!-- The line above set the size of the box, not the number of characters that can be entered -->

Understand and recognize the following samples:

<form name="contactMe" id="contactMe" action="ScriptName" method="post" />
<input type="hidden" name="subject" value="YourSite.com Contact Submission" />
<input type="text" name="LastName" size="25" />
<textarea name="Comments" rows="4" cols="40" id="Comments"></textarea>
<select name="State" id="selectstate"><option value="AL">AL</option>
<input name="Female" type="radio">
<input name="CollegeGraduate" type="checkbox">
<input name="" type="submit" value="submit">
<!-- use name="" type="submit" so email does not say Submit=Submit -->
<input name="Reset1" type="reset" value="reset">

Option buttons are sometimes called ____ buttons. 

Text ____ are used for longer entries that can include several lines of text.

The actual information entered into a field is called the field ____.

Forms are created using the ____ tag.

If you do not include the type attribute in an <input> tag, the Web browser assumes that you want to create a(n) ____.

Which input type displays an input box that hides text entered by the user?

By default, all input boxes are ____ characters wide.

To define a default value for a field, use the following syntax: ____.

To move to the previous text box, press the Tab key while holding down the ____ key.

Typically, pressing the ____ key submits the form.

In the general syntax for the <select> and <option> tags, each ____ tag represents an individual item in the selection list.

By default, the ____ tag displays one option from the selection list, along with a list arrow to view additional selection options.

For noncontiguous selections from a selection list, press and hold the ____ key while you make your selections.

For a contiguous selection in a selection list, press and hold the ____ key, and then select the last item in the range.

To create an action for a(n) ____ button, a server side script is referenced in the <form> tag to run automatically when the button is clicked.

What are possible values for the method attribute of the <form> tag?

The ____ method of the <form> tag sends form data in a separate data stream, allowing the Web server to receive the data through what is called “standard input.”

____ buttons are used to select a single option.

To move to the previous text box, press _____.

Typically, pressing the _____ key submits the form.

Case (capitalization) is important in form ____.

Check boxes are ____

You can specify default text that will appear in _____

Which form attribute will set the server-side script file name?

Which would allow you to create an input box for Address1?

Which would allow you to create an input area for a Memo field?

Which would allow you to create a drop down list for Cities?

Which would allow you to store values in drop down list for States?

Which would allow you to send the data to the server?

Quiz 9 JavaScript Quiz Review 10 Questions.

Know: Sever-side, Client Side, JavaScript features, JavaScript extensions (.js), JavaScript comments (/* abc */ for multiple and // abc for one line), Case sensitive, how to include HTML tags in JavaScript statements, how to link and load External JavaScript files, how to code and access Internal JavaScript files, <script> tag, how to end a JavaScript statement

See: http://faculty.scf.edu/winterf/0ClassFolders/2820Web/WinWebTutor/6JavaScriptOverView.shtm

JavaScript is a client-side scripting language and has a similar look to Java programming and CSS.

JavaScript can:

1. Allow Interactivity

2. Display Pop-up messages to users

3. Perform Calculations

4. Perform Validation

5. Work with Event Handlers such as onload or onclick

6. Produce and preload Roll-over images

7. Work with Cookies

JavaScript is Case sensitive. Almost all commands are in lower case.

Internal JavaScript commands are placed inside <script> tags.

External JavaScript files have a .js extension.

External scripts are often loaded in the <head> tags.
Below is an example of a statement to call and External JavaScript file:
<script src="scriptName.js" type="text/javascript"></script>

Comments or remarks are ignored by the browser interpreter
Below is an example of a Single line Comment in JavaScript:
// This line calculates tax
Below is an example of a Single or Multiline Comment or remark:
/* Created by John Smith, email, web site, give me credit  */

; Used to end each JavaScript statement (also end CSS statements).

{ Begin a JavaScript block of code.
Ex: if (firstName == "") {alert("First Name required");}

} End a JavaScript block of code.

Quiz 10 Review on Multimedia 10 questions will be selected from below

Know: .WAV (Microsoft wave sound file, good quality, but too-large-for the Web), .MP3 (most common audio file), .AVI (Microsoft video file, good quality, but too-large-for the Web), .MP4 (video), .MIDI (digitized audio, small in size, synthesizes sound by recording each note’s pitch, length, and volume), .MOV (Apple QuickTime video), .WMV (Windows Media Video), .SWF (the extension of a Flash file, originally marketed as Shock Wave), .GIF (used for drawings AND animated images), .class (the extension of an Applet - a small program written in Java),

Plug-in (a software components that adds specific abilities to a larger software app; ex: Adobe Flash Player, QuickTime, and Microsoft Silverlight. If you do not addthe appropriate plug-in to your browser, some online media content will not work on your computer), streaming (delivering an audio file to your computer over the Web, so that as the data arrives it is buffered for a few seconds and then playback begins. As the audio plays, more data constantly arrives or streams, Silverlight (relatively new Microsoft multimedia app to compete with Flash), RSS (really Simple Syndication or Web feed), YouTube, Transition (when on image disolves or changes into another, such as a rotating banner or slide show), Hotspot (an area on an image that a user can click to launch a hyperlink. Hotspots work with an Image Maps to map the x y coordinates.)

The mechanical vibrations of sound move using a wave motion.
A wavelength is the distance between any two repeating points on a wave.
The default extension of a Windows sound file is .wav. These are high quality, but very large files. You should convert them to .mp3 files instead if you are going to put them on the Web.
Each measurement of a sound wave is called a sample.
Frequency is the number of cycles of vibration per second - measured in kilohertz (KHz).

You can link a sound file to a Web page by simply using the code shown below:
<a href="mySong.mp3">My Favorite Song</a>

Embedding Sound files: Not only can this be annoying, but many browser standards do not support the embed tag. Nevertheless, below is the syntax:
<embed src="mySong.mp3" autostart="true" loop="false" />

The most common sound file format on the Web today is ____.

A ____ sound format must be completely downloaded by the user before it can be played.

Which format is limited to music and cannot be used for general sounds, such as speech?

With the <embed> tag, enter a value of ____ = “true” for the clip to begin automatically.

Which is a video format developed by Apple Computer for Windows and Apple computers?

To embed a video file, you can use the ____ tag.

Which is a small program written in the Java programming language that can be included in an HTML page?

Quiz 11 Review for PHP, ASP, SHTML Cold Fusion and Include files
Know: Client Side vs Server Side scripts:

Description: JavaScript and Behaviors (such as Pop-up messages and Swap images) use Client Side scripts to allow dynamic interaction or DHTML on the local client computer.

Know the extensions: PHP (.php), CGI, ASP (.asp or .aspx, resembles Visal Basic), and Cold Fusion (.cfm) are Server-Side scripting languages for Dynamically created Web pages.

You can view .htm files locally. However, you cannot view .php, .cfm, or .aspx files locally without special software installed on your computer. You can only view these files on the "Server."

Include file: A server-side file that can be "included" in multiple Web pages, so that if the include file is modified, all of the Web pages that contain the include link are also immediately modified.

An example might be an include Footer with your contact email and a Last Modified Date script. Another example may be an include NavBar so that if you add a Web page, all the other pages will immediately have access to it through their menu navigation.

Sample code added to the <body> tab for the Include NavBar: <?php include ("navBar.htm"); ?>

If you open a Web page with Include files in your browser and click View Source, the Web Server will convert all the include lines into pure HTML, so you will not see the true local source code.

Sample Include lines

<?php include ("navBar.php"); ?>     : PHP

<!--#include file="navNar.shtml"-->  : SHTML

<!--#include file ="navBar.aspx"-->  : ASP

<cfinclude template = "navBar.cfm">  : Cold Fusion

To use files with PHP, SHTML, ASP and Cold Fusion they need appropriately named extensions:

Such index.php or index.shtml or index.asp or index.cfm

The language directive line is placed immediately above the <html> tag. By default it is C# but can easily be changed to VB: <%@ Page Language="C#" %>

ASP code begins with <% and end with %>

ASP code includes similar commands to Visual Basic, such as DIM which is used to define a variable, Functions and Subroutines are used for blocks of code or modules, and IF statements are used for decisions. For instance see the snippets of a gdform.asp script below:

<%

Dim landing_page, host_url

Function FormatVariableLine(byval var_name...)

end function
= = = = = =
Sub OutputLine(byVal line)

end sub
= = = = = = 

if err.number = 0 then... 

= = = = = =

Note in the PHP code below:

PHP code starts with <?php

PHP Variables begin with a $

echo is used to print out data.

HTML Tags like
and literal strings of text are enclosed in apostrophes (')

Typically, each line must end with a semicolon (;)

= = = = = =

<?php

echo 'PHP Date Demo
';

echo date("m-d-y");

?>

= = = = = = 

<?php

$width = "60";

$height = "20";

echo "If Height=60px and Width=20px, then area is ";

echo "$width * $height px";

?>

Also see:
https://bradentonwebsitedesign.com/NotePad_Tutorials/IncludeFiles.htm

Top