Make Your first web page
A tutorial for beginners
Now that you have a nice domain name you can start creating your website. For this you need web building software. I've used Kompozer for this website, Kompozer is for free (get it here).
So where to start? First we need to make a layout for your main page and sub pages. Make sure it looks good and is easy to maintain. Thats not a big deal when you get used to CSS. By the end of this tutorial you will have a basic build of your website, and a lot more understanding of CSS and a bit of HTML. So a good base to further improve on.
- First create a new folder wherever you like (Desktop recommended for easy access), name it after your site. In that folder create two new folders called CSS and Images. In the CSS folder create a new file called 'css.css'
- Open Kompozer and create a new page select "strict DTD".
Go to file: save as, enter a title (a description of your site). Save it as 'index.html' in the newly created folder (very important or else your webhost will not recognize it as the main page) this folder is called the "root folder". The first page a person sees when visiting your website is always called index.html.
This is what your Layout should look like:
Everything that's visible is placed in the <body>. Note that some elements are placed within other elements, your elements should be placed in the #wrapper or else the elements would just stack on top of each other (like a bad tetris player).
- Now click on the CSS CaScadeS, then click on the top left button, scroll down to linked style sheet. Now type in the url of the folder where your CSS file is located > Choose File > Create Style sheet.
- Create a new style rule:
Top left scroll down to Style Rule type in the box: *
Note: The * (Astrix) is a universal code that will affect everything on your page.
Click create style rule
Note: In this area (general) you can type the CSS commands or specify them in the tabs. The latter is advised for beginners.
Go to the "box" tab. Leave everything as it is, except the margin and padding. Set for these two attributes all values to "0px" (zero pixels)... This makes sure everything connects properly on your page.
Create another CSS rule an ID attribute name it #wrapper
Go to the "box" tab again.
Change these properties:
Margin: left = auto
Margin: right = auto
Width: 800px
Note: The wrapper style rule will ensure that everything that you put in it stays centered and will not exceed 800 pixels.
Create these style rules: #top, #menu, .left, .right, #bottom.
The "box tab" values for these styles:
#top
Height: 100pxWidth: 800px
go to the "background tab" and choose a color: blue
#menu
Height: 20pxWidth: 800px
background color: silver
.left
float: leftheight: 600px (for now)
width: 600px
background color: green
.right
float: rightheight: 600px (for now)
width:200px
background color: yellow
#bottom
float: left height: 20pxwidth: 800px
background color: pink
Note: "#" stands for ID, "." for Class. ID is a unique style rule and Class is for multiple objects on the same page. So using Class for the "left" and "right" styles means, that you can appoint them to more than one objects.
Now the basic HTML part.
Go to your source tab (bottom left in your screen)
Your HTML code should look like this:
| <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Your Page Title</title> </head> <body> This is the visible area of the coding The body defines your layout and content This is where you place "div's". a Div is a box that contains your text, you can sign specific rules and attributes to them using CSS rules. Notice that every tag has a opening tag and a closing tag, there are a few tag's that don't have one like: <br> (breaks a line in your text -similar to enter-). </body> </html> |
Now create a div in the body with the wrapper ID.
| <body> <div id="wrapper"> </div> </body> |
Note: This Div will contain everything to the 800pix limit you set. You should place every div you make inside the wrapper.
Now put a new div inside the wrapper. The id will be "top"
So it will look like this....
<div id="wrapper">
<div id="top">
//your logo will go here//
</div>
</div>
Your logo usually goes into the "top" div.
Simply type the name of your company in the box for now.
Now your menu... create the "menu id div" behind the closing tag of your "top" div.
Type in the div something like (between the <div id="menu"> and </div>): Home | Links | Tools | About
And select a background color.
Next step will explain how to make the page in a two column page with the div's side by side. You will use the "left"and "right" classes.
Create:
<div class="right"></div>
By now you should have something like this:
- The bottom div will be your last one then.... create it and you can put something like copyright stuff in it.
Thats it people. Hope this was a good exercise, these are the basics of HTML and the use of CSS. When time goes by this will sound so easy to you. Just keep on clicking and you will learn as you go.
No comments
Post a Comment