red-lineTutorial: HTML and CSS

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:
  1. 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".
  2. 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"
  3. Keep the coding of your website clean. Try to minimize the coding between the top of the code and the actual <h1> line. Place your javascripts into separate files and give a path to them instead of keeping the whole javascript code on the page, this will keep the code on top to minimum
  4. 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
  5. 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
  6. Match your description of your page to your actual content
  7. Eliminate the word 'free' if possible, you can use it on the images if needed
  8. 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
  9. 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
  10. Your website should have over 8-10 pages ideally to be ranked high
  11. 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 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: international packages

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:
a.pack_rollover {
display: block;
margin: 11px 0 22px 0;
width: 404px;
height: 90px;
text-decoration: none;
background: url("packages_international.gif");
background-position: 0 -90px;

a.pack_rollover:hover {
background-position: 0 0;

..and this code—for applying invisible under normal circumstances copy or title onto your image:
.displace {
position: absolute;
left: -5000px;

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 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

characterhtml code
•  bullet&#149; or &bull;
·  middle dot&#183;
™  trademark sign&trade; or &#153;
©  copyright&copy;
®  registered trademark&reg;
€  euro sign &euro; or &#8364;
@  at sign &#64;
♠  spade &spades;
♣  club &clubs;
♥  heart &hearts;
♦  diamond &diams;

characterhtml code
—  em dash &#151; or &mdash;
–  en dash &#150; or &ndash;
¶  paragraph &para;
«  left angle quote &#171;
»  right angle quote &#187;
‹  single left-pointing angle &lt; or &lsaquo;
›  single right-pointing angle &lg; or &rsaquo;
←  leftward arrow &larr;
↑  upward arrow &uarr;
→  rightward arrow &rarr;
↓  downward arrow &darr;

You could find more special characters at the

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.

Contact Us

Fill out the form

For all inquires, please kindly contact us via this form.
We will respond within 24 – 36 hours.


Where We are

Our office is located in South Florida, Boca Raton.
Give us a call today!


Find Us On


We work with many South Florida companies, located in Miami, Fort Lauderdale, Delray Beach, West Palm Beach, Jupiter, as well as with clients from Chicago, Moscow and Paris. Give us a call today!