Web Design 101: Study Group

Week Two Activity Forum

Pippa Buchanan on Sat, 2010-09-25 11:34

Go back to: General discussion

Use this forum space to discuss the topics covered in Week Two's readings and to share the activity work.

Please be constructive with your criticism of each other's work and don't be afraid to ask questions either!

gonediscin

Mon, 2010-09-27 07:19

Hi I just posted my basic HTML page up, but I stopped after reading the tables section in the suggested reading because it is late. Will pick up over the next couple days. http://kylerowden.com/

My questions I have:

Why is my first ul bullet is above the text?

I know CSS is next week, but why is the site looking at my handheld style over my screen style when I have the css href active (not surrounded by comment tags)?

link to this comment

Josh Knox

Tue, 2010-09-28 20:55

Nice Kyle! I like the header image too!

link to this comment

Pippa Buchanan

Mon, 2010-09-27 11:21

hi Kyle,

I can't see any problems with your bullets, but you should proofread your Style sheet references!

I'll give you a clue: You're missing the "=" sign on two very important lines.

link to this comment

gonediscin

Mon, 2010-09-27 14:56

Thank you Pippa! Tomorrow I will find out where those pesky "=" goes. Last night I fixed the bullet issue, but it got fixed when i put http-equiv="content-type" in the meta tag. Don't know why.

link to this comment

gonediscin

Wed, 2010-09-29 00:35

I can't believe I stared at those 2 lines for half an hour and didn't see that! OMG I found where the "=" goes with your help. I now only have 1 error per validation in line 52 with the short attribute in my ol tag. http://bit.ly/bravYJ It seems as if CSS is needed for this because strict html 4.1 doctype doesn't support this deprecated attribute. I also did this page for designers tackeling the web, http://thebunglebus.com

PS. Thank you Josh!

link to this comment

Josh Knox

Tue, 2010-09-28 13:26

OK here is my first attempt at using tables for structure, and some other stuff. There is no CSS in this version. I plan on making a copy and trying to add some CSS later this week. Right now it's not very "pretty".

www.cornerstone4him.com/week2/index.htm

And validation of the home page:
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.cornerstone4him.com%2...

Validation of the contact page:
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.cornerstone4him.com%2...

Validation of the about page:
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.cornerstone4him.com%2...

link to this comment

Pippa Buchanan

Tue, 2010-09-28 14:00

Hey Josh,

I'm really sorry to say this... that looks great... BUT, using tables for structure and layout is really, really bad form and against modern web standards.

Sadly, a lot of tutorials still exist from the early days of the web, when CSS was in its infancy and tables were the best way of positioning elements on a page. Around about 2001 that began to change. Web standards have moved forwards and we now have CSS for layout and HTML for structure.

Yes, the page does validate, but the validator doesn't check the semantics of a page and the validator can't check what the table content means. Tables should only be used to display tabular data, such as statistics, or financial information. This is bad HTML juju.

The challenge this week was not to make a styled page without CSS, but to correctly structure the code using HTML. Next week we'll begin to work on CSS and will slowly begin to introduce using CSS for positioning elements.

So, back away from the layout tables Josh! Now turn and run! Don't stop until you're well away from the archaic web markup and while you're recovering from that flight from danger you should have a read of this:

http://dev.opera.com/articles/view/19-html-tables/

and some articles from the excellent site A List Apart about converting from table based layouts to CSS. Yep - this was way back in 2001..

http://www.alistapart.com/articles/practicalcss/
http://www.alistapart.com/articles/journey/

and the discussion continues (from 2009)
http://www.smashingmagazine.com/2009/04/08/from-table-hell-to-div-hell/

link to this comment

Josh Knox

Wed, 2010-09-29 00:05

I removed the tables from the main pages and even removed the table from the form on the contact page and instead used unordered list (which is really ugly). Now I will begin to experiment with div
(www.cornerstone4him.com/week2/index.htm)

Here is my newest stuff:
Week 2 - Bad Structure using Tables
Week 2 - Plain XHTML
Week 2 - Playing with a little CSS

link to this comment

Pippa Buchanan

Wed, 2010-09-29 11:43

That looks great! and thank you for avoiding the use of tables as structural elements!
For everyone else... don't stress out if you're not yet feeling confident enough to work with CSS like Josh is. You only need to begin learning these basic CSS concepts this week.

link to this comment

gonediscin

Wed, 2010-09-29 00:34

Nice page Josh, and I bet I will refer to your page for CSS help when it comes time for us to use CSS.

link to this comment

Justin Bennett

Thu, 2010-09-30 00:55

Here's my week two assignment. www.justinbennett.ca Not pretty at all and it's lacking content in some areas but I think I hit the learning points.

link to this comment

Pippa Buchanan

Thu, 2010-09-30 10:26

Let's put it this way, HTML is not meant to be pretty - it's meant to be informative! CSS - it gets all the love and glory while HTML does the hard work!

It looks great Justin - your HTML is on track!