HTML.co.uk

To understand graceful degradation, it is very important to understand first Tag Degradation. Tag degradation is a phenomenon which describes the incompatibilities which could be either deliberate or accidental, in the web documents. All the web browsers follow one simple rule with respect to HTML tags which states that, “If you do not understand a tag, just ignore it.” Whenever a web browser encounters any tag and it fails to understand and display it, the result is degradation. This is where the concept of graceful degradation comes in. Graceful degradation is a simple but a powerful technique which ensures that a web page should be coded in such a way that just in case if the browser is not able to cope up with any of its effect or feature the page should yet be displayed in a simplified form.

When the degradation takes place, the content of your page will be either lost to the web browser or the content of your page will still be completely accessible, which will depend solely on whether the degradation is graceful or not. As we all know that HTML is continuously changing and different browser have different characteristics and each one supports different elements, therefore graceful degradation is the main element which ensures that all the pages are readable and accessible in all the browsers. The standards for HTML have been written keeping this important key i.e. graceful degradation in mind.

Graceful degradation has two basic rules. Firstly any browser should be able to view the content of the site and secondly any browser should be able to navigate the site. This simply indicates that the website should still be able to operate even when it is being viewed with less optimal software which does not support any kind of advanced features. You can add as many special effects as desired but always ensure that the site is very much operative and usable without them as well. The essence of quality web programming is ensuring graceful degradation. By definition, we all know that no HTML will run on all the browsers, errors are inevitable. Although a page might appear different in an older version of the browser in comparison to the latest ones but what is important is the fact that information should always be available to the user.

There are various good examples which can successfully describe graceful degradation, such as the use ALT attribute in IMG tags. By using alt, we are providing a text alternative to the browser. In case the browser is not able to display the image it can provide the relevant text information. Another example can be if CSS is used to describe the text color, and in case if the web browser does not support the style sheets the text will return to its default color which is black and thereby making the text readable by the user. Graceful degradation is only possible if the HTML used in the web pages should be valid which means that it should be grammatically correct. Browser should have something to fall back on. When the HTML is written badly, it would mean that when the browser tries to ignore certain parts which are not understandable, atleast the content can be displayed. And finally the tag should be closed at the end. If the tag is left open, it would completely fail.

Webcasting refers to the process of broadcasting the web content to the internet users regularly. For this purpose the Channel Definition Files, popularly known as CDF are used. These files are very important while creating the Active Desktop components. The type of content, its update interval and the amount of content to be uploaded and downloaded is specified in the CDF file.

Channel designing is a very important task. A properly designed channel is easy to manage, user friendly and have lots of exciting features.

Below are some tips and guidelines which can be followed in order to create a captivating online channel:

• If the channel contains large amount of content then it must be managed in a hierarchy and the Top Level should be very attractive yet simple. There should not be too much content at the top level. It should only contain the logo and main information about the channel.
• Keep the navigation between different levels as simple as possible because if it is complicated and uneven then the user will get confused and will not be able to find out particular information.
• In order to make the channel look more attractive you can make use of Dynamic Hyper Text Markup Language (DHTML) tools.
• One of the most important features which should be included while designing the channels is offline browsing. There may be chances when the user tries to browse the web page offline. During this phase many Java applets and Active X controls don’t work properly, especially the dynamically loaded images. Therefore the channel must be tested completely for offline browsing.
• Instead of stuffing a single page with loads of information provide the content in small chunks distributed over different pages. There are two main reasons behind this. First is that while surfing the internet the users browse one page after another very quickly and do not take interest in reading those web pages which are poorly designed and contains lots of textual information. Secondly, if the channel contains lots of information it will take more time to get loaded in the web browser. Therefore the channels should be as slim as possible so that they can be loaded with a snap otherwise the user will not wait for it and switch over to some another channel.
• In order to ensure scalability, uniformity and style it is recommended to use Cascading Style Sheets (CSS) while designing the webcast channels.
• To make channels arrest the viewer’s attention at the first glance it should be rich in multimedia. Apart from the textual data pictures, animations, videos, sound effects etc. should be used. Again it should be noted that the multimedia elements should not be used too frequently as it will make the web page heavier to load. The channel developer should intellectually balance the technical qualities and the visual quality of the channels.

Once the channel is properly designed it can be made more interactive and real time component with the help of CDF files. CDF files trigger the regular updates. The developer can also use the CDF files to log the hits to his channel.

To begin with, there is no existence of a term called “Semantic HTML” in Hyper Text Markup Language. Basically, the term is in reference to the effort made to produce documents in HTML which are completely devoted to the writer’s intended meaning without any slight indication as to how the meaning is being conveyed. If one tries to draw a comparison between the emphasis element (<em>) and the italics element (<i>), it can be observed that the emphasis element is drawn in italics bringing in a lot of typical similarity into the presentation.

