[ Home | Scripts | Tutorials | Templates ]

HTML Tutorial Unit 2

Lesson 1 - Advanced Text and Formatting
In unit 1, you learned how to format text.  Did you know that you can even do more with text though?  You can align text three different ways on the page with the paragraph tag (<p>).  You don't have to use an attribute.  The default is left.

<p align="left>Your text here</p> <!--default-->
<p align="center">Your text here</p>
<p align="right">Your text here</p> 

Your text here

Your text here

Your text here

 The paragraph tag indicates a new paragraph.  There is usually space between each paragraph like in the last example.  If you need to jump down a line without starting a new paragraph, use the <br> tag.  You have probably seen it in previous examples.

Hello<br>
Out<br>
There

Hello
Out
There

This can be very useful.  Have you seen strange things such as the following?

&nbsp;

Many symbols can not be just typed in to appear.  You have to use a code to input these symbols.  The code always starts with an ampersand (&) and ends with a semicolon (;).

Common Symbols and there code
space &nbsp;
< &lt;
> &gt;
& &amp;
You don't need to use the code for a space in a sentence, only when you need multiple spaces at once.

Hello out there<br>
Hello &nbsp;&nbsp;&nbsp;&nbsp; out &nbsp;&nbsp;&nbsp;&nbsp; there

Hello out there
Hello    out     there

It is plain to see why you need to use the other three.  If you are ready, let's move on.

Lesson 2 - Lists
Even though lists look complex, they are very simple.  There are two types of lists; ordered and unordered.  Ordered show numbers on the side while unordered show bullets.  There are three tags to remember (<ol>, <ul>, and <li>).

<ol>
    <li>number one</li>
    <li>number two</li>
</ol>

  1. number one
  2. number two

You don't need to indent your code.  This just keeps it neater and easier to read.  We could have put all that on one line, but it would be difficult to understand later.

<ul>
   <li>bullet one</li>
   <li>bullet two</li>
</ul>

  • bullet one
  • bullet two

This is very easy if you remember to indent your code.  We will move on when you have this figured out.

Lesson 3 - Tables
This lesson will have a lot of information in it, so pay close attention.  There are many tags and attributes for you to remember, so we will have tons of examples.  The main tags to keep in mind are the <table>, <tr>, and <td> tags.  A simple table is set up like this (remember to indent your code!):

<table>
     <tr>
          <td>cell 1</td>
          <td>cell 2</td>
     </tr>
</table>

cell 1 cell 2

This is a very simple table and easy to make.  I bet that if you didn't organize your code though,  you would have some trouble.  The first attribute to learn is the alignment attribute.  it is the same as for the paragraph tag.

<table align="center">
     <tr>
          <td>cell 1</td>
          <td>cell 2</td>
     </tr>
</table>

cell 1 cell2

The default for the align attribute is left.  The values can be left, right, or center.  The table tag has many more attributes such as follows.

<table align="center" border="1" bordercolor="#000000" cellspacing="0" cellpadding="0">
     <tr>
          <td>cell 1</td>
          <td>cell 2</td>
     </tr>
</table>

cell 1 cell 2

The following explains all the attributes and possible values:

Attribute Description of the attribute
align where the table is positioned on the screen (right, left, or center)
border The thickness of the border. A border of "0" is invisible.
bordercolor specifies the solid color of a border
cellspacing amount of space between each cell
cellpadding amount of space between a cell border and the contents of the cell
bordercolorlight the color of the light part of a three dimensional border
bordercolordark the color of the dark part of a three dimensional border
bgcolor the background color
background the location of a picture to tile as a background.
width the width of a table in pixels or percent of the screen
height the height of the table in pixels.  Not the percent of the screen.

If you use bordercolorlight and bordercolordark, you should not use bordercolor.  This also applies for bgcolor and background.  As you can see, there are many attributes.  You most likely will not use cellspacing or cellpadding.  I don't expect you to remeber all of these right away. Now for the in-depth look at these tags.  The table tag tells the browser to create a table.  The table row tag (<tr>) tells the browser to begin a new table row.  The cell tag (<td>) tells the browser to make a new cell.  Cells also have attributes of there own.  For example:

<table>
     <tr>
          <td bgcolor="blue">blue</td>
          <td bgcolor="red">red</td>
     </tr>
</table>

blue red

Many attributes are the same as the table attributes, but not all.

Attribute Description
bgcolor the background color
background the location of a picture to be tiled as a background
height height of a cell in pixels or in percent in relation to the height of the table.
width the width of a cell in pixels or in percent in relation to the width of the table.
colspan the number of columns a merged cell takes up
rowspan the number of rows a merged cell takes up.

Colspan and rowspan are more advanced.  It may take some time to learn these.

<table>
     <tr>
          <td rowspan="3">cell 1</td>
          <td>cell 2</td>
          <td>cell 3</td>
          <td>cell 4</td>
     </tr>
     <tr>
         <td colspan="3">cell 5</td>
     </tr>
     <tr>
         <td colspan="3">cell 6</td>
     </tr>
</table>

cell 1 cell 2 cell 3 cell 4
cell 5
cell 6

This may look complex, but you shouldn't use it much.  We are ready for another sample web page.  Here is a link to a text file with the code in it.  Save this page as table.html.

It is ok to copy the code from the screen with a text file link.  You can also right click on the link and select 'save target as'.  If you copied the code correctly, it should look like this.  You should understand all the code in the above example before we move on.  Tables can come in handy.  Most web pages are laid out in invisible tables (like this site).  An invisible table has the border attribute set to zero ("0").  If you plan to lay out your whole web site in tables,  you may need to draw a plan first of how you want it to look.

Overview | Back | Next Unit