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.

Since its evolution, the HTML (Hyper Text Markup Language) has been revised and upgraded a number of times in order to make the World Wide Web a better place to live virtually. HTML is a derivative of SGML (Standard Generalized Markup Language), but its major flaw is that it is not extensible. Thus HTML is not appropriate for deployment under a network environment.

So, the World Wide Web Consortium (popularly known as W3C) decided to develop a new breed of extensible language and came up with XML, which stands for eXtensible Markup Language. Web developers use XML to dynamically describe the information stored on a web page. Though XML, the new generation web pages describes themselves which is helpful to gain good rankings in search engine listings and help the developers to write codes for custom search tools.

• XML shall be straightforwardly usable over the Internet.
• XML shall support a wide variety of applications.
• XML shall be compatible with SGML.
• It shall be easy to write programs that process XML documents.
• The number of optional features shall be kept to the absolute minimum, ideally zero.
• XML documents shall be human-legible and reasonably clear.
• The XML design should be prepared quickly.
• The design of XML shall be formal and concise.
• XML documents shall be easy to create.
• Terseness in XML markup is of minimal importance.

(Source: http://www.w3.org/TR/REC-xml/)

XML is referred as a Metalanguage which describes other languages. It is called so because XML allows the web developers to create documents which describes themselves to their reader. Though the XML tags look like the HTML ones, the main difference between the two is that the HTML documents do not tell the web browser how to display the web page. On the other hand, the XML documents are downloaded by the web browser along with a style sheet or Document Type definition (DTD) which guides the web browser on how to display the web page.

In its raw form, an XML document looks like the HTML and SGML documents, but all are functionally different. The main difference between the HTML and XML coding is that the XML tags are very rigid. For example; the HTML language has tags which have a closing and which don’t have a closing section. But in XML either all the tags must exist in pair or announce to the reader that a closing tag is not present.

For example: in HTML you can use <BR> tag without having to close it, but in XML you have to use it as <BR>…</BR> or simply as <BR/> which announces that there is no closing tag for BR.

Another prominent difference between the two languages is that the XML requires all the tag attribute values to be enclosed within quotation marks. For example:

<font color=red>……</font>, this is wrong in XML. It should be like <font color=”red”>…….</font>

Whenever we prepare long documents we divide it into various paragraphs each expressing a different and complete thought. We also use headings, sub-headings, horizontal lines etc. and align various portions of the document in different styles so that overall it becomes more captivating and meaningful to read. In HTML documents also, we can apply these techniques to make the web page look more impressive and fruitful to visit.

A single HTML document does not have any end. You can write infinite number of characters and the page will still go on. In the absence of proper formatting, the web browser will show the whole HTML document as a single paragraph. So, we have to use different formatting tags at appropriate places.

Inserting Line Breaks in the HTML documents:

We can enter a new line in the HTML document by using <BR> tag. This tag does not have an ending part. For example:

<HTML>
Joe woke up this morning and ate breakfast. <BR> It was cold out so he took a coat with him to work.
</HTML>

Output:

Joe woke up this morning and ate breakfast.
It was cold out so he took a coat with him to work.

Breaking up the text into paragraphs:

In order to break up the long text into paragraphs, the <P>…..</P> tag is used. For example:

<HTML>
Web content writing is a phenomenon that lets you speak, convey the message and articulate your thoughts to the customers…well at the end of the day it also sells your services/products to the customers. Besides, web content writing services at Content Mantra ensure that you do not miss our basic things like having website content without any basic language errors, succinct in nature and in sync with the target customer. <P>Needless to say, our web content writing is original. Having catered to some of the largest corporate clients, we are embarrassed to say that time and again. It is something that is ingrained in the Content Mantra culture.</P>
</HTML>

Output:

Web content writing is a phenomenon that lets you speak, convey the message and articulate your thoughts to the customers…well at the end of the day it also sells your services/products to the customers. Besides, web content writing services at Content Mantra ensure that you do not miss our basic things like having website content without any basic language errors, succinct in nature and in sync with the target customer.

Needless to say, our web content writing is original. Having catered to some of the largest corporate clients, we are embarrassed to say that time and again. It is something that is ingrained in the Content Mantra culture.

HTML tags are the basic building blocks of a web document. All the elements which make up a HTML page itself are made of a starting tag and an ending tag. Without the tags no web site can be created. In fact all the HTML editors such as Microsoft FrontPage, Adobe Dreamweaver etc. use tags while generating automatic HTML codes for the websites. Tags are the heart and brain of an HTML document.

Tags have all the powers which design, control, maintain and edit a web page. A simple notepad file is transformed into a web page just because of the tags <HTML>…..</HTML>. Tags describe the nature of your document. It affects both the visual appearance as well as the background processing a web page. In order to increase the functionality, most of the tags also have their attributes. Attributes precisely defines the nature, behavior and the appearance of the text enclosed within a particular tag set. Different types of tags have different possible attributes. For eg: the tag <FONT>……</FONT> have some attributes like face, color, size etc, but the tag <B>…</B> does not has any attribute. Attributes are always used with their tags, not alone. However, the tags can be used without its attributes. In order to use the attributes you have to start a tag and within its starting section the attributes can be used.

Every attribute must be provided with a value. Without the values an attribute cannot determine what to do and to which extent. Like the attributes, their values are also used within the tags. They are separated from the attributes by a = sign.

For example:

<FONT Face=”Comic Sans MS” Color=”Red” Size=”10”> Content Mantra is the one best solution for all your writing and editing needs. </FONT>

In the above HTML code <FONT> and </FONT> are the main HTML tags. The Face, Color and Size are its attributes which have Comic Sans MS, Red and 10 as their values respectively. One important thing which is to be noted is that whatever content written inside the tags is only meant to format the HTML document and it is not displayed on the web page as the final output. Only the portion between the start tag end the end tag is viewed by the internet user.

HTML tags are of different types. Some tags are used to format the visual appearance of the content of the web document, some are used to define the behavior of the HTML elements and some are used to control the HTML scripts. The syntax to be followed while using different tags can be the same or different from each other. Some tags have an end portion prefixed by a / while some of the tags don’t require an end. Like the <FONT> tag do have an end i.e. </FONT> but the <BR> tag does not have any end.

META tags are very important nowadays because modern web sites are optimized for search engines. Today SEO (Search Engine Optimization) has become a critical strategy to drive the web traffic towards the web sites. Thus it has become necessary for web developers that they design and create the HTML documents in such a way that it gains higher rankings in the search results. While creating a search engine friendly web site, the ‘Meta Tag’ of Hyper Text Markup Language (HTML) plays a vital role.

The Meta Tag is a special tag which is used to insert the description and keywords for the web pages. The content of these tags is not displayed in the web browser. It is only used at the backend by the search engines and web crawlers in order to prepare their indices. Unlike the other tags, Meta Tag does not affect the visual appearance of the web page. It does not format the characters, tables, forms etc. META tag does not have an ending tag with a slash ‘/’ too. These are only used to provide information about the website to the web crawlers and make them understand what the web site is all about. Meta Tag is inserted within the <HEAD>……</HEAD> tag.

There are different types of Meta tags which can be included in the HTML document. Each of them is used to provide different type of information which the search engines may use to rank the web page. Meta tags can be used to give information about page title, page description and page keywords. For the purpose of search indexing, the ‘Keyword’ Meta tag and the ‘Description’ Meta tag are the most important ones. The Keyword Meta tag contains all the keywords which are relevant to the web site. The Description Meta tag contains a short, best possible description of the web page. One thing which should be kept in mind is that keywords and description in the Meta tags should not be too short or too long. If it’s too short it will not be very much effective in getting your web page a good rank and if its too long, then it will be considered as a spam and the website will be blacklisted by the search engines. In order to avoid spamming make sure that the keywords are not repeated again and again. To increase the effectiveness, one must use those keywords which are commonly used by the web users while searching for web pages via search engines.

Example of Meta tag:

<HTML>
<HEAD>
<META name=”description” content=”Information about the deployment of meta tags.>
<META name=”keywords” content=”metatags,keywords,search engine,marketing”>
</HEAD>
</HTML>

In the above example, there are two META tags used. One is used with the description attribute and it will be useful in introducing the web site to the search engines. The second META tag is used with the keywords attribute which have metatags, keywords, search engine and marketing as the keywords. Now whenever any inter user will type any of these keywords during a web search, this HTML document will be taken into consideration by the search engine. How it is ranked, depends upon the web site content and search engine algorithms. If wisely used, the Meta tag can earn a good ranking for your web site.

Forms are one of the vital elements of HTML. Today almost all the web pages are dynamic and interactive in nature. They are capable of receiving the input from the user and process it. As the e-commerce gained popularity, it became necessary for web developers to create web sites which are capable of taking the input from each user and update their records. For this purpose HTML forms were introduced. A HTML form is like a console where you can provide all the required information and submit it on the web.

To create a form in HTML, <FORM>….</FORM> tags are used. Below is the different attributes of form tag:

1) Action: It represents the URL which will accept the details of the user via form. If this attribute is not mentioned, then it means that the base URL will accept the form. Base URL is that URL where the form is located on the web server.
2) Enctype: It specifies the media type.
3) Method: It indicates the method that will be used for processing the action script. Method has two possible values. One is ‘get’ and other one is ‘post’. Get is used when the form does not make any changes in the database, hypertext or any other value. On the contrary, Post is used when after submission, the form affects the database, hypertext or changes any other value.

Example of form tag:

<FORM Action=http://www.contentmantra.com/submit Method=”POST”> contents of the form </FORM>

In the above example the Action=”http://www.contentmantra.com/submit” specifies the query program to the server on which the particulars of the form has to be submitted.

ELEMENTS of FORM

Form elements build up the contents, design and layout of the form. The different form elements are: INPUT, SELECT, OPTION and TEXTAREA.

A) INPUT: It is used to take input form the user using variety of tools and options. The INPUT element defines the graphical user interface of the form. Via INPUT the web developer can insert drop down menus, radio buttons, text boxes, check boxes etc. In order to specify the type of input, ‘TYPE’ attribute is used. For example:

• <INPUT type=”text” size=”40” name=”content_mantra”>
• <INPUT type=”radio” name=”radio1” value=”M”> Male
<INPUT type=”radio” name=”radio1” value=”F”> Female

B) SELECT and OPTION: It allows the user to choose one option form a set. It is used to insert drop down menus in the form. The OPTION element is used with SELECT in order to make the list of available options. For example:

<SELECT Name=”select1”>
<OPTION> Bangalore
<OPTION> Delhi
<OPTION> Mumbai
<OPTION> Chennai
<OPTION> Gujarat
<OPTION> Patna
</SELECT>

C) TEXTAREA: This element is used to take textual data from the user. The difference between TEXTAREA and INPUT is that in TEXTAREA the user can enter several lines (like while giving feedback for a product), but in INPUT the user can enter only one line (like his name). For example:

