HTML.co.uk

HTML 5 has brought lots of changes to the specifications of HTML. Doctype is the one thing that can be remembered easily. Apart from doctype, in order to build websites, HTML 5 has brought 25 new tags. Some of the new tags are a long time coming to the HTML and there are some others and they are complicated. However, the complicated tags are very useful.

Layout Tags

In HTML 5, the new layout tags will allow you to define all the sections of the WebPages as a layout area even without the need of div tag to define them. Header tag surrounds the header and nav tag surrounds navigation. Just use these tags normally just like div tags.

Article – is the main content in WebPages

Aside – extra content

Footer – is a footer for a page

Figure – is a peripheral content along with the caption

Header – header of the page

Section – any portion or section of the page

Nav – page navigation

Multimedia Content

HTML 5 attempts to make the both audio and video to add to a webpage. By providing the specific tags for both the video and audio, it can be put on the WebPages.

Audio – audio stream is denoted

Source – source files for both audio and video

Video – video stream is denoted

Web Applications and DHTML or Ajax

The HTML 5 adds some of the tags to the language specifically for the Web applications, DHTML and Ajax. More hooks are given to the scripting languages by these tags and for the browsers, it provides framework in order to deliver the application data.

Canvas – it is a place where dynamic graphics could be drew

Command – This denotes a command button, which has the information sent to the script or server

Datagrid – it is a references dynamic data in tabular data form or in a tree form

Datalist- list of data is referenced in the drop-down list

Details- this provides additional details of any page element

Output – this references the output or calculation of a script

Progress – this represents a progress bar

Ruby Annotations

Ruby is a short run of the text alongside a base text and is typically used in the East Asian documents in order to indicate short annotation or to indicate pronunciation. Through the help of three tags, HTML 5 provides access to ruby.

rp – this is a Ruby parenthesis for the user-agents that cannot handle ruby

rt- it is a Ruby text,

ruby –this is a span of the ruby annotation

Some of the other new tags

There are some new tags that will help you to mark the HTML effectively. These tags help the browsers to know exactly what different elements are there on the page.

Dialog – people talking or a conversation

hgroup – it is a grouping of header tags that must stay altogether

Mark – it is a text that has been marked for many reference purposes

Meter – it is a scalar gauge of a measurement

time – time or date

When building an online store, for you it will be tempting in order to focus on all the efforts on conversions. However, if you annoy the reader before becoming customers, you might lose the conversions that you did not know about. The e-commerce annoyances can be easily fixed and it can be fixed only when you take your time to address all of them on your website. Some annoyances make people leave the site even without having a look at once and some others are minor issues. People will leave your website if there are more annoyances in your website. The experience on the site will make them less satisfied and if they make any purchase this time, in future they might lag behind. The conversion rate will not ripple the conversion rates if the annoyances are fixed.

Annoyances before they have chosen what to buy

This type of annoyances will happen when customers browsing the site. They might even leave the site without buying if they are annoyed.

Pages load slowly

Mainly in the e-commerce sites, WebPages should load slowly. The pages should contain large images with the information of the product. Check the database and server so that it has to load the pages quickly. Speed is very important, if the pages are slow, the customers get irritated and they leave the website without purchasing anything.

Providing no additional information about the product

The more information you provide the more sales you get. You have to provide the information such as materials, colours, weights, size and technical specs. Your site appears better with more information. If you do not provide information for the customers, then you cannot meet the targeted sales. Remember that always content is the king.

Outdated content

If the content is outdated, customers will not trust you. Ensure that your content is updated regularly with current content that is reliable.

Not welcoming customer reviews and feedback on the products

When buying a product, most of the people read the customer reviews. If you do not provide the space for it, then you will not be able to reach the sales.

Until checkout, not displaying the price

Most of the online stores do not put up the price on the product thinking that the customers will obligated. Do not force the customers to discover the price in checkout, as it would be annoying.

Annoyances during the checkout

Login is required to checkout

This would really be annoying. Forcing the people to become members would be annoying

Providing no value for the required login

