In the last installment (Far too long ago) we discussed web servers and how they work to deliver content to your web browser. As explained then, the information returned by a web server includes more than straight HTML. It also includes CSS, Javascript, XML, graphics, and sound, along with other types of content information. While the types of extra-HTML content that web browsers handle is constantly evolving, the focus today will be to explain the rudimentary ones that are most common to most websites.
Of course, you still may be asking, “Why should I care?” One good reason is that website technology is constantly evolving. To know the basic capabilities of websites today, it is necessary so that you, the business leader can formulate what your website of tomorrow will be capable of.
Those businesses who don’t grow usually find themselves lagging behind, and an effective and relevant website that is increasingly user-friendly and keeps your customers (and potential customers) coming back again and again, is essential in today’s market.
HTML itself merely presents text and colors onto a page. One of the most basic extensions to HTML is the ability is present pictures onto the browser screen. This is done by either using the HTML <IMG/> tag or by using a background image. These images are saved in separate image files that are housed on the web server. Most browsers accept images saved in GIF, JPG, and PNG formats, and these files have the appropriate file extension associated with them (ie - image.gif, image1.jpg, or image1.png). The HTML tag has a SRC (Source) or Background-Image attribute that tells your browser where on the server it will find the appropriate image file to display in that location on the web page. For example, <IMG SRC=”http://www.millcreekwebworks.com/images/dilbert.jpg” border=”0″ /> tells your browser where to find the Dilbert comic strip you see above.
HTML pages natively only display static content. Once the page is loaded, the page does nothing. It soon became apparent, that web pages should interact with the user and with events that happen on the page. Javascript is a programming language that reacts to these events and performs actions on the webpage after it is loaded. Events include such actions as the Page Load event, a mouse hovering over or off a certain part of the page, a keypress on a keyboard, a click or double click on an element of the page (such as a button), and many, many more. Javascript can either be embedded right in the HTML page, or (if the javascript is large) can be housed on the web server in a separate javascript file (eg - myjavascript.js). By using the <SCRIPT/> tag your web browser either loads the javascript embedded in the HTML page or from the separate javascript file into the client’s memory when the page loads. When an event occurs, it executes the code.
The original HTML specification only allowed the website developer very basic formatting functionality. Originally all of this formatting was handled by attributes within the HTML tags themselves, such as BGCOLOR, ALIGN, SIZE, etc. The attributes were very limited and also varied immensely inbetween browsers such as Internet Explorer and Netscape. Also, if you wanted to format text on the page, you had to use a variety of HTML tags like <FONT/> (Font type and size and color),<B/> (bold), <U/> (Underline), <I/> (Italics), etc. Even if you used the same type of formatting many times in a page, you needed to insert all the necessary tags in every spot where the formatting would occur within the page. Then along came Cascading Style Sheets (CSS). It is a formatting specification that is either embedded within the HTML tag’s STYLE attribute or setup in a series of classes that are embedded in the stylesheet. The stylesheet can either be embedded in the HTML page itself, or again can be housed in a separate file on the web server by using the <LINK/> tag. The styling format handles almost every conceivable formatting issue you might need to address. Each HTML tag has a CLASS attribute where you specify the name of a CSS class that defines all the formatting for every object that has the same class. So if you have 4 places on the page where you need an Arial font, 15pt, bold, italicized, with a padding of 5 pixels surrounding it, and with a a 1 pixel dashed black border surrounding the whole block; you can specify this all in one CSS class. Then in the 4 HTML tags where this formatting is needed you just specify the class name, instead of having to rewrite all that formatting code. Each HTML tag also has a STYLE attribute. You would only use this if this particular tag had unique formatting from everything else on the page. The great thing about using a separate CSS file is that you can share classes with every page on your website. So there are 4 places on one page where that lengthy formatting is needed. However, throughout the website you may need this formatting in 40 different places. If you use a separate CSS file with the <LINK/> tag you only need define this formatting once.
Sound and video are usually not handled directly by the browser, but rather by Plugins, or the use of other viewers installed on the user’s computer. Examples are Flash, Shockwave, Windows Media Player, and Quicktime. If you want to display these within your website you need to be sure that a very large majority of end users have this software installed on their computers, or at the very least offer a link to a place where they can download the installation files for these products. In my opinion (especially when it comes to videos) it is always better to offer many options to the user. Sound and video files are separate files that reside on the server. If you want to these viewers to appear on your webpage you need to make use of the HTML <OBJECT/> and/or <EMBED/> tags, or make use of a separate <FRAME/> or <IFRAME/> to display these items (I’d avoid the latter). These files can sometimes be quite large which can be quite a burden to your bandwidth, disk space, the quickness of your web server, and can sometimes frustrate users who don’t want to wait to download things. Thats why streaming audio and video were invented; so that these items can begin to display right away, and the server continues to download the rest of the file as the user is watching or listening. Streaming is a big subject, so we’ll leave it at that.
So, as we can see, when a web page is loaded there may be any number of separate files also loaded besides the HTML itself. Plain HTML pages are static, and are the same everytime it is viewed and by every user who views it. Truly dynamic sites usually use server-side programming in order to generate customized content that changes. This will be the subject of our next installment.
