Please review this:
<!DOCTYPE html >
<html dir="ltr" lang="en-UK">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fahad | Just another web designer</title>
<!--Styling Starts-->
</script>
<style type="text/css">
h1 {
font-size:100px;
display:inline-block;
vertical-align:top;
padding:5px;
width:300px;
}
.menu
{
padding-top:90px;
width:200px;
display:inline-block;
float:left;
}
.menu ul {
list-style-type:none;
}
.container
{
color:#666;
}
a:link
{
color:#666;
}
a:hover
{
color:#333;
}
a:active
{
color:#666;
}
a:visited
{
color:#666;
}
a
{
text-decoration:none;
}
p
{
font-family:Verdana, Geneva, sans-serif;
font-size:24px;
}
x
{
font-size:36px;
font-family:Verdana, Verdana, Geneva, sans-serif;
color:#06F;
}
#para
{
;
padding-left:200px;
padding-right:200px;
}
#bio
{
float:left;
height:200px;
width:200px;
}
#bio h2
{
font-size:40px;
display:inline-block;
vertical-align:top;
padding:5px;
width:300px;
}
#achievements
{
height:200px;
width:200px;
float:right;
}
#achievements h2
{
font-size:40px;
display:inline-block;
vertical-align:top;
padding:5px;
width:300px;
}
#dreams
{
float:left;
height:200px;
width:200px;
padding-left:150px;
}
#dreams h2
{
font-size:40px;
display:inline-block;
vertical-align:top;
padding:5px;
width:300px;
}
</style>
</head>
<body>
<div class="container">
<h1>Fahad</h1>
<div class="menu">
<ul>
<li><a href="http://www.facebook.com/fahd92">Home</a> </li>
<li><a href="http://www.facebook.com/fahd92">Blog</a></li>
<li><a href="http://www.facebook.com/fahd92">About</a></li>
<li><a href="http://www.facebook.com/fahd92">Contact</a></li>
</ul>
</div >
<div id="para">
<p>I m a <x>programmer</x> and <del>now starting my career as</del> a
<x>Web designer</x>
. It takes a lot of time to start writing <x>beutifully</x>. I am not very good at spelling so do not point out <x>spelling mistakes</x>.</p>
<div id="bio"><!--Biography starts-->
<h2>Biography</h2>
<p>I was born in bla year <x>foo</x> date. I like working on <x>computers</x></p>
</div><!--Biography ends-->
<div id="achievements"><!--Achievements starts-->
<h2>Achievements</h2>
<p>Don't know what to put in it. I have a lot of dreams to <x>accomplish</x></p>
</div><!--Achievements ends-->
<div id="dreams"><!--Dreams starts-->
<h2>Dreams</h2>
<p>I <x>dream</x> a lot. Why shouldn't I? Dreams are <x>cool</x>. They make us <x>ambitious</x>.</p>
</div><!--Dreams ends-->
</div><!--para ends-->
<!--menu div ends--></div><!--Container Div ends-->
</body>
</html>
<!-- www.000webhost.com Analytics Code -->
<script type="text/javascript" src="http://analytics.hosting24.com/count.php"></script>
<noscript><a href="http://www.hosting24.com/"><img src="http://analytics.hosting24.com/count.php" alt="web hosting" /></a></noscript>
<!-- End Of Analytics Code -->
2 Answers 2
Two notes:
- Line 2: use
en-GB
- Line 5:
</script>
without<script>
You had better not use the 000webhost.com analytics code, but other services such as Google Analytics or Clicky.
And there is no <x>
tag in HTML. You should use <b>
instead, or even <span class="x">
Shorten your code
Instead of:
.container
{
color:#666;
}
a:link
{
color:#666;
}
a:hover
{
color:#333;
}
a:active
{
color:#666;
}
a:visited
{
color:#666;
}
use:
.container,a:link,a:visited
{
color:#666;
}
a:hover
{
color:#333;
}
a:active
{
color:#666;
}
Finally, there is a problem with 1042x768 screens: The Dreams box isn't in the correct position.
-
\$\begingroup\$ Can't I create my own tags like I have done here ? \$\endgroup\$user1211– user12112011年07月12日 17:55:38 +00:00Commented Jul 12, 2011 at 17:55
-
\$\begingroup\$ @fahad No, except if you want to create your own DTD (example tutorial) \$\endgroup\$kongr45gpen– kongr45gpen2011年07月12日 20:43:52 +00:00Commented Jul 12, 2011 at 20:43
When writing HTML code (forgive me if I am wrong since I do not do a lot in HTML), the code doesn't really matter (sort of). As long as it's clean (which yours is) and with clear organizational pattern, the actual content of code shouldn't matter because HTML is based on laying out information in a nice visual manner, and is not really logic, like programming on c++, C#, python, etc. But, be aware that this is with HTML code and if you have a scripting language like javascript, python, or php, then you should look at yours code's performance, readability, and maintainability.
script
ornoscript
or any other tags outside of thehtml
tag itself. Use the online version of the W3C validator or try the Firefox add-on HTML TIdy (which I really like for ease of use). \$\endgroup\$