0
\$\begingroup\$

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 -->
\$\endgroup\$
  • \$\begingroup\$ You should not put script or noscript or any other tags outside of the html 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\$ – Jared Farrish Jul 10 '11 at 19:07
  • \$\begingroup\$ Put the CSS in a separate file and link to it, in case you make more pages in the future that use the same look. \$\endgroup\$ – Dawood says reinstate Monica Jan 18 '12 at 7:45
  • 1
    \$\begingroup\$ The entire Code Review site is about improving code. Your title here is extremely unhelpful. \$\endgroup\$ – TRiG Jun 26 '12 at 17:18
4
\$\begingroup\$

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.

\$\endgroup\$
  • \$\begingroup\$ Can't I create my own tags like I have done here ? \$\endgroup\$ – fuddin Jul 12 '11 at 17:55
  • \$\begingroup\$ @fahad No, except if you want to create your own DTD (example tutorial) \$\endgroup\$ – kongr45gpen Jul 12 '11 at 20:43
1
\$\begingroup\$

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.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.