The Internet Classroom
Viva la Revolución!
Posted by kass at 2006/06/23 08:39:46 PDT
Edited by senchent at 2006/06/23 14:09:25 PDT

8:30-8:45 / 1:00-1:15

Tables lecture (Trev)

8:45-9:40 / 1:15-2:10

Tables practice

9:40-10:00 / 2:10-2:30

Web Standards / XHTML rules lecture (Kass)

10:00-10:30 / 2:30-3:00

Break

10:30-11:00 / 3:00-3:30

CSS Basics lecture (Stevie & Vivian)

11:00-11:30 / 3:30-4:00

Revising old pages and use CSS / Class log / Journal questions

11:30-11:40 / 4:00-4:10

Introduce web services project / Sign-ups

11:40-12:00 / 4:10-4:30

Free Time


Tables

Tags:

<table></table> - Table - creates a table.
<tr></tr> Table Row - begins and ends a row.
<th></th> Table Head - typically used at top of table.
<td></td> Table Data - creates a cell.

Attributes (within the Table tag)

<table border="2" width="30px|60%" cellpadding="6" cellspacing="10">

Example of a basic 2x2 table:

<table border="1">
<tr>
<td>
1A</td><td>1B</td>
</tr>
<tr>
<td>
2A</td><td>2B</td>
</tr>
</table>


Standards Compliance

The three things you need in all of your HTML documents. (Note: you still give all your documents a .html extension, despite our use of the term XHTML.)

  • Add a "DOCTYPE" declaration to all your documents. A List Apart has a decent article with all of the doctypes you'll probably ever use for your projects. (Strict vs. Transitional)

          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  • Your beginning <html> tag shall henceforth look like this:

          <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  • And you must include the following tag within your <head> </head> section:

          <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

XHTML rules (most of which you've already been doing!)

  • Tag contents should [almost] always be lowercase. Very few exceptions.

  • Tags that have attributes defined in them must have quotation marks, either a single or double.

  • All tags must have an accompanying closing tag.

  • Nest your tags properly: First In, Last Out as they say. (i.e. <b><i></i></b>, NOT <b><i></b></i>)

  • Do not use deprecated tags or attributes, or "out of date" tags. Check the book or Google to see if a tag is deprecated or just try it and see if your page validates.

All pages that you make must have a validation link on them for both HTML and CSS. It might look something like this:

<p><a href="http://validator.w3.org/check?uri=referer">XHTML 1.0</a>,
<a href="http://jigsaw.w3.org/css-validator/check/referer">CSS 2.0</a></p>

Funny pic that Lloyd found for me: http://poisonedminds.com/comics/pm20060621.png


Journal Question

What do you think of the whole standards issue? When should you use CSS and when should you use XHTML when designing a webpage? Do you see a clear distinction or is a bit confusing to you right now? Also, how much of your previous web work was not XHTML standard-compliant?

Homework

  • Prepare for your website presentation. Those of you who got the more popular sites have to present on Monday!!

  • Make sure your indexes are updated for the week.

  • Finish making all your pages XHTML standard compliant and put validator links on each page to make sure.

  • If you want to learn more about tables, read pages 205-222 of chapter 13.

2006/06/23 09:10:35 PDT by Raikia
[Raikia's avatar]

Is there a way to make all the cells the same width? o.o

(¯`v´¯)
`*.¸.*´
¸.•´¸.•*¨) ¸.•*¨)
(¸.•´ (¸.•´ .•´ ¸¸.•¨¯`•. ~Raid kills on contact <3

2006/06/23 09:12:59 PDT by Forward Biased
[Forward Biased's avatar]

That's a 2x2 table...

2006/06/23 09:13:23 PDT by senchent
[senchent's avatar]

LOL.. thanks Quad

2006/06/23 09:13:29 PDT by kass
[kass's avatar]
Quote from Forward Biased:

That's a 2x2 table...

Trev's not quite awake yet. ::HAHAHA::

2006/06/23 09:14:16 PDT by kass
[kass's avatar]
Quote from Raikia:

Is there a way to make all the cells the same width? o.o

Yes, but like the colors thing ::cough::, there is a right way to do it and a wrong way to do it. We'll be showing you the right way for it very soon (like, today soon!) ... but not just yet. >_>

2006/06/23 09:17:08 PDT by MANG0xSALSA
[MANG0xSALSA's avatar]

so what if my month starts on a thursday so i want to get the '1' on the Thursday cell, how do i do that?

2006/06/23 09:18:18 PDT by FujiApples

Make blank cells.

<tr>
<td> </td> <td> </td> <td> </td> <td> </td> <td> 1 </td> <td> 2 </td> <td> 3 </td>
</tr>

2006/06/23 09:19:06 PDT by kass
Edited at 2006/06/23 09:19:36 PDT
[kass's avatar]
Quote from MANG0xSALSA:

so what if my month starts on a thursday so i want to get the '1' on the Thursday cell, how do i do that?

Just means you should have a bunch of empty cells before you start putting in the numbers.

[edit] Fuji beat me. ;_;

2006/06/23 09:22:39 PDT by MANG0xSALSA
[MANG0xSALSA's avatar]

ugck yeah thats how i was doing it but then i was wondering if there was a different way cuz it takes too much effort..
x]

2006/06/23 09:33:41 PDT by Raikia
[Raikia's avatar]

I made blank cells, but they all just became a huge blank spot. Like, not cells. Just a blank section of the line. >>

(¯`v´¯)
`*.¸.*´
¸.•´¸.•*¨) ¸.•*¨)
(¸.•´ (¸.•´ .•´ ¸¸.•¨¯`•. ~Raid kills on contact <3

2006/06/23 09:39:16 PDT by macdrenalds

write in the days in teh first row then...
<td>Sunday</td>
<td>Monday</td>
<td>Tuesday</td>
<td>Wednesday</td>
<td>Thursday</td>
<td>Friday</td>
<td>Saturday</td>

2006/06/23 09:41:31 PDT by EggPuffs
[EggPuffs's avatar]
Quote from Raikia:

I made blank cells, but they all just became a huge blank spot. Like, not cells. Just a blank section of the line. >>

o.O What do you mean?

Terrance is afraid of being stalked by a slut. (Don't ask. I made a pic but you probably don't want to see it.)
"Everyone has the right to be stupid, but some people overabuse the privilege."
~anonymous

2006/06/23 10:03:54 PDT by macdrenalds

T_T....lots of numbers and letters...

2006/06/23 10:39:19 PDT by aqhong
Edited at 2006/06/23 10:42:25 PDT
Quote from Raikia:

I made blank cells, but they all just became a huge blank spot. Like, not cells. Just a blank section of the line. >>

You can force the cell outline to appear by placing a non-breaking space in it. Just insert this code into the blank cell:

&nbsp;

PS. Actually, there's a better way to do this... with CSS, of course. Which we will teach you very, very soon :P

2006/06/23 10:40:41 PDT by NormanZhu
[NormanZhu's avatar]

I think he means he didn't put anything in the table but the tr and td/th tags, no content. And if you don't put anything it just turns out blank.

My signature is better than your signature.

All TIC materials copyright © 2006 Cynthia Nie and Trevor Ridinger
Powered by Io Community Manager, Evlan, and FreeBSD