Silverlight Tutorial

Supporting Web Technologies

The Beginnings of the Web

Over the past decade, our society, culture, and much of our economy has become dependent upon the World Wide Web. The Web is now so integrated into our lives that most people have a difficult time imagining life prior to and without the Web. So where did this network that provides us so much value come from?

The Internet

The Web resides on a global network known as the Internet. The Internet was initially created by the United States Department of Defense as a global network that could endure a nuclear attach or global disaster and continue to function. The Internet was created based on the concept of a network comprised of nodes of computers that would continue to function and communicate with each other even if some of the nodes on the network were not available. Many network topologies preceded the Internet as it exists today and many protocols are used to communicate over the Internet.

Prior to the advent of the Web, technophiles spent countless late night hours perusing the contents of the Internet by using numerous protocols and bulletin board systems (BBS).

Timothy Berners-Lee

The real father of the Web is named Timothy Berners-Lee (TBL). In 1990, TBL was working at the European Organization for Nuclear Research (CERN, the acronym in French) and was given the approval to create a global hyperlink network. The result of TBL's efforts was the creation of the Hypertext Markup Language (HTML) and the first Web browser. The figure below is a screen shot of the first Web browser created by TBL.

Timothy Berners-Lee is currently a professor at the Massachusetts Institute of Technology (MIT).

World Wide Web Consortium

In 1994, the technologies that TBL created had become extremely popular and were being extended and utilized by many vendors. Additionally, O'Reilly had already hosted multiple Internet and Web conferences and the predecessor to Netscape Navigator was in production. It was clear to TBL and his associates that in order to develop the Web into the global communication network that they envisioned, standards had to be implemented.

In 1994, Timothy Berners-Lee and his associates created the World Wide Web Consortium (W3C) to serve as the governing board for Web technologies and standards. The W3C is located on the Web at http://www.w3.org/.

Most technology companies that have a vested interest in the Web are a member of the W3C and are able to vote on new Web standards and how the standards will be used. The figure below shows the W3C home page:

Hypertext Markup Language (HTML)

As stated above, HTML was created by TBL. HTML was initially created as a means of displaying data on the Web in a structured manner. HTML documents eventually became known as Web pages. A Web page is only useful, however, when interpreted and displayed by using an application designed for that purpose. Applications designed to interpret and display Web pages are known as Web browsers.

HTML was conceived as a convergence of existing technologies. Hypertext was invented in the 1940s as a means of jumping between microfiche documents and content markup has existed as long as content has been edited for print. HTML provides a standard method for marking up digital content for display on the Web and accommodates the ability to jump between documents by use of hyperlinks.

A Simple HTML Document

HTML consists of a set of keywords, similar to a programming language, that are used to signify structure to be applied to content. The keywords that make up HTML are inserted into an HTML document and delineated by opening and closing angle brackets (<>). An HTML keyword that is delineated by using angle brackets is called an HTML tag.

Most HTML tags are used to mark the point where the structure or formatting signified by the tag should begin to be applied. As such, the HTML tags that are used in this manner (referred to as opening tags) have an accompanying closing HTML tag that is used to mark the point where the structure or formatting signified by the tag should stop being applied. HTML closing tags look just like their accompanying opening tag but include a slash that identifies them as a closing tag (</>).

When an HTML opening tag and accompanying closing tag appear in an HTML document, they are collectively referred (along with the contained content) to as an HTML element. The example markup below illustrates text that should be displayed in bold by enclosing the text in an HTML <b> element.

<b>This is my first Web page!</b>

Most elements include additional attributes that are used to further describe the behavior or configuration of the element. For example, the <div> element shown below includes an attribute that is used to assign an id to the element.

<div id="myTeam">Arizona Cardinals</b>

There are a few HTML elements that have meaning simply by appearing in a document but contain no content. These elements can be written in a shorthand form to save time and are referred to as self-closing tags. The IMG tag, as shown in the markup below, is an example of a self-closing tag. When an IMG tab appears in an HTML document, it indicates a point where an external image should be inserted into the document.

<img alt="Yep, it's me :)" src="MyBiographyPhoto.jpg" />

The example below illustrates a very simple HTML document that complies with the current XHTML 1.1 and W3C accessibility standards (standards are discussed in the next section).

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

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>My First HTML Page</title>
</head>
<body>
<div>Welcome to my Web site!</div>
</body>
</html>

The output of the example above is shown in the figure below:

