Category Archives: Web Programming Basics

Learning about XML Programming

XML is a free and open standard that allows for the sharing of structured data between information systems. XML stands for Extensible Markup Language; it is extensible in that the data elements that are used can be defined by the user.

XHTML, used to mark-up web pages, is actually one implementation of XML. In XHTML you have a variety of tags like <p> for paragraphs, <table> for tables and <a> for anchors (web links). Because XML is extensible you are able to create your own tags to suit whatever data you wish to encode. For instance, you might have a tag like <phone> to encode phone numbers or <temp> to encode temperatures.

The World Wide Web Consortium (W3C) supports the use of XML Programming. If you encode your data using XML syntax, rather than inventing your own syntax, you can take advantage of a number of technologies that have been developed for working with XML. These will be discussed as we run through the article.

<h2>XML Programming History</h2>

XML is the latest in a series of markup languages. Before it came SGML and before that GML (Standard Generalized Markup Language and Generalized Markup Language respectively). The purpose of these languages has been to encode data in such a way to be readable by both humans and machines.

XML was developed in the mid 1990s as a more refined version of SGML. The internet was already becoming widely available at this time and much of the design discussion behind XML was conducted via email and teleconferencing.

In November 1996, the first working draft of the XML specification was released. This later became known as XML 1.0 and it is now in its fourth revision as of August 2006. XML 1.1, which was first released in February 2004, is currently not as widely used as XML 1.0. XML 1.1 offers support for some extra Unicode scripts such as Mongolian, Cambodian and Burmese. Unless you need to use the features of XML 1.1 it is recommended sticking with 1.0.

<h2>XML Programming Benefits</h2>

It is important to understand the reasons why XML programming is useful. Firstly, it is designed to be human readable. It’s support of Unicode means that almost any written language can be incorporated. At the same time, it is also well suited to being read by a computer program; it’s strict syntax means that a computer can parse the data easily.

It is well suited to describing data structures used by computers, such as trees, lists and records. But, since it is extensible, it can be used to describe just about any form of data. One of the most common applications for XML is to encode documents; the Open Office word processor uses an XML based file format.

XML is platform-independent which, combined with its strict syntax, makes it a language that is resilient to changes in technology. Having a consistent syntax across all your data stores means that XML manipulation and display programs can be reused throughout the organization; this can mean that certain processes such as testing, document storage and software construction become more efficient and streamlined throughout the organization.

Although XML syntax is simple, the amount of storage space required is far in excess of what it would be if the data were stored in a binary format. Thus for some applications XML may not be the ideal storage format.

It should also be noted that, since XML tends to produce documents with a hierarchical structure, non-hierarchical data may be difficult or time consuming to properly represent in XML.

<h2>XML Programming – Defining your data structure</h2>

In practice, there are two ways to define a set of XML elements to fit the data you are working with. These are XML schema or DTD (Document Type Declaration).

DTD is the older of the two and harks back to the days of SGML. It is widely used but it lacks some of the extra features of schemas. Some people consider DTDs to be easier to read and write.

XML Schemas were developed by W3C to replace DTDs. Schemas allow for better control over data typing in the XML document. Schemas are actually themselves written in XML, so standard XML tools can be used to create and edit schemas.

<h2>XML Programming – Processing XML</h2>

Since XML files are stored in Unicode, any programming language or script can parse the Unicode and read the data. But, of course, a number of APIs for XML programming have been developed.

The SAX API (Simple API for XML), is an event-driven interface. An XML document is read sequentially by SAX and its elements are processed by an event handler designed by the user. SAX is efficient and easy to use, but it is not well suited for circumstances where data will be extracted from a document at random.

The DOM API (Document Object Model) is interface-oriented and permits navigation through a document on a node by node basis. If you have experience using JavaScript in web pages you will have used the DOM to process HTML/XHTML elements. DOM is also supported in Java and it is common to see XML processors written in Java utilizing the DOM API. Although DOM is powerful, it can be memory intensive as the entire XML document must be loaded into memory.

JavaScript Tutorial

Reading this quick JavaScript tutorial will give you the perfect overview of what JavaScript is and what it can do. JavaScript is an essential part of website design. It is far and away the most common means of implementation for client-side scripting. It allows for you to manipulate the elements of a HTML page and create animated and dynamic content.

