If you are looking to start learning the very basics of web development this guide is for you.
To begin with we will start with an explanation of the very basic aspects.
XHTML and HTML
The structural language of a web page are normally XHTML and HTML, XHTML is more preffered these days due to its semantic value but HTML can still be used. Personally I only use XHTML which is similar but does have a few differences, in the long run its much better to begin with XHTML as it teaches you some very good practices.
Commonly used example Tags:
HTML Code:
<img src="" alt="" />
HTML Code:
<blockquote></blockquote>
CSS
CSS which is short for Cascading Style Sheets are what seperates design from structure, the XHTML is the structure and the CSS is what makes it look great along with images.
CSS is attached to the XHTML document using some code and the web browser reads both documents.
CSS Examples:
HTML Code:
.myclass {font-size:14px;}
(any div with a class of myclass with be styled with a size 14px font)
HTML Code:
#myid {font-size:14px;}
(any div with an ID of myid with be styled with a size 14px font)
Part One
HTML/XHTML documents can end with either .html or .htm file extension and can be read by your browser.
To create a web page all you need is a text editor, notepad works, notepad++ is better though and that is all you need. You do not need any expensive programs at all to learn and become great at this.
All XHTML webpages should begin with the DOCTYPE declaration, here is an example:
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
A lot of tags need to be closed but some do not. Some tags you MUST close are:
HTML Code:
<div></div>
<p></p>
<span></span>
<h1></h1>
<h2></h2>
These are some tags that do not need to be closed:
HTML Code:
<img src="" alt="" />
<br />
Please notice the space before the /> on the above two tags, this is what closes it for you, rather than having a whole end tag.
All of your coding in XHTML will be encased inside tags, for example, if I wanted to display the following sentence in the browser, I would need to use:
Welcome to Ultimate Teen Forums!
HTML Code:
<p>Welcome to Ultimate Teen Forums!</p>
Notice how I end the sentence with </p> and start with the opening tag <p>. You need to get into practice of opening and closing your tags and also opening and closing them in the correct order.
This example is BAD coding and will not validate:
HTML Code:
<div class="bigtext"><span class="greentext">Hello UTF!</div></span>
Notice how I closed the <span> tag after the </div>, that is my mistake, instead it should be closed in order of opening:
HTML Code:
<div class="bigtext"><span class="greentext">Hello UTF!</span></div>
They are now in order of being opened.
After the DOCTYPE comes the opening HTML tag. This is an example HTML tag with the language attribute, you neednt worry about the xmlns attribute just yet, in fact I dont think you will ever need to pay any attention to it, just make it is there:
HTML Code:
<html xmlns="http://www.w3.org/1999/xhtml">
The above will open the XHTML document and comes right after the DOCTYPE, and no I am not shouting, it is how it is written
Next comes the head section, all of your links to CSS files, javascripts and more will reside inside this section as well as any meta data such as keywords, descriptions and the likes for each page.
It begins with <head> and can you guess what it ends with? Yes, youre correct, </head>.
Here is a whole head section from one of our websites:
HTML Code:
<head>
<title>Forum & Message Boards Directory </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="icon" href="/animated_favicon1.gif" type="image/gif" />
<link rel="stylesheet" type="text/css" href="/templates/Professional/style/new.css" />
<link rel="stylesheet" type="text/css" href="/templates/Professional/style/css3.css" />
<meta name="keywords" content="forum directory, message boards, forum boards directory, forum resources" />
<meta name="description" content="A free & regularly updated directory of the best quality forums and message boards on the internet. A quality forum only directory and administrators resource with forum software information, graphics, avatars and more." />
<meta name="google-site-verification" content="MMHwBH_M--kRpr6LyeRJJvIOXRUREjW1ismvp2yw0Yc" />
<!--
<script type="text/javascript" src="/libs/moodalbox/js/mootools.js"></script>
<script type="text/javascript" src="/libs/moodalbox/js/moodalbox.js"></script>
<link rel="stylesheet" href="/libs/moodalbox/css/moodalbox.css" type="text/css" media="screen" />
-->
</head>
Notice how there isnt any tags I described earlier such as <div></div>, <p></p> etc? This is because those tags are strictly not allowed in the <head> section. And now we proceed to the body
<body>
</body>
Within the body section you will find all of the pages structural tags, <div></div>, <p></p>, <span></span> and much more of them.
All structural tags are able to be styled with CSS, copy and paste the following code into a blank notepad document, save as index.html and you will see what the homepage of UTF looks like without any CSS styling:
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en">
<head>
<!-- no cache headers -->
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="-1" />
<meta http-equiv="Cache-Control" content="no-cache" />
<!-- end no cache headers -->
<link rel="canonical" href="http://www.ultimateteenforums.com/" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="generator" content="vBulletin 3.8.5" />
<meta name="keywords" content="teen forum, teen forums, teen help, teen advice, dating, relationships, puberty, sexuality, teen health, advice, depression, teen pregnancy, teenager, support, eating disorders, self harm, suicide" />
<meta name="description" content="Teen Forum - teens can seek advice on dating, relationships, sexuality, family and friends and more as well as make new friends, chat and have fun within our teen community." />
<!-- CSS Stylesheet -->
<style type="text/css" id="vbulletin_css">
/**
* vBulletin 3.8.5 CSS
* Style: 'UTF'; Style ID: 2
*/
@import url("clientscript/vbulletin_css/style-d7a9f4d5-00002.css");
</style>
<link rel="stylesheet" type="text/css" href="clientscript/vbulletin_important.css?v=385" />
<!-- / CSS Stylesheet -->
<script type="text/javascript" src="clientscript/yui/yahoo-dom-event/yahoo-dom-event.js?v=385"></script>
<script type="text/javascript" src="clientscript/yui/connection/connection-min.js?v=385"></script>
<script type="text/javascript">
<!--
var SESSIONURL = "";
var SECURITYTOKEN = "1283030507-b5e6113e774a16f6ac0aaa0469b61a0c626858bd";
var IMGDIR_MISC = "images/totallypro/misc";
var vb_disable_ajax = parseInt("0", 10);
// -->
</script>
<script type="text/javascript" src="clientscript/vbulletin_global.js?v=385"></script>
<script type="text/javascript" src="clientscript/vbulletin_menu.js?v=385"></script>
<link rel="alternate" type="application/rss+xml" title="Teen Forum >>Teen Help & Advice << RSS Feed" href="external.php?type=RSS2" />
<link rel="shortcut icon" href="/favicon.ico" />
<script type="text/javascript" src="http://www.ultimateteenforums.com/swfobject.js"></script>
<title>Teen Forum >>Teen Help & Advice <<</title>
</head>
<body>
<!-- logo -->
<a name="top"></a>
<div class="topheader">
<div style="width:96%;margin: 0 auto;">
<span style="float:left;">
<h1 style="margin:0; padding:0; font-size:12px;">Teen Forum - Help, Support & Advice
</h1>
</span>
<span style="float:right">
<a href="http://www.ultimateteenforums.com/forumdisplay.php?do=markread&markreadhash=1283030507-b5e6113e774a16f6ac0aaa0469b61a0c626858bd" rel="nofollow">Mark forums read</a> | <a href="http://www.ultimateteenforums.com/staff/">View Forum Leaders</a>
</span>
</div>
</div>
<div class="headerwrapper" style="width:96%;margin: 0 auto;">
<div class="logo"><a href="http://www.ultimateteenforums.com/"><img src="/images/logo.png" border="0" alt="Teen Forum - Teen Help and Advice" /></a></div>
<div class="notifywrap">
<div class="avvy"><img src="http://www.ultimateteenforums.com/avatars/michael.gif?dateline=1283012086" alt="My Avatar" border="0" class="panelavatar" width="60px" height="60px" /></div>
<div class="notify">
<strong>Welcome, <a rel="nofollow" href="http://www.ultimateteenforums.com/members/michael.html">Michael</a>.</strong><br /><strong>No <a rel="nofollow" href="http://www.ultimateteenforums.com/search.php?do=getnew">Unread Posts</a></strong> since your last visit.<strong></strong><br />
<a href="http://www.ultimateteenforums.com/private.php">Private Messages</a>: Unread 0, Total 10.
</div></div>
<div style="clear:both"></div>
</div>
<div style="clear:both;"></div>
<!-- /logo -->
<!-- content table -->
<!-- open content container -->
<div align="center">
<div class="page" style="width:96%; text-align:left">
<div class="toppy">
<div class="topleft"></div>
<div class="topright"></div>
</div>
<div style="padding:0px 0px 0px 0px" align="left">
<div class="page_right"><div class="page_left"><div style="padding:0 11px;">
<br />
<!-- nav buttons bar -->
<table cellpadding="0" cellspacing="0" border="0" align="center" class="navigation" width="100%">
<tr align="center">
<td class="navleft"></td>
<td class="navitem"><a href="http://www.ultimateteenforums.com/"><img class="imgmids" src="/images/home.png" alt="" />Home</a></td>
<td class="navitem"><a href="http://www.ultimateteenforums.com/picture-gallery/"><img class="imgmids" src="/images/gallery.png" alt="" />Picture Gallery</a></td>
<td class="navitem"><a rel="nofollow" href="http://www.ultimateteenforums.com/games/"><img class="imgmids" src="/images/games.png" alt="" />Arcade</a></td>
<td class="navitem"><a rel="nofollow" href="http://www.ultimateteenforums.com/general-site-info/"><img class="imgmids" src="/images/info.png" alt="" />Site Info</a></td>
<td class="navitem"><a href="http://www.ultimateteenforums.com/usercp.php"><img class="imgmids" src="/images/settings.png" alt="" />Settings</a></td>
<td class="navitem"><a id="navbar_search" href="http://www.ultimateteenforums.com/search.php" accesskey="4" rel="nofollow"><img class="imgmids" src="/images/search.png" alt="" />Search</a> <script type="text/javascript"> vbmenu_register("navbar_search"); </script></td>
<td class="navitem"><a rel="nofollow" id="usercptools" href="/?nojs=1#usercptools" accesskey="3"><img class="imgmids" src="/images/qlink.png" alt="" />Quick Links</a> <script type="text/javascript"> vbmenu_register("usercptools"); </script></td>
<td width="100%" align="right">
</div>
</td>
<td class="navright"></td>
</tr>
</table>
<!-- / nav buttons bar -->
<br />
<div class="breadcrumb">
<div class="bcright">
<div class="bcleft">
<a href="http://www.ultimateteenforums.com/" accesskey="1">Teen Forum >>Teen Help & Advice <<</a>
<div class="tweet">
<a rel="nofollow" href="http://twitter.com/share" class="twitter-share-button" data-url="http://www.ultimateteenforums.com" data-text="Teen Help, Advice and Chat Forums" data-count="horizontal" data-via="UTForums" data-related="teen_forums">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>
</div>
</div>
</div>
<br />
<!-- NAVBAR POPUP MENUS -->
<!-- header quick search form -->
<div class="vbmenu_popup" id="navbar_search_menu" style="display:none;margin-top:3px" align="left">
<table cellpadding="4" cellspacing="1" border="0">
<tr>
<td class="thead">Search Forums</td>
</tr>
<tr>
<td class="vbmenu_option" title="nohilite">
<form action="http://www.ultimateteenforums.com/search.php?do=process" method="post">
<input type="hidden" name="do" value="process" />
<input type="hidden" name="quicksearch" value="1" />
<input type="hidden" name="childforums" value="1" />
<input type="hidden" name="exactname" value="1" />
<input type="hidden" name="s" value="" />
<input type="hidden" name="securitytoken" value="1283030507-b5e6113e774a16f6ac0aaa0469b61a0c626858bd" />
<div><input type="text" class="bginput" name="query" size="25" tabindex="1001" /><input type="submit" class="newbutton" value="Go" tabindex="1004" /></div>
<div style="margin-top:6px">
<label for="rb_nb_sp0"><input type="radio" name="showposts" value="0" id="rb_nb_sp0" tabindex="1002" checked="checked" />Show Threads</label>
<label for="rb_nb_sp1"><input type="radio" name="showposts" value="1" id="rb_nb_sp1" tabindex="1003" />Show Posts</label>
</div>
</form>
</td>
</tr>
<tr>
<td class="vbmenu_option"><a href="http://www.ultimateteenforums.com/search.php" accesskey="4" rel="nofollow">Advanced Search</a></td>
</tr>
</table>
</div>
<!-- / header quick search form -->
<!-- user cp tools menu -->
<div class="vbmenu_popup" id="usercptools_menu" style="display:none;margin-top:3px" align="left">
<table cellpadding="4" cellspacing="1" border="0">
<tr><td class="thead">Quick Links</td></tr>
<tr><td class="vbmenu_option"><a href="http://www.ultimateteenforums.com/search.php?do=getdaily">Today's Posts</a></td></tr>
<tr><td class="vbmenu_option"><a rel="nofollow" href="http://www.ultimateteenforums.com/forumdisplay.php?do=markread&markreadhash=1283030507-b5e6113e774a16f6ac0aaa0469b61a0c626858bd">Mark Forums Read</a></td></tr>
<tr><td class="vbmenu_option"><a href="#" onclick="window.open('misc.php?do=buddylist&focus=1','buddylist','statusbar=no,menubar=no,toolbar=no,scrollbars=yes,resizable=yes,width=250,height=300'); return false;">Open Contacts Popup</a></td></tr>
<tr><td class="thead"><a href="http://www.ultimateteenforums.com/usercp.php">User Control Panel</a></td></tr>
<tr><td class="vbmenu_option"><a rel="nofollow" href="http://www.ultimateteenforums.com/profile.php?do=editavatar">Change Avatar</a></td></tr>
<tr><td class="vbmenu_option"><a rel="nofollow" href="http://www.ultimateteenforums.com/profile.php?do=editsignature">Change Signature</a></td></tr>
<tr><td class="vbmenu_option"><a rel="nofollow" href="http://www.ultimateteenforums.com/profile.php?do=editprofile">Change Details</a></td></tr>
<tr><td class="vbmenu_option"><a rel="nofollow" href="http://www.ultimateteenforums.com/profile.php?do=editoptions">Change Settings</a></td></tr>
<tr><td class="thead">Miscellaneous</td></tr>
<tr><td class="vbmenu_option"><a href="http://www.ultimateteenforums.com/private.php" rel="nofollow">Private Messages</a></td></tr>
<tr><td class="vbmenu_option"><a href="http://www.ultimateteenforums.com/subscription.php" rel="nofollow">Subscribed Threads</a></td></tr>
<tr><td class="vbmenu_option"><a rel="nofollow" href="http://www.ultimateteenforums.com/members/michael.html">Your Profile</a></td></tr>
<tr><td class="vbmenu_option"><a href="http://www.ultimateteenforums.com/online.php">Who's Online</a></td></tr>
</table>
</div>
<!-- / user cp tools menu -->
<!-- / NAVBAR POPUP MENUS -->
<!-- PAGENAV POPUP -->
<div class="vbmenu_popup" id="pagenav_menu" style="display:none">
<table cellpadding="4" cellspacing="1" border="0">
<tr>
<td class="thead" nowrap="nowrap">Go to Page...</td>
</tr>
<tr>
<td class="vbmenu_option" title="nohilite">
<form action="http://www.ultimateteenforums.com/" method="get" onsubmit="return this.gotopage()" id="pagenav_form">
<input type="text" class="bginput" id="pagenav_itxt" style="font-size:11px" size="4" />
<input type="button" class="newbutton" id="pagenav_ibtn" value="Go" />
</form>
</td>
</tr>
</table>
</div>
<!-- / PAGENAV POPUP -->
<div class="forumleft">
<table class="tborder" cellpadding="6" cellspacing="0" border="0" width="100%" align="center">
<tr>
<td class="thead" width="100%">
<div class="ttops">
<img class="imgmid" src="/images/newthreads.png" alt="Latest Threads in Help Forums" />Help Threads (<a href="/general-site-info/391-help-threads.html">?</a>)
</div>
</td>
</tr>
<tr>
<td class="alt1" width="100%">
<center>
<div class="resources">
<ul class="">
<li><a href='http://www.ultimateteenforums.com/relationships-dating/378-shes-cheated-bitch.html'>She's cheated the...</a></li>
<li><a href='http://www.ultimateteenforums.com/sex-sexuality-puberty/375-porns-future.html'>Porns future</a></li>
<li><a href='http://www.ultimateteenforums.com/relationships-dating/361-have-you-ever-cheated-before-stories.html'>Have you ever...</a></li>
<li><a href='http://www.ultimateteenforums.com/general-teen-advice/360-making-myself-throw-up.html'>Making myself...</a></li>
<li><a href='http://www.ultimateteenforums.com/general-teen-advice/359-getting-rid-few-spots.html'>Getting rid of a...</a></li>
<li><a href='http://www.ultimateteenforums.com/sex-sexuality-puberty/357-whats-ur-dream-girl-boy-like-when-comes-sex.html'>What's ur dream...</a></li>
<li><a href='http://www.ultimateteenforums.com/sex-sexuality-puberty/356-strangest-place-youve-masturbated.html'>Strangest place...</a></li>
<li><a href='http://www.ultimateteenforums.com/sex-sexuality-puberty/354-what-turns-you-most.html'>What turns you on...</a></li>
<li><a href='http://www.ultimateteenforums.com/sex-sexuality-puberty/350-bdsm.html'>BDSM?</a></li>
<li><a href='http://www.ultimateteenforums.com/relationships-dating/348-most-funny-moment-your-relationship.html'>Most funny moment...</a></li>
</ul>
</div>
</center>
</td>
</tr>
</table>
<br />
<table class="tborder" cellpadding="6" cellspacing="0" border="0" width="100%" align="center">
<tr>
<td class="thead" width="100%">
<div class="ttops">
<img class="imgmid" src="/images/statusupdates.png" alt="Newest Status Updates" />Status Updates (<a href="/general-site-info/389-status-updates-updating-your-status.html">?</a>)
</div>
</td>
</tr>
<tr>
<td class="alt1" width="100%">
<center>
<div class="statuses">
<ul>
<li>
<a rel="nofollow" href="http://www.ultimateteenforums.com/members/michael.html"><span style="font-weight:bold; color:#c33a3a;">Michael</span></a> is "<span style="font-style: italic; font-weight: bold;">feeling sick</span>"<br />
<span style="font-size:10px; color:#6693b9;">08:23 PM</span>
</li><li>
<a rel="nofollow" href="http://www.ultimateteenforums.com/members/itachi.html"><span style="color:#3a8ec3;">Itachi</span></a> is "<span style="font-style: italic; font-weight: bold;">Thinking~</span>"<br />
<span style="font-size:10px; color:#6693b9;">06:35 PM</span>
</li><li>
<a rel="nofollow" href="http://www.ultimateteenforums.com/members/michael.html"><span style="font-weight:bold; color:#c33a3a;">Michael</span></a> is "<span style="font-style: italic; font-weight: bold;">coughing</span>"<br />
<span style="font-size:10px; color:#6693b9;">11:37 AM</span>
</li><li>
<a rel="nofollow" href="http://www.ultimateteenforums.com/members/danielapereira.html"><span style="font-weight:bold; color:#85ca4e;">DanielaPereira</span></a> is "<span style="font-style: italic; font-weight: bold;">very sleepy</span>"<br />
<span style="font-size:10px; color:#6693b9;">06:47 PM</span>
</li><li>
<a rel="nofollow" href="http://www.ultimateteenforums.com/members/michael.html"><span style="font-weight:bold; color:#c33a3a;">Michael</span></a> is "<span style="font-style: italic; font-weight: bold;">having an early night</span>"<br />
<span style="font-size:10px; color:#6693b9;">11:43 PM</span>
</li>
</ul>
</div>
</center>
</td>
</tr>
</table>
<br />
<table class="tborder" cellpadding="6" cellspacing="0" border="0" width="100%" align="center">
<tr>
<td class="thead" width="100%">
<div class="ttops">
<img class="imgmid" src="/images/helpresources.png" alt="Help Resources" />Teen Help Resources (<a href="/general-site-info/390-teen-help-resources.html">?</a>)
</div>
</td>
</tr>
<tr>
<td class="alt1" width="100%">
<center>
<div class="resources">
<ul>
<li><a href="http://www.ultimateteenforums.com/sex-sexuality-puberty/332-penis-breast-sizes.html">Penis & Breast Sizes</a></li>
<li><a href="http://www.ultimateteenforums.com/help-articles/273-emergency-helplines-teens-post1752.html">Emergency Helplines</a></li>
<li><a href="http://www.ultimateteenforums.com/help-articles/106-bullying-help-helpline-information.html">Bullying Advice</a></li>
</ul>
</div>
</center>
</td>
</tr>
</table>
</div>
<div class="forumright">
<!-- main -->
<div class="tcat">
<div class="tcat_right">
<a style="float:right;margin-top:7px;margin-right:9px;" href="#top" onclick="return toggle_collapse('forumbit_3')"><img id="collapseimg_forumbit_3" src="images/totallypro/buttons/collapse_tcat.gif" alt="" border="0" /></a>
<div class="tcat_left">
<a id="utf-community-forums" name="utf-community-forums" href="http://www.ultimateteenforums.com/#utf-community-forums">UTF Community Forums</a>
</div>
</div>
</div>
<table cellpadding="6" cellspacing="0" border="0" width="100%" align="center">
<tbody id="collapseobj_forumbit_3" style="">
<tr align="center">
<td class="thead" width="10%"> </td>
<td class="thead" width="47%" align="left">Forum</td>
<td class="thead" width="27%">Last Post</td>
<td class="thead" width="8%">Threads</td>
<td class="thead" width="8%">Posts</td>
</tr>
<tr align="center">
<td class="althp" style="border-left:#e7ecee 1px solid;"><img src="images/totallypro/statusicon/forum_old.gif" alt="" border="0" id="forum_statusicon_9" /></td>
<td class="althp" align="left" id="f9">
<div>
<a href="http://www.ultimateteenforums.com/announcements/" style="font-size:13px;"><strong>Announcements</strong></a>
</div>
<div class="smallfont">Get all of the latest information and updates about ultimateteenforums.com! Find out about the latest feature additions, new staff members and all important site info here.</div>
</td>
<td class="althp">
<div class="smallfont" align="left">
<div>
<span style="white-space:nowrap">
<img class="inlineimg" src="images/icons/icon1.gif" alt="" border="0" />
<a href="http://www.ultimateteenforums.com/announcements/393-tweet-button-new-post.html" style="white-space:nowrap" title="Go to first unread post in thread 'Tweet Button'"><strong>Tweet Button</strong></a></span>
</div>
<div style="white-space:nowrap">
by <a href="http://www.ultimateteenforums.com/members/michael.html" rel="nofollow">Michael</a>
</div>
<div align="right" style="white-space:nowrap">
Today <span class="time">06:36 PM</span>
<a href="http://www.ultimateteenforums.com/announcements/393-tweet-button-post3316.html#post3316"><img class="inlineimg" src="images/totallypro/buttons/lastpost.gif" alt="Go to last post" border="0" /></a>
</div>
</div>
</td>
<td class="althp">18</td>
<td class="althp" style="border-right: #e7ecee 1px solid;">94</td>
</tr>
<tr align="center">
<td class="althp" style="border-left:#e7ecee 1px solid;"><img src="images/totallypro/statusicon/forum_old.gif" alt="" border="0" id="forum_statusicon_11" /></td>
<td class="althp" align="left" id="f11">
<div>
<a href="http://www.ultimateteenforums.com/site-help-suggestions-feedback/" style="font-size:13px;"><strong>Site Help, Suggestions and Feedback</strong></a>
</div>
<div class="smallfont">Need help with how to use the site? Dont understand something? We are all here to help! Seek general site help, report a bug, make a suggestion or give us some feedback about the site in here.</div>
<div class="smallfont" style="margin-top:6px"><strong>Sub-Forums</strong>: <img class="inlineimg" src="images/totallypro/statusicon/subforum_old.gif" alt="" border="0" id="forum_statusicon_36" /> <a href="http://www.ultimateteenforums.com/general-site-info/">General Site Info</a></div>
</td>
<td class="althp">
<div class="smallfont" align="left">
<div>
<span style="white-space:nowrap">
<img class="inlineimg" src="images/icons/icon39.png" alt="Icon39" border="0" />
<a href="http://www.ultimateteenforums.com/general-site-info/271-how-find-new-posts-new-post.html" style="white-space:nowrap" title="Go to first unread post in thread 'How to find new posts'"><strong>How to find new posts</strong></a></span>
</div>
<div style="white-space:nowrap">
by <a href="http://www.ultimateteenforums.com/members/michael.html" rel="nofollow">Michael</a>
</div>
<div align="right" style="white-space:nowrap">
Today <span class="time">04:55 PM</span>
<a href="http://www.ultimateteenforums.com/general-site-info/271-how-find-new-posts-post3308.html#post3308"><img class="inlineimg" src="images/totallypro/buttons/lastpost.gif" alt="Go to last post" border="0" /></a>
</div>
</div>
</td>
<td class="althp">27</td>
<td class="althp" style="border-right: #e7ecee 1px solid;">100</td>
</tr>
<tr align="center">
<td class="althp" style="border-left:#e7ecee 1px solid;"><img src="images/totallypro/statusicon/forum_old.gif" alt="" border="0" id="forum_statusicon_10" /></td>
<td class="althp" align="left" id="f10">
<div>
<a href="http://www.ultimateteenforums.com/introductions/" style="font-size:13px;"><strong>Introductions</strong></a>
</div>
<div class="smallfont">New to the community? Get yourself in here and introduce yourself to our members for a warm welcome.</div>
</td>
<td class="althp">
<div class="smallfont" align="left">
<div>
<span style="white-space:nowrap">
<img class="inlineimg" src="images/icons/icon1.gif" alt="" border="0" />
<a href="http://www.ultimateteenforums.com/introductions/339-hello-there%7E-new-post.html" style="white-space:nowrap" title="Go to first unread post in thread 'Hello there~'"><strong>Hello there~</strong></a></span>
</div>
<div style="white-space:nowrap">
by <a href="http://www.ultimateteenforums.com/members/djlee.html" rel="nofollow">DJLEE</a>
</div>
<div align="right" style="white-space:nowrap">
08-23-2010 <span class="time">07:16 PM</span>
<a href="http://www.ultimateteenforums.com/introductions/339-hello-there%7E-post2606.html#post2606"><img class="inlineimg" src="images/totallypro/buttons/lastpost.gif" alt="Go to last post" border="0" /></a>
</div>
</div>
</td>
<td class="althp">30</td>
<td class="althp" style="border-right: #e7ecee 1px solid;">174</td>
</tr>
</tbody>
</table>
<div class="tfooter"> </div>
<br /><div class="tcat">
<div class="tcat_right">
<a style="float:right;margin-top:7px;margin-right:9px;" href="#top" onclick="return toggle_collapse('forumbit_4')"><img id="collapseimg_forumbit_4" src="images/totallypro/buttons/collapse_tcat.gif" alt="" border="0" /></a>
<div class="tcat_left">
<a id="teen-help-forums" name="teen-help-forums" href="http://www.ultimateteenforums.com/#teen-help-forums">Teen Help Forums</a>
</div>
</div>
</div>
<table cellpadding="6" cellspacing="0" border="0" width="100%" align="center">
<tbody id="collapseobj_forumbit_4" style="">
<tr align="center">
<td class="thead" width="10%"> </td>
<td class="thead" width="47%" align="left">Forum</td>
<td class="thead" width="27%">Last Post</td>
<td class="thead" width="8%">Threads</td>
<td class="thead" width="8%">Posts</td>
</tr>
<tr align="center">
<td class="althp" style="border-left:#e7ecee 1px solid;"><img src="images/totallypro/statusicon/forum_old.gif" alt="" border="0" id="forum_statusicon_12" /></td>
<td class="althp" align="left" id="f12">
<div>
<a href="http://www.ultimateteenforums.com/general-teen-advice/" style="font-size:13px;"><strong>General Teen Advice</strong></a>
</div>
<div class="smallfont">Seek advice on all other problems you may have such as general health, mental health, eating disorders and all other general teen advice subjects that dont quite fit in elsewhere. Seek help, support & general advice on our teen forum.</div>
</td>
<td class="althp">
<div class="smallfont" align="left">
<div>
<span style="white-space:nowrap">
<img class="inlineimg" src="images/icons/icon1.gif" alt="" border="0" />
<a href="http://www.ultimateteenforums.com/general-teen-advice/359-getting-rid-few-spots-new-post.html" style="white-space:nowrap" title="Go to first unread post in thread 'Getting rid of a few spots'"><strong>Getting rid of a few spots</strong></a></span>
</div>
<div style="white-space:nowrap">
by <a href="http://www.ultimateteenforums.com/members/michael.html" rel="nofollow">Michael</a>
</div>
<div align="right" style="white-space:nowrap">
08-24-2010 <span class="time">10:50 PM</span>
<a href="http://www.ultimateteenforums.com/general-teen-advice/359-getting-rid-few-spots-post2985.html#post2985"><img class="inlineimg" src="images/totallypro/buttons/lastpost.gif" alt="Go to last post" border="0" /></a>
</div>
</div>
</td>
<td class="althp">9</td>
<td class="althp" style="border-right: #e7ecee 1px solid;">52</td>
</tr>
<tr align="center">
<td class="althp" style="border-left:#e7ecee 1px solid;"><img src="images/totallypro/statusicon/forum_old.gif" alt="" border="0" id="forum_statusicon_13" /></td>
<td class="althp" align="left" id="f13">
<div>
<a href="http://www.ultimateteenforums.com/sex-sexuality-puberty/" style="font-size:13px;"><strong>Sex, Sexuality & Puberty</strong></a>
<span class="smallfont">(1 Viewing)</span>
</div>
<div class="smallfont">For all sex, sexuality and puberty related questions. Talk about sexuality issues & concerns, seek advice on sex including sex tips, STI's, contraception and safe sex, get answers on all puberty related questions too.</div>
</td>
<td class="althp">
<div class="smallfont" align="left">
<div>
<span style="white-space:nowrap">
<img class="inlineimg" src="images/icons/icon1.gif" alt="" border="0" />
<a href="http://www.ultimateteenforums.com/sex-sexuality-puberty/350-bdsm-new-post.html" style="white-space:nowrap" title="Go to first unread post in thread 'BDSM?'"><strong>BDSM?</strong></a></span>
</div>
<div style="white-space:nowrap">
by <a href="http://www.ultimateteenforums.com/members/itachi.html" rel="nofollow">Itachi</a>
</div>
<div align="right" style="white-space:nowrap">
Today <span class="time">05:22 PM</span>
<a href="http://www.ultimateteenforums.com/sex-sexuality-puberty/350-bdsm-post3310.html#post3310"><img class="inlineimg" src="images/totallypro/buttons/lastpost.gif" alt="Go to last post" border="0" /></a>
</div>
</div>
</td>
<td class="althp">51</td>
<td class="althp" style="border-right: #e7ecee 1px solid;">319</td>
</tr>
<tr align="center">
<td class="althp" style="border-left:#e7ecee 1px solid;"><img src="images/totallypro/statusicon/forum_old.gif" alt="" border="0" id="forum_statusicon_14" /></td>
<td class="althp" align="left" id="f14">
<div>
<a href="http://www.ultimateteenforums.com/relationships-dating/" style="font-size:13px;"><strong>Relationships and Dating</strong></a>
</div>
<div class="smallfont">Seek advice on all aspects of relationships such as dating, issues with your boyfriend or girlfriend, crushes, break-ups, parent involvement, relationship progression, love, fall outs, the hard times and more.</div>
</td>
<td class="althp">
<div class="smallfont" align="left">
<div>
<span style="white-space:nowrap">
<img class="inlineimg" src="images/icons/icon1.gif" alt="" border="0" />
<a href="http://www.ultimateteenforums.com/relationships-dating/361-have-you-ever-cheated-before-stories-new-post.html" style="white-space:nowrap" title="Go to first unread post in thread 'Have you ever cheated before? Stories'"><strong>Have you ever cheated before?...</strong></a></span>
</div>
<div style="white-space:nowrap">
by <a href="http://www.ultimateteenforums.com/members/itachi.html" rel="nofollow">Itachi</a>
</div>
<div align="right" style="white-space:nowrap">
Today <span class="time">05:25 PM</span>
<a href="http://www.ultimateteenforums.com/relationships-dating/361-have-you-ever-cheated-before-stories-post3311.html#post3311"><img class="inlineimg" src="images/totallypro/buttons/lastpost.gif" alt="Go to last post" border="0" /></a>
</div>
</div>
</td>
<td class="althp">28</td>
<td class="althp" style="border-right: #e7ecee 1px solid;">148</td>
</tr>
<tr align="center">
<td class="althp" style="border-left:#e7ecee 1px solid;"><img src="images/totallypro/statusicon/forum_old.gif" alt="" border="0" id="forum_statusicon_30" /></td>
<td class="althp" align="left" id="f30">
<div>
<a href="http://www.ultimateteenforums.com/friends-family/" style="font-size:13px;"><strong>Friends and Family</strong></a>
</div>
<div class="smallfont">If you need advice on family and friend related issues, this is the forum for you. Have a troublesome family member you need advice about? Parents not being fair? We are all here to help.</div>
</td>
<td class="althp">
<div class="smallfont" align="left">
<div>
<span style="white-space:nowrap">
<img class="inlineimg" src="images/icons/icon1.gif" alt="" border="0" />
<a href="http://www.ultimateteenforums.com/friends-family/347-how-many-close-friends-do-you-have-new-post.html" style="white-space:nowrap" title="Go to first unread post in thread 'How many close friends do you have?'"><strong>How many close friends do you...</strong></a></span>
</div>
<div style="white-space:nowrap">
by <a href="http://www.ultimateteenforums.com/members/scooter-plume.html" rel="nofollow">SCOOTER PLUME</a>
</div>
<div align="right" style="white-space:nowrap">
Yesterday <span class="time">05:17 PM</span>
<a href="http://www.ultimateteenforums.com/friends-family/347-how-many-close-friends-do-you-have-post3245.html#post3245"><img class="inlineimg" src="images/totallypro/buttons/lastpost.gif" alt="Go to last post" border="0" /></a>
</div>
</div>
</td>
<td class="althp">10</td>
<td class="althp" style="border-right: #e7ecee 1px solid;">43</td>
</tr>
<tr align="center">
<td class="althp" style="border-left:#e7ecee 1px solid;"><img src="images/totallypro/statusicon/forum_old.gif" alt="" border="0" id="forum_statusicon_29" /></td>
<td class="althp" align="left" id="f29">
<div>
<a href="http://www.ultimateteenforums.com/depression-self-harm-suicide/" style="font-size:13px;"><strong>Depression, Self Harm & Suicide</strong></a>
</div>
<div class="smallfont">Feeling depressed or suicidal? Struggling with self harm? Want to learn about how to cope in the world? Seek advice in this forum. You are not alone, share your feelings here and we will help.</div>
</td>
<td class="althp">
<div class="smallfont" align="left">
<div>
<span style="white-space:nowrap">
<img class="inlineimg" src="images/icons/icon1.gif" alt="" border="0" />
<a href="http://www.ultimateteenforums.com/depression-self-harm-suicide/14-coping-depression-feeling-down-new-post.html" style="white-space:nowrap" title="Go to first unread post in thread 'Coping With Depression Or Feeling Down'"><strong>Coping With Depression Or...</strong></a></span>
</div>
<div style="white-space:nowrap">
by <a href="http://www.ultimateteenforums.com/members/fath86.html" rel="nofollow">fath86</a>
</div>
<div align="right" style="white-space:nowrap">
08-23-2010 <span class="time">03:34 PM</span>
<a href="http://www.ultimateteenforums.com/depression-self-harm-suicide/14-coping-depression-feeling-down-post2545.html#post2545"><img class="inlineimg" src="images/totallypro/buttons/lastpost.gif" alt="Go to last post" border="0" /></a>
</div>
</div>
</td>
<td class="althp">3</td>
<td class="althp" style="border-right: #e7ecee 1px solid;">16</td>
</tr>
<tr align="center">
<td class="althp" style="border-left:#e7ecee 1px solid;"><img src="images/totallypro/statusicon/forum_old.gif" alt="" border="0" id="forum_statusicon_28" /></td>
<td class="althp" align="left" id="f28">
<div>
<a href="http://www.ultimateteenforums.com/pregnancy-childcare/" style="font-size:13px;"><strong>Pregnancy and Childcare</strong></a>
</div>
<div class="smallfont">Seek advice on all aspects of teen pregnancy and childcare, discuss for example pregnancy worries & issues, pregnancy tests, trying to conceive, childcare, parenting skills & baby names. Our members are here to help you.</div>
</td>
<td class="althp">
<div class="smallfont" align="left">
<div>
<span style="white-space:nowrap">
<img class="inlineimg" src="images/icons/icon1.gif" alt="" border="0" />
<a href="http://www.ultimateteenforums.com/pregnancy-childcare/293-right-decision-abortion-new-post.html" style="white-space:nowrap" title="Go to first unread post in thread 'Right decision for abortion?'"><strong>Right decision for abortion?</strong></a></span>
</div>
<div style="white-space:nowrap">
by <a href="http://www.ultimateteenforums.com/members/djlee.html" rel="nofollow">DJLEE</a>
</div>
<div align="right" style="white-space:nowrap">
08-18-2010 <span class="time">06:57 PM</span>
<a href="http://www.ultimateteenforums.com/pregnancy-childcare/293-right-decision-abortion-post2020.html#post2020"><img class="inlineimg" src="images/totallypro/buttons/lastpost.gif" alt="Go to last post" border="0" /></a>
</div>
</div>
</td>
<td class="althp">5</td>
<td class="althp" style="border-right: #e7ecee 1px solid;">20</td>
</tr>
<tr align="center">
<td class="althp" style="border-left:#e7ecee 1px solid;"><img src="images/totallypro/statusicon/forum_old.gif" alt="" border="0" id="forum_statusicon_32" /></td>
<td class="althp" align="left" id="f32">
<div>
<a href="http://www.ultimateteenforums.com/help-articles/" style="font-size:13px;"><strong>Help Articles</strong></a>
</div>
<div class="smallfont">Fancy helping others with your advice and writing skills? This forum is for all of your own teen help articles. Please submit all help related articles within this forum.</div>
</td>
<td class="althp">
<div class="smallfont" align="left">
<div>
<span style="white-space:nowrap">
<img class="inlineimg" src="images/icons/icon1.gif" alt="" border="0" />
<a href="http://www.ultimateteenforums.com/help-articles/273-emergency-helplines-teens-new-post.html" style="white-space:nowrap" title="Go to first unread post in thread 'Emergency Helplines for Teens'"><strong>Emergency Helplines for Teens</strong></a></span>
</div>
<div style="white-space:nowrap">
by <a href="http://www.ultimateteenforums.com/members/michael.html" rel="nofollow">Michael</a>
</div>
<div align="right" style="white-space:nowrap">
08-15-2010 <span class="time">04:16 AM</span>
<a href="http://www.ultimateteenforums.com/help-articles/273-emergency-helplines-teens-post1752.html#post1752"><img class="inlineimg" src="images/totallypro/buttons/lastpost.gif" alt="Go to last post" border="0" /></a>
</div>
</div>
</td>
<td class="althp">2</td>
<td class="althp" style="border-right: #e7ecee 1px solid;">8</td>
</tr>
</tbody>
</table>
<div class="tfooter"> </div>
<br /><div class="tcat">
<div class="tcat_right">
<a style="float:right;margin-top:7px;margin-right:9px;" href="#top" onclick="return toggle_collapse('forumbit_7')"><img id="collapseimg_forumbit_7" src="images/totallypro/buttons/collapse_tcat.gif" alt="" border="0" /></a>
<div class="tcat_left">
<a id="teen-life-forums" name="teen-life-forums" href="http://www.ultimateteenforums.com/#teen-life-forums">Teen Life Forums</a>
</div>
</div>
</div>
<table cellpadding="6" cellspacing="0" border="0" width="100%" align="center">
<tbody id="collapseobj_forumbit_7" style="">
<tr align="center">
<td class="thead" width="10%"> </td>
<td class="thead" width="47%" align="left">Forum</td>
<td class="thead" width="27%">Last Post</td>
<td class="thead" width="8%">Threads</td>
<td class="thead" width="8%">Posts</td>
</tr>
<tr align="center">
<td class="althp" style="border-left:#e7ecee 1px solid;"><img src="images/totallypro/statusicon/forum_old.gif" alt="" border="0" id="forum_statusicon_18" /></td>
<td class="althp" align="left" id="f18">
<div>
<a href="http://www.ultimateteenforums.com/hangout/" style="font-size:13px;"><strong>The Hangout</strong></a>
<span class="smallfont">(2 Viewing)</span>
</div>
<div class="smallfont">The place to chat and have fun! Kick back, put your hands behind your head and relax in this forum. Come and hangout here with other members.</div>
<div class="smallfont" style="margin-top:6px"><strong>Sub-Forums</strong>: <img class="inlineimg" src="images/totallypro/statusicon/subforum_old.gif" alt="" border="0" id="forum_statusicon_25" /> <a href="http://www.ultimateteenforums.com/creativity-corner/">Creativity Corner</a>, <img class="inlineimg" src="images/totallypro/statusicon/subforum_old.gif" alt="" border="0" id="forum_statusicon_19" /> <a href="http://www.ultimateteenforums.com/forum-games-quizzes/">Forum Games and Quizzes</a>, <img class="inlineimg" src="images/totallypro/statusicon/subforum_old.gif" alt="" border="0" id="forum_statusicon_24" /> <a href="http://www.ultimateteenforums.com/members-photos/">Members Photos</a></div>
</td>
<td class="althp">
<div class="smallfont" align="left">
<div>
<span style="white-space:nowrap">
<img class="inlineimg" src="images/icons/icon1.gif" alt="" border="0" />
<a href="http://www.ultimateteenforums.com/hangout/261-web-design-development-help-links-new-post.html" style="white-space:nowrap" title="Go to first unread post in thread 'Web Design And Development Help Links'"><strong>Web Design And Development...</strong></a></span>
</div>
<div style="white-space:nowrap">
by <a href="http://www.ultimateteenforums.com/members/michael.html" rel="nofollow">Michael</a>
</div>
<div align="right" style="white-space:nowrap">
Today <span class="time">09:19 PM</span>
<a href="http://www.ultimateteenforums.com/hangout/261-web-design-development-help-links-post3326.html#post3326"><img class="inlineimg" src="images/totallypro/buttons/lastpost.gif" alt="Go to last post" border="0" /></a>
</div>
</div>
</td>
<td class="althp">81</td>
<td class="althp" style="border-right: #e7ecee 1px solid;">1,439</td>
</tr>
<tr align="center">
<td class="althp" style="border-left:#e7ecee 1px solid;"><img src="images/totallypro/statusicon/forum_old.gif" alt="" border="0" id="forum_statusicon_23" /></td>
<td class="althp" align="left" id="f23">
<div>
<a href="http://www.ultimateteenforums.com/debates-news-politics/" style="font-size:13px;"><strong>Debates, News & Politics</strong></a>
<span class="smallfont">(1 Viewing)</span>
</div>
<div class="smallfont">For all serious debates about current events, politics, religion and more. Share your thoughts and opinions on world news and share your ideas.</div>
</td>
<td class="althp">
<div class="smallfont" align="left">
<div>
<span style="white-space:nowrap">
<img class="inlineimg" src="images/icons/icon30.png" alt="Icon30" border="0" />
<a href="http://www.ultimateteenforums.com/debates-news-politics/352-society-new-post.html" style="white-space:nowrap" title="Go to first unread post in thread 'society'"><strong>society</strong></a></span>
</div>
<div style="white-space:nowrap">
by <a href="http://www.ultimateteenforums.com/members/danielapereira.html" rel="nofollow">DanielaPereira</a>
</div>
<div align="right" style="white-space:nowrap">
08-24-2010 <span class="time">03:36 PM</span>
<a href="http://www.ultimateteenforums.com/debates-news-politics/352-society-post2853.html#post2853"><img class="inlineimg" src="images/totallypro/buttons/lastpost.gif" alt="Go to last post" border="0" /></a>
</div>
</div>
</td>
<td class="althp">13</td>
<td class="althp" style="border-right: #e7ecee 1px solid;">76</td>
</tr>
<tr align="center">
<td class="althp" style="border-left:#e7ecee 1px solid;"><img src="images/totallypro/statusicon/forum_old.gif" alt="" border="0" id="forum_statusicon_27" /></td>
<td class="althp" align="left" id="f27">
<div>
<a href="http://www.ultimateteenforums.com/careers-education/" style="font-size:13px;"><strong>Careers and Education</strong></a>
</div>
<div class="smallfont">Discuss careers and education and all things related to school, college, homework, university, career decisions, finding jobs and more. Seek help with your homework in here too.</div>
</td>
<td class="althp">
<div class="smallfont" align="left">
<div>
<span style="white-space:nowrap">
<img class="inlineimg" src="images/icons/icon1.gif" alt="" border="0" />
<a href="http://www.ultimateteenforums.com/careers-education/9-dream-job-new-post.html" style="white-space:nowrap" title="Go to first unread post in thread 'Dream Job?'"><strong>Dream Job?</strong></a></span>
</div>
<div style="white-space:nowrap">
by <a href="http://www.ultimateteenforums.com/members/danielapereira.html" rel="nofollow">DanielaPereira</a>
</div>
<div align="right" style="white-space:nowrap">
Yesterday <span class="time">08:28 PM</span>
<a href="http://www.ultimateteenforums.com/careers-education/9-dream-job-post3258.html#post3258"><img class="inlineimg" src="images/totallypro/buttons/lastpost.gif" alt="Go to last post" border="0" /></a>
</div>
</div>
</td>
<td class="althp">7</td>
<td class="althp" style="border-right: #e7ecee 1px solid;">43</td>
</tr>
<tr align="center">
<td class="althp" style="border-left:#e7ecee 1px solid;"><img src="images/totallypro/statusicon/forum_old.gif" alt="" border="0" id="forum_statusicon_35" /></td>
<td class="althp" align="left" id="f35">
<div>
<a href="http://www.ultimateteenforums.com/fitness-dieting-foods-recipes/" style="font-size:13px;"><strong>Fitness, Dieting, Foods & Recipes</strong></a>
</div>
<div class="smallfont">Come in here to discuss fitness, talk about dieiting & techniques as well as diets youve tried, the foods that you eat, cooking & techniques, recipes & ingredients.</div>
</td>
<td class="althp">
<div class="smallfont" align="left">
<div>
<span style="white-space:nowrap">
<img class="inlineimg" src="images/icons/icon1.gif" alt="" border="0" />
<a href="http://www.ultimateteenforums.com/fitness-dieting-foods-recipes/358-do-u-butter-ur-bread-new-post.html" style="white-space:nowrap" title="Go to first unread post in thread 'Do u butter ur bread?'"><strong>Do u butter ur bread?</strong></a></span>
</div>
<div style="white-space:nowrap">
by <a href="http://www.ultimateteenforums.com/members/itachi.html" rel="nofollow">Itachi</a>
</div>
<div align="right" style="white-space:nowrap">
Yesterday <span class="time">08:09 PM</span>
<a href="http://www.ultimateteenforums.com/fitness-dieting-foods-recipes/358-do-u-butter-ur-bread-post3256.html#post3256"><img class="inlineimg" src="images/totallypro/buttons/lastpost.gif" alt="Go to last post" border="0" /></a>
</div>
</div>
</td>
<td class="althp">11</td>
<td class="althp" style="border-right: #e7ecee 1px solid;">110</td>
</tr>
<tr align="center">
<td class="althp" style="border-left:#e7ecee 1px solid;"><img src="images/totallypro/statusicon/forum_old.gif" alt="" border="0" id="forum_statusicon_34" /></td>
<td class="althp" align="left" id="f34">
<div>
<a href="http://www.ultimateteenforums.com/fashion-glamour/" style="font-size:13px;"><strong>Fashion and Glamour</strong></a>
</div>
<div class="smallfont">Seek and share advice on clothing, make-up, hairstyles, haircuts and all things cosmetic related. Learn about and discuss current fashion and style trends as well as share fashion tips.</div>
</td>
<td class="althp">
<div class="smallfont" align="left">
<div>
<span style="white-space:nowrap">
<img class="inlineimg" src="images/icons/icon1.gif" alt="" border="0" />
<a href="http://www.ultimateteenforums.com/fashion-glamour/321-favourite-colours-clothes-new-post.html" style="white-space:nowrap" title="Go to first unread post in thread 'Favourite colours for clothes'"><strong>Favourite colours for clothes</strong></a></span>
</div>
<div style="white-space:nowrap">
by <a href="http://www.ultimateteenforums.com/members/mitsuko.html" rel="nofollow">Mitsuko</a>
</div>
<div align="right" style="white-space:nowrap">
Today <span class="time">08:16 PM</span>
<a href="http://www.ultimateteenforums.com/fashion-glamour/321-favourite-colours-clothes-post3321.html#post3321"><img class="inlineimg" src="images/totallypro/buttons/lastpost.gif" alt="Go to last post" border="0" /></a>
</div>
</div>
</td>
<td class="althp">8</td>
<td class="althp" style="border-right: #e7ecee 1px solid;">39</td>
</tr>
</tbody>
</table>
<div class="tfooter"> </div>
<br /><div class="tcat">
<div class="tcat_right">
<a style="float:right;margin-top:7px;margin-right:9px;" href="#top" onclick="return toggle_collapse('forumbit_5')"><img id="collapseimg_forumbit_5" src="images/totallypro/buttons/collapse_tcat.gif" alt="" border="0" /></a>
<div class="tcat_left">
<a id="entertainment" name="entertainment" href="http://www.ultimateteenforums.com/#entertainment">Entertainment </a>
</div>
</div>
</div>
<table cellpadding="6" cellspacing="0" border="0" width="100%" align="center">
<tbody id="collapseobj_forumbit_5" style="">
<tr align="center">
<td class="thead" width="10%"> </td>
<td class="thead" width="47%" align="left">Forum</td>
<td class="thead" width="27%">Last Post</td>
<td class="thead" width="8%">Threads</td>
<td class="thead" width="8%">Posts</td>
</tr>
<tr align="center">
<td class="althp" style="border-left:#e7ecee 1px solid;"><img src="images/totallypro/statusicon/forum_old.gif" alt="" border="0" id="forum_statusicon_33" /></td>
<td class="althp" align="left" id="f33">
<div>
<a href="http://www.ultimateteenforums.com/music-discussion/" style="font-size:13px;"><strong>Music Discussion</strong></a>
</div>
<div class="smallfont">Discuss the latest bands, singers and artists. Share your own music, chat about instruments, genres, learning an instrument, vocals and more.</div>
</td>
<td class="althp">
<div class="smallfont" align="left">
<div>
<span style="white-space:nowrap">
<img class="inlineimg" src="images/icons/icon36.png" alt="Icon36" border="0" />
<a href="http://www.ultimateteenforums.com/music-discussion/382-best-music-vidioclip-new-post.html" style="white-space:nowrap" title="Go to first unread post in thread 'Best music vidioclip'"><strong>Best music vidioclip</strong></a></span>
</div>
<div style="white-space:nowrap">
by <a href="http://www.ultimateteenforums.com/members/natman.html" rel="nofollow">Natman</a>
</div>
<div align="right" style="white-space:nowrap">
Today <span class="time">11:12 AM</span>
<a href="http://www.ultimateteenforums.com/music-discussion/382-best-music-vidioclip-post3299.html#post3299"><img class="inlineimg" src="images/totallypro/buttons/lastpost.gif" alt="Go to last post" border="0" /></a>
</div>
</div>
</td>
<td class="althp">17</td>
<td class="althp" style="border-right: #e7ecee 1px solid;">155</td>
</tr>
<tr align="center">
<td class="althp" style="border-left:#e7ecee 1px solid;"><img src="images/totallypro/statusicon/forum_old.gif" alt="" border="0" id="forum_statusicon_22" /></td>
<td class="althp" align="left" id="f22">
<div>
<a href="http://www.ultimateteenforums.com/films-television-anime/" style="font-size:13px;"><strong>Films, Television and Anime</strong></a>
<span class="smallfont">(1 Viewing)</span>
</div>
<div class="smallfont">Discuss the latest films, cinema listings, talk about TV shows, chat about anime and share trailers with your peers.</div>
</td>
<td class="althp">
<div class="smallfont" align="left">
<div>
<span style="white-space:nowrap">
<img class="inlineimg" src="images/icons/icon17.png" alt="Icon17" border="0" />
<a href="http://www.ultimateteenforums.com/films-television-anime/373-tv-new-post.html" style="white-space:nowrap" title="Go to first unread post in thread 'TV'"><strong>TV</strong></a></span>
</div>
<div style="white-space:nowrap">
by <a href="http://www.ultimateteenforums.com/members/itachi.html" rel="nofollow">Itachi</a>
</div>
<div align="right" style="white-space:nowrap">
Today <span class="time">05:40 PM</span>
<a href="http://www.ultimateteenforums.com/films-television-anime/373-tv-post3314.html#post3314"><img class="inlineimg" src="images/totallypro/buttons/lastpost.gif" alt="Go to last post" border="0" /></a>
</div>
</div>
</td>
<td class="althp">18</td>
<td class="althp" style="border-right: #e7ecee 1px solid;">96</td>
</tr>
<tr align="center">
<td class="althp" style="border-left:#e7ecee 1px solid;"><img src="images/totallypro/statusicon/forum_old.gif" alt="" border="0" id="forum_statusicon_17" /></td>
<td class="althp" align="left" id="f17">
<div>
<a href="http://www.ultimateteenforums.com/gaming-video-games/" style="font-size:13px;"><strong>Gaming & Video Games</strong></a>
</div>
<div class="smallfont">Discuss the latest game releases, share tips with gamers, talk about consoles and PC games. Share cheats and gaming tips, review games, discuss all of your favourite MMORPG's, FPS, Action games and more.</div>
</td>
<td class="althp">
<div class="smallfont" align="left">
<div>
<span style="white-space:nowrap">
<img class="inlineimg" src="images/icons/icon1.gif" alt="" border="0" />
<a href="http://www.ultimateteenforums.com/gaming-video-games/387-mafia-2-a-new-post.html" style="white-space:nowrap" title="Go to first unread post in thread 'Mafia 2'"><strong>Mafia 2</strong></a></span>
</div>
<div style="white-space:nowrap">
by <a href="http://www.ultimateteenforums.com/members/michael.html" rel="nofollow">Michael</a>
</div>
<div align="right" style="white-space:nowrap">
Today <span class="time">08:22 PM</span>
<a href="http://www.ultimateteenforums.com/gaming-video-games/387-mafia-2-a-post3323.html#post3323"><img class="inlineimg" src="images/totallypro/buttons/lastpost.gif" alt="Go to last post" border="0" /></a>
</div>
</div>
</td>
<td class="althp">21</td>
<td class="althp" style="border-right: #e7ecee 1px solid;">128</td>
</tr>
<tr align="center">
<td class="althp" style="border-left:#e7ecee 1px solid;"><img src="images/totallypro/statusicon/forum_old.gif" alt="" border="0" id="forum_statusicon_16" /></td>
<td class="althp" align="left" id="f16">
<div>
<a href="http://www.ultimateteenforums.com/computers-technology-internet/" style="font-size:13px;"><strong>Computers, Technology and Internet</strong></a>
</div>
<div class="smallfont">Discuss all things computers and technology related. Have a PC problem or want to discuss software? Chat all about the internet, computer parts, building computers, hardware, peripherals and more.</div>
</td>
<td class="althp">
<div class="smallfont" align="left">
<div>
<span style="white-space:nowrap">
<img class="inlineimg" src="images/icons/icon1.gif" alt="" border="0" />
<a href="http://www.ultimateteenforums.com/computers-technology-internet/377-programs-you-couldnt-live-without-new-post.html" style="white-space:nowrap" title="Go to first unread post in thread 'The programs you couldnt live without'"><strong>The programs you couldnt live...</strong></a></span>
</div>
<div style="white-space:nowrap">
by <a href="http://www.ultimateteenforums.com/members/michael.html" rel="nofollow">Michael</a>
</div>
<div align="right" style="white-space:nowrap">
Today <span class="time">08:28 PM</span>
<a href="http://www.ultimateteenforums.com/computers-technology-internet/377-programs-you-couldnt-live-without-post3324.html#post3324"><img class="inlineimg" src="images/totallypro/buttons/lastpost.gif" alt="Go to last post" border="0" /></a>
</div>
</div>
</td>
<td class="althp">27</td>
<td class="althp" style="border-right: #e7ecee 1px solid;">216</td>
</tr>
</tbody>
</table>
<div class="tfooter"> </div>
<br />
<script type="text/javascript" src="clientscript/vbulletin_read_marker.js?v=385"></script>
<script type="text/javascript">
<!--
vbphrase['doubleclick_forum_markread'] = "Double-click this icon to mark this forum and its contents as read";
init_forum_readmarker_system();
//-->
</script>
<!-- what's going on box -->
<div class="tcat">
<div class="tcat_right">
<div class="tcat_left">
What's Going On?
</div>
</div>
</div>
<table cellpadding="6" cellspacing="0" border="0" width="100%" align="center">
<!-- logged-in users -->
<tbody>
<tr>
<td class="thead" colspan="2">
<a style="float:right" href="#top" onclick="return toggle_collapse('forumhome_activeusers')"><img id="collapseimg_forumhome_activeusers" src="images/totallypro/buttons/collapse_thead.gif" alt="" border="0" /></a>
Currently Active Users: 31
</td>
</tr>
</tbody>
<tbody id="collapseobj_forumhome_activeusers" style="">
<tr>
<td class="althp" style="border-left:#e7ecee 1px solid;"><img src="images/totallypro/misc/whos_online.gif" alt="View Who's Online" border="0" /></td>
<td class="althp" style="border-right:#e7ecee 1px solid;" width="100%">
<div class="smallfont">
<div><a rel="nofollow" href="http://www.ultimateteenforums.com/members/michael.html"><span style="font-weight:bold; color:#c33a3a;">Michael</span></a>, <a rel="nofollow" href="http://www.ultimateteenforums.com/members/itachi.html"><span style="color:#3a8ec3;">Itachi</span></a>+, <a rel="nofollow" href="http://www.ultimateteenforums.com/members/mitsuko.html"><span style="color:#3a8ec3;">Mitsuko</span></a>+</div>
</div>
</td>
</tr>
</tbody>
<!-- end logged-in users -->
<tbody>
<tr>
<td class="thead" colspan="2">
<a style="float:right" href="#top" onclick="return toggle_collapse('forumhome_stats')"><img id="collapseimg_forumhome_stats" src="images/totallypro/buttons/collapse_thead.gif" alt="" border="0" /></a>
Teen Forum >>Teen Help & Advice << Statistics
</td>
</tr>
</tbody>
<tbody id="collapseobj_forumhome_stats" style="">
<tr>
<td class="althp" style="border-left:#e7ecee 1px solid;"><img src="images/totallypro/misc/stats.gif" alt="Teen Forum >>Teen Help & Advice << Statistics" border="0" /></td>
<td class="althp" style="border-right:#e7ecee 1px solid;" width="100%">
<div class="smallfont">
<div>
Threads: 390,
Posts: 3,321
</div>
<div>Welcome to our newest member, <a rel="nofollow" href="http://www.ultimateteenforums.com/members/smallville.html">smallville</a></div>
</div>
</td>
</tr>
</tbody>
</table>
<div class="tfooter"> </div>
<br />
<!-- end what's going on box -->
<!-- icons and login code -->
<table cellpadding="0" cellspacing="2" border="0" width="100%">
<tr valign="bottom">
<td>
<table cellpadding="2" cellspacing="0" border="0">
<tr>
<td><img src="images/totallypro/statusicon/forum_new.gif" alt="Contains New Posts" border="0" /></td>
<td class="smallfont"> Forum Contains New Posts</td>
</tr>
<tr>
<td><img src="images/totallypro/statusicon/forum_old.gif" alt="Contains No New Posts" border="0" /></td>
<td class="smallfont"> Forum Contains No New Posts</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- / icons and login code -->
</div>
<div style="clear:both;"></div>
<br />
<div class="smallfont" align="center">All times are GMT +1. The time now is <span class="time">10:21 PM</span>.<br />
</div>
<br />
<table cellpadding="6" cellspacing="0" border="0" width="100%" align="center">
<tr>
<td align="right" width="100%">
<div class="smallfont">
<strong>
<a href="admincp/index.php">Admin</a> -
<a href="modcp/index.php">Mod</a> -
</strong>
</td>
</tr>
</table>
<br />
<!-- nav buttons bar -->
<table cellpadding="0" cellspacing="0" border="0" align="center" class="navigation" width="100%">
<tr align="center">
<td class="navleft"></td>
<td class="navitem"><a href="#top" onclick="self.scrollTo(0, 0); return false;">Top</a></td>
<td class="navitem"><a rel="nofollow" href="/general-teen-advice/announcements.html">Forum Rules</a></td>
<td class="navitem"><a rel="nofollow" href="http://www.ultimateteenforums.com/contact-us/">Contact Us</a></td>
<td class="navitem"><a rel="nofollow" href="http://www.ultimateteenforums.com/login.php?do=logout&logouthash=1283030507-b5e6113e774a16f6ac0aaa0469b61a0c626858bd" onclick="return log_out('Are you sure you want to log out?')">Log Out</a></td>
<td width="100%"></td>
<td class="navright"></td>
</tr>
</table>
<!-- / nav buttons bar -->
<div class="footernavbot">
</div>
<div class="footer">
<div class="footer_left">
All Content Copyright © 2010, <a href="http://www.ultimateteenforums.com/">UltimateTeenForums.com</a>.<br />
Powered by vBulletin® Copyright ©2000 - 2010, Jelsoft Enterprises Ltd.
<br />Search Engine Friendly URLs by vBulletin SEO ©2010, Crawlability, Inc.</div>
<div class="footer_right">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- / close content container -->
<!-- /content area table -->
<script type="text/javascript">
<!--
// Main vBulletin Javascript Initialization
vBulletin_init();
//-->
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-4708861-19']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<script type="text/javascript">
//<![CDATA[
window.orig_onload = window.onload;
window.onload = function() {
if (is_ie || is_moz) { var cpost=document.location.hash;if(cpost){ if(cobj = fetch_object(cpost.substring(1,cpost.length)))cobj.scrollIntoView(true); }}
if(typeof window.orig_onload == "function") window.orig_onload();
}
//]]>
</script>
</body>
</html>
You will see the true power of CSS here if you do the above, well the lack of power the page has without it, without CSS most websites look a mess
Now open yourself up notepad or even better, download this, install it and open a new blank document:
Download | 5.7
It is a free powerful text editor that many web developers/designers couldnt live without.
Now either copy and paste the following, or hand type it yourself, hand typing will get you used to it however.
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
Type your code here.
</body>
</html>
Once done we need to add something to it so that something will show, we will use the <p> tag here for a basic demonstration.
Type:
<p>Hello World!</p>
Where I wrote type your code here.
Save the document as index.html and then open it with Firefox or your preferred browser.
You will see Hello World! at the top left of the screen, not exactly pretty though is it? Now its time for some CSS, although this will make it look different and a little better, it will not look that appealing to you but as you learn you will also learn how to be creative and make things beautiful yourself.
Within the <head> section after the title add this:
<style type="text/css">
.redtext { font-size:18px; color:#f00; font-weight:bold; font-family: Verdana, "Trebuchet Ms", "sans-serif";}
</style>
Edit the body section and wrap this around the <p> tags,
<div class="redtext">
If you have read all of this guide so far you should remember that you need to close the tag, add </div> after the </p>, this will close the div tag.
Save and reopen in your browser, you should now see a big, bold and bright red Hello World!
This is the very basics and I hope it has got you interested in learning some more, if enough people enjoy this I will be continuing with Part 2 soon. If you have questions dont hesitate to ask and I will do my best to help, please ask away if you found anything unclear, no question is too silly.
Today's Toppers
Re: Web Design Basics Part 1
