Navigator
Home
Forums &
bulletin board
Web hosting
search/compare
FAQ
Level
Home
Where 2 Start?
Beginners
Intermediate
Advanced
Section
Design
Development
Promotion
Revenue
site wide
About
Links
Contact us
Privacy policy
Disclaimer
Build Guide Logo

Build a great website Everything you need to know Webmaster tools included

Blogging World
Introduction
What's new?
Blogging Servcies
Blooging Tools
news
Hosting GlossaryAll Definitions you need when you search for a web host
Apache Tutorial .htaccess commands tutorial
Soon How to move your blog to your own domain name!
What's new in the blogging world? Sitediary.com read about it
Yahoo 360 blogging new updates.

 

This section discusses the pros and cons of certain web designs

You should first note that the best design implementation is one you can change by editing one or few files and the change is reflected on all pages on the website, For example BuildGuide.NET or info2device.com are websites that are constructed with PHP, PHP is a dynamic web development scripting language, The websites are theme capable, the administrator of those websites (me) can change the design of such websites by simply making a new theme and installing it, i can also revert back to the old design with a few clicks in the admin area.

There are many ways to make the design changeable by editing a few files, one is Server Side Includes (SSI) usually comes with the extension SHTML, Although HTML is allot lighter on the server (all it has to do is send you the page), it is not really handy when modifications need to be made.

Anyway, SSI and scripting languages will be discuss later, for now let us just stick to choosing a design and implementing it in html, all you design now is one html template that should be applied to your website weather dynamic or static, with SSI or without.

The design of a page has a few factors to take into account, the look, Ease of use (how to navigate the website), How fast pages will load (loading time), what software needs to be installed on the user's browser (for example Macromedia FLASH player), And finally Cross Browser Compatibility.

Surely All your pages should have the same design, use the same fonts, and same color schemes, this is accomplished by using CSS (Cascade Style Sheets), A cascaded style sheet is a text document that will carry information about the style and design of all pages that link to it.

Lets start by making this sheet....

Start by making a folder (directory) on your hard drive, and name it whatever you like, over here i will call it web and place it on in my home directory (my C drive if you use windows), so i will have a directory c:\web\

From this point on i will assume you use Microsoft windows, you can surely use any other operating system, I will also assume you have made a directory called c:\web

Start by making sure your operating system displays the file extension (so we can rename them), In windows 2000 this is done by opening any directory (our new web directory for example), go to the tools drop down menu, then to folder options, A dialogue box will appear, If you go to the View tab (looks like a phone book thing) Remove the tick from (Hide file extensions for known file types), for those of you using  linux, file extensions are not hidden in the first place so this step is not for you.

Make two new text documents and rename the first to index.html and the other to style.css

after doing that, you have two files at c:\web\index.html and c:\web\style.css, open those files with notepad or any other text editor

paste the following into style.css

 

body
{
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
background : #000000;
color : White;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
margin: 0px;
scrollbar-face-color: #EBEDE8;
scrollbar-shadow-color: #D2D7CC;
scrollbar-highlight-color: #FCFCFC;
scrollbar-3Dligh-color: #FFFFFF;
scrollbar-arrow-color: #686868;
scrollbar-darkshadow-color: #1553A6;
scrollbar-base-color: #E0E0E0;
}

 

and paste this into index.html

 

<html>

<head>
<meta name="keywords" content="info to 2 device network info2device">
<meta name="description" content="The info2device network, Something for everyone">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>My First Web Page</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>

This is my first web page, all the colors come from a style sheet :) i even modified how my scroll bar looks !

</body>
</html>

Ok, Now your files are ready for use, Just double click (or click) on index.html.

If this does not work, you can open your browser, hit CTRL+O and browse to that file, then chose the file index.html

You should now see a page with a BLACK background and WHITE text, The colors are specified in the file style.css and the content in index.html

Do not panic if you don't understand how this happened ! It will all be explained in the next section, Please be sure to go with the guide step by step for best results.

Ok, so you have made a page, and a style sheet, But a nice design requires you to make many many html pages, If you are reading this to become a designer, you should master HTML and CSS, you should go through all parts of BuildGuide, if you just want to make a website, and like most of us (including me) not much of a designer (artistic sense wise) you would probably be better off getting some ready HTML template, If you would like to get ready html templates, some cheap templates are sold at the info2device website (mother website of buildguide.net) (Click here to go to the info2device html templates section).

You can also use software like MS front page to generate your html code, either way, some basics you must no to become a good webmaster, the following section is for everybody, after that you will find some optional parts that you may skip if you like, even if you do get the HTML templates, you should understand the following part of the guide, So, lets get to the next part, Over there you will understand what you have pasted in your index.html.

NEXT: Basic HTML / About HTML.