Normally an HTML page is static. It does not change after it has loaded onto the user’s screen. In order for a user to receive new content, he must click a link and have the browser load up a new page. As you will learn from this JavaScript tutorial, JavaScript allows for the HTML elements of the page to be modified without a new page being loaded.

Any HTML element can be modified by JavaScript. A font can have its size, color or type-face altered. An image can be swapped out and replaced with another one. A sound effect can be made to play. Web designers use JavaScript to create drop-down menus, scrolling text, image-panes, pop-up windows, mouse-overs and more.

JavaScript is an interpreted language, which means that you cannot write a stand-alone program in JavaScript, it must be interpreted by another program. In 99% of cases, the JavaScript interpreter will be a web browser, with the JavaScript running within the browser. Hence the term ‘client-side scripting’.

Since JavaScript runs within the browser, it has access to all the elements of the HTML page being displayed. The HTML elements are made available through what is called the Document Object Model or DOM.

Under DOM, every HTML element can be used as a JavaScript object. The objects are traversable, so if you have an IMG element that is within a DIV element, the object for the DIV element is a parent to the object to the IMG element. Importantly, the top-level ‘document’ object is pre-initialised by the browser, and, since it is the root node to all other document objects, you can use the ‘document’ object to access any other HTML object.

Once you finish reading this JavaScript Tutorial and decide to look at some JavaScript code you will see that it is similar in appearance to C/C++ and Java. Much of the syntax is the same, curly braces denote blocks and semi-colons terminate each line. But JavaScript actually has no direct relationship to Java, despite the name. JavaScript was originally called LiveScript but its name was changed to JavaScript under a marketing deal between Netscape and Sun Microsystems.

You will find that JavaScript is much more forgiving than C/C++ and Java. Because the browser is already supplying the essential objects you will be manipulating, you will probably only need a couple of lines of code to achieve the results you want. One key feature of JavaScript is dynamic typing. All variables point to objects. Assign a string to a variable and it is bound to a string object. Assign a numeric value to the same variable and it is bound to a Number Object.

Thus far in this JavaScript Tutorial we have talked about how JavaScript is great for accessing HTML elements in a web-page, but what we have not yet mentioned is how to trigger JavaScript from a web-page. Say you write a JavaScript function that changes the background color of a web-page to green. You can make the function run when the page loads, but if you do that, then why not just make the background green in the HTML in the first place? To make JavaScript really useful you need to use event handlers.

Like with DOM, events are taken care of by the browser. They are very easy to work with. There are 22 different events you can use to trigger JavaScript but only a few important ones. One that will probably be useful to you is the event ‘onmousedown’, which is triggered whenever a mouse button is pressed. To make use of onmousedown you simply assign a function to it as if it were a HTML property, for example with the HTML code: <div onmousedown=”myfunction(event)”>. With that code, the function myfunction() would be called whenever a user presses a mouse button while the mouse-pointer is hovering over the DIV area. Note that you can assign event handlers to the BODY tag, so that they apply across the whole of the web page.

The only bad thing about JavaScript is that every browser implements it differently. This can mean that JavaScript which works on one browser, say Internet Explorer, may not work on another browser, say Firefox. The situation is improving with each new browser revision, but there are still problems. Unfortunately, no JavaScript tutorial can really help you with browser compatibility problems, experience is the best teacher here. Make sure you get a hold of a good reference document so that you know what parts of the DOM are implemented in each browser. Then you can write JavaScript code that will test which browser it is running on and allow for any compatibility problems.

I hope you enjoyed this introductory JavaScript Tutorial, good luck and happy JavaScripting.

Blog Definition

The most searched definition on the Internet in recent years, according to Merriam-Webster, might surprise you. On the other hand, you might think it makes sense because of its popularity.

The word: Blog.

In 2004, it registered more inquiries for a definition than any other word, so says Merriam-Webster. The official definition as provided by Merriam-Webster for blog is as follows: A Web site that contains an online personal journal with reflections, comments and often hyperlinks provided by the writer.

Blog is short for Weblog. The word originated in 1999. The first known blogs on the Internet were posted in 1994 as part of a webring that included members of an online journal community.

