Stage 1 – Adding color and using ‘div’s

So far in this conquest I have been able to make simple, very simple introductory pages with html, using H1 tags and getting to grips with the small specifics for example body and head tags.

Now Ive got that down per say, Im looking at trying to make something a little more attractive. As in I don’t want a white page with nothing on! Reading around I have found out that tables are a thing of the past for laying out a website, and can be a hindrance to being found on search engines ( something else I will have to look at ). So ghastly tables out, using Divs in.

So what is a div?

A div is a fluid entity that can have pre-designed characteristics set with using a style-sheet(?). You can use them as columns, as a table itself and just to position text within an container. So, it seems, from what Ive read you can do a lot with these Divs. However, I have no idea what Im doing or how to use them. So Im going to start from scratch, by using divs to posotion the rough areas of my website, these being the menu, content area and a footer for links and all that good stuff.

Positioning my website

Im going to use the guide Im readings layout, because coincidentally it is exactly what Im looking for! I am not using an external style-sheet for now, however I will change over to one when I plan on getting my website online for an actual purpose.

my html layoutThis is what I want my end product to look like, so obviously I have used divs for each section, using float and percentage based widths so it is somewhat responsive and will fit all browsers.  In fact I have been reading around using either px or percentages, and I have decided I would like to preferably use percentages to position my content areas to add an aspect of responsiveness to my pages.

Leave a comment