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.