But what really makes the difference is the same element of presentation that was talked above. A classic example of this would be a book title which would be displayed in a different element than emphasized text, which would again be displayed in a different element so that both of them end up looking unique just like their meanings.

Semantic HTML basically requires two things while working on:

. Avoidance of the use of presentational markup, i.e. attributes, elements and other entities.
. Creation of a visible difference between the structure of the document and the meaning of the phrases by making use of the available markup.

This form of HTML also requires some minute specifications and compliance of software. The development of CSS (Cascading Style Sheets) has in many ways increased the demand of semantic HTML as the CSS caters to the needs of the designers by providing them with a rich language enabling them to alter the presentation of the documentation prepared on semantic HTML. The need for inclusion of presentational properties in a document has been virtually eliminated with the eventual development of CSS. Using semantic HTML not only leads to consistency in representation of phrases and statements having the same meaning but also gives the authors the freedom from the mentally draining concern of the details of presentation.

An example might make things easier. The number 2, when being written should be written in words as two or in numeric form as 2? In this case, the semantic markup might portray it as <number>2</number> and let the stylesheet designers do the honors when it comes to presentation details.
So if this is co-related to the authors, then all they need to do is indicate quotations and stop thinking about presentations.

Another additional advantage is the repurposing of documents that can be done and the allotment of device independence. The pairing of a semantic HTML document can be done with any number of sheets so that the output comes on the computer screens via web browsers, devices that can be handheld and also printers having a high resolution. Not many changes are required in an HTML document to accomplish this feat as the readily available stylesheets simplify this by pairing semantic HTML documents with appropriate stylesheets.

There are certain aspects of authoring documents which make the separation of semantics from presentation complicated. One can also find certain hybrid elements which make use of presentation in their very meaning. The separation of the actual meaning from their presentation becomes tough in case of these types of elements. But for many, the process of translation becomes extremely smooth.

Cascading Style Sheets (CSS) refer to the language which is used to design the layout and presentation of a web document created in HTML, DHTML, XHTML or any other type of XML document. Via CSS, the designers can define the fonts, colors, styles and overall layout of a web page. CSS improves the web designing work by reducing the complexity. They provide more flexibility and control over the presentation of characters and their style on a web page.

CSS acts as the base platform which is responsible for the format and layout of an HTML document. It allows the same HTML content to be viewed in different styles for different purposes like for print, for web viewing etc. CSS are very useful when the structure of the HTML document is repetitive. For example; if you are making an HTML document in which you have used <Font color=red face=comic sans ms> a lot, then instead of writing this code again and again a CSS can be created in which you can define the type of font you want. This way all the tags and their attributes which helps in designing the appearance and style of the web page such as background styles, borders, character size, heading styles and many more can be defined using CSS. The main advantage of using CSS is that for a single HTML document, multiple CSS can be used. In this way the appearance and layout of the web page can be changed whenever needed in no time. CSS can be used as a separate document or it can be embedded in the HTML.CSS can be created by different people in different styles. It is prepared by both the web authors and the users. The web author makes the CSS having different styles which can be applied to the HTML document. A user prepares a local CSS which is applied to all the documents of a website. CSS are also created in ‘user agent style’ which specifies the default settings for a web browser to display the web page.

Advantages of CSS:

1) CSS allows us to create templates for the HTML documents in which we can predefine different visual styles and appearances.
2) CSS reduces the structural complexity of HTML documents.
3) CSS separates the designing part and the content part of a web page. This leads to the better management and understanding.
4) CSS can be used with any XML language.
5) CSS really helps in managing large websites having a number of interlinked web pages. It assures consistency in the layout and design.
6) CSS can be used to view a web page in different styles depending upon how you will be using the final output. For example; for viewing on web the layout of the web page is different and for printing purposes another layout may be needed.

Apart from these remarkable advantages, CSS suffers from some disadvantages too. There are some issues which creates hindrance while using them. The most common problem is that not all the web browsers support all types of CSS. There are some other issues regarding the expressions and their usage in CSS. Thus, developers are finding more tools and techniques which can improve the functionality of CSS in future. The World Wide Web Consortium (W3C) maintains all the CSS specifications.

Just like Microsoft FrontPage, Dreamweaver is also a WYSIWYG (what you see is what you get) web development software. It was originally created by Macromedia, but later on in the year 2005 it was owned by Adobe systems. Thus Dreamweaver is now known as Adobe Dreamweaver. This application is used for developing high quality web pages without getting involved in HTML coding. All the designing can be done in the design mode easily.

If we look at the sole objective, there is no difference between FrontPage and Dreamweaver. Both of them offer excellent tools to create exciting web sites. But still, some people prefer Dreamweaver as they find it more interesting, easy and rich in functions than FrontPage. Dreamweaver allows viewing websites in many popular browsers. It has got a variety of tools and functions which can be used to add multimedia in the web pages. For example tools like flash tool, real player tool, windows media player tool and quick time tool can be used to embed and watch movies in different formats on the web sites.

