Monday, February 25, 2008

making a list and checking it twice


whew, what a wild ride we had this week.

We started out by creating a new page titled "Ten things I want to do before I die" - saving it as an index.html file in a new directory called tenthings. On this page we created an ordered list of... 10 things we wanted to do before shuffling off this mortal coil.

Then we spent a little time designing a topology map of a site we could build around this page; 10 more pages with details of each of our ten things, links to each of these pages from our index, links from each detail page to the index page and to the next and previous items in the list.




Next we looked at designing the layout for a typical detail page. Paragon of page design that I am I came up with the following jewel...

What followed was a whirlwind of activity...

  • Locating and saving an image (into an images directory) from flickrCC
  • Inserting said image on the page (including setting the alt, height and width attributes)
  • Making the image into a clickable link back to the original page on flickr
  • Using CSS to remove the unsightly blue border using an embedded or internal style tag in our document's head section
  • Creating a CSS div and adding a class name of "quoteblock" for a wikpedia quote about our goal.
  • Putting an H2 and blockquote into that div and cutting and pasting some wikipedia text there.
  • Setting the border, padding, background-color and font-style for our quoteblock class
  • Giving the other blocks on the page a similar treatment
  • Removing the CSS and putting it into an external style sheet so we can use it in the other 9 detail pages too.


Image: 'Dead Can9t Dance'
www.flickr.com/photos/19487674@N00/407283421

Monday, February 18, 2008

Head first into web development


For this subject (and our CSS module) we'll be using the excellent text: Head First HTML with CSS and XHTML. It's not compulsory that you buy a copy ('though it wouldn't hurt), but you will need to visit their web site and download the example files.



Image: 'Freefall'
www.flickr.com/photos/17088109@N00/1157425229

Saturday, February 09, 2008

Welcome


Hello and welcome to the Bathurst web class for 2008. This will be a great year I think.

So that we can keep in contact, I'll be posting lesson notes here on the cert IV weblog which might be worth bookmarking (perhaps in a del.icio.us account).

During the course I'll be asking you to post material on-line; reflections, interesting finds and assignment answers (for a great example from last year's class, check out Sharlene's blog) If you don't already have one, I'd like you to create a blog of your own. Blogger is a good free offering, but there are many others.

Once you have a blog set up, bookmark it, write an introduction about yourself and what you hope to get from this course and then come back here and leave me a comment with the web address of your space (copy and paste from the browser's address bar) - when I get the URL I'll add it to the hall of fame on the right :).

Another tool we'll be using a lot this year is the Training O2 website. Create an account there and then search for htmldog. Visit the link that comes up for the html beginner tutorial and work through the first four lessons: getting started; tags, attributes and elements; page titles; paragraphs and headings. After you've worn yourself out go back to the detail page for htmldog on the training o2 site and leave a comment on what you thought of the tutorials. For bonus marks see if you can figure out how to vote for the htmldog web site.

Whew, that's probably just about a brainfull for the first day, but if you want to do more, post another entry on your blog about your impressions of the web course so far - I'd love to hear what you think.



Image: 'Entry into the Celaphopad'
www.flickr.com/photos/35034345972@N01/340449446