Blog posts

Horizontal Navigation Bar with Rollover

Posted on Fri, 2006-05-26 22:03

Horizontal Navigation Bar with Rollover

This tutorial with guide you through how to make a horizontal navigation bar with a rollover.

Preview Navigation Bar in action

Basic table layouts

Posted on Tue, 2006-05-23 21:11

Basic table layouts

This tutorial guides you through how tables work and the simplest coding behind them.

Firefox Web Developer Extensions

Posted on Mon, 2006-05-22 22:29

Firefox Web Developer Extensions 

Not a tutorial so to speak but more of a list of some of the extensions that are helpful for web developers.

The homepage for the Mozilla Addons site is here.
Due to obvious reasons this will not work in IE.

Stylish Vertical links

Posted on Sat, 2006-05-20 22:01

Vertical links

This tutorial with guide you through how to make a vertical bar with links.

View preview

Colour Hex Codes

Posted on Sat, 2006-05-20 20:37

Colour chart

Provided by: ILoveJackDaniels

Basic CSS formatting

Posted on Sat, 2006-05-20 20:34

Here are some simple text formatting and general theme colours.

Default text settings used on all pages that aren't defined by other CSS and text within tables. Font set to Georgia, if Georgia is not avaliable Times New Roman is used. Text size is 14px and is black.

body,td,th {
font-family: Georgia, Times New Roman, Times, serif;
font-size: 14px;
color: #000000;
}

Settings for the page layout. Background is set to white, no margins.

body {
background-color: #FFFFFF;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}

Links, all links unless stated elsewhere use the Georgia font with font size of 12px and the font is green.

a {
font-family: Georgia, Times New Roman, Times, serif;
font-size: 12px;
color: #009900;
}

Blank index file

Posted on Sat, 2006-05-20 19:40

Some web hosts don't have a managing tool for indexing folders.

For example some web hosts, if you typed in the link to it such as http://www.website.com/images/ then you will get a list of the files that are in that folder unless there is an index file in the folder, in which case it will open the index file.

You don't have to use a blank index file you can use a redirect index page.

Blank Index Page 

For a blank index page with minimal file size you can use this code:

Using Anchors on websites

Posted on Sat, 2006-05-20 19:30

Anchors allow you to specify a place on a page that you can link to, to move the page to that point without needing to scroll down.  This is very handy on pages that are very long with a lot of content.

Back to Top links

Just below the <body> tag add this code:

<a name="top" id="top"></a>

This adds an anchor at the top of the page.

To create a link to the top of the page you need to use this code:

Typical META tags

Posted on Sat, 2006-05-20 19:21

Meta tags are on the out these days but some search engines still use them.

Here is a list of the more important meta tags:

  • Description
  • Keywords
  • Copyright
  • Revisit-After
  • Robots
  • Audience
  • Author 
Description

<meta name="description" content="Type a description of your site here.">

Keywords

<meta name="keywords" content="Keywords associated with your site, seperate with commas">

Linking an external CSS to your website

Posted on Sat, 2006-05-20 19:12

Intro

CSS = Cascading Style Sheet.

The support for CSS in all browsers is getting better and better.

How do I link an external CSS file?

Copy the CSS code from the <head> of your page and paste it in a new file with the extension .css

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

Put this in your <head> section instead of your CSS code.

Pages