The example above consists of an opening DOCTYPE tag, the HTML element, the HEAD and BODY elements, and child elements. The DOCTYPE tag is required by all HTML documents and is described in more detail below. Every HTML document consists of a single top-level (root) element called the HTML element. The only elements that can be nested directly inside the HTML element are the HEAD and BODY elements, in that order.

The HEAD element is used to identify and include settings and information that pertains to the page itself. The BODY element contains the content displayed on the page. Microsoft Visual Studio 2008 includes a robust HTML editor as shown in the figure below. The HEAD and BODY elements may contain additional elements describing the contents of the page. These additional elements are referred to as child elements.

HTML Versions and Validation

HTML is a grammar of the Standard Generalized Markup Language (SGML) which, in turn, is a standardized version of Generalized Markup Language (GML). All SGML documents, and therefore HTML documents, must include a tag at the beginning of the document that identifies the version of the language that the document is attempting to comply with. This tag is called the DOCTYPE tag. Applications that read HTML documents (Web browsers) are supposed to read the DOCTYPE tag and validate the contents of the HTML document for the version of HTML specified in the DOCTYPE tag. If an HTML document fully complies with the version of the HTML standard that is identified in the DOCTYPE tag, the HTML document is said to be "well-formed". If, in addition, the Web browser that is reading the HTML document is also able to validate that the HTML document does comply with the HTML standard identified, the HTML document is also said to be "valid".

Due to the multiple versions of HTML that are in use, the vast number of people and applications creating HTML documents, and the complexity involved in learning how to correctly create valid and well-formed HTML documents, Web browsers were created to read and render HTML documents without determining if the HTML document is valid or well-formed. The design of Web browsers caused them to be very forgiving of sloppy and incorrectly created HTML documents and, as a result, errors and invalid documents began to proliferate the Web.

In the late 1990s, the W3C realized that the issue of incorrectly created HTML documents would quickly become insurmountable if they did not take action to correct it. The W3C had recently released a new standardized data exchange format known as the Extensible Markup Language (XML - discussed in a more detail below). XML was also derived from SGML but the W3C mandated that any applications reading an XML document must comply with rules set forth by the W3C. The W3C decided that it should also redesign HTML and release a new version of HTML that would adhere to the same strict rules implemented in XML. The new version of HTML that was released was called Extensible Hypertext Markup Language (XHTML). XHTML is currently in version 1.1 at the time of this writing and is not only an attempt to clean up and standardize the document residing on the Web but is also extensible (as its name implies) so that it can be extended by developers.

Accessibility

In addition to bringing about standards compliance to the creation of HTML documents, the W3C also created standards that HTML documents and Web content must comply with if the creators of the content wish it to be recognized as accessible to users with disabilities. The primary example of users with disabilities are blind users who utilize page readers to surf the Web. In order to ensure that page readers can successfully interpret Web content, Web content must comply with the standards set forth by the W3C. The W3C effort to make Web content accessible is known as the Web Accessibility Initiative (WAI). The figure below shows the WAI home page.

When working with HTML files, Visual Studio 2008 provides the Check Accessibility feature on the Tools menu to validate a Web document to determine if it complies with WAI accessibility standards. The Check Accessibility feature is also available as a toolbar button on the HTML Source Editing toolbar. When the Check Accessibility feature is selected, Visual Studio 2008 first prompts you to determine the level of accessibility to validate for. The figure below shows the dialog displayed when the Check Accessibility feature is selected.

Cascading Style Sheets (CSS)

Several versions of the HTML standard have been submitted by the W3C and used in the industry. The most popular version of HTML is version 4.01. HTML version 4.01 supports many features including frames, Cascading Style Sheets (CSS), and Dynamic HTML (DHTML). HTML version 4.01 was released in the late 1990s when the popularity of the Web was growing at an astronomical rate. During the same period of time, Microsoft Internet Explorer, Netscape Navigator, and other leading Web browsers were in an all out race to keep up with growing demand for more elaborate display of Web content. This era is commonly referred to as the "browser wars".

In an attempt to stay ahead of the pack, each browser began to offer enhanced functionality when displaying HTML through special elements, tags, and attributes and, in many cases, the enhanced elements, tags, and attributes were only supported by the browser that introduced them. Bear in mind that HTML was designed by the W3C to provide content layout instructions and that it is up to the developers of each browser to correctly interpret those instructions and display the content using their browser. With that said, over time, each browser began to interpret HTML in a slightly different manner so that an HTML page may display differently in one browser as compared to another browser. Couple this behavior with each browser introducing elements, tags, and attributes to enhance the capabilities of HTML that were supported by only a particular browser (or browsers) and the quagmire that the Web was destined to become is evident. It was, and in some cases may still be, extremely difficult for a Web developer to create HTML content that displays consistently across all browsers.

