Careers in IT, Main Banner

Web Browsing 101

HTML

HTML (short for Hypertext Markup Language) is the basic language in which all web pages are constructed. It is based on SGML (Standardized Generalized Markup Language) which is an international standard that describes text-formatting languages.iii HTML is not a programming language, but rather a markup language. Markup is derived from the publishing world. It describes what production people do to a manuscript to tell a publisher how the text, graphics, and other elements in a book should appear in printed form.iv HTML documents consist of content and tags. Tags are pairs of markers that are used to indicate how certain types of text (or other content such as graphics) should be displayed on your computer screen. Your browser interprets the tags and the content contained between the tags is displayed appropriately.

For example, the bold tag is <b>. The closing bold tag is </b>. Therefore a web page with the following line…

<b> Welcome To My Web Page </b>

…would be displayed by your browser as…

Welcome To My Web Page

Notice there is no programming being done here. Just adding tags to text. Of course you have to learn the tags. Check out www.pageresource.com for some useful HTML tutorials.

Want to see what the HTML code of this web page looks like? It's easy to do. Right click anywhere on the screen with your mouse. Assuming you are using you are using Internet Explorer or Netscape to browse, select the option "view source." This will pop open a new window that will display the source code for the web page you are browsing.

For example, here is the front page of Yahoo.com as normally seen by your IE browser:

Screenshot of Yahoo.com frontpage

And here is the same page viewed as raw HTML:

HTML code which comprises the Yahoo.com front page

Since the HTML code consists of all text, it can be written in an ordinary word processor or notepad. However, since it is beneficial to see what your web page looks like while you are developing it, many WYSIWYG tools have been developed to facilitate the construction of web pages. Popular web development packages are Dreamweaver, Microsoft FrontPage, Microsoft Visual Interdev and Adobe GoLive.

Screenshot of a site being developed and managed with Microsoft Frontpage

FrontPage 2000 is a quick, efficient tool for developing and managing small to medium size web sites.

Screenshot of a site being developed and managed with Dreamweaver

Possessing a more robust tool set, Dreamweaver 4.0 is a solid choice for development of large-scale web sites.

So what is your web browser actually doing to request the information about a web page? Let's follow through this diagram below:


Two charts of interactivity between a client browser, internet service provider, and a target website's server


In phase one, you type the address www.yahoo.com in your browser address window and hit the enter key. Your browser sends this request over your Internet connection (dial-up, cable, DSL, etc.) to your ISP's server. Your ISP's server then relays the request to Yahoo's web server. The Yahoo server then locates the information for the page of the Yahoo site you requested (in this case, the home page). In phase two, the Yahoo server sends the requested information back to your ISP's server, which in turn relays the information to your PC. Your browser interprets the information and displays the Yahoo home page. This typical Internet communication session is a client/server relationship. Your browser functions as a client (a requestor and processor of information). The Yahoo computer is the server, which serves up requested data to the client.

HTML standards are controlled by World Wide Web Consortium (W3C) which, among other things, sets standards for web languages. When HTML was first launched, there were no standards. As the web began to grow rapidly, standardization became essential so that communications and e-commerce could flow smoothly. Keep up with W3C news and standards at their web site – www.w3c.org.

Unfortunately, keeping HTML simple and standardized made it a rather limited language. As web users began to crave more exciting web content, Dynamic HTML (DHTML) was born.

DHTML

Oooohhh…Dynamic HTML…sounds exotic doesn't it? Well, it is useful, but not particularly exotic. Many people think that DHTML is another language. It isn't. DHTML is merely HTML extended by using Cascading Style Sheets and scripting languages (such as JavaScript and VBScript).

