When I was first starting out in web design I really wish someone would have just said here you go here’s a basic web design just play around with it and see what happens.
So… BAM! Sign up to helpmemakemywebsite.com and get your FREE basic 3 page website with html tutorial.
The file comes with four files the index, about us and contact us pages and the images folder. The images folder will need to be in the same parent folder as your html file when uploaded to your FTP. This is just the way most websites are structured. You can of course name the folder what ever you want but that will need to reflect in the html code. Play around with it and see what happens.
The html code web design is made up of a table, it has a main header which you can put your company logo or whatever it is you want up there. I have made the width of the table 900px this should be fine with all modern browsers now. Under the header there is a small row for the navigation bar.
If you have more than one page you will need to link each new page to each other. The best thing to do is get your template, so the basic features that will be used on everypage completed then duplicate the html file and rename to suit each page. For example you would name the about us page aboutus.html, of course you can name it what ever you want just along as you remember that the name of the file is the name you need to link to.
Under the nav bar will be our main body this is where you can put images and text. Remember that this is only very basic html tutorial and if you want further options you will need to inject some css web design into the site. I will cover this in the next html tutorial but for now you will be able to put headings and text with images.
At the bottom I have put a full width footer here you will be able to add some final details about yourself or company. I would suggest your address and contact details as a good place to start with the footer.
This is the basic layout of the website.
I’ll explain a bit further in detail how each section works.
The header will be fixed at 900px and I have set the height at 150px for the height but this can be edited to suit the size of your image/logo. The width can be edited also but to start I would recommend sticking to 900px. If you just have a logo this can be put in but you will need to set the alignment to the image otherwise it will be centred.
To align an image you will need to set the code like this:
<img src=”logo.jpg” alt=”My Logo” align=”left”/>
If your logo or image you want on the top has a background and you need to know how to remove the background you need to check this post out. If you want to set your logo to return to your homepage you will need to make the image link to your homepage, so for example:
<a href=”index.html”> <img src=”logo.jpg” alt=”My Logo” align=”left”/> </a>
This will make it so when a vistor clicks your logo or image it returns them to the homepage.
This is again fixed at 900px and can be adjusted to what ever height you want it to be, for the minute I have set it to 35px. This is where your vistors will be able to navigate around your site. On a basic site I would say your going to have 3 pages. Homepage, About Us and Contact Us. In this tutorial I will work on that model.
So in the html doc you will see in the nav bar I have made it so you have a Home Link, About Us and Contact Us link.
These can be edited as you see fit or added to by duplicating one of the links and adding it. Remember though any changes you make to the page have to be duplicated on every page.
The main content is where all your information will go, if you know know how html code text then you’ll need to quickly go through my basics of learning html [http://web.archive.org/web/20120110083441/http://helpmemakemywebsite.com/?p=121] tutorial. It is all quite simple though and won’t take long to get the basics together. This box has no set height you can set it if you wish or just let your content dictate the size of the main content box. You will notice I have put an image in the text, this is done by placing an image on top of the text in the html and then aligning the image to the right. If you would prefer the image to the left it will just need the html re-aligned to the left.
The footer will be fixed at 900px and I have set the height at 150px for the height but this can be edited to suit the size of your image/content. The width can be edited also but to start I would recommend sticking to 900px. N.B You will need to make sure all the widths are the same otherwise it is going to look a mess.
In the footer I have made it an image at the top follow by text with a different background colour just to give it some style. This is done by just entering the image in the <td></td> tags then following by with the content.
* STYLING THE TABLE WITH BACKGROUND COLOURS:
The background colour will need to either be put in the main table tag or in the td tags and you will need to use the hex code for the colour:
* INPUTTING AN IMAGES:
The images will need to go in your images folder, of course there are other ways to do this but I find this the easiest:
Lastly with using just html code there is no way to put text over images for this you will need to move onto css which will be covered soon. Well thats all for now in this html tutorial enjoy the web design template and best of luck. Any questions feel free to contact me.