html and css tutorial
SEO > > > > Search Engines
Lately, I've been asked a lot by my clients and friends about SEO—Search Engines Optimization for the websites.
As I work with SEO companies rather closely on some projects, I wanted to share the main points that will ensure that your website is search-engines friendly, which will bring it to the higher or highest rating in organic (i.e. not paid, un-paid) search.
Alright, so to my mind these are the most important steps to take to optimize your website:
- Always use the <h1> tag for your header of the page, and make it meaningful. It is better to write "Welcome to the Advanced Web Design Tutorial" vs just "Welcome".
- Match the page naming to the <h1> header on your page. Make no dashes in the page naming: "AdvancedWebDesignTutorial.html" is search-engines-wise a far better name for the page then just "tutorial.html"
- Keep the title of the page concise and unique if possible. Keep the Meta tag description of the page under 150 characters (around 15 words), and the title under 50 characters (around 7-9 words). As I learnt recently, the Meta tag 'keywords' does not influence the search engines ranking anymore
- Keep the content of your webpages unique. If your business is in a specific area code (I bet it is!), specify it in the body of your page—mention the city and zip code. If you know your business in details, show them up, be specific—the less generic your content is, more likely it will be given the higher rating by search engines. Make sure that your content is not duplicated anywhere on the web (i.e. you do not use the same wording in any of your websites, and make sure you don't copy and paste somebody else's web content, without seriously altering it prior to using it
- Match your description of your page to your actual content
- Eliminate the word 'free' if possible, you can use it on the images if needed
- Use meaningful 'alt' tags for your images, if image is too small or not vital, use alt="" as this will help greatly to understand your page by those people whose images are disabled
- Update 1 paragraph or 1 page on your website once in 1 or 2 weeks, search engines pay attention to such updates, and the websites with regular consistent updates get the highest ranking
- Your website should have over 8-10 pages ideally to be ranked high
- Create an XML site map for your website, it is essential for the visibility of a site by search engine crawler, as it helps the spider in faster indexing, allows search engine to rank correctly, and can set the priority for each page to crawl. To create and XML site map, go to any of the websites that generate these, such as xml-sitemaps.com. After the file was created, download it, and put it to the root of your website.
Rollovers > > > > Smart
rollovers via CSS
Here is an example—rollover it now:
Here is how:
You will need to create one image for both states of the image (active and not active)—one on top of the other:
Use this code for the image:
<a href="#" class="pack_rollover" title="international packages"><span class="displace">international packages</span></a>
Use this code for CSS:
margin: 11px 0 22px 0;
background-position: 0 -90px;
background-position: 0 0;
..and this code—for applying invisible under normal circumstances copy or title onto your image:
Why Handcode > >
> > ?
We think that HTML redactors, such as DreamWeaver, Visual Studio and others, can be effectively used for creation of simple website interfaces. But if you have a complex website, rich in design elements, you will have to handcode it, at least partly. Also, if you want your website to follow the new web compliance laws (check out that w3.org
site if you please) you'd just have to forget about Design Window in Dreamweaver to some extend, and work with these wild-running in times divs straight in the Code Window, i.e. handcode.
HTML > > >
> Special characters
| bullet||• or •|
|· middle dot||·|
| trademark sign||™ or ™|
|® registered trademark||®|
| € euro sign|| € or €|
| @ at sign|| @|
| ♠ spade|| ♠|
| ♣ club || ♣|
| ♥ heart|| ♥|
| ♦ diamond|| ♦|
| em dash|| — or —|
| en dash|| – or –|
| ¶ paragraph|| ¶|
| « left angle quote|| «|
| » right angle quote|| »|
| ‹ single left-pointing angle|| < or ‹|
| › single right-pointing angle|| ≶ or ›|
| ← leftward arrow|| ←|
| ↑ upward arrow|| ↑|
| → rightward arrow|| →|
| ↓ downward arrow|| ↓|
You could find more special characters at the DesignersToolbox.com
Common web typography
errors > >
Line lengths too long. Line spacing too small. Contrast too low.
Also, in some cases using Serif font for the body copy of web document will create quite a busy and hard-to-read look.