FireFox Web Browser

Survival Web Construction: "Web Wizard Workshop"

OK, we have a simple objective here: learning survival level http coding for primitive web pages and the ftp tools necessary to get these transferred and working on a host server. We can always achieve greater proficiency with time and practice but our first target is survival.

First, you should download and install the latest version of the Mozilla Firefox Browser. When this is installed also beef it up with the Add-On package. This should include FireBug, WebDeveloper, and FireFTP. With these tools we can get acquainted with some websites and examine how they are constructed.

With these tools I would recommend that you start surfing around and when you find a website that you like enter "command + U" and look at the code that is responsible for the site. To learn web construction find sites you like and see how they are built! This is called "being creative by example." In most other browsers you can use the "view" tab with a pull down of "source" to see the code. If you are at all familiar you will see the familiar declaration and meta tags with various declarations that allow the browser to translate this written code into a visual webpage. Try to find the common elements and see how they determine the page structure.

A very important point to realize: every browser has a built in set of rules specifying how to interpret your code. Another way of saying that is: the same code will appear differently in every browser (and in the case of Internet Explorer 6 dramatically different) Here is an example from Adobe's Browser Lab that displays screen shots of different browsers interpreting the same basic code:


Adobe Browser Lab

Notice that the text in the Safari Browser (left) is Times Roman but in the Firefox Browser (right) it is rendered in Sans Serif. These are "styles" that are built right into the browser (and these two browsers are both "web ket" and supposedly similar). If no specific code or instruction in your code specifies otherwise the browser default will display. The implication for web designers is that when you write a webpage you should test it in various browsers to see what the result will look like to your viewers and control as many variables as necessary to communicate your message and vision. Do not assume what you see in your Firefox will be what they view with Microsoft Explorer! The more complicated and interactive the page, the more critical it is to test extensively. Colors on the web are especially tricky. You should use web safe color coding. Here is a hex list from Colors can also be specified in CSS by common names.

Incidentally, in good (web standards compliant) web page construction the html code should specify only the structure of a web page and the CSS (cascading style sheet) should apply the decoration or styling. This would mean no font or color tags in the html code ideally. (In more complicated designs the active element is added by java script commands and this should be separate also.) Your CSS and javascript can either be embedded in the base web page or in another file that is referenced (linked or imported) If you are hand writing your html you can test it quickly here. If you work with the "web developer" Add-On in the next page you can modify the styling or the html in a page in an active manner and view the result in real time. We will do that on the next page!

Web Primer | HTML Tags | HTML Tutorial | CSS Tutorial | JavaScript Tutorial | CSS Color Names | HTML-Kit | IRT Site | HOME! | XML Tutorial | HTML Articles | Google Web Optimizing | Google Page Speed