HTML.co.uk

In today’s modern world, all the works are governed by internet and each and everyone wants to build their own Website and one of the major questions that come in mind is how to build? At this time the research begins. During the research, most of the times you will be on the same media and at last you will end up with more number of questions than answers. So how will handle all the information that you gather? This might happen because you have to know the answers to the question such as “just use WYSIWYG Editor or else should i lean HTML code? What will be better for me?” Answers for these questions will depend upon all your expectations, intentions and needs as well. In order to clear all the things, you have to know the difference between WYSIWYG and HTML editors.

Time to learn

Learning WYSIWYG editors is the biggest advantage as using this it is easy to build any Website. For the people who write a letter in their text editor or draw the image in their picture will know what it is all about. On the other hand, writing in the HTML language tends to be complicated although it is an easy language. HTML is just a markup language and one of the reasons why it is easier then many other languages is because the resulting Webpage is interpreted by the codes. Learning HTML will give you long time advantages.

Time to build

While building a Website, time is one of the diffuse points. During the building of a website, the time will depend upon the expertise of the designer and most probably, the Website can be finished faster by using WYSIWYG editor.

Portability

HTML codes can be written in any of the text editor but you will not be able to build a website using WYSIWYG editor.

Code properness

when you’re using the WYSIWYG editor, the Webpage that is created should be in the visual way that is translated into the HTML code by the editor itself. When using the language of HTML, designer is the person who will be deciding on the codes which are to be used and which are not to be used.

Reach

The WYSIWYG editors that are available today brings you the advanced and easy solutions to all the designers incorporating the server side languages, markup languages, plug-ins, client side language and many more.

On the other side, HTML is just an HTML, but if you are a visionary then you will see that the HTML as the doorway for further learning.

Credibility

If you are trying to get a client or else you are working for a client already, it will not be the same to say that you know how to handle HTML and it will just say that you know to handle WYSIWYG editors only. By learning HTML, it gives additional point that is credibility.

It will be frustrating job to find out what has gone wrong with your Web design. Some of the things will be impossible to fix and some other things will be difficult and can be fixed but if you are very much systematic regarding your analysis, you can fix the problem very quickly.

Your HTML should be validated

Whenever you have the problem with your WebPages, do validate your HTML. There are several reasons behind validating your HTML but when you have a problem in your WebPages do validate your HTML. There are a many people who validate HTML automatically. If you have the habit of validating your HTML every now and then, it is well and good. By validating, it makes sure that it’s not a small problem.

CSS should be validated

The next place where you will have most problems is with CSS. Validating CSS serves same as validating HTML. If there are some errors, validation will make sure that, there will be no problem with CSS and that will be not the cause of your problems.

Validate other dynamic elements and your JavaScript

As validating your CSS and HTML you have to validate your JavaScript, JSP, PHP and other dynamic elements.

Simplify your Pages

If you have been validating your CSS and HTML regularly and it didn’t help, you have to narrow down the pages to fix the problem. One of the easiest ways is to delete some portions of the page until the problem is solved. Now, you have to cut down your CSS in similar manner. The thought behind simplifying your page is not that you will leave the entire page with the fixed amount of content but you are focusing on how to solve the problem that has occurred.

Subtract and add back

Finally if you have found the problem, narrow down the page and start subtracting the elements that give you problems. For example: if you have found the problem in certain division and along with CSS that styles the division, start to delete each line one by one.
After every removal test your page. If you have removed or fixed the problem you will come to know what kind of problem is that. Once you have solved the problem, begin adding the elements that you have erased and ensure that you have to test the page after every change. When designing a Webpage, you will come to know certain little things will make vast difference. You have to test the page after every check because you will come to know that place where the problem is occurred.

First design WebPages for standard compliant browsers

The most common problem faced by these Web designers is around getting the pages looking similar in all the Websites. It is impossible sometimes or difficult to have all the pages of all the Websites to have the pages similarly.

Keep your code simple

Once you have solved all the problems, you have to keep watching that similar problem doesn’t arise again.

Nothing can be worse than your viewers not being able to view your website properly. Have you ever thought about what will happen if your viewers never ever get a chance to view your website? If you want your site to be listed properly on search engines you, should always ensure that it has proper HTML code to support it. Any site that has HTML errors cannot be properly catalogued or indexed by many of the search engines. This can ultimately lead to a major reduction in the amount of traffic that would be received your website.

Search engines are considered to be the lowest form of the browsers, as a matter of fact they are considered to be equivalent to around version 2 of the browsers. The browsers are not even capable of reading the dynamic pages, JavaScript, DHTML and Flash. They even have a problem handling the frames. In case you are having broken HTML, the web browsers would have a major problem handling, indexing, crawling and extracting the content from your website.

The search engines try scoring the page of a website by looking for all the necessary and relevant key terms in your HTML components within your document. These key components can be anything description, title, alt image tags and visible text. If due to any kind of mistake or typo error, they are not able to find the key components, the spiders might simply leave without even checking the actual content of the web page. Poor documentation is also another reason which can cost you a good ranking on the search engine. For example, when the meta tag is placed in the Body of the web page instead of the Head section, the spider would simply ignore the tag and as a result, you would ultimately lose the ranking on the web page.

There is every possibility that due to deadlines and pressure, you can write TILTE instead of TITLE tag. As we all know the TITLE tags are very important and with this one simple error made by you can actually result in the search engine not considering the content of the web page at all. If the page is created properly by you and contains all the necessary and targeted keywords, there is every possibility that it will surely get picked up and read by the search engine. However any small error like an open tag or for that matter a missing closing bracket of the paragraph can actually cause your website or the web page ranking in the search engine.

Internet explorer is considered to be quite forgiving in terms of any kind of mistakes in the code. If you are building your website only for the Internet Explorer then undoubtedly you are building for the most forgiving browser on the net. Even thinking that your website will be treated by the search engine in the similar fashion as that of IE6 would certainly be nothing more than daydreaming. If your website is not displaying properly in the Firefox, Netscape, older versions of IE and Opera, there are all the chances that it will be read by the search engines as well. The next time you have a problem of your website not getting displayed properly in the Netscape, Opera, Firefox, simply consider rechecking your code.

You will surely be thanked by your marketing department.

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.