Building the Web: Beyond HTML

Overview

This handout summarizes a few of the most common technologies that are used today for making the web dynamic and interactive. This is only a small sampling of technologies, but is intended to give you a glimpse of what's out there, and to introduce you to a few common terms in the field of web design and development.

Client-Side vs. Server-Side Scripts

Scripts are computer programs that allow web pages to be more dynamic, for example allowing pages to present changed or customized content based on user input. Scripts can be categorized as either client-side or server-side, depending on where they're executed.

Client-side Scripts

Client side scripts are executed client-side, within the users's web browser. They can be read by the user, and can be found in the source code of web pages that use them, contained between <script> and </script> tags. Sometimes scripts are contained in an external file, just like CSS. In these cases the <script> tag includes a src attribute that links to the script file.

The most common client-side scripting language is JavaScript, which will be covered in detail starting in the next lesson. Another client-side language is VBScript, although VBScript was developed by Microsoft and is not supported by their competitors' browsers such as Firefox and Opera, so most web developers use JavaScript for client-side scripting in order to be sure their website works in all browsers.

Client-side scripts have some shortcomings: Older browsers don't support them; and newer browsers allow users to disable scripts and some users do so. Most users these days are using browsers that support scripts, and generally have scripting enabled, but it is important to know that some users don't. Therefore it's a good practice to design web pages using progressive enhancement. This is a term used to describe the practice of creating web pages that work for everyone without CSS or client-side scripts. Then, enhance those pages, first with CSS (enhance the presentation) and then with JavaScript (enhance the functionality of the page). The scripted content should be a bonus for users who can access it, but if users can't access it, they should still be able to access the core content of the web page.

Server-side Scripts

Server side scripts are executed server-side, on the web server, before the web page is sent to the browser. Server-side scripts cannot be read by the user. They reside on the web server, and when requested by a web browser, they execute. What shows up in the web browser is not the script itself, but the output of the script, which is typically HTML. Because of this, server-side scripts are more reliable and accessible than client-side scripts. Anyone using a web browser can access HTML, and users don't have to turn anything on in their browser for the scripts to work.

There are dozens of server-side scripting languages. Here are a few of the most common:

A Server-Side Scripting Example in PHP

Throughout this course, you have had to go back on several occasions to each of the HTML pages in your portfolio in order to add new content. You started with a bare bones template for each page, but later you had to go back to add id and class attribute to some of the elements, then had to go back again to add a link to your external style sheet, then once again to add a link to your favicon image, and again to add your banner to the top of the page. If you found this frustrating and inefficient, imagine how you'd feel if you had to do that with a larger website with hundreds or thousands of web pages!

This is where server-side scripting can make our lives much easier as web developers. For example, if our website is running on a web server that supports PHP, we could have used a bare bones HTML template that looked something like this (this is the example for the home page, index.html):

  <?php
    include('functions.php');
    showTop('Home');
  ?>
  <!-- The main body of your web page, in HTML, will go here -->
  <?php
    showBottom();
  ?>

