HTML.co.uk

If you are planning to start a web designer office, there are certain things that you have to do:

A computer
a computer can be windows, Macintosh, or Linux. There are benefits from both and you can go with the one that is comfortable for you.
HTML editor
Always, it does not matter how much spend on the web editor. Most of the professional freelancers make use of Dreamweaver. You can even use any editors that are available in the market.
Graphics editor
you will require a graphics editor if you are using the photos or clip arts for the sites, using which the images can be optimized and file size can be changed. There are many online options available for the graphics software.

Once these three items are in place, now you will have minimum set-up to do the web designing. However, many other things are available that should be considered so that it makes your work easier.

Office Equipment

You will be able to work anywhere if you have a laptop. However, most of the people think that having a specific place for the work will be more productive. Some of these office fixtures can help you to do your work effectively

A desk
a desk will be very much important for you to keep the computer on it and it will be easier for you to work.
A chair
when you are working on a computer, it is important to be comfortable. In order to be in the comfort position while working, a chair is very much required. Buy chair that is comfortable and adjustable for you so that the productivity is more and no back pains will occur.

For a Web designer, ergonomics is very much important, as the designers will sit at the desk for a long time in a day. Once everything is in place, you have to follow some guide on how to set up a computer station.

Your Freelancing Business Identity
The business identity for you is the colour scheme and log your business uses in order to differentiate itself from rest and this consist of a logo, letterheads, business cards and envelopes.

The other software used by the web designers
There are many software packages available in the market. In fact, whatever things you write on the paper probably has the software package to o it and some of the software that are recommended are spread sheets, word processing, desktop video, invoicing, financial software and antivirus software.

The electronic things that are required by a web designer
Finally, in order to make the life easier, you will want some electronics so they will help you in doing the work. Some of the electronic items required are landline phone or mobile phone, wacom tablet, external hard drive, USB thumb drivers and scanner or printer.

Keep in mind that not all the above things are required to be a freelance web designer. You can start with minimum things and can add on the things as and when they are required.

Most people ask some doubts on how to fix problems in the web designs. While the challenge is that, there is only one way to get the right designs but there are many ways to get the design wrong. Problems could be as simple as not being able to upload the files or as difficult as having CSS cascade that cause unexpected conflicts. However, finding out the problem is frustrating.

For the problems if you approach with the methodical methods, you will be able to do two things:
The working aspects should be removed
You have to focus to the areas that are not working.

Ignoring some steps especially the first steps would be tempting. However, you would be surprised to see how many problems would be caused due to the misspelling of a file name. When you are facing the problem, it is always recommended to go through all the steps on the checklist. By verifying the checklist, you can remove what would be the possible error instead of being caught up in the testing process.

Web Design Checklist
Are the files that are related uploaded?
The URL of the relevant file should be pasted in the browser and ensure that it doesn’t get 404 errors. This includes The CSS, The HTML, External JavaScripts, The Images and other external files.

Are the correct URLs used for the files?
If your webpage is not been displayed, go to your host service provider and make sure that there is correct URL. The files linked with HTML, ensure that you refer the exact URL browsed to in first step.

Does your HTML validate?
HTML validator can solve many problems. It is not so important to have valid HTML but if you have valid HTML, you can make sure that it is not causing any problem.

Does your CSS validate?
Just like HTML validation, validating CSS can eliminate the cause of the problems.

Is your page cached?
Many problems will be caused due to Web Caches. If you make any changes in your WebPages will not be displayed. It is easy to clear the caches.
Are you editing the CSS file or correct file?
It is easy to edit and upload the files with same name stored in different directories.
CSS and many other web servers are case sensitive
When you are building a site on the windows machine and uploading the pages to the Linux or UNIX server should be done carefully at filenames on the server, if the HTML references are in lowercase and if the filenames are in upper case, they do not work.
Did you use DOCTYPE or included on at all?
Most of the modern browsers have the quirks mode and this is the mode when the browser enters when the HTML documents do not have DOCTYPE.
Check whether your pages are in the multiple web browsers
It will be always tempting to build the webpage and check whether it is in the favourite browser and it will be worse if it is on the WYSIWYG editor.

Just like that of search engines, the frames play mayhem with the audible browsers and screen readers. This thing means that if the frames are used, your page might not be readable at all by your customers.

As the popularity of HTML frames grows, they make the web very difficult to view or read by some people and in this; the sad thing is that it is not too difficult to solve the problem. Nowadays, most of the governments are steeping into the arena of web in order to specify the accessibility guidelines for WebPages and often this includes the usage of HTML frames.

Here are a few suggestions on how to make your framed WebPages more accessible to the people.