As a work around to this situation, Web developers were forced to create and maintain multiple versions of HTML content; a separate version designed to display in each browser. As you can imagine, this is very time consuming and difficult to maintain. Some of the newer Web development technologies, namely ASP .NET, have simplified this process somewhat by automatically detecting a user's browser and rendering HTML designed for that browser when sending content to the user.

In the late 1990s, in an attempt to correct and gain control of the inconsistent display of Web content, the W3C introduced Cascading Style Sheets (CSS), a new technology designed to control the display characteristics of Web content. At the same time, the W3C began to deprecate any HTML elements, tags, or attributes that were related to the display characteristics of Web content. HTML was designed to provide Web content layout instructions, such as where to insert a new paragraph and if text should be displayed as a heading, and the W3C intended to keep it that way. Deprecated items, such as those that specified font names, font size, and text alignment, were replaced with CSS functionality.

CSS provides a much greater level of control over the display characteristics of Web content than was previously available and CSS is consistent across all browsers. It remains to be the duty of the developer of each Web browser to correctly interpret and display CSS display instructions but there are very few inconsistencies between browsers.

Cascading Behavior

Cascading Style Sheets are named such because they provide Web content style instructions and have an inherent cascading behavior based on where they are defined. CSS instructions can be defined in three places:

• In an external and separate stylesheet document. CSS defined in this manner is referred to as an external stylesheet, is a simple text-based document, and typically bears a .css file extension. This is the most efficient and reusable manner of defining CSS as it can be applied to all HTML documents in an entire Web site.
• In the <head></head> element of an HTML document within a <style></style> element. CSS defined in this manner is referred to as a global stylesheet and is only applicable to elements, tags, and attributes within the page where it is defined.
• In a specific element. When the W3C introduced CSS, they also ensured that all HTML elements include an id attribute, a class attribute, and a style attribute. The id and class attributes are used to reference external or global stylesheet instructions whereas the style attribute is used to declare stylesheet instructions directly at the element level. CSS defined in this manner is referred to as local or inline style and is only applicable to the element that it is defined within.

When a browser reads Web content that references CSS instructions, it will generally look first for any external stylesheet references and apply those instructions. Next, it will look for any globally defined stylesheet instructions at the top of an HTML document and apply those instructions. If there is a conflict between externally defined stylesheet instructions and globally defined stylesheet instructions, those instructions defined globally take precedence. Finally, it will look for any stylesheet instructions defined at the element level as each element is rendered and apply those instructions. If there is a conflict between externally or globally defined stylesheet instructions and locally defined stylesheet instructions, those instructions defined locally take precedence. In this manner, CSS instructions cascade from the external level to the local level and, as a general rule, instructions defined closer to an element take precedence over instructions defined farther from an element.

A CSS Example

A CSS document is a text document that consists of any number of selectors that associate a style rule with an element of a particular type, an element with a particular id value, or an element that belongs to a particular class. The example style rule below illustrates a CSS selector identifying the <body> element of any HTML document that references the style rule. In this example, the background color of the <body> element is set to a light green color.

