The Robots Meta Tag is used mainly when you don’t want search engine spiders to index a webpage or to follow the links on a webpage. Another way to control this is through a robots.txt file. But here I’ll just discuss the Robots Meta Tag.

When a webpage is indexed in search engines it means that the page is in the Search Engines database. So when someone searches for keywords related to your indexed page, your page will show up in the Search Engine Results page. The follow directive tells the Search Engine to follow the links on that page as well.

The default behavior if this tag is not specified is for the search engines to index the webpage and to follow the links as well. So it’s not necessary and not recommended to add the below code to a page if you want it indexed and followed.

<meta name=”robots” content=”index,follow”>

If you want a webpage indexed but don’t want the links on that page to be followed then you’d use the directive below. Generally if you have an outgoing link but don’t trust the link, then it’s wise to use the nofollow. To specify the nofollow for an entire page, use the Robots Meta Tag below. This would apply to all links on the page.

<meta name=”robots” content=”index,nofollow”>

If you want specific links not to be followed, not all links on the page, then you wouldn’t use the above directive. Instead You can specify nofollow per link using the below link link tag example.

<a href=”contact-us.html” rel=”nofollow”>Contact Us</a>

Most websites contain pages that we want the search engines to index so that internet surfers may find them when looking for information on our website. But there are times when you don’t want a page indexed.

For example you may create a website just to share family photos not with everyone on the internet but just with family and friends. Another example is when you create websites for your customers that you share only with customers and not with the public. In these cases it’s a good idea to add the Meta Robots Tags directive for noindex and nofollow like the example below.

<meta name=”robots” content=”noindex,nofollow”>

Then there are cases where you don’t want a page to be indexed but you want the links to be followed. Good pages to do this on are utilities pages, like contact us, privacy policy, and terms of use pages. Use the below directive in these cases.

<meta name=”robots” content=”noindex,follow”>

Here are some examples of sticky note like CSS boxes you can add to your website. You can use them for quotes, for special ads, for sign up forms, free giveaways, etc. They can be used for anything you feel like needs to be highlighted in some way. They look pretty cool and grab some attention.

Each CSS floating box includes the CSS code and HTML code you can use. Just copy and paste it to your documents.

The CSS Code