1.Do not make use frames in your WebPages
Most of the people are not fond of frames. Whatever problems arise from the frames can often be solved using better layout or CSS. Therefore, you have to consider the implications before deciding a frame to your website.
2.make use of noframes tag
This is one of the simplest solutions available and yet most of the WebPages do not use the option of noframes or else their noframes page will say something very much useless like “this page uses the frames and nor please upgrade your browser.
3.Use minimal frames
As the technology is getting developed in a better manner and the screen readers that were used to not being able to read the frames can now be able to read some of the websites with frames but it is readable if there are a few frames. The option two is always recommended but this option can be used if you absolutely have to use it.
4.in every frame, keep the navigation
make sure that in each frame, the navigation is around your website and in this way even if the customers is not making use of the frames, the customers will be able to get around the site easily.

If you want to use the frames design, make sure that you make use of noframes tag. The best and easiest ways to create the noframes page is by just putting up a link to actual content of the page and usually the main frame. This means that, the customers with some disabilities will be able to read the content. Of course, this optimal solution is used to reproduce the content in noframes page and therefore they have it right in the page.

Do not wait until you are forced to
As it is mentioned above, most of the governments are taking a role in the field of internet and thus the making the requirements for more accessibility on the WebPages that is very much similar to brick and mortar stores. If at all, your website sells something. It may become very much liable for more accessibility standards that are set by your respective governments. However, if you are already accessible, then you will be ahead of the game.

Installed software or hosted service
Most of the small business owners and have thought that, only the Web Analytics software can be used to install over their local machines. However, there are Web Analytics tools as well so that it can be directly placed on the tools and Web servers that are hosted outside the site. Most of the high-end vendors will offer both the hosted and server solutions.
Before buying any software, always try it.

Batched or real-time logos
Most of the marketing people tell that, closer to the real-time statistics that they will be able to get, the better will be their campaigns. However, in practice it has been found that the real-time stats will offer too much of variability in order to get more than that of general picture on how the things are doing. .

Standard Analytics
Whatever tool you would like to choose, include standard reports such as
Referrers
Pageviews
Unique visitors and/or visits
Authenticated users
Operating systems
Web browsers
Countries
Domains
Robots
HTTP errors
Entry and exit pages
You can also create the custom reports in order to get the analytics of some specific areas of your website or other customizations.

Tagging Web Pages
For the Web Analytics package, the common way to track put the page is to tag each page with unique identifier. The tag will enable the tool to have accurate information about every page, which is requested and displayed as well.

Tracking via Cookies
Setting a cookie on each customer coming to the site is another common tool for getting the good analytics. This will let the analytical tool to have accurate info regarding the browsers, which are visiting the website.
Scalability and flexibility
In web analytics tool, flexibility or customization is important. The more custom reports are generated, the more you will get out. However, keep in mind that, if you are able to create more reports from the raw logos, then they are harder to build in first place.

Support
If you want to get most out from the tool, you will have to find the tool that gives lots of support. This will be free as the paid or user groups or thought forums support is provided by the respective company.
It might be very much tempting to skip of the paying for initial support plans or installation, especially if have paid lot of solution already. Keep in mind that, the difficult period of adjustment of a new tool is during its installation.

Cost
It will be very much tempting to put up the cost initially in the list of criteria. However, if the business needs are defined from the analytic solution, then you might be able to find that the paid solution meets all of your needs and it is worth its value. Most of the solution available for free come with drawbacks around the scalability, support, flexibility or functionality. Whatever decision you take, remember to include the recurring costs as well.

For you to store style information there are three places. For all the three places, the syntax will be the same but for the sake of clarity, here we are going to discuss the styles that are placed in of the document.

Rules

1.The entire style information must be stored within the </style> and <style> element. By doing so, browser will come to know that the information stored is for styles.
2.you have to include type attributes always
This attributes will indicate what type of style rules you are going to use. The style that is commonly used is CSS but other than CSS, there are other types as wee such as (JSS, XSL and many others).
3.In the comment tags, enclose all the style rules

By doing so, it ensures you that the older browsers even by mistake will not display style rules.

Mainly, the style rule is comprised of 2 things, the declaration and selector.

Declaration - this is a specific style call that will be helpful to affect the selector

Selector – this HTML element is the one that will be very much affected by the rule.

The syntax for the style rule will be ‘selector {property: value ;}’

So, in order to set all the bold text into red, you can write ‘b {colour: red ;}’

The thing that makes the usage of CSS very easy is that you will be able to group the components together that you like to have the similar style. Take for example: if you want all the H1, H2 and the entire bold text in red, you can write

‘b {colour: red ;}’
‘h1 {colour: red;}’
‘h2 {colour: red;}’

however, with the help of grouping, you will be able to put all of them on the same line.
‘b, h1, h2 {colour: red;}’
you can even group the rule together. Take for example, in order to make all the h3 text blue and font in Arial, you can write
You can also group together rules (separated by a semi-colon (;) ). For example, to make all h3 text blue and Arial fonts, you would write:

‘h3 {
font-family: Arial;
colour: blue;
}’
Just for convention, we can put all the rules in separate line but it is not very much required.

Some Common Styles
There are different font attributes that are used commonly.
Font family – this specifies the font face that to be used.
Font-size – it will specify the text size.
Font-style – it will specify whether the text will be displayed in normal, oblique or italic.
Font variant – it will specify whether the text to be displayed in normal or small caps.
Font-weight – it will specify how dark or light the text will be
The other style that is commonly used is the ‘text-decoration’. Along with this tag, you will be able to remove underlines from various links, put the lines through the marked out text or else can make the text blink.

External Style Sheets- Advantages and disadvantages
The best thing that is very good about the Cascading Style Sheets is that you will be able to use them in order to keep your website consistent. One of the easiest ways to do this is to import or link an external style sheet. If the same external style sheet is used in every page of your site, then you will be sure that all the pages of the site will have the same style.

Advantages
At once, you will be able to control the feel and look of many documents. This will be very much helpful if you work with a team of people. It is hard to remember many style rules and while you may have printed the style guide, it is pretty tedious and inefficient to continuously flip through it in order to determine.
You will be able to create classes of some styles that can be easily used on many elements of HTML.
You should not give emphasis to different things on the pages if you use the special windings often, you will be able to use windings class set up in the style sheets in order to create.
The styles can be easily grouped to be much more efficient.

Disadvantages
The external style sheets increases that download time, when they are large enough
The complexity of the site will be increased if you have less number of styles.
Just like the table rendering, you have to still wait until the whole style sheet is loaded prior to the page display
These sheets get big quickly as it is hard to tell when the style is no longer will be in use as it is not deleted when the pages are removed.

Creating an External Style Sheet

These sheets are created with very much similar syntax to the document level style sheets (in the <head>). You have to include both the declaration and selector as well. The syntax for the rule will be ‘selector {property: value ;}’.

These rules must be saved into the text file with an extension of .css. Actually, this is not required but it is good habit so that it will easier for you to recognize the sheets in the listing.

Once the style sheet document is ready, you have it to the WebPages and this can be done in two ways:

1. The HTML tag <link> should be used to link the style sheet. This has some attributes such as href, type and rel. rel tell what you are going to link, type defines the MIME-type and href will be the path to .css file.

2. Importing

Within the document level sheet, you can use an imported sheet so that you will be able to import the attributes of the external style sheet while you will not lose any specific documents. This can be called it in the similar way in calling the linked style sheet but it must be within the document level style.

The DOM or the Document Oriented Model is an interface that allows the scripts and programs to update the style, structure and content of the documents dynamically. DOM is a platform and language neutral. DOM is neither in HTML nor in JavaScript. It is a type of glue, which binds both HTML and JavaScript together.

DOM Level 0
The level 0 DOM is just a mix of all the HTML functions, which have not been specified formally that will allow the scripting languages to interact with the Netscape Navigator 3.0 and Microsoft Internet Explorer 3.0. All these basically mean that, if the DHTML pages are compliant with the DOM level 0 and then it has to work reliably fair with the old browsers.
The document master container of the DOM level 0 is the base structure. This mainly refers to the entire document and it includes all the elements within it and it is directly referenced as:

Document
It is directly referenced as document because, DOM level 0 is very much basic and it allows only the developer to manipulate the items on pages that have some level of interactivity already that is the forms. In the Web document, it is very much possible to reference the other items but most of the browsers do not support the interactivity with them at this level 0.

Referencing Forms
Using the DOM level 0, actually there are three ways to reference the form control and they are
It’s by name or by ID
This is one of the easiest ways of referencing a form control as you will be able to see in XHTML to which form you are referring to. For ex, this is the name which is named as ‘form1’.
“<form name=”form1″ id=”form1″>…</form>”
In the DOM, it can be referenced as
“document.form1”
If at all you want to reference one of the elements within the form, you would be able to name it as well:
“document.form1.fname”
References as
“<input type=”text” name=”fname” />”
In the form mentioned above
By number
each element and form within the form is just given by a number in one of the array and is starts with 0. They’re numbered with first <form> element found in flow of the document. In order to refer the second form on this page:
Document. Form [1]
Then, in order to refer the second form element within the second form will be
‘Document. Form [1].element [1]’
Combination of both
It is very much possible to use any type of combination using the name or number to reference a form element or form within the document:
“document.form [0].fname”
“document.form1.element [3]”
Other DOMs
W3C has many recommendations for various level of DOM. All these levels will provide more power and control over all the Web documents but there are DOMs for many other user agents and browsers as well. All these DOMs aren’t standardized but for a specific browser, if you want to write the DHTML it will really help you to learn the specific DOM for a particular browser.