body{background-color: #CCFF99;}

If a selector should be applied to an element that belongs to a particular class, the class name is appended to the element selector with a period delimiting the element selector and the class name. Furthermore, occasionally a CSS style rule might be created that should apply to any type of element that belongs to a particular class. In this scenario, the element selector is replaced with an asterisk to serve as a wild card character (*). In the example style rule below, the style rule should be applied to any <div> element in the class of "myDiv".

div.myDiv{font-weight: bold;}

If a style rule should be applied to an element with a particular id, the period that delimits the element selector from the class name is replaced with a hash symbol (#) and the id is appended to the element selector name instead of a class name. In the example style rule below, the style rule should be applied to a <div> element with an id of "myDiv". The difference here is that class definitions typically identify a category of unlimited number of elements whereas an id definition is intended to be a unique id.

div#myDiv{font-weight: bold;

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

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>My First HTML Page</title>
    <link href="External.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        div.myDiv
        {
            font-weight: bold;
        }
    </style>
</head>
<body>
<div class="myDiv" style="font-family: Sans-Serif;">Welcome to my Web site!</div>
</body>
</html>

The output of the example above is shown in the figure below.

The example above illustrates an XHTML page that references an external stylesheet, defines a global stylesheet, and includes a <div> element that includes an inline style definition.

Extensible Markup Language (XML)

The Extensible Markup Language (XML) is a standardized method of storing data that is governed by the W3C. XML was introduced in the late 1990s and, since then, it has become the defacto standard in simple data storage, particularly when data needs to be transported over the Web or shared between dissimilar applications. XML files are text files that consist of an XML declaration followed by a user-defined XML grammar. The example XML below illustrates the XML declaration and a simple representation of fantasy football picks.

<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<fantasyPick>
    <pick weekNumber="1" date="2007-11-29">
        <player name="Kurt Warner" position="QB" />
        <player name="Anquan Boldin" position="RB" />
    </pick>
</fantasyPick>section.

In the XML sample above, the first line of markup is the industry standard XML declaration. The XML declaration is a type of processor instruction (PI). In XML, processor instructions are listed at the top of the document separate from the XML markup and are contained in a single, special tag that is delimited by question marks. The XML declaration is required to be in all XML documents in order for the document to be considered well-formed. Additionally, XML is case-sensitive and the syntax in the XML declaration is all lowercase. The XML declaration opens with a lowercase "xml" string and must have no spaces preceding the string.

All attribute values in an XML document must be quoted. In the XML declaration, the version attribute should have a value of "1.0" assigned to it signifying the version of XML (currently, there is only 1 version of XML in production). The XML declaration includes two optional attributes, encoding and standalone. The encoding attribute should have a valid character encoding standard assigned to it with utf-8 being the default. The standalone attribute should have a value of "yes" or "no" assigned to it and indicates whether or not the XML document should comply with an external DTD.

The XML declaration is typically the only processing instruction included in an XML document. All XML documents can contain only a single document level markup element. In the example above, the document element is the <fantasyPick> element. The <fantasyPick> element contains a single child element, <pick>. The <pick> element contains two attributes, weekNumber and date. The <pick> element contains a sequence of <player> elements which each contain position and name attributes.

The key concept to convey here is that beyond the XML declaration, the XML markup must comply with a few design rules but is completely user-defined.

Visual Studio 2008 includes a capable XML designer although there are more robust XML designers available on the market. The figure below shows the Visual Studio 2008 XML designer.

An example of a much more elaborate and robust XML designer is XML Spy from Altova. The figure below shows the sample XML document displayed in XML Spy 2008 Enterprise edition.

Extended XML Technologies

With data stored in XML files, developers needed methods of accessing and managing that data in many of the same ways that data is accessed and managed in relational database management systems. To provide this functionality (and much, much more), extended XML technologies were developed. The primary extended XML technologies are XML Schemas, Extensible Stylesheet Language for Transformation (XSLT), and XPath. The .NET Framework provides classes for working with these extended XML technologies through the System.Xml namespace.

XML has proliferated the industry and is now utilized in most software in one form or another. Coverage of the extended XML technologies is beyond the scope of this courseware.

JavaScript (ECMAScript)

JavaScript is the primary scripting language used in Web applications. JavaScript was introduced with Netscape Navigator 2.0 in the early days of the Web and was named after and resembles Sun Microsystem's Java programming language. However, JavaScript is not related to the Java programming language. There have been many other scripting languages used on the Web including VBScript, a scaled-down version of Visual Basic for Applications. However, JavaScript grew in popularity and is the only scripting language that most Web browsers support.

JavaScript was standardized by the European Computer Manufacturer's Association (ECMA International) in 1997 and has now evolved to include many of the features offered by more advanced programming languages. The ECMA named the standardized version ECMAScript. JavaScript has also been adapted to serve as the scripting language for many non-Web applications such as ActionScript used in Adobe Flash.

Executing JavaScript

JavaScript can be incorporated into HTML documents in four ways:

• In an external and separate script document. JavaScript defined in this manner is referred to as an external script file, is a simple text-based document, and typically bears a .js file extension. This is the most efficient and reusable manner of defining JavaScript as it can be applied to many HTML documents.
• In the <head></head> element of an HTML document within a <script></script> element. JavaScript defined in this manner is referred to as a global script and is only applicable to elements, tags, and attributes within the page where it is defined. Web browsers read pages into memory from the top of the document to the bottom. Global scripts are read into memory when encountered by the browser but are not executed until they are called from an event contained in the page.
• In the <body></body> element of an HTML document within a <script></script> element. Javascript defined in this manner is referred to as an inline script and is only applicable to elements, tags, and attributes within the page where it is defined. Inline scripts are executed when they are encountered by the browser.
• In a specific element. Most HTML elements include elements that can be fired by user interaction. The most common event is a mouse click event. An element event can be wired to an external or global script or directly execute JavaScript at the element level.

JavaScript is interpreted each time it is read by a Web browser instead of being compiled. The W3C created a standardized Document Object Model (DOM) so that Web content and documents could be accessed through JavaScript and code in a consistent and standardized manner. Web browsers implement the W3C DOM fairly consistently and most browsers extend the DOM to accommodate Web content and documents management enhancements.

The W3C also released a separate DOM standard designed for navigating and managing XML documents.

JavaScript Example

The JavaScript example utilizes an external script called Greeting.js that determines the current time of day and displays a greeting to the user based on the current time as shown below.

// Declare a variable to represent
// today.
var varTime = new Date();
var varGreeting;

// Determine the greeting
// to display.
if(varTime.getHours() < 12) {
  varGreeting = "Good morning";
} else {
  if(varTime.getHours() < 18) {
    varGreeting = "Good afternoon";
  } else {
    varGreeting = "Good evening";
  }
}
document.write(varGreeting + " and welcome to my Web site!");

The JavaScript example also incorporates a global script. The global script contains a function called showPicks that is fired by the click event of the button on the page. The JavaScript example also includes an inline script that displays the current date and time in the footer of the page as shown in the code below.

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

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>My First HTML Page</title>
    <link href="External.css" rel="stylesheet" type="text/css" />
    <script type="text/ecmascript">
    <!--

      function showPicks() {

          // Create an instance of the MSXML DOM object.
          var xmlDOM = new ActiveXObject("Msxml2.DOMDocument.4.0");

          // Configure the XML DOM.
          xmlDOM.async = false;

          // Load the XML document.
          xmlDOM.load("FantasyPick.xml");

          // We should have error handling
          // and more elaborate code in here
          // but this works for an example.

          // Reference the first pick element.
          var pickElementAttributes = xmlDOM.documentElement.firstChild.attributes;
          var pickElementChildren = xmlDOM.documentElement.firstChild.childNodes;

          // Display my picks.
          myPicksDiv.innerHTML =
            "<hr />" +
            "My fantasy picks for week number " +
            pickElementAttributes(0).value +
            " are: <br /><ul>";

            // Iterate through the picks.
            for (var i=0; i<pickElementChildren.length; i++) {
              myPicksDiv.innerHTML =
                myPicksDiv.innerHTML +
                "<li>" +
                pickElementChildren(i).attributes(0).value +
                " playing " +
                pickElementChildren(i).attributes(1).value +
                "</li>";
            }

            // Close the list.
            myPicksDiv.innerHTML =
              myPicksDiv.innerHTML + "</ul>";
      }
    -->
    </script>
    <style type="text/css">
        div.myDiv
        {
            font-weight: bold;
            font-size: 14px;
        }
    </style>
</head>
<body>
<div class="myDiv" style="font-family: Sans-Serif;">
  <script src="Greeting.js" type="text/javascript"></script>
</div>
<hr />
<input type="button" value="Display My Fantasy Picks" onclick="showPicks();" />
<div id="myPicksDiv"></div>
<hr />
<div style="text-align: center;">
<script type="text/ecmascript">
<!--
  // Display the current date and time.
  document.write("copyright &copy; 2007 | the current date and time is " + new Date());
//-->
</script>
</div>
</body>
</html>

The example above illustrates most of the concepts discussed in this module. The example utilizes all four methods of integrating JavaScript and accesses both the HTML DOM and the XML DOM. The figure below shows the JavaScript example prior to the button being clicked. In the figure below, the external function and the inline function have already been executed.

The figure below shows the JavaScript example after the button has been clicked.

Lab: Online Training Tool Version 1.0

In this exercise, you will create a simulated online training utility by using:

• Visual Studio 2008
• XHTML
• CSS
• XML
• JavaScript

We'll create the simulated training tool using these technologies and gradually improve the example through the exercises as the course progresses. The training utility will consist of a single HTML page that displays a single course with multiple topics stored in an XML file.

All material in this Silverlight Tutorial is copyright © 2008 Webucator. The purpose of this website is to help you learn Silverlight on your own and use of the website implies your agreement to our Silverlight Tutorial Terms of Service.