Joshthegreat 0 Report post Posted March 10, 2005 New to HTML? try this simple website layout to get you started.Well, start your site by creating a table to display your content. <html><head><title>My Webpage</title><STYLE type=text/css><!--@import url( yourname.css );--></STYLE></head><body><table width="700" border="1" cellpadding="3" cellspacing="0" align="center" class="MAIN_TABLE"> <tr> <td valign="top" height="100" colspan="2" class="CELL"> Your banner </td> </tr> <tr> <td width="15%" valign="top" height="25" class="CELL"> Menu </td> <td width="85%" valign="top" height="25" class="CELL"> Main Content </td> </tr> <tr> <td width="15%" valign="top" height="400" class="CELL"> <li><a href="link">Link</a> <li><a href="link">Link</a> <li><a href="link">Link</a> <li><a href="link">Link</a> <li><a href="link">Link</a> <li><a href="link">Link</a> </td> <td width="85%" valign="top" height="400" class="CELL"> Your Main Content </td> </tr></table></body></html> Save this file as 'Yourfile.html'You have to say that if you have seen this file in action, it's really very dull.So... Lets liven it all up with some css.CSS can look quite complicated at first. Well, don't let that scare you away. It's actually quite simple. BODY { BACKGROUND-COLOR: #0066CC; FONT-COLOR: #000000; FONT-FAMILY: verdana; TEXT-DECORATION: underline;} Save this file as Yourname.css.You will notice that all this will do is make the bacground blue, and change the font to Verdana. This really doesn't do too much for your site. So lets spruce up the links shall we? A { FONT-COLOR: #0066CC; }A:hover { FONT-COLOR: #000000; TEXT-DECORATION: none;} This will make the links blue with an unerline. It will also mean that when you hover your mouse over the links the unerline will dissapear, they will turn black and the text will become bold.Well your site will still be looking quite dull. So lets spruce up your table adding the class tag in your html. You'll notice in the table code at the top of the page you'll see class="MAIN_TABLE". This defines the table to you can customise it's appearence in the CSS. .MAIN_TABLE { BACKGROUND-COLOR: 000000; BORDER: 1px solid #000000; } This will make the main table background black.You'll also notice that in the html there is a class="CELL" bit of code on all of the cells. So lets spruce them up. .CELL { BACKGROUND-COLOR; #FFFFFF; This will make the cells white.Well you can add whatever content you like and you may want to add some background images and regular images to make it look better. Also change the colors to suit what you want it to look like.Well, hope my basic tutorial has helped some of you. If I happen to have a made a mistake somewhere, please tell me. And I'll correct it. Share this post Link to post Share on other sites
Raptrex 0 Report post Posted March 10, 2005 pretty nice even though i didnt try iti just looked at it really quick but its excellent for beginnersi wish i had this when i started Share this post Link to post Share on other sites
NotoriousZach 0 Report post Posted March 11, 2005 I agree great job....The basic stuff can help the people trying to learn HTML. Share this post Link to post Share on other sites
Joshthegreat 0 Report post Posted March 23, 2005 Thanks for your comments guys. That makes me feel happy that I can actualy contribute with a good tutorial. I'll probably write some more ones now, hopefully they'll be as decent as this one. Share this post Link to post Share on other sites
HmmZ 0 Report post Posted March 23, 2005 Nicely detailed and covers some important basic aspects, thanks for your great tutorial Share this post Link to post Share on other sites
rectab 0 Report post Posted March 25, 2005 pretty nice even though i didnt try it Share this post Link to post Share on other sites
yoofus 0 Report post Posted March 25, 2005 Good work Josh, I didn't try it but it will really help beginner webmasters. Share this post Link to post Share on other sites
snlildude87 0 Report post Posted March 25, 2005 I agree with what everyone said - nice simple tutorial! The only thing I don't agree with is using tables for positioning because the browser has to render every aspect of the table first before displaying your site.Other than that, way to go! Share this post Link to post Share on other sites
demongaara 0 Report post Posted March 26, 2005 ooo thanks a bunch, ive been looking for something liek this. now i need to learn how to slice layouts >< Share this post Link to post Share on other sites
yoofus 0 Report post Posted March 26, 2005 Do you mean slice in PS, because that is easy Share this post Link to post Share on other sites
spacemonkey 0 Report post Posted March 31, 2005 Just thought I'd say that rather than importing an external .css file through a "style" tag in the head, you could just put this in the head of the HTML document: <link rel="stylesheet" type="text/css" href="yourstyle.css" />And just an FYI: all attributes and css properties should be in lower case (except for specific classes that you define in your css -- those can be uppercase).Very good tutorial for beginners, teaches a lot of useful information. Share this post Link to post Share on other sites
Joshthegreat 0 Report post Posted March 31, 2005 Yeah, I just prefer using the import CSS tag rather than the link tag. I guess that's just me. I find the CSS one eaier to remember, I always find myself forgetting the link tag for some reason. Share this post Link to post Share on other sites
choetry 0 Report post Posted April 4, 2005 I don't know about this much but I tried it on Microsoft Frontpage and it looks really nice... however i have a question (might be silly):Take the page you have created in your tutorial, and I want that to appear in my every page, with everything the same in every page except the main content. And one day you decide to add one more link to that column under 'menu', do i have to add it manually to every page or how can i just do it once and the rest of the pages auto-update by itself?thanks Share this post Link to post Share on other sites
Joshthegreat 0 Report post Posted April 5, 2005 save the page as .phpNow where the menu is, copy and paste the menu part of the code into a new file and name it menu.html. Now where ther menu used to be type in <? include('menu.html') ?>.This should mean you only have to change one file for every page. Share this post Link to post Share on other sites
Adamrosso 0 Report post Posted August 8, 2005 great tutorial. will defantly help the beginners to html Share this post Link to post Share on other sites
