Lab 4
These topics aren't covered well in the book, so use these tutorials:
Html Tables http://www.w3schools.com/html/html_tables.asp
ColSpans and Rowspans http://www.htmlcodetutorial.com/tables/index_famsupp_30.html
Divisions http://www.w3schools.com/tags/tag_DIV.asp
Spans http://www.w3schools.com/TAGS/tag_span.asp

Assignment

Tables

 Tables are useful for organization of almost anything you want to display on your page into a neat box form. The following is code for a very simple table.

<table border="1">
<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>

You can modify the thickness of the borders by changing the number. <tr> Indicates each row of data, and <td> denotes every cell entry.

That table should look something like this:

Column 1 Column 2
row 1, cell 1 row 1, cell 2 cheese whiz
row 2, cell 1 row 2, cell 2  

Obviously, I have added a bit more formatting than is in the code above, try to figure out what I did and how I did it.

Other important tags used in tables:
Tag Use
<table> Defines a table
<th> Defines a table header
<tr> Defines a table row
<td> Defines a table cell
<caption> Defines a table caption
<colgroup> Defines groups of table columns
<col> Defines the attribute values for one or more columns in a table
<thead> Defines a table head
<tbody> Defines a table body
<tfoot> Defines a table footer
*This is actually a table in disguise!!

Divisions and Spans

<div> and <span> are ways of defining sections of your code. 
DIV starts on a new line
(block level) and SPAN is inline.


Code from the Interwebs
  1. Surf the Internet, and find three webpages that you like which have html code you can mostly read.
  2. Cut and paste pieces of the code into a new document, to make your own webpage out of someone else's code. The page doesn't need to be on the same topic, but it needs to work out visually. These can be very simple pages.
  3. Make sure to use a comment line at the beginning and end of each section of borrowed code:
    <!-- This code from page http://www.ratemymullet.com -->
    blah blah blah
    <!-- This ends the code from page http://www.ratemymullet.com -->
  4. If you don't use the comment lines around the code, it's cheating!!! :)
  5. Make sure you can see it from the Internet.
Here's a freebee... youtube gives you the code on how to post videos... now find 2 more pages!



Upload Your Own Webpage!!

If you are on Linux:
  1. Navigate to your home directory (it should be on your desktop with your login name on it)
  2. Create a folder called "public_html"
  3. Stick your file and any pictures/other pages you might need for it into that folder
  4. Change the read permissions on the folder and files so that everyone can read it (I will go into more detail on that if there are any problems)
  5. Go to http://www.cs.ucr.edu/~(your login)/(name of the file) and watch the online hits begin!!
*advanced directions and policies

If you are on Windows:
  1. Navigate to your Z: drive
  2. Repeat steps 2-5 on the Linux description
*One thing to note is that if you name the file index.html, you do not need to specify the filename and it will automatically go to that page if you simply enter http://www.cs.ucr.edu/~(your login)

 Assignment