Website built with HTML and CSS

Question

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 -->

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). — Jared Farrish, Commented Jul 10, 2011 at 19:07
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. — Dawood ibn Kareem, Commented Jan 18, 2012 at 7:45
The entire Code Review site is about improving code. Your title here is extremely unhelpful. — TRiG, Commented Jun 26, 2012 at 17:18

Community · Accepted Answer · 2020-06-10 13:24:26Z

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.

@fahad No, except if you want to create your own DTD (example tutorial) — kongr45gpen, Commented Jul 12, 2011 at 20:43

Michael K · Accepted Answer · 2011-07-12 15:22:57Z

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.

Stack Exchange Network

Website built with HTML and CSS

2 Answers 2

Shorten your code

Your Answer

Hot Network Questions

Website built with HTML and CSS

2 Answers 2

Shorten your code

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions