HTML.co.uk

We all know the web is quite a new medium, and in its current state is maybe around 14 to 15 years old. Can you think about the cinema or for that matter television when they are around 14-15 years? There are four essential pillars of the web designing namely valid code, accessible code, semantically correct code and separation of content and presentation. Each one of the four essentialities is not a complete solution in itself instead each of them together or collectively contributes for perfect and complete web designing.

Most of the products when manufactured are done with certain standards. And all the standards that are made or exist are there for a reason and it would highly unprofessional to ignore them. All the web pages whenever designed should invariably go through a validation test process following the W3C HTML validation service although there are a few web pages that are not able to clear these tests. If your web page is really not validating then there has to be some major reason for the same.

The site should at any point be easily accessible. Accessibility problem is majorly caused because of the discrepancies in the basics. Some of the most common ones would be that the title and the header should always contain the description about the specific page that is being displayed, the website should not only be accessible by the mouse but for surely by the keyboard as well, use the ALT for all the images and the SUMMARY for the tables in your web page, SUMMARY is quite similar to ALT tag which is used to describe the images and many more. Basically it is not difficult to achieve what we call the factor of accessibility it definitely requires certain efforts but surely saves a lot of agony to quite a many users. Therefore it is always advisable to make a positive contribution to the web by being World Wide.

We have often read that the code should be semantically correct and structured. But there has always been a major issue in the basic understanding about the semantics. Semantics basically refers to the relationships between symbols and signs and what they collectively mean. Every symbol or tag or sign that is being used in the HTML code should be able to depict or represent the correct meaning what it is actually meant to perform rather than just being interpreted as something else. For example, when using the <TITLE> it should describe the title of that particular page rather than displaying the title of the entire website, similarly the headers <h1> to <h6> should be used to chunk down your document into meaningful pieces rather than anything else.

Separation of content and presentation literally means that the HTML does not include any presentation markup which means that it contains nothing which should actually describe as to how it looks. All the instructions related to how it looks are included in the CSS. There are a lot of benefits of this approach wherein there is increased bandwidth, improved accessibility, faster download and allows the developers to work on the sites independently and concurrently. All these four pillars are the basic and the most important factors that should always be considered while designing the website.

Cleaning of HTML code is as important as writing of the code for the success of any website. Cleaning of HTML code will firstly reduce the size of your web page, secondly it would make your website very search engine friendly and last but not the least, and it will increase the accessibility to your website. Whenever you start the process of cleaning your HTML code, the first and the foremost thing to be kept in mind is to look for all the extra, excessive or non compliant HTML coding.

This eliminating of excessive and non compliant HTML coding can be cleaned by simply moving the presentation HTML code to the style sheets and keeping only the relevant or compliant code which includes the relevant content of the site in the HTML code. As we all know that a title tag is required by each web page. Therefore it is very important and mandatory that each page should have a different or unique title tag relative to the content of the web page as this will be an important factor from search engine point of view.

Each web page features a description Meta tag and key word Meta tag which can be used by the search engines while displaying their results. Therefore always ensure that each page has a different description Meta tag which should be relative to the content of the web page. The robot Meta tag is only of importance for those who do not have access to the robots.txt file. You should count it out if you have a convenient and easy access to the robots.txt file. Similarly there are numerous Meta tags being used throughout the web where some of them have no value in particular, therefore their use should be forbidden.

The main goal of cleaning the content is to have more area available for the important web content and also ensure fast and quick loading. Excessive paragraph coding, non-breaking-spaces and line breaks should be avoided as far as possible as there are other options available which give the same effect but involve less coding thereby resulting in a clean HTML document. If your HTML code includes font formatting, table formatting or page formatting, this will unnecessary chew up the place and cause unnecessary crowd and hassle. It is always better to move all of these to the stylesheets and make your HTML code cleaner and better readable. It will be a good option to create a class in the stylesheet and apply that class to the element, whose similar look is required repeatedly. This will definitely result in a cleaner HTML code and will also make changes required site wide much easier.

At times there are certain incorrect and invisible characters that get introduced in our HTML code which a browser is not able to recognize, when the code is copied from the word processor. All these characters should be removed or cleaned from our HTML code. Also if there are too many nested tables or the tag is missing or if the rows and columns are not listed properly in the HTML code, it can cause unnecessary problems. Therefore it is very important to clean up the HTML code in order to increase the accessibility and optimization of your website.

As we all know that internet has been a boon for everybody on this planet and especially for those with some disabilities. But one most important thing to be kept in mind before the designing of the website is the accessibility. Accessibility in terms of website indicates the degree or the measure to which any particular website is usable especially by people with certain disabilities. The main key to accessibility is flexibility. Always remember that people might be using numerous varied technologies to view your web pages depending on the availability of resources.

Availability of proper options and ease of use are the two basic premises of accessibility. A website which has been designed on these grounds will surely be fun and will have optimized loading time. One of the easiest and the simplest methods to check accessibility of your website is to run through an HTML checker. The primary function of the HTML checker is to check through your entire HTML code thoroughly and help you see where your HTML page is inaccessible and finally redisplaying that particular page with images as annotations. This HTML checker is designed to check for all kinds of accessibilities whether it is related to the browser compatibility or the disability access problems.

Always ensure of having a workable text option in your web page as this will allow the people with visual disabilities to access through your pages easily and conveniently. This implies that you should always make use of the ALT tag when ever dealing with graphics and also create alternatives to IMAGEMAPS. And also remember to always give textual description of your graphics as this will prove to be quite important for your web page. The use of font tag with some hard coded values should be avoided especially for visually impaired people. The background should be kept monochromal or lighten the color of the background. Try to keep your website simple and easy by using textual listing of options and avoiding the use of hierarchical menus as far as possible.

The next important factor that comes into picture is the economic accessibility. Everybody cannot of the option of similar bandwidth or internet accessibility options. A website should be such that it should be designed kept in mind the slowest operating system, Lynx terminal thereby using the ALT tag and the textual version of imagemaps. The image and sound files should always be an optional part of the HTML code and not the necessary requirement. Always remember the website should be accessible by people from all walks of life. The vocabulary and the choice of appropriate and easy to understand words is very important. It is always possible to make the entire text and the subject understandable and clear without actually using 20 subjunctive clauses and 8 syllable words. Always make the text easier, simpler and comprehend.

Always remember that your HTML can be made accessible simply by keeping it simple by using clean and easy language. The webpage should support the slowest operating system i.e. Lynx friendly and relative font sizes should be used. The use of ALT tag and hyperlinked text for images and graphics description is always advisable.

As discussed earlier, whenever the TARGET attribute is used to direct the output to a new window then the Window_name has to be specified. Whether the developer is targeting for the AREA element, BASE element or the FORM element, the window_name has to be used. A general rule with respect to the window_name says that it must begin with an alphabet. However there are some predefined special window_names which begins with an underscore sign ‘_’. Below is a list of such special window_names and their associated functions:

• _blank: When used, it directs the output to a new window. This name forces the target attribute to load the HTML document associated with the link in a separate unnamed window.

• _self: Whenever this is used the output is displayed in the same frame the user clicks in. In other words the linked document gets loaded in the same frame as the anchor. One crucial point to be noted is when the _self name is used it overrides the BASE target assigned globally.

• _parent: It can be used whenever the linked document has to be loaded into the immediate FRAMESET parent of the document. If there is no parent, then it works like the _self.

• _top: This will make the linked document to get loaded in a full browser window.

Preparing alternate document for the non-frame web browsers

In order to make the frames work properly it is essential that the web browser supports the frames. Sometimes it happens that the web client is incompatible with the frames or it has been configured not to load them. In that case an alternate document has to be prepared so that if the web browser cannot handle the frames then instead of showing an error it loads the alternate documents containing the information.

The alternate document can be prepared very easily with the help of the BODY element and the NOFRAMES tag which follows the outermost FRAMESET element. The content of the BODY element is ignored by those browsers which can read frames. Apart from this all the attributes of the NOFRAMES tag is also ignored.

Below is the HTML code which shows the usage of the NOFRAMES tag.

<HTML>

<frameset cols=”50%,50%”>
<frameset rows=”50%,50%”>
<frame src=”doc.html” >
<frame src=”doc1.html”>
</frameset>
<frameset>
<frame src=”doc2.html”>
<frame src=”doc3.html”>
<frame src=”doc4.html”>
</frameset>
</frameset>
<body>
<noframes>
This section is for those whose web browser is not compatible with frames. It will be ignored automatically if the web browser is set to read the frames. This is an excellent option to avoid any kind of errors.
</noframes>
</body>
</HTML>

As shown in the above code the NOFRAMES tag can be used at the end of the code with all the description and text which has to be displayed without the frames. Above the NOFRAMES tag, there is the normal HTML coding representing the use of nested frames and will be automatically considered when the web browser can support the frames.

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.

While surfing the web we come across different types of data. Some of them are presented in the form of paragraphs while some information is presented in the form of lists. Lists provide the content more visibility, readability and understandability. It also improves the overall look of the web site. In HTML documents different types of lists can be inserted. There are countless number of designs and styles, which can be applied to a list. Broadly speaking, HTML lists can be classified into three main categories. One is ordered lists (also known as numbered lists), second one is unordered lists (also known as bulleted lists) and the last one is glossary lists (also known as definition lists).

Ordered lists are those in which each list item is numbered in either an ascending order or in descending order. The HTML tags which make up the ordered lists are <OL>……</OL>.

Example code of ordered list:

<OL>
<LI> Content </LI>
<LI> Resume </LI>
<LI> E-Book </LI>
<LI> Blogs </LI>
<LI> SEO </LI>
<LI> SMO </LI>
</OL>

The <LI> tag is always used within the <OL> tag. It represents the list items which have to be displayed. It’s not necessary that the numbered lists always put numerical in front of the each list item. You can also use alphabets and roman signs to them. In order to add these you can use the ‘TYPE’ attribute with <OL>. You can also start a list directly from any number or any alphabet by using ‘START’ attribute. Below is a comprehensive example explaining how to create different kinds of ordered lists.

HTML Code:

<OL>
<LI> Content </LI>
<LI> Resume </LI>
</OL>

<OL TYPE=”A”>
<LI> Content </LI>
<LI> Resume </LI>
</OL>

<OL TYPE=”a” START=”b”>
<LI> Content </LI>
<LI> Resume </LI>
</OL>

<OL TYPE=”i”>
<LI> Content </LI>
<LI> Resume </LI>
</OL>

<OL TYPE=”I” START=”!!!”>
<LI> Content </LI>
<LI> Resume </LI>
</OL>

It is clear that:

1) “1” specifies the standard Arabic numerals to be used in the ordered list.
2) “a” specifies the lowercase alphabets to be used in the ordered list.
3) “A” specifies the uppercase alphabets to be used in the ordered list
4) “i” specifies the lowercase Roman numerals to be used in the ordered list.
5) “I” specifies the uppercase Roman numerals to be used in the ordered list.

So far we have seen that the ordered lists numbers the list items in a flow like 1, 2, 3, 4 etc. or a, b, c….etc. but we can also break the sequence and directly jump to any number or alphabet of our choice. For this purpose we have to use ‘VALUE’ attribute with the <LI> tag. For example:

<OL TYPE=”1” START=”2”>
<LI> Content </LI>
<LI> Resume </LI>
<LI VALUE=”10”> Blogs
<LI> SMO
</OL>

Like the ordered lists, the unordered or bulleted lists are also used to present the data in a more meaningful, readable and understandable way. Unlike the ordered lists the unordered ones puts a bullet instead of a number or alphabet in front of every list item. The HTML tags used to create the unordered lists are <UL>…</UL>. Unordered lists can also be used in a variety of styles. By default most of the web browsers use bullets to delineate unordered list items. Some text browsers such as Lynx put an asterisk sign before the unordered list item.

Example code for creating an unordered list:

<UL>
<LI> Content </LI>
<LI> Resume </LI>
<LI> E-Book </LI>
<LI> Blogs </LI>
<LI> SEO </LI>
<LI> SMO </LI>
</UL>

The output of the above code will be as follows:

• Content
• Resume
• E-Book
• Blogs
• SEO
• SMO

Instead of simple bullets we can also use other symbols as far as they are supported by the web browser. In order to accomplish this we have to use ‘TYPE’ attribute with the <UL> HTML tag. For example:

<UL TYPE=”SQUARE”>
<LI> Content </LI>
<LI> Resume </LI>
<LI> E-Book </LI>
<LI> Blogs </LI>
<LI> SEO </LI>
<LI> SMO </LI>
</UL>

Using the above HTML code we will get the following output:

• Content
• Resume
• E-Book
• Blogs
• SEO
• SMO

We can also use different types of symbols in the same unordered list and ordered list with the bulleted one. A sub-list under a main list can also be created. This process is popularly known as nesting of lists and such kind of lists are called ‘Nested Lists’. Below is a comprehensive example of a nested list which consists of both the numbered and bulleted styles.

HTML Code:

<HTML>
<OL TYPE=”I” START=”V”>Guess what we will be discussing today?
<OL TYPE=”1”>
<LI> Its all about vegetables </LI>
<OL TYPE=”A”>
<LI> Carrot
<UL>
<LI> Its red in color </LI>
</UL>
<LI> Tomato </LI>
<UL TYPE=”CIRCLE”>
<LI>Its also red in color </LI>
</UL>
<LI> Potato </LI>
<UL TYPE=”SQUARE”>
<LI> It’s the odd one out as it is brown in color </LI>
</UL>
</OL>
</OL>
</OL>
</HTML>

In this way we can try infinite combinations of tags to design our lists. Nested lists can be made more beautiful if non-breaking spaces i.e. < & nbsp > is used. It will increase indents and the sub-lists will be easily presented under the main ones.