Create a WebSite with CSS – Final part

This is the final part of creating a website with css.

Here we are going to discuss about creating a footer for our website.

From line 48 to 52 is a round cornered line. We discussed about this earlier, here is the same thing.

The footer start on line 54 and ends on line 57, the first </div> ending tag. The second </div> ending tag is for the wrapper that centred the page.

Here is the footer’s css code:

The End.

We finished building the website. Now you’ll probably say that is more work then making a website without css. For a small website you are right, but for a bigger website I’m telling you that css is the key to your success.

Related posts

• Building My First WebSite – CSS Tutorial
• Create a WebSite with CSS – Part II

Things you should know before starting to build your own website.

Related posts

• Search Engine Optimization (SEO)
• Create a WebSite with CSS – Part I

Choosing the right image types for your website

In this article we are going to discuss about the types of images that are recommended to use on a website and how to use images when creating a website.

So, what type of images are good to create a website?

Note: If you don’t know what type of images exists, you can read this article on wikipedia: http://en.wikipedia.org/wiki/Image_file_formats

To create a website it is recommended that you use three types: JPG, PNG, and GIF images if you must.

Why only three type of images? Of course that are a lot more types of images, but these three are the most used on the web.

Lets discuss about these types of images:

     JPG (JPEG Joint Photographic Experts Group – full name) this format is used by your camera to save the picture you take. This type of image I recommend that you use for the photos you use to create your website; and by photos I don’t mean navigation buttons in your website, for that is another type of image that you can use.

     PNG (Portable Network Graphics) this type of image is best used for your web-site’s graphics, and by graphics I mean: images for the web-site’s navigation menu, logos, backgrounds, and others images used to create the template of your website.

     GIF (Graphics Interchange Format) a image type that was replaced by the PNG type, but still used for creating websites. GIF images supports only 256 colours and are very ineffective if you have detailed images. I recommend you use this type of image as rare as possible. If you use this type of images, use it for simple images like a line, a bullet or something like that.

How is it best to use images when you create a website.

     – First of all do NOT use big image files on your website. If an image is bigger than 200 Kb do not insert it directly in your web pages, first resize it and then use it. For example if you have photos from your camera that you want to appear on your website,  first resize them and then upload the to your website.

     – Second do not resize your images with HTML code. It is recommended that you add the width and height of your image in the HTML code, but do NOT use this to resize your images. This is a very bad way to resize your images because this actually does not resize the images it just shows them at the dimension you specified but the images are still big and take a log time to load, slowing your website.

<img src=”your_image.jpg” width=”300″ height=”200″ alt=”Your Image” title=”Your Images” /> – the width and height should be the same with the image’s width and height, not smaller neither bigger.

- Use sprites whenever possible. Sprites are images that contain multiple images. For example if you have buttons on your website that have multiple states, this would be a good sprite: