Freeman Business Services

Making a basic site using CSS and HTML

Well this seems to be something that a lot of people interested in making a website have problems with. CSS and HTML can make some great sites. Everyone gets so wrapped up in process of making their sites they forget the fundamentals of how to do. They begin experimenting with different mark up languages, obsess about database connectivity, graphics, and how to make them work properly.

Here is what the site will look like, this is not a complete page nor is it supposed to be, this is just to give you an idea on what it can look like.
Click Here

This tutorial will revolve around the starting point of making your own web site using external style sheets, and standard HTML mark up. I have made this tutorial so that a beginner can learn the process, but on the same hand I have also made this for the advanced users to get a refresher course in making a decent webpage without all the bells and whistles that they feel have to be used like Flash,  ASP, Javascript, .NET, and PHP or any Database usage. Although I will make another topic regarding these other ideals for web design development in the near future.

So lets Start:

I know that not everyone can afford programs like Dreamweaver by Adobe, So I will only use Notepad to create this site. This basic page can also be made using Windows wordpad or any other text editor. That doesn't mean you can't use any programs like Dreamweaver, NVU, Bluefish, etc.. Don't try using MS Word or Open Office to save these files as html using their built in process, otherwise you won't be able to change the renderings like you may want.  The Images, and HTML code are all free for your personal use, however I would recommend adding your own images, and making modifications to the CSS file, and HTML code to make the site yours. Remember to save your file as you progress so you don't lose any information.

If you want to follow along with the process, the images, css file and the HTML source code are available in a zip file Here


First lets look at the basic points of the html code, you will need the following information

This is the primary parts of the HTML Source. The head tags are where you would put your search engine information, site title, and the programming part to get the CSS file. We will look at the CSS file  later in this tutorial. The body section is where all the content that you are placing on the page will be rendered on the vistiors browser. Without any information in the body tags you end up with a blank page in the browser. To see this save the file as tutorial.htm after making sure you select the file type as All files under the file type section of your save screen.  I will use the .htm extension throughout this tutorial, if you would prefer to use the .html extension it will make no difference. Then you can open the page up in your browser right from your computer.

In your Head section enter the following information
You can replace the information between the two tags with your site name. The title tags place the name of the site in the top of browser above the address bar.

leaving this blank will cause you to have "Untitled Document" as the file name and the search engines won't find the page easily.
Now we will add some content to the page so that it has some information on the screen.
now in between the body tags put  your information.
now if you save your file, you will see what you just typed in your browser when you refresh the page, Pretty boring isn't it. You can't even tell where one paragraph ends and where another one starts. This is where your various tags come in to play. First lets mark them as paragraphs. Add the make the following changes to your content then save the file and refresh your webpage in your browser.
See how you now have spacing between the paragraphs and a Title that stands out? The <h1></h1> tags denote the topic title of your site. This is also known as the stie header. The <p></p> tags denote where a paragraph begins and where it ends. The <br> tag is a page break, this is used to break the sections up so you don't have run on sentences in the subject. You use the <p></p> tags for every change in the subject matter like you read in a book. Consider each section as new chapter of information for your visitors. Wouldn't  a Picture of a tree look nice here? So lets add one This is where the img tag comes in.
Save your code again, and refresh the browser page that you have it on. Hmmm, seems we have a lot of white space, areas without any text or pictures, on the page now. Don't worry about that at the moment. We can fix that with the CSS file.
One thing to remember with any images whether they are JPG, GIF, or PNG formats, you need to keep the file size as small as possible usually around 110kb or smaller.  This can be done with graphic editors like Adobe Photoshop, Corel Paint Shop Pro or even The GIMP you can find links The GIMP.
 The bigger the file the longer it takes to load, also don't load your page up with a whole lot of graphics. The more graphics you have on the page, the longer it takes for the page to load. In return your visitors leave the site and won't come back. A good rule of thumb is no more than 4 graphics or images per page not including your header if you use a graphical one like this site uses, also don't believe the old saying that bigger is better, with web design that is not true, it's more a case of the smaller the better. This only relates to file size not necessarly image size.

