HTML website practice exercise

Question 1

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>

Question 2

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)

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.
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; }.
Do not put a ul inside a p tag. Close the p tag and then add another p tag after the ul instead.
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>

Question 3

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

Question 4

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

Question 5

@fahad A good read would be the HTML Dog site. It has references and articles at beginner,intermediate and advanced levels.

Question 6

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

Question 7

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

James Khoury – James Khoury · Accepted Answer · 2011-06-29 23:41:34Z

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)

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.
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; }.
Do not put a ul inside a p tag. Close the p tag and then add another p tag after the ul instead.
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>

@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.
@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.
@fahad A good read would be the HTML Dog site. It has references and articles at beginner,intermediate and advanced levels.
@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>.
@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.

Stack Exchange Network

HTML website practice exercise

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Hot Network Questions

HTML website practice exercise

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Related

Hot Network Questions