HTML.co.uk

It is not easy for the beginners to make sense of the colour codes that are used in HTML. The HTML colour codes are been written in such a way that it has some specific reason. The colour codes of the HTML are been put together and are composed of the six hex numbers which would even represent the possibility of 16.7 million colour combination. The colour codes of the hex are been built on RGB colour model, where R is red, G is green and B is blue. In the typical HTML code it would look like #FFFFFF and it breaks down. Here in ‘#FFFFFF’, the initial two digits would represent the colour ‘red’. The next set of two digits of ‘#FFFFFF’ would represent ‘green’. The final and the third set of the two digits of ‘#FFFFFF’ would represent ‘blue’.

In the general mathematics the hex or a hexadecimal is the numeral system that has the base of the number 16 which is normally written by using the symbols from 0 – 9 and even A – F. the numbers from 0 – 9 would have the same value even in the decimal system but, it would start from the letter A, the value starts increasing till it reaches the value 16. A is equal to 10, B is equal to 11 and this continues till it reaches F, as F is equal to 16. This would be according to the hexadecimal system.

The colour model of RGB would be similar to the colour model of the HTML as it can represent the total of 16.7 million colours. It would vary among the colours green, red and blue. It would be possible for anyone to show the 16.7 million colours. The RGB value would be represented any of the numbers that is between 0 – 255. The set of the RGB values for white colour would be 255, 255, 255 for instance. Here you would also know how to establish the hex numeral system along with the numbers that are ranging from 0 – 16. After this you just need to combine both the hex numbers. You can even represent any numbers that is between 0 – 255. As you could even see that the colour codes of HTML and RGB represents some colour model.

Many years ago the monitors had the capacity to display only 256 colours. But even these monitors were very popular when HTML was put together. It would even be necessary to put the list of colours together as the web designers can also make sure that the given monitor could display it properly. The result of this would be the ‘web safe colours’. This ‘web safe colour’ palate would contain 216 colours. It would always be the good practise to take the standard colours over the board, but now it is not necessary to stick for the ‘web safe colours’. This rule might be excepted while developing the websites for PDA’s and even the mobile phones.

So be BOLD now. If you are the one who is very much new to the web development then you will be able to discover that there are brilliant ways to add up the vales to the words and that is the BOLD tag or B tag. In overall plan of all the things, this is one of the extreme basic tags and also very low level in the terms of additional uses. However the power of adding the focus to the word is just not only in its own power but also there are many other tags that will be able to accomplish the same effect and also might be meant as it is bit more efficient. In fact all these additional tags are Strong and Font but do not fall in these types of traps.

This type of trap relates to a presupposition. The assumption is very much trusting that the icons that will be able to be located on most of the toolbars in the Microsoft FrontPage and the XSite Pro, you are very much aware of the ones that looks exactly like the capital ‘B”. In most of the times, this will mean BOLD and also within an application such as Microsoft Word it does.

Since now, we’re just talking about HTML so now let us concentrate in this fact. ‘B’ is not the one what it actually looks like to be. For example: in the Microsoft FrontPage, the icon ‘B’ works exactly as you would like to think of.

But the XSite Pro would place the tags strong and strong all round the text that you want to be bolded. Yet it will yield the same results visually however from within the source of HTML it is pretty peculiar from the b tag and now here is booby trap. If the keywords are encapsulated then the search engines will not be able to add any weight to them.

So in order to be very much sure to now on how your WYSIWYG (“what you see is what you get”) application processes your own bolded text when and where you will make use of the button but here you should not just suspect. This will be the right time and it will be very much advantageous on knowing the HTML programming. Don’t bold too much as this will be thought as spam.

Do always stay tuned for all the examples that will be shown in a particular manner and you will come from the boundlessness of internet to the top 10 for the key phrase. You might also look out for the examples on many websites where most of the examples will include some of the images that will try to explain the alterations that are exactly done on the website. By doing so you can get the search engine optimization (SEO) tactics which will provide your website greater rank in the search engines

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.