.plane-sticky { padding: 10px; background: #FDFB8C; width: 200px; height: 200px; }

The HTML code

<div id=”plain-sticky”>The text inside the box goes here</div>

The CSS Code

.sticky-handwriting {
padding: 10px;
background: #E57895;
position: relative;
bottom: 5px;
right: 5px;
width: 200px;
height: 200px;
font-family:’Brush Script MT’,Phyllis,’Lucida Handwriting’,cursive;
font-size: 26px;
color: blue;
line-height: 1em;
}

The HTML Code

<div id=”sticky-handwriting”>The text inside the box goes here</div>

The CSS Code

.bordered-sticky {
border: 2px solid #363636;
padding: 10px;
background: #2f9be4;
position: relative;
bottom: 5px;
right: 5px;
width: 200px;
height: 200px;
font-family:’Brush Script MT’,Phyllis,’Lucida Handwriting’,cursive;
font-size: 26px;
color: #363636;
line-height: 1.1em;
margin-left: 10px;
}

The HTML Code:

<div id=”bordered-sticky”>The text inside the box goes here</div>

The CSS Code

.sticky-shadow {
width: 220px;
height: 220px;
background-color: #3f3b3b;
color: inherit;
margin-left:10px;
margin-top: 5px;
}

.bordered-sticky {
border: 1px solid #3A7197;
padding: 10px;
background: #fdfb8c none repeat scroll 0% 0%;
position: relative;
bottom: 5px;
right: 15px;
width: 200px;
height: 200px;
font-family:’Brush Script MT’,Phyllis,’Lucida Handwriting’;
font-size: 26px;
color: #3A7197;
line-height: 1.1em;
margin-left: 10px;
text-align: center;
}

The HTML Code:

<div id=”shadow”><div id=”bordered-sticky”>The text inside the box goes here</div>
</div>

Just when you begin to feel comfortable with HTML and really get to grips with website design along comes CSS. But don’t fear, if you could learn HTML, then CSS will be easier.

One of the main problems web developers face, is the number of different browsers that are likely to be used to read their website. Just when you get the site to work fine with Firefox, IE or some version of IE has a problem with it.

All browsers tend to render or interpret the HTML code slightly differently. So they all read the words correctly but the story doesn’t always come out the same.

This is where CSS or Cascading Style Sheets come into the picture. CSS is a programming language that specifically addresses the interpretation of the base HTML code. So, in essence, the HTML coding tells the browser what the web page consists of and where to find it and the CSS code tells the browser how to display it on the viewers monitor.

Occasionally your browser may read the HTML before it reads the CSS and then you have the cases where you get a momentary flash of un-configured text before the page loads correctly.

I’m sure most people who surf the net regularly have experienced this and it is one of the best examples of CSS at work. Another good example of this is when you open sites that are garbled with overlapping text and graphics that are clearly not what the author wanted as an end result. This happens when the CSS block is missing or corrupted.

This also happens when you open sites with a browser that does not support CSS such as those sometimes found on mobile phones. For this reason web developers need to think pro-actively when they design so that, in the event of the site being opened by a non-CSS enabled application, the content will at least make sense.

CSS is also particularly powerful when it comes to configuring content for different output protocols such as on screen, print or even speech and Braille browsers for impaired users. The code also tends to make for slicker, less complex site structures with minimal code repetition.

CSS coding syntax is also pretty simple by comparison and consists of 3 basic parts that are generally laid out in this way
selector { property: value}

Let’s break that down a bit more. The selector indicates the actual HTML item you wish to address for example the header of your page. The property part of the code indicates the exact property of the element that you wish to specify e.g. The font. The last part or value indicator tells the browser which property will be applied for example Arial.

The completed code would look something like this
h1 {font-family:arial)

The browser would read this as header one needs to have its font set to Arial. Nice and simple. You can also combine multiple properties and values.

h1 {font-family:arial;background:#eeeeee}
So the above would mean header one is Arial font as in the previous example but the second property, separated by a semi-colon, means that the background colour is grey.

This may all seem a little complex at first but how to use CSS is very simple once you get used to it and the language is a critical tool for ensuring the cross browser compatibility that allows us to view sites accurately and as their authors intended.

And it makes for much cleaner and organized HTML code, with all the styling code out of the way and in one place. This separation of style and content is more maintainable and also much more flexible.

If you’re creating a website, you may want to Know how to learn HTML, you might be surprised at just how easy it is to achieve this. Not only are there many different resources available online, there are also plenty of how-to books, tutorials, as well as online or on-sight classes that you can attend if you want to have a more structured and detailed setting.

In short, HTML stands for Hyper Text Markup Language. It’s a language designed to create webpages. However, in regards to webpages, HTML allows for the creation of document-type structure by denoting structural semantics for text. This allows for things such as headings, paragraphs, lists, links, quotes, as well as other items.

HTML enables you to embed things such as images and other objects like videos or third party interactive tools etc. HTML elements in the general form in which the language is written. This language consists of what are called tags, surrounded by angled brackets, within a webpage’s contents. It is this format that helps write scripts, which in turn runs the page itself, factoring in appearance, layout and more when in regards to overall design and performance.

However it is more common now a days and much more practical to use CSS to separate the style or layout of the page from the content, so HTML styling elements are no longer considered good practice.

You can learn HTML online through how to articles and sample code etc. One of the best resources is w3.org. Practice creating a simple HTML document and learn only as you need to do specific things for your website for example. In time you’ll find that you will start to feel like you have a pretty good grasp.

No matter what learning path you choose in how to learn HTML, it is generally a good rule of thumb to focus one step at a time and start with the basics and take it from there. Many tend to rush, winding up more confused than is necessary, although there are plenty of resources available where you can practice coding.

A thumbnail image viewer can add a nice touch to your website when you have a gallery of photos or images that you’d like to display on one page. Your users will be able to view larger versions of the photos or images. This way you can display many more image on just one page.

Vegetables

You need two files to do this, the Javascript code and the CSS code.

1. First thing you need is the Javascript for the popup of the image. Right click here to download the Javascript. Select “save link as” to save the file to your computer.

2. You’ll also need some CSS code for the styling. Right click here to get the CSS code.

You also need images. You only need the larger size of the image, not the thumbnail. The thumbnail is taken care of in the code with CSS code. Just make sure the image is the size you’d like to display in the pop up.

Both files will need to go on your server somewhere. Make not of the path where you upload the files to. Then you’ll need to include them in your HTML code. Below is a simple example of how the HTML code will look.

The following two lines of code go in the <head></head> tags of your HTML file.  Make sure you change the path to point to right location on your website.  Replace “yourdomain” with your own domain name.

<link rel=”stylesheet” href=”http://www.yourdomain.com/thumbnailviewer.css” type=”text/css” />

<script src=”http://www.yourdomain.com/scripts/thumbnailviewer.js” type=”text/javascript” ></script>

Then add the code to the body of HTML code. Make sure to replace “yourdomain” with your domainname and “name-of-your-image” with the actual name and extention of your own image.

<a title=”This is a picture of vegetables” rel=”thumbnail” href=”http://yourdomain.com/images/name-of-your-image.jpg”>Vegetables</a>

<a title=”This is a picture of vegetables” rel=”thumbnail” href=”http://yourdomain.com/images/name-of-your-image.jpg”><img style=”width: 50px; height: 50px;” src=”http://yourdomain.com/images/name-of-your-image.jpg” alt=”" /></a>

Thats it. You can add as many images as you like to one page. This code may have some issues in older versions of IE. It hasn’t been tested in all of them. But it works in most major browsers.

How to CSS? Learning how to use CSS in your websites is one of the best things you can do to build a better website.  CSS is a powerful styling language used to format and style a website’s look and feel.  It has capabilities beyond in-line HTML formatting and is much more flexible.

CSS allows you to separate the content of your website from the way you present it.  Colors, font sizes, layout details can be inserted into an external document called a stylesheet.  This contains the CSS code which formats your html documents.

Making formatting changes to your webpages becomes much more maintainable.  You only need to modify a stylesheet, which is one file versus all of your html files.  As a site grows and you increase the number of html pages this separation becomes crucial in maintainability.

So how to CSS?  How do we separate formatting and styling exactly.  Let’s look at some examples.

Let’s say that the title of your pages are all within an <h1> tag.  And you want a specific font size, color, bold etc for that heading or <h1> tag.  So your HTML code looks like the code below.

<h1><font size=2 color=blue><b>This is the title of my page.</b></font></h1>

This is the title of my page.

So the above is my h1 look.  Now this is the title on all of my HTML pages.  Now lets’ say you have 50 pages on your site with the above code and you want to modify the color on your page titles.  You have to now go modify and re-upload 50 pages.

The better way is strip out the style and put it into an external stylesheet.  For example the above code would look like this with the styling stripped out.

<h1>This is the title of my page.</h1>

Then you create a stlye.css file which contains the code to style the above h1 tag like this.  You’ll have to include the file into the html page.  To do this you’ll add a line of code between your <head></head> tags in your HTML files.

<link href="style.css" rel="stylesheet" type="text/css" />

h1 {

font-size=28px;

color=blue;

font-weight: bold;

}

So now when you want to change this across multiple pages you modify just one file and it takes effect across all of you HTML pages.

If you have alot of styling in your HTML files, take the time to strip it out and create a stylesheet instead.  It will be worth your time in the long run.  It’s good to learn some basic CSS before you start and then use it and learn as you go.  The more you use it the more you’ll learn.

Question:
Is there a way to have different looks for different links?

For example, can some have a blue underline, some a different color underline, some no underline until someone hovers their mouse over them?

I was thinking about h1, h2, h3, etc. Is this kind of variety possible using a stylesheet, too?

Answer:
You can define different styles for each link. See the examples below. You’ll notice that the html portion of the code all look the same on the examples. But the CSS code for each one is different.

This is the flexibility of the CSS. You can modify the CSS file and the change will effect every document that uses it.

This is a blue underlined Link. When you hover over this link its color changes and the underline is still there.

The following is the HTML code.

<a class=”underlineLink” href=”http://www.example-link.com/example.html”>This is a blue underlined link </a>

The <a> is the HTML tag for creating a link. The class inside this tag defines the style element in your stylesheet. The href points to a document or webpage you want to link to.

This is the CSS code which goes in your style sheet.

a.underlineLink {
text-decoration: underline;
color: blue;
}
a.underlineLink:hover {
text-decoration: underline;
color: red;
}

This is a blue link but not underlined. When you hover over this link its color changes and it’s underlined.

The following is the HTML code.

<a class=”underlineLink” href=”http://www.example.com/example.html”>This is a red not underlined link</a>

This is the CSS code which goes in your style sheet.

a.no-underlineLink {
text-decoration: none;
color: blue;
}
a.no-underlineLink:hover {
text-decoration: underline;
color: red;
}

Creating an interactive css dropdown menu for you site is a great way to add some interactive element to your site and also to user’s can get to a place in just one click.

The nice thing about a javascript or css dropdown menu is that you can have many more links in your navigation and it’s a great way to organize your menus. Horizontal dropdown menus are more accessible than the vertical or flyout type menus.

People with arthritis or other type of mobility problems can have difficulty moving the mouse to the desired menu item. Sideways ones are even more difficult. It’s important that the menu incorporates some method of delay before it disappears.

If you have just a few links or pages on your site then a dropdown navigation may not be a sensible or choice. But if your site is large and filled with 100′s of pages a dropdown navigation is a great way to offer more links upfront in your menus.

Below is an example of a javascript and css dropdown menu that has some delay and is horizontal. It can easily be customized and re-styled to you basic needs.

Click here to download the files. Or right click and select “Save Link As”

Adding special characters to your website can sometimes become tricky.  Some editors interpret the code correctly and some don’t.  And sometimes everything looks fine on your computer then when you upload the page to your website, the characters are all wrong.

So the best way to insert them is to use the entity numbers or entity names in your codes directly.  Don’t rely on your editor especially if you’re having problems.

Here is a handy list of special characters and the entity codes needed to display special characters properly in browsers.

Characters such as Á and Õ need the entity number or entity name in your html code.

HTML Special Characters (Uppercase)

HTML Special Characters (Lowercase)

HTML links that are page jump are links that take you to specific part on the same page. They are used on long pages to make it easier for the user to click on a link rather than scroll down the page.

These links will automatically scroll down to a part of the page or link to a specific part of another page. Normal links take users to the top of a new page.

So how do you create an HTML link that’s a page jump?

They use the same <a> element as any link, but links that point to a certain part of a document. The part of the page that you want to link to will need be assigned a name.

So let’s say you want to point to the bottom of a page, assign a name to the bottom of the page by using the name element like this …

<a name=”bottom”></a>

Nothing goes in between the opening and closing tags.

Then create the link pointing to it by setting the href to the name above but with a pound sign in front of it. The pound is what distinguishes a page jump from a regular link that goes to a different part of the page.

<a href=”#top” href=”#top”>Click here to return to the top of this page</a>

The link below is an example that will take you back to the top of the page.

Click here to return to the top of this page

You can also place this type of link on another page on your website. Let’s say for example I want to link to the middle of a specific page from another page on your website. First you’ll need to assign a name to the middle of the page. For example: <a name=”middle”> <a>
The link will then need to point to the page name or the full URL with a #middle at the end like the example below. Make sure to change the URL to your own.

<a href=”http://www.yourdomain.com/yourpagename.html#middle”>Link to middle of the page</a>

Notice the link is the full URL to the page and then added at the end is the # and middle.
This link will work from anywhere even from another website.

The proper way to use links is to use them to link to another page. But if you must, use them wisely and don’t overdo it. Page jumps should only be used if a page is extremely long and it’s hard to break up the page into multiple pages.

One example would be to use them in Table of Contents as in PDF files.  Another one may be in long lists like that of FAQ’s.  You can list the questions up at the top of the page and then link them to the detailed answers lower down on the page. This way a user can see all the FAQ’s up at the top of the page without scrolling down.