<TEXTAREA NAME=”feedback” ROWS=”4” COLS=”40”></TEXTAREA>

The ROWS and COLS indicate the maximum limit to which the user can write in the text area. Another important thing is that with each HTML form element, ‘NAME’ attribute is used. This is very important because while writing the scripts for the form these names are used.

A single image speaks more clearly than a thousand words. Images add spice to the web page. They make a website interactive and user friendly. In fact, images are the most vital element of a web page, especially those designed for children. In the absence of images nobody will enjoy web surfing. Today almost every web page contains images in order to increase its worth. So, it would be useful to have a look at the different aspects of an Image in HTML.

HTML basically supports two types of images i.e. .Gif and .Jpg image. While .Jpg images are static, the .Gif images can be both static and dynamic. tag is used to put an image on a web page. This tag has lots of attributes which are used to align an image, define its size and position etc. To add an image there are some basic attributes which should be used.

1) <IMG> tag is necessary
2) Then SRC attribute must be there to tell the document the source from where it will get the image.

For example:

<HTML>
<IMG SRC=”d:\images\hello.jpg”>
</HTML>

In the above example the <HTML> and </HTML> tags represent that this document is a web page. The IMG tag is representing the addition of an image in the web page. The SRC is the attribute of IMG which tells that from where and which image is to be inserted .There is no need to close the <IMG> tag with </IMG>.