You have to give some offer if they become member and if you do not offer something, then it will be annoying.

Picking countries and states from the drop-down

Picking up the countries and states on the website should be easy and it should be done with professional validation service.

Only a web form with no contact information, telephone or other online method.

Customers would always want to contact you after buying the products for information and if you do not provide the contact information, then it will be annoying.

Two models float and position

On the WebPages, there are 2 models for positioning the content. Both the models are valid and it is always best to use two models to layout the WebPages with CSS.

Float

Float takes out the element from the normal flow of the WebPages and has many other elements around it. It is seems confusing to use CSS for layout at first but is can satisfy you once it is completely understood.

Position

When people think of CSS positioning, position is the one that is thought by everyone. This defines whether the element is in fixed, absolute, relative or static position.

CSS Position Properties

As it is mentioned above, if you have decided to position the pages within the position property, you need to use at least one of the style properties in order to define where the elements should be placed.

Bottom

The element should be placed at the location up from bottom of the browser. One thing that is to be noted is, if the negative values are used in these positions, you have to move the elements in opposite location.

Left

The element can be placed over from the right side of the window.

Right

The element can be placed from right side of the window.

Top

The element can be placed down from top of the window.

CSS Positioning – it is not Really Alignment

There were no many ways to position the items on the screen when HTML came first. Few of them were the align attribute that allowed to position the element related to its current position. In favor of the style sheets, the attribute has been deprecated. There are two attributes and among that, only one works for the text.

Text-align

This does all the things that you would expect from an align-attribute. It helps you to align the text to center, right and even justify. However, this works only with the text.

Vertical-align

This allows you to align the inline element to baseline top, bottom, middle and many other positions.

Position the Things on Top one after another

When positioning the elements, there are some chances that one element will overlap another. On the normal course of events, browser will put up the thing that comes first at the bottom. However, with Z-index property, you will be able to push the elements to other location

Z-index

This defines the stack order of the elements.

After positioning, give shape to elements

In order to define the shape of the elements, there are two properties. The content in the element is clipped so that it fits the shape.

Clip

Shape of the element is defined by clip. Usually, this amounts to height and width of the rectangle. If the content is longer, then it will be clipped.

Overflow

This tells the browser that, what should be done if the content is not fitted in the area that is clipped. The content can be hidden and it can be continued as usual.

When you are looking out for the Web Hosting plans, it could be tempting to look at the prices. However, there are many hosting providers and once you have decided to go, you have many options to choose from. If you have decided to go with cheap hosting, you have to look at certain things.

Free setup

In the market, there are many hosting providers and if they if you pay the set-up fee, then the hosting is silly. If you want to create hosting service, this process has little effort especially in the case of shared hosting.

Unlimited Space and Bandwidth

It was practice followed by people that cheap web hosting is not available along with bandwidth and unlimited space.

30 days should be used to analyze the service.

Not all the cheap web hosting provide cheap provide money-back guarantee and most of the people might have locked themselves with one year contract with the service providers. However, unless you come to know what the things you need are, go with a 30-day offer so that it will be helpful for you to analyze the service.

Tech support

If you want to clarify all the doubts regarding the service over the phone, then do not go with the service providers who provide the 24-hour chat support. Most of the cheap service providers offer FAQs and knowledge bases online but very few provide person-to-person support. Ensure that you learn the how to make use of the support offered. If the domain is down, an E-mail support will not be good.

The features required

If the database is required with PHP, you should not go with the hosting providers that will include the features for a monthly price. Later, it might be difficult for you to convert the plan.

Most of the plans are cheap along with packages

Package deal is one of the common ways in which the cheap hosting service is available. This deal might be offered for months or years together. When these packages are compared with other services, cheaper services are available for you. If you are not capable of paying the entire cash at a time, then go with the monthly rentals and make sure that before signing in, check out all the details about the service.

Before signing up with a service, read all the terms and condition first