The blog’s evolution is also a reflection of how the Internet has changed in recent years. The Internet is becoming more dependent on user interaction, which is symbolic of the Web 2.0 design movement.

Web sites have increasingly added user interaction tools such as blogs, video and audio sharing and running dialogues.

Blogs have their good points and bad points with information sharing. First, the good points:

  • They provide the means to display your thoughts and experiences.
  • They allow others to respond to your beliefs.
  • They provide the opportunity to link to your Web site or others that can generate more interest in your site.
  • They are an excellent way for politicians to reach out to their constituency on a daily basis.
  • They are good for breaking news items, including shock-value material, to entice the reader.

The bad points:

  • Bloggers can be fake. Be careful who you read and respond to because fakers do exist in the blog world. People use different identities than their own believing that readers would be more apt to read their blog.
  • Blogs can get you fired if your post is critical of a business. You must be careful what you post. It’s for the whole wide world to see.
  • Blogs are sometimes construed as the truth. It should be noted that just because something was discussed in a blog that it should be considered factual.
  • Lawsuits can result from blogs, ranging from defamation to misrepresentation of facts.

Another positive for blogs is their money-making potential. Online advertisements in addition to Google’s automated ad server make it possible for bloggers to earn money. If your blog is extremely popular, you can rake in thousands of dollars in banner ads.

An interesting blog fact: More and more women are becoming involved with blogs. A recent survey of more than 4 million blogs found that 56 percent were created by women. What better way to let the world know about what you think of fashion, movies, TV shows, entertainers, etc.?

Blogs come in different forms and their popularity has reached new heights. Earlier this year, blog search engine Technorati tracked more than106 million blogs. The range of blogs includes political blogs, legal blogs, fashion blogs and travel blogs.

According to Technorati, the most popular blogging Web site is Engadget.com. The site keeps people informed about interesting gadgets on the market or in the works. An example is the blogging of what Best Buy will offer customers on Black Friday, the day after Thanksgiving when Christmas shopping kicks off.

You might wonder what did we do without blogs before they began to take shape last decade?

Well, we first listened to the radio and then heard opinions on the TV. But instead of talking back to an appliance that can’t understand you, you can now voice your response for the whole world to see. Call it a power trip, but at least it’s you that feels powerful.

Codes for HTML – Colours and Background

Once you have the basics down for your HTML Web site design, the next step is to add some creativity.

The best way to enhance the visual appeal of your Web site is to incorporate a color scheme, images and background. However, while taking a virtual paint brush to your canvas, be careful not to overdo it, especially if you are designing a site for your business.

Visitors tend to shy away from overbearing Web sites that are too busy.

On the other hand, you don’t want a Web site that bores the visitor. The following are some suggestions for how to incorporate color, images and a background to your Web site.

Color

The two most common uses of the HTML color-coding system are generic color names and the hexadecimal system.

Generic colors are preset HTML coded colors where the value is the name of each color. The 16 generic colors include black, gray, silver, white, yellow, lime, aqua, fuchsia, red, green, blue, purple, maroon, olive, navy and teal.

These colors can be coded this way:

<font color = “black”>This is the color black.</font>

<font color = “yellow”>Or perhaps you might want to try yellow?</font>

Web designers by trade use the hexadecimal system because it offers more of a variety of colors.  A hexadecimal is a six-digit representation of a color. The first two digits (RR) represent a red value, the next two are a green value (GG), and the last are the blue value (BB).

An example:

bgcolor = “#RRGGBB”

The code is instructing the program to run a red-green-blue maximum intensity in the background of the Web site. The hexadecimal system uses digits 0 through 9 and letters a through f.

Some examples: The code “#000000” produces a black color. The code “#00FF00” is green. Yellow is “#FF0000.”

Novice Web designers might be scared at first of the six-digit codes, but it is to their advantage to become knowledgeable with the codes. The hexadecimal system is more reliable and widely compatible among Web browsers. It is the standard for colors on the Internet.

Images

Images are defined with the <img> tag in HTML.

In order to display an image on your page, you need to use the src attribute. Src stands for “source.” The value of the src attribute is the URL of the image you want to display on your page.

An example:

<img src = “baseball.gif” width= “120” height = “120”>

The program is accessing a picture of a baseball that is saved as “baseball.gif” on your server. The image will be 120 pixels wide by 120 pixels high.