One unique feature of Dreamweaver is that you can configure it to write the HTML code in the way you want. For example; if you want that all the tags should be in bold, then you can configure the Dreamweaver to generate the code in that way. Dreamweaver also supports syntax highlighting for the codes. It makes it easy to use java scripting and DHTML to control the behavior of different objects. There is a library which makes it comfortable to use and modify an HTML element which has been repeatedly used in different web pages of a web site. For example; suppose you need to use and design a navigation table on every page of your web site. In that case instead of putting the formatting the table on every page, you can define it in the Dreamweaver library. Once added in the library, you need to put the table and design it on any one page of the web site and it will automatically get added and updated on the rest of the web pages.

Apart from this, Dreamweaver supports a lot of other useful functions such as CSS, templates, forms, tables, automatically updatable hyperlinks, interactive frames, rollover images and much more. Adobe Dreamweaver can be used on both Macintosh and Windows operating systems. The recent version of the application has been improved to support CSS, java scripts, ASP.NET, ColdFusion, java server pages and PHP. Overall, Dreamweaver is fully power packed with captivating features. This program is used worldwide and is a real head turner. It is a mighty competitor of FrontPage.

The whole look and design of Dreamweaver is better than any other HTML editor. FrontPage 2003 supports Dreamweaver compatible web templates. You can use both of them creatively to make stunning web pages. Dreamweaver has been improved to work hand in hand with Microsoft Word and Excel. The latest version of Adobe Dreamweaver, Dreamweaver CS3 is fully loaded with high end features such as fireworks, spry effects, browser compatibility check, CSS management and lots more. No doubt, Dreamweaver is all time favorite of most of the web designers and HTML professionals.

Paragraphs serve the text’s optical construction. When producing HTML files, it is not enough to only add a break in the editor. Internet browsers ignore such breaks.

An Example:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<title>Defining Text Paragraphs</title>
</head>
<body>
<h1> Defining Text Paragraphs </h1>
<p>A new paragraph begins here, and ends here</p>
<p>A new paragraph begins here, and ends here</p>
</body>
</html>

Explanation:

<p> (p = paragraph) introduces a paragraph of text. </p> ends the paragraph of text and stands at the end of the paragraph.

Take Note:

The </p> end tag is optional in HTML, which means it doesn’t necessarily have to be included. On the other hand, in XHTML it is required. Moreover, it is also good HTML style to include the closing </p> tag. It also makes the meaning of such a tag clearer: It surrounds a block of text – it does not stand for the space in between two paragraphs. If you format the <p> element with style sheets, then that means you already have to write a <p> before the first text block in order for all the paragraphs to have the same formatting.

The <p> element cannot include any block producing elements such as headings, paragraphs or lists. For HTML this means: the paragraph will be implicitly closed (with an internally included </p>) at the first appearance of a tag that is no longer allowed in the current paragraph (such as <ul> or <table>) – an eventually later following </p> will then be alone without any start tag and therefore a mistake. In XHTML the </p> must come before any block producing elements.

The rules regarding the character set, special characters and HTML characters apply to the paragraph text.

Aligning Paragraphs

Paragraphs are aligned left by default. But you can also align a paragraph to the right or centre. Justifying the text is also possible.

An Example:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<title>Aligning Paragraphs</title>
</head>
<body>
<h1>Aligning Paragraphs</h1>
<p align=”center”>This is a paragraph that has been centred</p>
<p align=”right”>This is a paragraph that has been aligned to the right</p>
<p align=”left”> This is a paragraph that has been aligned to the left</p>
<p align=”justify”> This is a paragraph that has been justified</p>
</body>
</html>

Explanation:

With the align=“center” in the introductory <p> tag you centrally align the paragraph text. With align=“right” the paragraph is aligned to the right. With align=“justify” the paragraph text is justified. With align=“left” the paragraph is aligned to the left as usual.

Take Note:

Not all browsers interpret justifying. Justifying is not suited for small passages of text, because here the relatively large distance between words disrupts the reading flow.

align has been classified as deprecated in the HTML-4 standard. Instead it is recommended to use style sheets in such a manner for example:

<p style= “text-align:center”>…</p>

Formatting Paragraphs with CSS

HTML has no influence on how exactly a paragraph text will be displayed. The browsers use default formats in order to display the texts. However, with style sheets you can format the paragraphs in any way you please. When using style sheets you must then know how to define CSS formats. Then you will be able to use CSS attributes.

