WEBSITE DESIGN BASICS
All about website design; useful information when building
your website whether you have years of experience or just a beginner. Use this
website to help you learn website design or as a reference for things you may
have forgotten.
HTML / CSS / META / TABLES / DIVS / ETC
Basic Website - CSS links - Meta - head & body - BG color &
images - tables - css id / classes & divs
XHTML - Doc types - sound - links - SEO - transparencies -
alpha opacity - iframes -
named anchor tags
-----------------------------------------------------------------------------------------------------------------------
<html>
<head>
<title>
</title>
</head>
<body>
</body>
</html>
-----------------------------------------------------------------------------------------------------------------------
Example:
/* LINKS */
a:link {font-family: "Times New Roman"; font-size: 16px; color: red;TEXT-DECORATION:
none;}
a:visited {font-family: "Times New Roman"; font-size: 16px; color: red;TEXT-DECORATION:
none;}
a:active {font-family: "Times New Roman"; font-size: 16px; color: red;TEXT-DECORATION:
none; }
a:hover {font-family: "Times New Roman"; font-size: 16px; color: yellow;
background-color:red;TEXT-DECORATION: none; }
/* IMAGE LINKS */
A: img { border:1px; border-thickness: 1px; border-color: white;TEXT-DECORATION:
none;}
A: active img { border:1px; border-thickness: 1px; border-color: white;TEXT-DECORATION:
none;}
A: visited img { border:1px; border-thickness: 1px; border-color: white;TEXT-DECORATION:
none;}
A: hover img { border:1px; border-thickness: 1px; border-color: blue;TEXT-DECORATION:
none;}
-----------------------------------------------------------------------------------------------------------------------
<Meta name="Description" content="Shampoochi - Quality dog grooming located in
Leeds";
<Meta name="Keywords" content=" dog grooming, pet grooming, dog grooming ">
<title>Shampoochi - Dog grooming located in Leeds</title>
-----------------------------------------------------------------------------------------------------------------------
<html>
<head>
</head>
<body>
</body>
</html>
-----------------------------------------------------------------------------------------------------------------------
Fixed / no-repeat / etc
this usually goes in the head section but can also be used inline, eg style
{style code here within braces}
<style type="text/css">
body {
background-image: url(image.gif);
background-repeat: no-repeat;
background-attachment: fixed;
}
</style>
<body bgcolor="blue"></body>
<style type="text/css">
body {background-image: url(debs_dogs/yorkie2.JPG);background-attachment:
fixed;}
</style>
-----------------------------------------------------------------------------------------------------------------------
example:
<table border="1" align="center" cellpadding="0" cellspacing="0" width="900">
<tr>
<td bgcolor="blue">column one</td>
<td bgcolor="cyan2>column two</td>
</tr>
</table>
-----------------------------------------------------------------------------------------------------------------------
LINK CLASSES - A class is used for more than one and an ID is used if
there is just one needed
<center>
<style>
a.adept:link {font-family: "Times New Roman"; font-size: 16px; color: blue;TEXT-DECORATION:
none;}
a.adept:visited {font-family: "Times New Roman"; font-size: 16px; color:
blue;TEXT-DECORATION: none;}
a.adept:active {font-family: "Times New Roman"; font-size: 16px; color:
blue;TEXT-DECORATION: none; }
a.adept:hover {font-family: "Times New Roman"; font-size: 16px; color: yellow;
background-color:blue;TEXT-DECORATION: none; }
</style>
<a class="adept" target="_blank" href="http://www.adeptwebsitedesign.com">Copyright
(C) 2008 Adept Website Design & Hosting - All Rights Reserved</a>
</center>
<style>
bob {color:blue; background-color:cyan;}
</style>
<div class="bob">
All the stuff in here will be in the style set by the bob class as above.
</div>
<head>
<link rel="StyleSheet" type="text/css" href="http://www.shampoochi.co.uk/css/links.css">
</head>
Table CSS
table, tr, td {
margin: 0px;
padding: 10px;
border: 2px solid black;
}
-----------------------------------------------------------------------------------------------------------------------
XHTML RULES: All tags must be closed as well as opened
-----------------------------------------------------------------------------------------------------------------------
This goes at the very top of the page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-----------------------------------------------------------------------------------------------------------------------
These can go anywhere on a page - this first one is invisible:
<bgsound src="debs_dogs/YAP.WAV"/>
This one is visable with controls on for start / stop / etc:
<embed src="debs_dogs/howmuchdoggywindow.mid" loop=1/>
-----------------------------------------------------------------------------------------------------------------------
examples:
Plain:
<a href="http://www.adeptwebsitedesign.com">click here</a>
Creates a new page:
<a target="_blank" href="http://www.adeptwebsitedesign.com">click here</a>
Includes a style class:
<a class="mylinks" href="http://www.adeptwebsitedesign.com">click here</a>
-----------------------------------------------------------------------------------------------------------------------
* Code your site correctly and neatly
* Search engines can't read images so use text as well; use alt tags with
images
* Always use meta tags: title / description / keywords even though some say
they are not needed
* Use H1 AND H2 for headings as well as P tags
* Update content regularly, at least once a month
* Have a home link
* Have a site map
* Put a link to your website on as many websites as you can
* Encourage a lot of visitors somehow with interesting and useful content
* Have a lot of unique useful information on your site in your own words - don't
copy text from other sites
-----------------------------------------------------------------------------------------------------------------------
Transparent iframe css
<style type="text/css">
body {background-color: transparent}
</style>
-----------------------------------------------------------------------------------------------------------------------
Forty per cent opacity of an item:
table, tr, td {filter:alpha(opacity=40);}
-----------------------------------------------------------------------------------------------------------------------
Example:
<iframe name="iframeone" src="http://www.northernessentials.co.uk"
height="101px"
frameborder="0" align="center" style="padding:0px;" scrolling="no"
ALLOWTRANSPARENCY=TRUE width="70px" marginwidth="1px" marginheight="1px"
align="top"></iframe>
-----------------------------------------------------------------------------------------------------------------------
Example:
Named Anchor:
<a name="tips">Tips Section</a>
Link to named anchor
<a href="#tips">
Jump to Tips Section</a>
Link to external named anchor
<a href="http://www.adeptwebsitedesign.html#tips">
Jump to the Tips Section</a>
-----------------------------------------------------------------------------------------------------------------------
|