Cascading Style Sheets (CSS) - CSS was created to alleviate one of the problems identified early on with HTML. In the original HTML standard, content was linked to layout. With the development of CSS, layout can now be controlled by the style sheet while content continues to be controlled by the HTML code. This provides the developer with more flexibility. Two major advantages of CSS are the ability to precisely position content on a page and the ability to layer content. Layering means the ability to lay graphics and text over one another, giving developers the ability to produce new and interesting effects.v In addition, all aspects of font and text presentation (including font family or type, style, size and weight) can be controlled by the style sheet.vi

Scripting Languages - Scripting languages are programming languages that are embedded between <script> tags in HTML code. Unlike full-fledged programming languages, scripts do not have to be compiled to run. The scripts must be sent to an interpreter that translates the script code into an executable format.vii This takes less time than compiling, which is one of the main advantages to using scripts. The two most popular scripting languages for the web today are JavaScript and VBScript.

Scripts can be run in the browser on the client's computer or on the web server. Scripts that are run on a server are referred to as server-side scripts. Client-side scripts run in the browser. Interpretation of client-side scripts occurs when the browser downloads the web page.viii Scripts can be used to make your sites more interactive.

JavaScript - Named for the Java language, JavaScript is not Java. Java is full-featured programming language, not a scripting language. Java, which was derived from C and C++, can be used to create entire applications and control consumer electronic devices. Netscape renamed its LiveScript product JavaScript to capitalize on Java's growing popularity…purely a marketing move. Although JavaScript is a programming language, it is very different from Java. Examples of ways JavaScript can be used to enhance interactivity of your site are as follows:x

  • Provide user feedback as users navigate your site - buttons that highlight as you move the mouse pointer over them are an example

  • Check validity of information entered into forms by the user

  • Do calculations required by forms in JavaScript on the client PC, thereby avoiding server-side processing

  • Open new windows and display alert boxes

  • Put custom messages in the status bar of the browser window

Below is a portion of a JavaScript that produces a news ticker in Internet Explorer. Notice that the coding is quite a bit more complicated than raw HTML. This is because JavaScript is an actual programming language and requires a basic knowledge of looping, flow control, arrays, etc.

<HEAD>

<SCRIPT LANGUAGE="JavaScript">

<!-- Begin

// news ticker function

var newslist=new Array();

var cnt=0; // current news item

var curr = "";

var i=-1; // current letter being typed

newslist[0]=new Array("Check out this JavaScript!","")

newslist[1]=new Array("Use this JavaScript to post news items on your Web site","")

newslist[2]=new Array("Create a list of specials for the day","")

newslist[3]=new Array("Visit JavaScript Source","")

newslist[4]=new Array("The links can even be linked to other pages","")

function newsticker()

{

// next character of current item

if (i < newslist[cnt][0].length - 1)

{

i++;

temp1 = newslist[cnt][0];

temp1 = temp1.split('');

curr = curr+temp1[i];

temp2 = newslist[cnt][1];

mtxt.innerHTML = "<small><a href='"+temp2+"'><font color='#ff0000'>"+curr+"_</small></font></a>";

setTimeout('newsticker()',10)

return;

}

// new item

i = -1; curr = "";

if (cnt<newslist.length-1)

cnt++;

else

cnt=0;

setTimeout('newsticker()',3000)

}

// End -->

</script>

</HEAD>

VBScript - VBScript is a scaled-down version of the Microsoft Visual Basic programming language. It was specifically designed to be a fast, portable interpreter for use in web browsers and applications.xi VBScripting can be used to do many of the same things that you can accomplish with JavaScript. VBScripting works quite seamlessly in conjunction with Microsoft Active Server Pages (ASP), a server-side technology for running server-side scripts.

Regardless of which realm of web development you will be working in, you should have at least a passing familiarity with HTML, CSS and scripting. Familiarity with at least one of the major web development tools mentioned above is also highly recommended.

Now we will examine in more detail each of the four realms of web development normally encountered in medium and large size organizations.

 

© 2002 by Prentice-Hall, Inc. A Pearson Company
Distance Learning at Prentice Hall | Legal Notice