One thing which should be noted is that you can give the full path to an image as well as only name of the image with the SRC attribute. If you are using an image which is not in the same folder where your HTML document resides, then you have to give its full path like d:\images\hello.jpg. In contrast if the hello.jpg file is in the folder where your HTML document and files are saved then you can mention only its name as like <IMG SRC=”hello.jpg”>. Another point which should be remembered is that you have to mention the full image name including its extension like hello.gif or hello.jpg otherwise the image will not be displayed. You can adjust the aliment, height, width and border of the image. If you set the value of border=0 then the border will disappear. In contrast, you can start increasing the value of height, width and border as per your requirements.

For example:

<IMG SRC=”d:\images\hello.jpg” ALT=”Hello” HEIGHT=”200” WIDTH=”600” BORDER=”6” >

Below are the different attributes and their explanations which can be used with <IMG>

1. ALIGN: It is used to set the alignment of the image. You can use it as ALIGN= TOP, ALIGN= MIDDLE, ALIGN=CENTER, ALIGN= LEFT and ALIGN= RIGHT.
2. BORDER: It is used to set the size of the border of the image.
3. WIDTH: It is used to set the width of the image
4. HEIGHT: Used to set the height of the image
5. HSPACE: Represents the amount of space to the right and left of the image.
6. VSPACE: Represents the amount of space to the top and bottom of the image.
7. ALT: It represents the text which is to be displayed in place of image in case the web browser is unable to display the image.

Elements are those building blocks, which define the structure of an HTML page. Whatever we see on a web page is defined by the different elements of HTML. Elements decide the layout of a web page, its contents, the properties of the content and the position and behavior of every character that may or may not be displayed on the web page. Elements contain everything such as Headings, Paragraphs, Embedded Media, Sound, Images, Hyperlinks, Lists, Fonts and a variety of other structures that are used to build a web page. Each element in HTML can be defined using the Tags. Tags define the properties of the elements. To construct an element in a particular style we generally require four things:

A start tag
Any attributes and associated values of the start tag
The actual content which has to be displayed on the web page
End Tag

Most of the elements require all the four things mentioned above, but some of the elements require only a part of them. The use of attributes and associated values of the start tag is completely optional and it is used only when we want to add some extra effects for the characters. Some of the elements do not even require an End Tag. As you gain experience and in depth knowledge and expertise in designing HTML pages, you will get to know a large number of Elements some of which require all the tags and some, which do not.

HTML Elements are classified into two broad categories:

Block level Elements
Text level Elements or Inline Elements

Block level Elements are responsible for the construction of an HTML page as a whole such as Headings, Paragraphs etc. These elements contain several Text Level/ Inline elements and other Block level elements. Inline elements are contained under the block level elements and are used to format small chunks of data. For e.g. Images and Hyperlinks.

Various Block level and Text level elements can be used together to format the data/text to be displayed on the web page. Although you can use more than one inline elements in any order but it is not recommended. As per the standards the elements must be closed in the reverse order. For eg.

<B><U><I> Introduction to Elements</I></U></B>

The above order is correct. The elements B, U and I are closed in the reverse order i.e. last In first Out. Below is an example of incorrect style of defining the elements.

<B><U><I> HTML is good. </U></B></I>

The elements can be used more complexly according to ones need. Several different elements can be nested within each other if required because there is no maximum limit for using the elements. Below is a comprehensive example of nested elements. Just note their starting and ending order. The first one has been closed in the last.

<Body bgcolor=red><P><B>Welcome to HTML.</B> <I> For more info</I><a href=”html.com”>click here </a></P></body>

In this way the elements can take a form of different hierarchies and sub-hierarchies depending upon the structure of your web page.