My Web Development Tips

HTML is a markup language used to create documents designed to be accessed across the World Wide Web using browser software such as Internet Explorer or Firefox. The version of HTML in current use is known as XHTML, a stricter, rationalised version of the original HTML specification. One key thing to note about HTML and XHTML pages is that they describe the content and structure of the page rather than the position and presentation of the elements on the page.

The first significant difference between an HTML and XHTML page is the document type definition. There are several ways in which this specification can be done in Adobe Dreamweaver. One of the most convenient is to go to the Modify menu and choose Page Properties. Here, in the category marked Title/Encoding, one of the options reads Document Type (DTD).

There are quite a few options available in the drop-down menu next to this setting, some relating to HTML version 4 and some to XHTML version 1. These DTD settings specify the rules that the mark-up language must follow so that the browsers can render the content correctly. For any new content you may be creating, the best specification to choose is XHTML 1.0 transitional since it uses the current XHTML specification while allowing backward compatibility with slightly older browsers.

When looking at an HTML page, the structural content is perhaps not immediately apparent. However Dreamweaver provides a number of useful ways of keeping tabs on the structure of your web page content. One of these is known as the Tag Selector. Wherever the cursor is positioned, the HTML code relating to that part of the page is displayed in the bottom left of the page on the Status Bar in an area called the Tag Selector.

When the browser reads the page, the tags surrounding text and other elements communicate to the browser the structural importance of each element. Thus, for example, the H1 tag tells the browser that a piece of text is a major heading, while the H2 tag signifies a sub-heading, and so on. When these tags are displayed in the Tag Selector, you can get an idea of the structure of the page and you can also click on any tag to select the element(s) it contains.

Although the tags tell the browser the structural importance of each element, the HTML page doesn’t contain any information that helps the browser decide how each element should be displayed. This is the role of CSS (Cascading Style Sheets). An XHTML page is pretty similar to an HTML page. However, its syntax is stricter. Let’s take a look at some examples…

XHTML is case sensitive: HTML is not. In XHTML, tags are always lowercase so the H1 tag has to be written h1. In HTML H1 or h1 can be used.

In XHTML, the closing tag is obligatory: in HTML it is permissible to have an opening tag without a closing tag. One such example is a horizontal rule (hr) which creates a dividing line between two sections on a webpage. This element is represented by a single tag, since it can never be used as a container. In XHTML, there is a special syntax for such elements: a single tag which is both an opening and closing tag (hr/). In HTML, the single opening tag is used with no closing tag (hr).

In summary, XHTML is the current version of HTML and this is the standard that you should use for any new projects. However, existing projects that you may inherit may well contain HTML rather the XHTML. Therefore, you should be aware of both. Remember also that HTML and XHTML describe only the structure of web page content: neither of them should contain information regarding the presentation and display of this content. The display and presentation of web content should be done using CSS.

Author is a developer and trainer with Macresource Computer Solutions, an independent computer training company offering Adobe Dreamweaver training courses at their central London training centre.

Extensible Stylesheet Language (XSL) is an XML-related technology which is used to transform XML data. XML file are used to set the ground-rules for a given body of data and to describe the data itself. XSL allows us to take that data and convert it into information which can be displayed in a web browser window or opened with a text editor. It can also be used to create an XML file which is a modified version of an original XML file.

When displaying XML elements in a browser window, the XSL elements which enable looping through an XML tree and decision-making really come into their own. One of the key methods used in XSL for looping through elements in an XML file is the the “For-each” element. This requires the “select” attribute to specify which element is to be used in the loop. The “For-each” element normally requires both an opening and a closing tag and any lines of markup placed between the opening and closing tags will be repeated each time the element specified in the “select” attribute is encountered in the XML file.

For example, let’s say we have an XML file containing a list of companies and the addresses of their websites. Let’s also say that the element which we will be targeting in the XSL “For-each” statement is called “company” and that, within each company element, we have a “name”, “telephone” and “website” element. Before beginning our “For-each” loop, we could place the opening tag of an HTML “ul” element (an unordered or bulleted list).

Inside the “For-each” loop, we could output an HTML “li” element and, between the opening and closing tag, output the contents of the “name” and “telephone” elements from the XML file. The data in the “website” could be used to convert the “name” into a clickable link.

As for the appearance of the data in the resulting HTML output, this would be controlled by a linked CSS file. CSS can be used to format the output in any way we like, so our bulleted list can take on pretty much any appearance we desire.

The author is a training consultant with Macresource Computer Training, an independent computer training company offering XML, XSLT, XPATH, XQuery and XSL-FO training courses at their central London training centre.

Extensible Mark-up Language (XML) has quickly established itself as a viable technology with a huge range of real-world applications. One of the key reasons for its importance and wide acceptance is that it offers a working solution to one of the key problems faced by software developers and computer users alike: the exchange of incompatible data. Each software environment produces its own unique type of binary file which only it can understand. Once data is exported in XML format, it becomes a known quantity, independent of the environment in which it was originated.

The PDF format is another example of a platform-independent format which has gained worldwide acceptance. Once a document is saved in PDF format, its format is set in stone, it can viewed and printed with its layout and formatting intact, without the need for the software which created the original document. However, where the PDF format concerns itself mainly with the presentation of information, XML is used to describe and encapsulate the information itself.

Though XML itself is still fairly new, the idea behind is over thirty years old. In the 1970s, Standard Generalized Markup Language (SGML) was developed in an attempt to create an application-independent method of describing and storing data. SGML is a text-based language which relies on the concept of adding mark-up to data which describes the data itself. An SGML document contains both the original data and a lexicon of rules defining the structure of that data. SGML is a fairly complex language and, unlike XML, has never gained wide popularity. In the early 1990s, SGML was used to develop and specify the rules of HyperText Markup Language (HTML) and in the late 1990s, SGML was again called upon, this time as the basis for the creation of XML. In a lot of ways XML is basically a restricted form of SGML.

XML has already proved itself an excellent medium for storing, describing and transporting data, particularly over the web. It offers flexibility, clarity and simplicity. An XML document looks similar to an HTML document and consists of the same human-readable tags. However, the tags used to markup an HTML document are pre-defined: only a limited set of tags can legitimately be used. XML allows you to create a markup language and define the tags which are legitimate for your data. It does this using a schema document, which can itself be an XML document. The schema document specifies the vocabulary and grammar which may be used within the XML document which contains your data.

The fact that, when creating and generating XML documents, you can invent all the rules, means that you never have to force your data into a container which was not designed to hold it. You design tags which reflect the nature of your data; you create a schema document which defines the hierarchical structure of your information; and you specify the type of information each element within your document is permitted to contain. In short, if you end up with an XML documents which is unsuitable for holding your information, you have only yourself to blame!

Author’s company runs public courses in web design 3.5 in London and throughout the UK.

Cascading Style Sheets (CSS) has become as pivotal a technology in the building of websites as HTML. Originally, CSS was mainly used for defining the appearance of text (font, size, colour, etc.). However, with the improvement of browser compatibility with the CSS specification, CSS is now the recommended method of controlling all aspects of the presentation of HTML documents within the browser window.

Adobe Dreamweaver is a very widely used platform for developing web sites and web content and, although used by experienced developers, is also widely used by non-specialists for whom Dreamweaver’s user-friendly visual interface takes the pain out of web site creation. The way in which Dreamweaver implements CSS is very important for the casual user, since it will influence the kind of sites they end up producing.

Dreamweaver CS3 is the first version of the program which assumes that the user will want to use CSS to control the layout of their web pages. To assist inexperienced and would-be web developers, each time a new page is created, the program allows the user to choose allocate a preset CSS layout to the page. There are about 30 such layouts and they come in single, double and three column varieties.

CSS page layout is based in the DIV element, an HTML container which can be used to hold an arbitrary amount of web content. The CSS rules control the appearance and positioning of DIVs on the page. Dreamweaver CS3’s preset CSS layouts create a series of DIVs containing placeholder text and basic formatting. The placeholder text, as well as the code underlying the page, both contain useful explanations of how the page has been constructed and a few tips on how to personalise them.

CSS works most efficiently when you can place all of your CSS code in one external file and link that file to each of your HTML pages. Dreamweaver CS3 still does not make it easy for inexperienced users to create CSS-based pages in this way. If the user creates ten web pages based on Dreamweaver’s preset CSS designs, each will have its own code embedded within the page itself. There is, however, a great feature for moving embedded code across to an external CSS file. You just select a series of CSS definitions, right-click and choose “Move CSS Rules” which is available in the “CSS Styles” section of the context menu.

Although this ability to move CSS around is really great, it’s not something that beginners will necessarily think of doing. It points to the fact that Dreamweaver could still do with a few enhancements to its implementation of CSS.

Another area where Dreamweaver still handles CSS inefficiently is the way in which it generates CSS class styles with names like “style1″, “style2″, etc. whenever the user applies attributes like font, size or colour to highlighted text. This must be really confusing for beginners and can easily be solved by simply removing these “raw” attributes and replacing them with CSS-friendly options.

The writer of this article is a developer and trainer with TrainingCompany.Com, a UK IT training company offering Adobe Dreamweaver training courses in London and throughout the UK.