This code between <?php and ?> is PHP code. If a web server supports PHP and is configured to look for PHP code inside of HTML files, this PHP code would be recognized and processed on the server, before the final HTML page is sent to the user's browser. Here's what's happening in this example:

  1. The include() function is native (built-in) to PHP. It allows you to include an external file at the current position within the current file. In this case, we're including a file called functions.php. We haven't created that file yet, but after we do, that file will contain two functions, called showTop() and showBottom(). Functions are common to all programming languages. They're a way of grouping code together so it's easier to manage.
  2. After we've included the functions.php file, we can call any of the functions that are contained within that file. So we call showTop() at the top of the file, and showBottom() at the bottom. In the case of showTop(), we pass the word "Home" to the function so the function will know which page we're on (you'll see why in a moment).

Now we need to create library.php. That file might contain something like this:

  function showTop($thisPage) {
    echo '<!DOCTYPE html>';
    echo '<html>';
    echo '<head>';
    echo '<meta charset="utf-8">';
    echo '<title>'.$thisPage.'</title>';
    echo '</head>';
    echo '<body>';
  }
  function showBottom() {
	  echo '</body>';
	  echo '</html>';
  }

Each of these functions just contains a bunch of echo commands. This command outputs the HTML content that's contained in single-quotes (''). The only command that's a little different is the one that outputs the <title> tag. That command uses a variable named $thisPage. A variable in any scripting or programming language is a symbolic name that represents a value. In this case, since we passed the word "Home" to the showTop() function, the value of $thisPage = "Home". Therefore, whenever we use $thisPage in our code, it will output the word "Home". On our other pages, we would pass other words ("Graphics", "Accessibility", etc.) to the showTop() function, and they would show up in the title.

Now, with this code in place, we would never have to go back and modify the content within every file on our website! If we need to add something like a banner image or favicon link, we would just do it in one place, here in the functions.php file.

Also, if we add our navigation menu to the showTop() function, we could use the $thisPage variable to improve the functionality of the menu. If we're on the home page, wouldn't it be nice if the Home button looked different than the other buttons in our navigation menu, so we would have a clear visual indication of where we are within the site? That actually would be very easy with PHP. Here's what the code might look like for outputting the Home menu:

    echo '<li';
    if ($thisPage == "Home") {
      echo ' class="thisButton"';
    }
    echo '><a href="index.html">Home</a></li>';

In this example, we're simply using the echo command to write the menu item, just like we did in an earlier lesson using HTML. However, while we're outputting the <li> tag, we pause for a moment to check what page this is. If this page is the home page, that's the button we're currently outputting so we'll add a special class to that button, called "thisButton". Then, we can add some style to our external CSS file that makes buttons with class .thisButton look different than the other buttons.

These are just a few simple examples of what you can do with PHP, or with any other server-side scripting language. Server-side scripting makes web developers' work much easier, but it also makes web pages much more interactive.

Databases and the Web

A database is any organized collection of information, but is most commonly used if data is organized using a computer. Typically computerized databases organize information using structures such as tables, records and fields. For example, your school probably has a database in which it keeps its student records. The database may be organized into multiple tables: A table for students' contact information, a table for class schedules, and a table for grades. Within each table, data may be organized into records (one record for each student) and fields (such as first name, last name, address, zip code, phone number, and email address).

On the web, a database may be used to store product information, customer information, and so on. If a site requires you to log in, that site has your user name, password, and other information about you, stored in a database. If you provide a user name and password combination that matches a combination in the database, a server-side script retrieves additional information about you from the database and uses that to customize the web page you receive.

AJAX

AJAX stands for "Asynchronous JavaScript and XML". It is not exactly a client-side technology, nor a server-side technology: It's both! Ajax is a technique in which websites use JavaScript (client-side) to send data to, and retrieve data from, a server-side script. This all happens in the background so data can be updated on the current page without requiring the user to load a new page.

Content Management Systems

An increasingly common trend in web design is for all content on a website to be stored in a database. Then when a user requests a particular web page, the matching content is retrieved from the database and plugged into a web page template using a server-side script. To add content to the website, web authors don't have to write HTML as you've been doing in this course. They simply have to write or paste their content into a web form, and select "Save". A server-side script then saves the content to the database, where it sits in storage until someone requests it.

Systems like this are known as content management systems (CMS). They are beneficial in environments where web content is being created by people who are not professional web designers and who do not know HTML. It also makes the website much easier to maintain, since all content is delivered through a template. To change the design of every page on the entire website, all the designer needs to do is change the template!

Flash

Flash is a multimedia authoring environment developed by Macromedia (now Adobe) that is used to deliver dynamic animated content over the web. Flash content is developed using the Flash authoring software, and requires users to have the Flash Player installed. The CyberBee Copyright Tutorial (used as a resource in the earlier lesson on Copyright Law and Graphics on the Web) is an example of a web application that was developed using Flash. Flash authoring requires diligence in order to ensure that content is accessible to all users, including those who can't see the visual content, can't hear the audio content, or can't operate a mouse. A certain degree of accessibility is possible with Flash, but it requires the author to be thinking about the needs of all users when they design their interface. Flash has become less popular in recent years due in part to the popularity of Apple iPhones and iPads, which don't support Flash.