Tuesday, March 25, 2014

HTML tags and study resources

Hey Gang,

We have been digging into HTML tags lately.  You are going to learn this stuff much better if you practice.  There is a great tutorial on CodeAcademy.com that has great exercises for HTML and CSS.  W3Schools also is a great resource, here is their HTML and CSS exercises.

Remember that you have to close every tag you open and that you can 'nest' HTML.  HTML elements can each have attributes.

So far in class, we have learned the following tags.  ALL of these get 'nested' between the <body> and </body> tags (see below):

Paragraph:
<p>this is a paragraph</p>

Unordered list:
<ul>
  <li>ul stands for 'unordered list'</li>
  <li>li stands for 'list item'</li>
  <li>li elements are 'nested' inside the ul</li>
  <li>li elements have a bullet point in front of them by default</li>
</ul>

Ordered list:
<ol>
  <li>ol is an ordered list.  There will be numbers in front of each li, list item</li>
</ol>

Table:
A table stores data similar to Microsoft Excel.  You can have as many table rows (tr) as you want, and those rows can contain as many table data (td) that you want.
<table>
  <tr>
    <td>row 1 - cell 1</td>
    <td>row 1 - cell 2</td>
  <tr>
  <tr>
    <td>row 2 - cell 1</td>
    <td>row 2 - cell 2</td>
  </tr>
</table>

It is always good to review the basic HTML structure:
<html>
  <head>links to other documents and settings go in here</head>
  <body>
       <p>EVERYTHING you see on an HTML page goes inside the body tag</p>
  </body>
</html>

Some very important tags that we haven't learned yet are:
Anchor links - This is what runs the interwebs!
Images - This is what makes the interwebs look pretty!

Practice makes perfect with HTML, make sure get as much exposure as you can!


No comments:

Post a Comment