## More HTML notes

18 Sep 2011

Take a look at the week 4 summary for the example html file we created last class. In particular, pay attention to the way it's organized: as you complete this homework, always remember to keep your html file properly nested. There are a few ways to help with this, that I tried to do during class:

• Always indent your file so that you indent more every time you start a new branch, and indent less when that branch is finished.
• Always insert matching pairs of tags before inserting their content. For example, if you want to create a list, I'd insert the tags that indicate the start and end of your list before adding any items. For example, start off with this:

<html>
<body>
<ol>
</ol>
</body>
</html>


And then when you want to add in items, you can add them in between the ol tags you just added:

<html>
<body>
<ol>
<li>Here's my first item</li>
<li>Here's item #2</li>
</ol>
</body>
</html>

• Remember that there are a few tags that don't have matching ending tags. For these tags (like br and img), you should end the tag with a / so that you can tell visually that you don't need to expect a closing tag. For example:

<html>
<body>
Here is a picture: <br />
<img src="my-picture.jpg" />
</body>
</html>


Finally, you should take a look at lots of examples. The internet is all examples, since you can right-click on any page and select "view source" to see the html code that underlies what you're viewing.

But, keep in mind the #1 rule of the internet: 99.9% of all internet content is horrible. The example file I created last class is no exception: at least one way that it's horrible is that it's incredibly ugly. However, it is at least properly organized, which is better than most web pages out there.

One place that I think is a good start (apart from the course readings) is this introductory tutorial, which has lots of properly structured examples with good explanations. If you find other examples/tutorials and are ever confused, let me know and I can help you figure out whose fault the confusion is.