7
\$\begingroup\$

Here is a problem I solved. Please review this.

<!DOCTYPE HTML>
<html>
    <head>
            <title>BLA| Welcome </title>
    </head>
    <body>
            <h1 align="center">Meet Jack</h1>
            <img src="http://www.htmliseasy.com/exercises/jack.gif" alt="Meet Jack"> <br/>
            <p> He is Jack.He is an odd little boy that just got an empty box for his birthday. He may <em>look </em> happy but is a <em>little </em> disappointed. Now he will have to put a little things in the box.<br/>
            Jack would really like...<br/>
                <ul>
                    <li>Roller blades</li>
                    <li>Magic tricks</li>
                    <li>Anything Pokemon</li>
                    <li>A motorized Lego set</li>
                </ul>
                <br/>
                You can get all this (and more) at an online toy store. Two very popular ones are <a href="http://www.toysrus.com/">toysrus.com </a>and <a href="http://www.etoys.com/">eToys</a>.            
            </p>

    </body>
</html>
\$\endgroup\$

1 Answer 1

Reset to default
12
\$\begingroup\$

Okay, I am not sure exactly in what limits your exercise is, but I'll answer to what I think is good web standard. (I've been a web developer for ~4 years)

  1. Don't use the align attribute. HTML is supposed to be a markup language. Use CSS to control the appearance of your html elements. In this case something like h1 { text-align: center; } should do just fine.
  2. Don't use the <br /> tags for other things than actual line-breaks (that is, to break text). I would remove all <br /> tags, since you don't need them in this exercise. Elements like ul, li and p are by default block elements, which flows vertically. If you need more space between elements, use margin/padding instead. However, img is not a block element by default, so you can either wrap it in a div or make it a block element using CSS like img { display: block; }.
  3. Do not put a ul inside a p tag. Close the p tag and then add another p tag after the ul instead.
  4. Fine detail: insert line breaks in text to increase readability. A typical practice is to keep lines less than 80 characters.

Btw, you do know that there are validator tools for HTML, right?

EDIT: Full code, in a better way: (Note that I chose to preserve one br tag. Maybe it can be an exercise to figure out why)

<!DOCTYPE HTML>
<html>
    <head>
        <style>
            h1 { text-align: center; }
            img { display: block; }
        </style>
        <title>BLA| Welcome </title>
    </head>
    <body>
            <h1>Meet Jack</h1>
            <img src="http://www.htmliseasy.com/exercises/jack.gif" alt="Meet Jack" />
            <p>He is Jack. He is an odd little boy that just got an empty box for his
               birthday. He may <em>look</em> happy but is a <em>little</em>
               disappointed. Now he will have to put a little things in the box.<br />
               Jack would really like...</p>
            <ul>
                <li>Roller blades</li>
                <li>Magic tricks</li>
                <li>Anything Pokemon</li>
                <li>A motorized Lego set</li>
            </ul>
            <p>You can get all this (and more) at an online toy store. Two very popular
               ones are <a href="http://www.toysrus.com/">toysrus.com</a> and
               <a href="http://www.etoys.com/">eToys</a>.</p>

    </body>
</html>
\$\endgroup\$
8
  • \$\begingroup\$ @Betamos Thats an excellent and detailed answer! +2 if I could. The only thing I would add is a full CSS example as the OP doesn't have any. It would be good to show some example <style> tags or `<link> tag. \$\endgroup\$ Commented Jun 30, 2011 at 0:00
  • \$\begingroup\$ @Betamos: Thanks a lot for such a nice answer. I am trying to learn HTML from a long time but do not find good resources to learn.Sorry I don't know about the validator tool too. \$\endgroup\$ Commented Jun 30, 2011 at 0:45
  • 1
    \$\begingroup\$ @fahad A good read would be the HTML Dog site. It has references and articles at beginner,intermediate and advanced levels. \$\endgroup\$ Commented Jun 30, 2011 at 1:54
  • 1
    \$\begingroup\$ @fahad: The syntax differences between HTML and XHTML are small. It's simple to convert between the two. The most important difference: "Empty" elements don't have a final /. XHTML: <br/>. HTML: <br>. \$\endgroup\$ Commented Jun 30, 2011 at 15:13
  • 1
    \$\begingroup\$ @RoToRa In both XHTML and HTML5, <tagname /> is allowed. I use them because they increase readability of the code and are more portable. @fahad The br tag is just there because it probably looks better with a new line there. \$\endgroup\$ Commented Jun 30, 2011 at 15:43

You must log in to answer this question.