An Example:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<title>Formatting Paragraphs with CSS</title>
</head>
<body>
<h1>Formatting Paragraphs with CSS</h1>
<p style=”font-family:Arial,sans-serif; font-size:18px; color:blue”>A formatted paragraph </p>
<p style=”background-color:yellow”>Another formatted paragraph</p>
</body>
</html>

Explanation:

Two paragraphs are defined in the example. The first paragraph is defined to be displayed in Arial font, 18 pixel font size, and in the colour blue. The second paragraph will receive a yellow background.

HTML differentiates between 6 levels of headings, in order to create hierarchical relationships in the document.

An Example

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<title>Defining Headlines</title>
</head>
<body>
<h1> 1. order heading</h1>
<h2> 2. order heading</h2>
<h3> 3. order heading</h3>
<h4> 4. order heading</h4>
<h5> 5. order heading</h5>
<h6> 6. order heading</h6>
</body>
</html>

Explanation:

<h(1-6)> introduces a heading. The number stands for the heading level. 1 is the highest level, 6 is the lowest. Afterwards the text in the heading follows.
</h(1-6> ends the heading and should be at the end of the heading text.

Take Note:

The numbers for the beginning and closing tags must be the same.

Every heading is its own paragraph, which means no paragraph spacing is necessary before and after headings. The rules regarding the character set, special characters, and HTML specific characters all apply for the heading text.

Aligning Headings

Headings are aligned on the left, if not instructed to do otherwise. You can also align a heading centrally or on the right. Justifying is possible too.

An Example:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<title>Aligning Headings</title>
</head>
<body>
<h1 align=”center”>centred 1. order heading </h1>
<h2 align=”center”>centred 2. order heading </h2>
<h3 align=”center”>centred 3. order heading </h3>
<h1 align=”right”>right aligned 1. order heading</h1>
<h2 align=”right”>right aligned 2. order heading</h2>
<h3 align=”left”>left aligned 3. order heading</h3>
<h1 align=”justify”>Very long justified 1. order heading, which is only visible after there are multiple lines of text <h1>
</body>
</html>

Explanation:

Through the align=“center” element in the introductory heading tag, you make it so that the heading is centrally aligned. The align=“right” element aligns the heading on the right. While the align=“justify” justifies the heading, and the align= “left” element aligns the heading in its normal place on the left.

Take Note:

Not all browsers can interpret justified text. Justifying together with headings is not always practical, because justified text is only noticeable with multiple lines of text.

align has been classified as deprecated in the HTML 4 standard. Instead we recommend using style sheets, for example: <h1 style= “text-align:center”>…</h1>.

Formatting Headings with CSS

HTML has no influence on how a heading will be presented by a browser. The browsers use default formatting in order to display headings. However, you can format headings in any way you please with style sheets. When using style sheets you must then know how to define CSS formats. Then you will be able to use CSS attributes.

An Example:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<title>Formatting Headings with CSS</title>
</head>
<body>
<h1 style= “font-size:300%; color:red”> 1. order heading</h1>
</body>
</html>

Explanation:

The 1. order heading is defined with a 300% font size and red colour in the above example.

While displaying an HTML file you can set the wallpaper. The picture will then continuously be repeated throughout the display window, so that the wallpaper effect results. Relatively small graphics, that represent some abstract model, are especially well suited for wallpaper effects. We will offer some typical examples in a separate chapter regarding graphics.

The background graphic should be saved as a graphics file in either the GIF or JPEG format.

An Example:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<title>Embedding Wallpaper</title>
</head>
<body background=”background.jpg” text=”#990000″ link=”#0000CC” vlink=”#000066″ alink=”#000000″>
<h1>Text</h1>
<a href=”http://www.yahoo.com/”><b>Link to Yahoo</b></a>
</body>
</html>

Explanation:

The elements for embedding wallpaper result from the HTML file’s introductory <body> tag. With the background attribute you define graphics files as background pictures. The entire HTML file will then be displayed on the background picture shown here.

Take Note:

The background attribute has been characterized as deprecated and should be avoided in the future. You can achieve the same effect using style sheets, like so:

<body style= “background-image:url(background.jpg)”>

When general rules for referencing in HTML apply when entering the URI for the wallpaper.

The background picture applies for the HTML file, in which it is defined. If you produce a document from multiple HTML files, that all need to have a unified background image, then you must repeat the element in every file.

With text oriented HTML files you should use more low-key backgrounds so that nothing interferes with the reading. Attention grabbing background images should only be used if the entire site is constructed graphically and the graphics in the foreground fit with the background graphics.

Web browsers also interpret animated GIF graphics as wallpaper.

Internet Explorer knows an additional attribute, bgproperties= “fixed”, in the introductory <body> tag, with which you can produce unmoving background images. However, this attribute has never belonged to the HTML standard and can also be replaced with a CSS element, for example: <body style= “background-image:url(background.jpg); background-attachment:fixed;”>