Now you should have all your information in the web page, I won't do it step by step here but remember the source code is available at the end of the tutorial. But what if you wanted more than one page? You still have a pretty boring page with maybe a couple of images or graphics, but no links to get to those pages. we will do those next. This information goes in between the body tags, above the header tag, <h1></h1>. If you are using a graphical header like this site does, than you put the links below that section. To accomplish this you use the <a href=" "></a> tags. These create the links for you in a classic horizontal layout across the top of the page.
the way this works is fairly simple, in the code above where that "#" is you would replace this with the next page to go to like "plants.htm" and between the greater than and less than symbols > < you would place the page name so your code would look like this
and the browser will render the link like this

Types of Plants

thats still pretty boring isn't it. so lets spice it up with CSS or the external stylesheet. Now the fun of setting your website the way you want it to look comes into play. If you remember correctly, you have all the information pushed over to the left side of the browser screen. say you want your links go vertical, to the left of the information. this is where layers come in using css. First we have make the page know that you are using an external css file. so you would put a link to your stylesheet file under your title.

This tag assembly tells the browser to get the design layout from your style sheet. Now we will create a basic style sheet to help this work. There are number of sections in the stylesheet and they can all be called into use by using <div id> tags and <div class> tags. you will see both in use. A little info on the div id and div class. You have to make sure you use the correct tag with the corresponding section.

When looking at a Stylesheet for the purpose of designing a web page, you need to know what is used for which tag.
In a CSS stylesheet any section starting with a period (.) is used with the div class  tag. If they are listed with the pound symbol (#) then you use the div id tag. So lets look at a basic CSS file.

This is a common CSS file.  As you can see there is a lot of information there. but we will make this quite easy to work with. We will be adding some parts and removing some parts so lets get started shall we.
This section gives the general commands on how the body will look. as you can see it describes the background color of the page, what font to use, what size the font is, and what color the font should be. the next step is to get your image to float to the right and remove the dead space that is left to the left of it. This is called layering. It seems a little daunting at first, but it can be done quite easily. This will use the "content class" and the "content img class" of the above css file.
The next section will take care of the actual title as it shows on the page.
To make this do the changes you need to make changes in your html code inside the body section. Remember where we had the <h1>Plants of Life - how plants allow us to live</h1>> that is what we are going to change. so now it will look like this

now we make the content work the way we want it to. What we have to do is make it look the way you planned. First you need to set your content class and your content img class.  to look like the following.
for the text to wrap around the image, you need to pay more attention to the "content img" section of your CSS. particularly the margin and padding section. To make this work you will have to add the following line to your html file just below your subtitle line so it looks like the following.
You will have to put a closing div tag </div> just above the closing body tag of your page. so it will look like this at the bottom.
now we need to look at the navigation links. that is this section of the CSS page.
The #nav part takes care of the initial block look, width, font type, and colors for the links. The #navLink section covers how the links behave when the mouse rolls over them. If you are familiar with javascript this is the same as the "OnMouseOver" command. To make this work in the html file you make the following change.
Notice how I don't  add another div tag before the <p> tag. The <p> tag will act likes it's own div tag and you won't have to worry about adding another, especially since it will wrap around the image with the text.
With the original design I have also placed a second image further down the page and used a div id tag called "filler" and "filler img".
If you look closely you will see that just copied the content class and content img class information over and made one small change. I changed the float command to right, and made changes to the padding section in the filler img by changing the second 10px to 0px. This will allow you to have two pictures on opposite sides of the page in different sections. You can't just place anywhere in the text file to work though. You have to make sure that you follow a closing tag. In the section I did I added the line like this

Since this as far as I went with the text, I put the closing div tag just above the the one at the end of the file so now it looks like this.
now we have the footer section. This is the section where you place your copyright notice, contact info if you want and any other information you may think is important to place there, I usually just place the copyright info, and webmaster contact email. If you place your email address on the site, I would highly recommend using a unicode converter to help you reduce the amount of spam or junk mail you can get. You can go to a free website that will do this for you at http://www.pinnacledisplays.com/unicode-converter.htm.
So lets make the footer information. If you use the actual page design for your website you must leave the footer information as you see it as this is covered under proprietary and intellectual rights.
So in the footer section of your css sheet, you need to make the following changes.
and then in the web page you  have
and there you go a basic web site, designed with CSS and basic HTML that is professional looking and is also W3C compliant.