The most common complaint that is been seen around the hosting providers are the cancellation fees and non-refundable terms. Most of the times, all these terms and conditions would be specified in the contract that you would sign before you get the service. Make sure that all the terms and conditions are read so that you will not want to find out that they claim copyrights over the content that you post on the servers. (It is very much important for you to check out the conditions so that you can come to know all the things about the company. When you want to go with cheap hosting service, gather some information about the hosting services so that you will not be in a fix.

If you are planning to build a website or would like to upgrade or update the existing website and for this hob, you hire a web designer to help so that the work is done quickly. There are thousands designers and here are some things that you have to look into

Experience Isn’t Everything

In designing, most of the people tell that experience is the one that matters. People tell that designers without experience cannot give you quality work when compared with experienced designers. Just because a designer does not have, experience does not mean that he/she cannot produce a good site. Before going with the designer’s record of accomplishment, think about this -

Most of the long time designers are stuck up with their habits and will not be ready to give you a better website
Younger designers have gone to school to learn web designing whereas the older designers does not have academic knowledge and their knowledge is entirely based through practice they had for years.

Be careful when they tell about the web designers when they tell about their experience.

Ask for their Portfolio

Experience doesn’t matter if there is a good portfolio. You should not be concerned with whether a portfolio is made of live websites, so much so that the examples will show the diversity and even the range for a designer. You have to ask the designer to show his portfolio online so that actual work of the designer can be seen. If you are looking for a designer, it is very much important to build any type of interactivity for the site that you intend to build.

Some of the people tell that the potential of a web designer will be known if his personal site looks good. However, this point is good at some point but using this point a designer’s talent cannot be judged. Yes, it is important to have a good website for a designer but this would not be an indication that shows the work of a designer. Most of the designers design their business website when they are free and anybody with tons of time will design his site at very best. Does this mean that they have good experience? They might have good portfolio, so you have to judge them by yourself.

Look out for the skills that they offer

In order to asses, the skill that they have to offer, first, you need to know what the things you require for your website. This will be hard for you to know. However, the designers should be aware of some of the skills and it includes:

HTML
JavaScript
CSS
PHP

It would be better if they know or could bring the sub-contractor who knows graphics creation, content writing, SEO, Ajax, Flash and PHP. In this the best way to asses them is to ask them these entire thing directly. Remotely it is possible that they know all these things but it is unlikely that they will not know all these things well.

Be Professional

When you are in search of new web design clients, whether you are looking out for the first or hundredth client, you have to present a professional image. Your website will introduce you the new clients. Therefore, you have to make sure that your website looks more professional, as instead of you, your website will talk on your behalf.

Once you have your website up to the snuff, then you will have to worry about the other people for the way they look at you. If you are going to any event related to your work, dress appropriately, as you being a designer you have to get away with some business. If you want to be professional, you have to understand your clients. Finally, you have to ensure that the identity system represents your business and should reflect the kind of work you do.

Referrals from the Existing Web Design Clients

Most of the designers get the new clients through referrals through their existing clients. Therefore, it helps you to keep all the existing clients happy. It is a good idea to remind the existing clients that you are hoping for the referrals. You have to remind your existing clients for the new referrals, as it will not hurt them.

Networking

If you want to new clients, you have to think of situations where you are meeting new people and it will give an opportunity for networking. Mingle with the people so that they can introduce to the clients, so keep your business cards always with you.
Other designers – This might seem counter intuitive for you as you are networking with competition. You can sharpen your skills by talking with other designers and can stay updated with the latest trends
ISPs – they provide only web hosting service but they do not provide any other service so work with them so that you get many new clients.

Advertising for New Clients
Putting up ads need not be expensive. Just put your ads on the internet with proper keywords and optimized website so that you will be able to attract many clients.

Follow up the leads you have
Go through the address book so that you can send the queries to anyone who haven’t worked with you and ask them if you need web designing work.

Toot Your Own Horn
Remember that not even a single person will express your work until you do it yourself. You will be able to create more opportunities if you know how to speak with the public.
Chat with the press – release news on new things that your company is doing and try to get on the radio programs
Become an expert – you should become an expert in your field by displaying all of your great works. If you design a site for a lawyer, know all the things they would want to have on their site.
Should be afraid to brag – tell all the people if you get a high profile endorsement.

Outline property of the CSS is a confusing property. When this property is learned first, it is hard to understand how the CSS Outline property is even remotely different from border property. WWW explains that it has the following differences.

• Space is not utilized by Outlines
• Outlines can be non-rectangular as well.

Outlines don’t take up space

The above statement is confusing. Just think that how objects in the webpage cannot take the space on WebPages. The outline property does not take the space because it will always be placed on top of the element’s box.
Around an element, if an outline is placed, it does not have any kind of effect on how the elements are placed on the page. It will not change the position or size of the element. If the outline is put on the element, it will surely take the exact amount of the space, as it did not have any outline on the element. In the border’s case, this is not true. On an element, a border is added on the height and outside width of the element. Therefore, if there were 50-pixel wide along with a 2-pixel border, then it would take 54-pixels. The same image along with 2-pixel outline will take only 50-pixels width on the same page and the outline will display the images outside edge.

Outlines May or may not be Non-Rectangular

Whenever you put up the border on the element, the browser will interpret the elements as if they were one of the giant rectangular boxes. If the box is split over many lines, the browser will just leave the edges open, as the box is not closed. It is as if a browser is seeing the border along with a wide screen, which is too wide to be measured. The wide screen is wide enough for the border to be continuous rectangle.
In contrast, the edges are taken into consideration by the outline property. If the outlined element is spanned over several lines then the outline will close at the line’s end and again re-opens on the next line. If it were possible, then the outline would definitely stay fully connected and thus it creates a non-rectangular shape.
The outline property must be seen and it must be compared with the border property.

Uses of the Outline Property

Searching the items is the best use of the outline property. Most of the websites will do this using a background colour. However, the outline property can also be used and you need not worry about adding the extra spacing on the pages.
Outline colour property will accept the term ‘invert’ that will make the outline colour the inverse colour of current background. This will allow you to highlight the elements on the dynamic WebPages even without the need to know what are the colours used.
Around the active links, there would be some dotted lines and to remove them the outline property can be used.

CSS line spacing is obtained by using CSS-line height property. This has five different values

Normal – a browser will determine the value of the line spacing that will be related to font size. Usually, this is same as that of the font size or it is slightly larger

Inherit – line spacing must be taken from parent’s elements line spacing. Therefore, if you set up the line-height of the body tag to about 30% larger than that of the font size and paragraphs tags inside will inherit and then they will have line height of 30% larger than that of the font-size as well.

A number – if these line height values doesn’t have u nit of measure, then would be considered as the font size for line height.

A length – if these line height values has unit of measure then that will be the exact amount of space, which should be there between the lines.

A percentage – if line height is percentage, then that percentage would be the font size percentage. Therefore, if a line height were 125% then it would be 25% larger than that of the font size.

Which is the value that should be used for CSS Line Spacing?
In the majority of the cases, one of the best choices for the line spacing is to set up the default spacing or normal. The default or normal are generally readable and it doesn’t require any special things to be done. However, if the line space is changed, it gives different look to the text.
If the font size is defined as the percentages or ems, then the line height should be defined in the above stated way.
Set up the height for the print style sheets along with a point value. Print measure is the point and the font sizes should be in points.
Few people do not make use of number choice, as it is confusing to people. Most of the people think that number is perfect size and because of that they make it large.

How much space must be used for the line spacing?
As it is mentioned above, it is always recommended to use the default size in line spacing and if you want to change the line spacing, you should have some specific reasons to do. There are different affects while changing the line spacing
It is difficult to read the text that is too tight together. However, the mood of the text will be affected by the small line spaces. If the entire text is crunched altogether, then it is able to sense the text tenser or seem darker.
It will again be difficult to read the text, which is farther apart. However, if there are wide line spaces, then the text seems to flow.
Changing the line space will be able to make the text otherwise would not fit in the space be compact or would take large space in the designs.
If you want to see what will happen in the various line spacing options, you have to check the examples of CSS Line Spacing.