If you want to publish an image that exists on a different Web site, you can go about it this way:

<img src = “http://www.espn.go.com/images/baseball.gif”>

You will notice that the <img> tag does not require a closing tag because it contains only attributes.

One more feature is the “alt” attribute, which signals to the viewer what the image is in case their browser can not load images. The browser will display an alternate text where the picture is supposed to be. Moreover, when the viewer mouses over the image on the site, the “alt” text can serve as a caption.

An example:

<img src = “baseball.gif” alt = “Major-league baseball”>

Background

The default background color of Web site is white, which should be the appropriate background for a business Web site. Again, too much flash and color for something as serious as your business (depending what kind of business it is) can take away from your presentation.

At any rate, if you would like to add color or an image to your background, it is quite simple.

Example of a background color:

<body bgcolor =  “#C0C0C0”> … This provides a background color of gray to your site.

The value of the background image is the URL of the image you want to use. The image will repeat itself until it fills the entire browser window.

Example of a background image:

<body background = “tile.gif”> … The background will have repeated images of tiles.

Some factors to consider while using a background image include the increased time to load your site, how the image meshes with other images on your site, does the repeated use of the image work, and does the image get confused with the text making it difficult for the viewer to read your site?

What makes the development of a Web site so intriguing is the continual avenues you can take to improve it.  Just when you thought your site might be good enough, you can add images, certain colors and background effect to make it even better.

It is indeed like painting a picture, but it is easier to alter than getting out an eraser for a sketch or having to paint over a canvas. The computer does the work for you. You just have tell it what to do.

HTML Basics

If you know how to code HTML, you have the basis to design any Web site.

HTML, a text document that is used by Web browsers to present text, graphics and pictures, stands for the Hyper Text Markup Language. It is the standard language for the World Wide Web. HTML code files are plain text files. They can be created and edited on any operating system, such as Windows and Mac.

The text files include markup tags such as <b> to indicate the beginning of what you want bold-faced and </b> to indicate the completion of the bold area. Other examples of markup tags:

<p>Paragraph<p>.

<i>Italicize</i>.

<font>Font size and color designation</font>.

The HTML code can be composed within text editors such as NotePad in Windows or TextEdit in Mac. However, many designers used commercial software to edit the code, such as Dreamweaver by Macromedia.

The following items are basic functions of designing an HTML-coded Web site:

HTML head and body

The HTML document generally starts with a declaration of which version of HTML has been used, and is then followed by an <html> tag followed by <head> and at the end by </html>.

The <html> </html> tags are a container for the document. The <head> </head> tags encase the title, and information on style sheets and scripts. The <body></body> tags contain the markup with visible content. Here is a example of this basic layout:

<html>

<head>

<title>Title of your document</title>

<body>Document’s content

</body>

</html>

Title

The title is the main header of the Web site. It is showcased within the blue-striped window caption bar at the top of the screen. It should go at the start of your document. Here is an example:

<title>This is the title of the page</title>

You will notice that the text is surrounded by the start tag of <title> and the end tag of </title>. Try typing the code in a text editor and save the file as either “test.html” or “test.htm”. The computer reads each the same way.

However, if you use “test.html”, for example, you should tag every file with .html to keep it uniform.

Make sure you save the files in your C: drive. That way you can always view the development of your Web site within your system.

Headings and paragraphs

Headings are designated by the tags <h1>, <h2>, <h3>,<h4>,<h5>, and <h6>. <h1> is the largest of the headings. Headings are an excellent way of breaking up text in your Web site to make the design more presentable. Here’s an example of how to utilize the heading codes:

<h1>The heading that’s the largest</h1>

<h2>The next largest</h2>

Another way to break up text within your site is the <p> tag, or paragraph designation tag. Each paragraph should start with the <p> tag. The use of the </p> tag to end the paragraph is unnecessary, but many designers use it to keep their coding uniform.

Novices should look at source codes of existing sites to get a feel for how a site is coded. For example, if you are using Internet Explorer while surfing the World Wide Web, click on “Page” and scroll down to “View Source.” Click on that, and you will see a garble of code that was used to design that particular page.

Now that you have the basics down, now’s the time to have some real fun: Adding color, photos, links and lists to spruce up the page.