Web Design

An Educational Tutorial About Web Design

The vast majority of web sites that you view each day are actually comprised of several computer files, each contributing their own small part toward the result you see displayed on your screen. Many of these files may be written using different programming languages. Each language is designed to provide the most efficient method for solving a particular problem. The speciality of programming is why web designers must be educated in many different methods of programming.

The following tutorial will describe some of the difference components that make up a fully functional web page. Much of this page is interactive, allowing you to experience the power of good web design. Please contact the members of TS Target Sites if you have any questions.

Web Browsers

Displaying The World Wide Web

Chrome FireFox Safari Opera IE
Download browsers by clicking on images.

Web browsers are used to find and display web pages. Common examples of browsers include Google Chrome, Firefox, Safari, Opera, Microsoft Internet Explorer, and many others. The data received by your browser when you visit a web site is nothing like the final page you see displayed. The web page code received is similar to a set of instructions that your browser follows to create the visual display. You can view this "raw" code by accessing the "View Source" function in your browser. (Most commonly done by right clicking your mouse.) These instructions include additional files containing visual style information that need to be downloaded (CSS), content structure that group the page's data into related sections (HTML), and scripting languages that "teach" the browser how to react to user interaction (Javascript).

The web browser itself is responsible for interpreting the instructions. Because of this, the same web page may display differently in separate web browsers. These variations make it very difficult for web designers to create a set of instructions that all browsers understand and follow similarly. Standardization has only recently begun, unfortunately it may take a long time before all web pages follow these rules. These standards are regulated by The World Wide Web Consortium.

The final code that the browser receives when visiting a web page can be generated using numerous methods. At the point the browser requests the web page, the computer that holds the web site files, normally called a server, may run a series of functions prior to sending the code to the browser. Example functions include, parsing information entered into forms by the user, accessing a database to search for or store data, or even contact another computer to validate access criteria. The recursive nature of some of these functions will result in the server running hundreds to thousands of calculations before generating the final code that will be sent to the browser. It is this area of web design that professional education and strict organization is required to create fully functional, dynamic web pages that serve the needs of the user.

HTML, DHTML, XHTML -- Hypertext Markup Language

Displaying The World Wide Web

  

An HTML element called <DIV> is used to group associated data and is placed within the resulting web page using CSS. You can highlight the <DIV> elements used to display this web page using the button above. This interaction is created using JavaScript.

Many of us have heard of HTML. So much so that it has almost become a household word. The majority, however, do not understand what HTML actually does or how it works. Simply put, HTML provides the structural organization of web pages. It works by grouping the information on the web page into categories of associated information. This information can range from simple text to complex browser plug-in controls. Much like a traditional newspaper, HTML allows for developing "easy to follow" web pages. Headings, columns, paragraphs, and images are all displayed in such a way that shows their relationship with one another.

By embedding a scripting language within the HTML structure, designers can create interaction between the user and the displayed web page. We see this most commonly as form entry validation, confirmation boxes, dyanamically changing content, and just about anything you can dream up. The combination of a base HTML structure with an interactive scripting language is sometimes called DHTML, or Dynamic HTML.

Over the years many browser software companies have added their own little touches to the HTML markup language. This has resulted in a language that has no standardization. The same HTML web page may display differently in one browser than in others. This has lead to a new form of HTML that draws on the rigidity of XML (eXtensible Markup Language). Known as XHTML, the new format is strict. Supported features and structural rules have been globally defined by The World Wide Web Consortium. Imagine HTML with a clear set of directions on what can and cannot be done. XHTML is the future of web design. The World Wide Web Consortium provides a validator that will check if a web page follows the current XHTML standards. You can validate this page by following the W3C link at the bottom of the page.

CSS -- Cascading Style Sheets

Providing Visual Appeal

  

Use the buttons above to change from displaying this page with and without any linked CSS documents. This interaction is created using JavaScript.

Style sheets contain the information that determines how a web page should look. The information may include text and background colors, font sizes and weights, border width and styles, and many more. Thousands of specific display properties can be stored within a style sheet. When your computer displays a particular web page, it references the associated CSS style sheets to learn how the designer wants the page to appear.

Javascript & jQuery

Reacting To User Interaction

Scripting languages can be embedded within the HTML code that web browsers interpret. The language will "teach" the browser how to react to particular keystrokes or mouse movement by the user. These reactions are seen throughout the Internet, most commonly as drop down menus, content reacting to user mouse input, confirmation pop-up boxes that ask for the user's validation of data, or even animated picture galleries. Interpretation of the embedded language is depended on the browser being used. As with HTML, different browsers may act differently using the same scripting data.

