7.9 Different Internet Browsers

Web browsers made the Internet 'happen', as none of the attractive features of web pages are possible without this software. A web browser displays information on the client computer by interpreting the hypertext markup language (HTML) sent to it by the web server. HTML pages can also accommodate graphics, sound, and multimedia files, links to other pages, and files that can be downloaded. With plugins added, browsers today are suites of programs that can handle practically everything from live weather reports through translation to video conferencing.

Basics

The browser interprets the HTML files to display the text and links correctly as a web page. Associated graphics, sound, and multimedia files are not embedded in web page, but retrieved by web page references to files saved on the server. Some programs (e.g. Flash) require a helper application or plugin to play. These are either downloaded from the site that supplies them (usually for free) and installed as any other piece of software, or they automatically self-install when downloaded from the supplying site.

Client Server Model

Browsers are one half of the client-server model. When the client computer requests a page — say. http://www.company.com/catalog.php — the web browser breaks the URL down into three parts. The first is the protocol that the web server should communicate with. The 'http' tells the web browser that the client computer wishes to communicate with a web server on port 80, which is the port reserved for web page communications. The second part of the URL is the server address 'company.com'. Since the Internet operates with IP addresses, not letters, the client browser has then to communicate with a domain name server (DNS) to find out the IP Address for the website. An IP address is a 32-bit numeric address written as four numbers separated by periods. Each of the four numbers can be from 0 to 255. Each computer on the Internet is assigned a unique IP address. In our case, 'company.com' may be something like 72.34.59.195, where each of the four units is indeed a number between 0 and 255. The third part of the URL is the resource requested, in this case a page written in php script with links to one or more databases: 'catalog.php'. The resource may equally be a simple html page (catalog.html), an acrobat document (catalog.pdf), or a multimedia file.

Several protocols operate on the Internet, and each communicates with a different port. HTTP communicates on port 80, whereas FTP (file transfer protocol) communicates on port 21. An email request, through an email client or as code embedded in a web page (mailto:sales@)xyzco.com) uses the TCP/IP protocol to communicate with the email server.

Browser Wars

There are over forty browsers in use today, though Internet Explorer, Firefox, Chrome, Safari, Opera and Netscape Navigator (in order of decreasing popularity) account for 99% of usage. Browsers display in a similar fashion, but not identically, which causes headaches for design-conscious site builders. That was particularly the case in the 'browser wars' of the late 1990s when Netscape Navigator, arguably the better browser, displayed pages rather differently than did Microsoft's Internet Explorer. Website builders had either to produce very conservative designs, or produce two sets of web pages, the index page including a few lines of code to identify the browser being used and automatically transferring the viewer to the appropriate set of pages. There were also display differences with other browsers, and indeed between different versions of the same browser. For webpage viewing on desktop and notebook computers these problems have partially receded, only to reappear with webpages designed to be read on mobile phones.

HTML Versions

The HTML markup language has also undergone development, until recently towards adding more features and specifying them more exactly. Webpages have 'headers', a line or two of code that identifies the HTML version being used, and specifies how the page is to be displayed. The page source you are reading, for example, has the header:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >

indicating that the page is in a strict XHTML format that conforms to standards laid down by the World Wide Web Consortium.

The XML language is extraordinary versatile, allowing users to largely define their own markup tags, but it is also very unforgiving. Simple HTML will generally display properly even if an extra space is left before a closing tag, for example, or if the closing tag is left off altogether, but XML (and some extent XHTML) may not: the page commonly shows an unwanted layout distortion or may sometimes not display at all.

Webpage designers are divided over the future. Some favor developing further the extra precision of XHTML and XML, while others are turning towards a new version of HTML, called HTML5, which is simpler, has some new tags and is more tolerant of errors.

CSS

Cascading Style Sheets have greatly extended web page layout possibilities.

CSS are small text files, either embedded in web pages, or more usually linked to webpages, that specify how text will appear and allow complex pages to be arranged without using tables.

In the CSS used to lay out this page, for example, #main { width:980px; margin:0 auto; text-align:left; margin-right:5px;} specifies that the 'main' page is to be 980 pixels wide with no margin, and that text will be aligned left with a right hand margin of 5 pixels.

The main titles (h1) are specified as h1{ font-size:1.667em; font-weight:normal; color:#4e4e4e; padding:15px 0 16px 0; word-spacing:-3px;}, where the font size is 1.667 em, normal, of dark gray color (hex value 4e4e4e), with padding as indicated in pixels and compressed (kerned) by 3 pixels.

Unfortunately, this control comes at a cost:

1. Various browsers interpret these instructions slightly different (and sometimes not at all). Pages have to be extensively tested.
2. Sophisticated layouts that please the designer do not work on all browsers, and various 'hacks' or workarounds have to be added to the layout.
3. Small errors can have large consequences: too large a graphic, for example, may not simply distort the page but 'break' it all together.
4. Popular software compiling HTML pages into ebooks only partially support layout with CSS.

Questions

1. What is a browser, and what does it do exactly?
2. How have browser wars returned with mobile web pages?
3. List the more important differences between HTML, XHTML and XML. Suggest Internet uses for each.
4. What are the advantages and disadvantages of Cascading Style Sheets? Find examples of CSS-controlled web pages on the Internet.

Sources and Further Reading

1. How Web Browsers Work. Ptgmedia. Non-technical, pictorial account, with explanation of browser error messages.
2. How Web Servers Work. HowStuffWorks. The complementary part of the client-server architecture.
3. Web Hosting Introduction. W3Schools. Simple tutorials..
4. Web Browser. Wikipedia. History and features of web browsers, with links to more more detailed articles.
5. Browsers List. WebDevelopersNotes. Over forty browsers listed.
6. Comparison of web browsers. Wikipedia. Comparison tables grouped by history, features, operating system, accessibility and web technology support.
7. World Wide Web Consortium. WW3. Very full site with mission statements, working papers advice and tools.
8. Is HTML5 the future of app development? by 'Softtalkmobile'. Develop Online. October 2011. Introductory article suggesting advantages.
9. Web Browser CSS Support. WebDevout. Tables showing 2011 CSS support by IE6, IE7, Firefox 2, Firefox 3, and Opera 9 browsers.