6
\$\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\$
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\$
  • \$\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\$ – James Khoury Jun 30 '11 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\$ – fuddin Jun 30 '11 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\$ – James Khoury Jun 30 '11 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\$ – RoToRa Jun 30 '11 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\$ – Betamos Jun 30 '11 at 15:43

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.