jQuery is a newer library of scripts written in JavaScript designed to take the individual browser complexity out of a developer's care. "jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development." (jQuery Website) AJAX interactions are background server calls made by your browser. This allows for the dynamic update of content on the website without refreshing the page. Imagine automatic updating scores on your favorite sports website. An example of this is shown below where you can search for area code locations.

Form Validation
  •   Once "Submit" is clicked, a warning will appear if the entered data is invalid.
  •   A jQuery created calendar popup assists the user with selecting a valid date.

PHP -- PHP:Hypertext Preprocessor

Generating Dynamic Content

The term static describes the never changing properties of something. The opposing characteristic emphasizing continuing change is known as dynamic. Dynamic web pages change themselves to conform to a set of rules programmed by the web designer. The variation on rules is limitless. Some web pages will display differently depending upon the user's set preferences, while others may change based upon the user's browser. Form validation, storing and searching data on a database, redirecting users to appropriate web pages, these are all examples of the extraordinary number of things that can be accomplished using a "Server Side Process."

PHP is an open source project and has become one of the most commonly used server side programming process languages. If you can imagine it, it can be done using PHP. Many of the shopping carts, photo galleries, or forum web pages you visit are done using PHP. The most popular web blogging software Wordpress was created using PHP. Integrating with databases, where millions of pieces of data can be stored and searched, is easily done using PHP with SQL (Structured Query Language), a language specific to communicating with databases.

Some of the most advanced programming created on the web today utilizes "Object Oriented Programming." OOP is a style of programming that separates a large project into small specific tasks. Programming files, called classes, are then written to accomplish each individual task. These classes can be programmed to communicated with one another, sharing the results of their individual tasks. The end result is a large group of classes all working together to achieve a particular result. A good example is the purchase of products online. Upon the submission of your credit card information, the system must contact the bank and verify your account, contact a database and reduce the available number of in stock items by the number you have purchased, create an email receipt that is sent to both you and the company, along with many other small tasks. In reality, thousands of calculations or connections may take place to achieve this goal.

Only PHP version levels above PHP5 support Object Oriented Programming. It is in this area that TS Target Sites differences itself from others. We are highly educated in this area and develop some of the most sophisticated web programming that will allow the ease of future improvements and changes.

SQL -- Structured Query Language

Data Storage & Retrieval

Area Code Lookup

The Area Code Lookup example uses jQuery for form validation, as well as, to perform the AJAX call to the server to retrieve the results. The call goes to a script written in PHP that uses SQL to query, or search, the database for the answer. Once the result is returned, jQuery is used again to display the result on the page.

An enormous amount of information can be stored on databases. Imagine the name, address and phone number of everyone that bought a Coke© in the last ten years. SQL is the language used to store and retrieve this information. The connection to the database and the channel that delivers SQL queries is established using a server side program. PHP can provide all of the necessary connections to a variety of database types.

Databases are used in just about every corporate web design on the Internet. Using databases allow for easy changes and instant reaction to those changes. For example, if a product you are selling becomes unavailable, you do not want the web page to delay in restricting the order of such a product. In an extensive shopping cart application, the demographic information for each customer is stored and then used to determine marketing effectiveness.

XML -- eXtensible Markup Language

Universal Exchange of Information

There is an endless number of programming languages available to web designers. A designer may use certain languages in particular situations due to it's ability to complete the task at hand. However, differences in language structure make it difficult to pass data from one application to another. XML has become the standardized method of bridging the gap between programming languages.

Both XML and HTML were derived from SGML (Standard Generalized Markup Language.) A markup language is used to define the structure and appearance of a document. SGML is the standard set of instructions for defining a markup language. The rules of XML are strict, and breaking these rules will result in programming errors. Because of the standardization of the language, information created by one program can be easily understood by another program that has been taught to parse an XML document.

This site's navigation menu was created using XML and PHP. PHP is a programming language that can parse an XML file. The XML file containing the data pages, links and labels is parsed by PHP and transformed into HTML that your web browser understands. CSS files are then linked to determine how the HTML should be displayed.

Flash/Actionscript

Custom Dynamic Animation

Adobe Flash is a software package that uses vector graphics to create animation. Designers use animation as a means to increase visual aesthetics and draw a visitor's attention toward a particular part of the page. Custom logos and reactive navigation buttons are commonly seen throughout the Internet. Using a scripting language called Actionscript, designed especially for Flash, animations can be made to react to user intervention. Flash programs can be made to gather form data, dynamically import images and movie files, and modify itself to user preferences. The power of Flash allows for entire web sites to be made from a Flash presentation.

Due to the nature of a Flash file, search engine robots are unable to parse the file for keyword information. This may hurt your web sites chances of increasing search engine rankings. The files tend to be larger than typical text files associated with conventional HTML based web pages, which will certainly affect the download time of your site. This may cause users to become irritated and leave your web page. The use of Flash should be kept at a minimum level.