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 paragraphs 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
Most available browsers are free to download. You can do so by following the links above.
Web browsers are used to find and display web pages. Common examples of browsers include Microsoft Internet Explorer, Firefox, Netscape 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 directions 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), structural boundaries that group the page's data into related sections (HTML), and scripting languages that "teach" the browser how to react to the user's keystrokes (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.
The final code that the browser receives when visiting a web page can be generated using numerous methods. At the point the browser calls the web page, the computer, called a server, on which the web page file resides 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 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
Structure For The Web
HTML tables are used to organize information. The button below
will display the tables that compose this page.
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. HTML may use
tables, as seen to the right, to organize the layout of a web page. 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 drop down menus, confirmation pop-up boxes, and images that change as the user scrolls over them. 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.
CSS -- Cascading Style Sheets
Provider of Visual Appeal
Style sheets contain the information that determines how a web page should be displayed. 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.
Use the buttons above to change from displaying this page with and without a linked CSS document.
Javascript, J-Script, VB Script
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, images reacting to user mouse movement, or confirmation pop-up boxes that ask for the user's validation of data. 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. Most all browsers will interpret Javascript, the most common of the scripting languages.
Disparity between the interpretation of browsers to scripting languages requires web designers to analyze all data entered into web forms prior to storing. Unfortunately, designer cannot rely on the scripting language alone. Due to this redundancy in validation, many designers have modified their programming styles to not require any scripting languages.
FORM VALIDATION:
The most common use of a scripting language is to validate information entered into a web form prior to submission. The scripting language will scan each entry and alert
users if the information may not be what was expected.
The following example asks for your name. As you press keys, a scripting language
checks each key pressed. If a number is entered, it is immediately
erased. Once "submit" is pressed, an alert box will be displayed
showing the corrected information entered.
Enter Name:
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 gallery, or forum web pages you visit are done 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 difference 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
The
following example uses PHP to generate a SQL statement and queries
a MySQL database for the answer.
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 Portfolio page lists previous clients of TS Target Sites. The page was created using XML and PHP. PHP is a programming language that understands an XML file. The XML file containing the data of previous clients, web addresses, screen shots and descriptions 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
Macromedia 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.