Hosted Web Official Blog » HTML Tutorials

Basics: How to create a DIV

admin — Fri, 13 Mar 2009 09:15:03 +0000

We always start a div tag like this:

<div id=”divname“>

This is the opening tag, which needs to include the ID (name) or class. If you are only having a single div of this style then it would only require an ID, if you were going to style lots of DIVS the same then you would give it a class. What ever you use, be it a class or an ID make sire you call it something useful. For example, if its a login box you would call it loginbox. We will set up the class for the div in a few moments. First you need to close the div on your page. Make sure you close it after any content that it needs to contain. For example, if its a login box as mentioned above, you would open the div, enter the login box html, then close the div.

Style it!
Now you’ve got a div, but it doesn’t look like anything. So lets style it! I am going to give my login box height, width, a border and a background color.

}
#loginbox
height:200px;
width:200px;
border:1px solid #999999;
background-color:#EEEEEE;
}

I have highlighted the main parts that you need to make sure are included. Hopefully the styles are self explanatory with the exception of the border which has multiple values..1px solid #999999. The 1px is the border line width, solid is the type of border (e.g solid,dashed etc..) #999999 is the color of the border.

I hope this helps you create a div !

Prepair your web page for the Google monster!

admin — Tue, 24 Feb 2009 14:36:54 +0000

Preparing your web site for the big search engines can seem daunting, your constantly told that you need to be in Google to stand any chance of receiving visitors but how does it all work? What does Google want you to do?! In this article i will outline the very basic requirements that Google and other top search engines expect from you. This will at least get you started on the road to success.

Page title

Your web page title is the most important part of your site. Think of of your web page as a word document that you have wrote about a specific subject. The title tells the reader what the letter is about before they read it. Google reads your web site in exactly the same way, and your title tells Google what your web page is all about.

Example UK Web Hosting Services, Domain Registration

In the above example, our title is short and sweet, tells the user that we offer UK based web hosting services and domain registration. Its best not to include stop words like it, and, is, etc.. just include the words your looking to target. If your using multiple words use a wild card like | or full stop between your words.

Meta tags

After your title, there are some basic meta tags that should be present within your web sites tags, these are and . Below is an example of how your overall head tag should look.

UK Web Hosting Services, Domain Registration

When you have these tags in place, remember to keep your web sites content relevant. For example, don’t use the keyword plumbing when your web site is all about shoes!

Follow these rules and your web site should at least rank somewhere in Google for your chosen keywords. Just remenber to add new content as often as possible, this feeds Google and it loves new and fresh content!

Design your web page using SSI

admin — Sun, 22 Feb 2009 16:58:54 +0000

SSI or Server Side Includes can save a web designer lots of time and stress. Our website has been developed partially using SSI, the header and footer of the site is the same for each page, only the content of the page changes as you navigate. This means that when we change our sites header or footer the whole website is updated at the same time, nifty ay?

How we created our header

We started off by creating our header, you will need everything from the opening tag down to the start tag. For example;

This will form the header of our website, so we included our menu after the body tag. When you have this code, you need to save it. Create a folder called includes within your web sites root (this is where your included content will go). Save the header file as header.shtml

*Note that all of your html files need to be saved as .SHTML which tells the server that your working with SSI.

Then our footer

Once you have saved your header we need to create your footer, which is done by taking the code from down to which is the end of your html document, for example;

Again we wanted to include our footer menu here so we added this before the closing body tag. Save this footer into your includes folder just as you did with the header.

And finally content pages

Once this has been done you can start creating your sites content pages. These will be simply all of the content that would normally be within your body tags. The first line of each content page needs to call the HEADER, to do this simply type

This will call the header so that it appears at the top of your site. Do the same on the last line of your document with the footer.shtml. Once this has been done save the content page as you would a normal web page, for example if it is your homepage call it index.shtml. Save all of your content pages to your sites root folder.

*Note, when designing using SSI you will only ever be able to see your complete site when its on the server or within a web development program such as dreamweaver. This is because SSI is for the server so your home pc wont perform the tasks.