HTML.co.uk

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.

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.

HTML is used to create and design static web pages. It proved to be very useful and easy to understand and soon after its evolution it gained world wide popularity rapidly. But with the growth of internet and its related applications the internet users demanded something more in the websites. Web surfers were vigorously expecting more interactive, entertaining and exciting web content. Thus DHTML was introduced. Some people call DHTML as an advanced version of HTML, but some did not consider it a language or a new specification of HTML. Rather, they perceive DHTML as a new way of controlling the HTML commands and functions. DHTML is basically an amalgamation of four different techniques i.e. HTML, Scripting, Cascading Style Sheets (CSS) and Document Object Model (DOM). Using all these tools we can create more interactive and animated web pages to arrest the attention of the internet users. DHTML is used to insert special effects to a website such as mouse rollover effects, drop down lists, animations, advanced marquee effects etc. It allows you to control the HTML elements and change them.

The four techniques which are harmonically used in DHTML are:

1) HTML: DHTML uses the standard HTML code as its base.
2) Scripting: A client side scripting language such as Java Script is used to control the elements in DHTML
3) CSS: Cascading Style Sheets are also used to define and manage the style and layout of the web pages.
4) DOM: Document Object Model allows you to access any portion of a DHTML document and change its properties.

DHTML adds life to static HTML pages. The user feels that he is interacting with the website in real time. DHTML can add an effect with any event. For example when you click on an image, it background changes. In this the effect is related with the mouse click event. Similarly a lot of events such as mouse rollover, drag n drop, scroll etc. can be associated with one or more DHTML effects.

The four properties of DHTML are:

1) DHTML is used to modify and control the standard HTML tags and their attributes.
2) DHTML gives you real time interactivity with the web page. It can position different objects, images and text dynamically within the web page.
3) DHTML is also used dynamic fonts. Only Netscape Navigator supports this function.
4) Another important feature of DHTML is Data Binding. With the help of this property the web surfer can easily access databases from the websites. This feature is only supported by Microsoft’s Internet Explorer.

It is clear from the above discussion that DHTML has many advantages and some disadvantages too. DHTML is more complex than HTML. The DHTML editors are very costly. Apart from this some of the features of DHTML are browser specific but still DHTML is used worldwide as it has proved itself a great utility to enhance the quality and usability of web pages. Anyone can use DHTML in any form. From a small piece of creativity to large complex codes, DHTML can be used to make web sites better than ever before.

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.

Please use the HTML attributes described here only in the case of justifiable exceptions – this is why we are only touching upon the subject superficially. These attributes have never belonged to the HTML standard and are a typical example of the type of chaos that results when a browser is allowed to do its own thing. You should definitely instead use style sheets to define side borders.

An example:

<html>
<head>
<title> Side Borders</title>
</head>
<body marginwidth= “50” marginheight= “100” topmargin= “100” leftmargin= “50”>
<h1>Text</h1>
A lot of text and so on.
</body>
</html>

Explanation:

The elements for side borders follow after the introductory <body> tag in the HTML file. The leftmargin attribute determines the distance between the left and right window border and the file’s content for Internet Explorer. The topmargin determines the distance in between the upper and lower window border and the file’s content for internet explorer. Marginwidth and marginheight determine the distances for Firefox. All values are in pixels. The left and right borders are always the same size, just like the upper and lower borders.

Take Note:

The defined side borders only apply to the HTML file for which they are defined. If you wish to produce a document from multiple HTML files, with consistent side borders among them all, then you will have to individually set the side borders for each file.

Side Borders with Style Sheets:

Here is another example on how you can achieve the same side borders in the example above using style sheets:

The Example:

<head>
<style type= “text/css”>
body { margin-left:50px; margin-right:50px; margin-top:100px; margin-bottom:100px }
</style>
</head>

Explanation:

You achieve the same effect using the elements above in the HTML file header. These elements are interpreted by Firefox and Internet Explorer. Moreover, the elements have also been standardised by the W3 consortium.

You can determine a colour for the display window’s background. The entire HTML file will then be shown on this background colour.

An Example:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html14/loose.dtd”>
<html>
<head>
<title> File Wide Colour for the Background</title>
</head>
<body bgcolor= “#CCFFFF”>
<h1>text, links, graphic references etc. </h1>
</body>
</html>

Explanation

The elements for the background colour in the HTML file are carried out through the introductory <body> tag.

With text you define a colour for the text.
With link you define a colour for links to already visited sites that have not been visited yet.
With vlink you define a colour for links that have already been visited.
With alink you define a colour for links that have just been activated.

Take Note:

All of these attributes have been classified as deprecated and should be avoided in the future. You will achieve the same effect with the help of style sheets, placed in the file header in between <head> and </head> using the following source text, for example:
<style type=“text/css”>
body { background-color:#663333; color:#FFCC99; }
a:link { color:#FF9966; }
a:visited { color:#FF9900; }
a:active { color:#FFFFFF; }
</style>

The defined text foreground colours should contrast with the background colours. If, for example, you define a dark background colour, then you should choose a bright foreground text (such as white, yellow, light green and light blue).

Additional Possibilities

When using style sheets you must then know how to define CSS formats. Then you will be able to use CSS attributes which we will describe in depth in later sections.