Validation and DOCTYPE

Perusing your '10 things' lists, I noticed a few problems lurking beneath otherwise good-looking HTML. Many of these could be identified and avoided by using validation - either submitting your uploaded page to the W3C Markup Validation Service or by installing the HTML Tidy firefox extension and running this in your browser. A practice I heartily recommend to you, and expect you'll take up from now on.

If you do run a validator on your pages, one of the first things you'll find is that it insists on finding a DOCTYPE.

Why specify a doctype? Because it defines which version of (X)HTML your document is actually using, and this is a critical piece of information needed by browsers or other tools processing the document. Without it, many browsers will render the page in 'Quirks mode' - usually the stupidest option, where the browser assumes you’ve written old-fashioned, invalid markup as per the late 1990s - so it's important to get this right. Here's the W3C list of recommended DOCTYPES

Now things get interesting. To start, we need to decide what sort of (X)HTML we want to use. As a legacy of the browser wars there's a swag of HTML versions to choose from (including a couple that are still being developed), but for my money, you'd be mad not to go for a version of XHTML. It may be more work to get a valid page, but in the long run you'll save on re-development time and effort. Perhaps a read through HTML Versus XHTML will help you decide (although you're going to need some more research before you settle on a particular version).

So what will you be using for your pages? Have look through the links above and search for some more material on the web. Then try adding some DOCTYPEs and validating a few of your pages - and share the pain in a blog entry. In your entry I'll be looking for links to the resources you've read through; a definitive statement about your preferred markup version and type (strict or transitional), and a short sentence on why you feel this is the best one for you and your visitors.

setting the table

In the dim dark past (all of 3 years ago now), tables were used extensively for laying out web pages. But that's all in the past now. Repeat after me: "tables are only for displaying tabular data".

Very good, now we've got that straight, have a go at the table tutorial on Web Design from Scratch, which covers the subject in plenty of detail. Once you've finished, try out the Tables for tabular data HTML challenge.

---

Image: 'LED Dining table'

a todo list for life...

It's time we put some of our new found knowledge into practice with a quick exercise...

I'd like you to create a web page (complete with doctype, title and a heading) which lists 10 things you want do do before you die. They can range from the trivial to serious; but display them as a numbered list.

Once you've built your list, make at least one item into a nested list of the steps you'd need to take to accomplish that goal. For example:

1. have my cake and eat it too
   
   1. get a cake
   2. hide from family and friends
   3. scoff cake like there's no tomorrow
2. Goal two
3. Goal three etc.

Add some hyperlinks from your items and/or steps to resources on the web that could help you accomplish your goal (in the example above this might be something like: get a cake)

Include some images on the page that are relevant to your project (perhaps using something like flickrCC)

For bonus points you might want to try adding CSS to:

• colour your heading and list elements' text and background
• add a margin to your image(s) and/or list elements
  
• add rollover effects to your hyperlinks
• add a drop shadow to your image(s)
• format your lists
• position elements on the page
  

Once you've finished, upload the lot to your web space and link to it from your home page and your blog.

---

Original image: 'IMG_7477'
by: tookie

firefoxin'

Here's a little shopping list for you firefox using web developers out there ...

• Web Developer - a whole bunch of development tools in one handy package - the ability to live edit CSS and HTML alone is worth the price of the download.
  
• Firebug - lets you ‘edit, debug, and monitor CSS, HTML, and JavaScript live in any web page’ - white man's magic at its best
  
• HTML Validator - On the fly validation for W3C standards (this function is included in the web developer add on, but I have a soft spot for the original).
  
• JSView - makes peeking into external javascript and CSS files into a simple mouse click activity.
• View Source Chart - Creates a Colorful Chart of a Webpage's Rendered Source Code, which is pretty handy when you're just learning the ins and outs of tables, divs and the like.
• Execute JS - lets you type in and debug JavaScript code on the fly. This will come in handy when we're studying client side scripting.
  
• Live HTTP Headers - allows you to view HTTP headers of a page while browsing. This will come in handy when we're developing forms

---

Original Image: 'Firefox in the Hen House'

a picture's worth 1024 words

Our brains are wired to react to the things we see - as opposed to that what we read. As you will probably notice in this little experiment...

Tigers (Panthera tigris) are mammals of the Felidae family and one of four "big cats" in the Panthera genus. They are apex predators and the largest feline species in the world, comparable in size to the biggest fossil felids. The Royal Bengal Tiger is the most common subspecies of tiger, constituting approximately 80% of the entire tiger population, and is found in the Indian subcontinent. An endangered species, the majority of the world's tigers now live in captivity

What did you see first? The picture or the text? What left a lasting impression? I'm betting it was the picture that grabbed your attention, and that no matter how much information I put into the description, you'd have a much better idea of what a tiger's all about from that little 9k picture.

So how do we go about tapping into all that pictorial goodness? By using the IMG tag, mais oui!

Try this gentle introduction to the subject on HTMLdog. For a more in-depth exploration, see w3schools - including the various examples at the bottom of the page (but don't worry too much about the image maps just yet, we'll cover these in a seperate post).

After you finish reading the words - plug some images into a page of your own: find a copyright free image on flickr using flickrCC. Download the pic into an images directory and then write up a page that includes the image on the left hand side, along with a heading and some descriptive text (perhaps from wikipedia) which appears to the right and wraps around the picture. For bonus marks:

• have the picture link to the original image on flickr
• prevent the blue/purple border from appearing around the hyperlink
  
• add a 15 pixel margin around the picture using CSS
• add a drop shadow to the image using CSS (this is distinction level stuff)
• add the correct attribution to your image and text
  

Save as images.html and link to your new page from your index page - upload the lot (don't forget the images directory and its contents) and then sit back and enjoy the view.

---

Image: 'Tiger'
Wikipedia article: 'Tiger'

linking up

A web page on its own is a lonely thing. Fortunately we can link it up with friends using the ultra-hip hyperlink (known to its friends as the anchor tag).

This Tizag article is a good introduction, but it doesn't discuss the depricated attributes (these are the bits that are no longer supported - usually because CSS does a better job). I'd recommend a follow up reading in the XHTML tutorial which covers these aspects.

Once you've read through these, have a bash at the hyperlink challenges I've set up for you on the wikiversity - if you've done the lists.html page, use this as your target for local links, and add a link on the lists page back to your links.html page so you can navigate backwards and forwards between them. Upload the lists.html and links.html pages to your web site and drop me a line so I can have a look at how you're getting on.

---

Image: 'ORLY?'

making a list and checking it twice

Today's post is being brought to you by the HTML tags: UL, OL and DL...

Lists are a handy styling element for presenting data in bite sized pieces. HTML gives you three basic flavours: the unordered list; the ordered list; and the definition list. Find out how each of these is works in this List Tutorial

Once you've mastered the syntax, flex your list building muscles with the Lists, lists and more lists HTML challenges. Save the exercises as a web page called lists.html and nestedlists.html - we'll be using them later to practicing linking.

Want to see something really cool? Listamatic takes a plain unordered list and CSSs the snot out of it - it's got to be seen to be believed.

---

Image: 'New holiday: No Internet Thursday'

Moovin and a groovin

Time to upload a file.

First up, we'll need to understand what file transfer is all about - the wikipedia article's a good spot to find out.

Next, we'll need an ftp client to play with. Peruse the list on wikipedia, or search google and select one that will fit your pocket and operating system.

Install your client of choice and connect to the bathurst tafe web server using the login details provided (if you've lost them, or not received them yet, give me a call and I'll see what I can cook up). Once you're logged in, upload the index.html file you created earlier and see if you can bring it up in a web browser: http://www.bathurst-tafe.nsw.edu.au/~yourname

Got troubles?

• make sure you're using Active rather than Passive transfers in your ftp client
  
• double check the user name and password
• remember, if you're in the computer lab, our ip address is different from the bathurst-tafe.nsw.edu.au address
• the web server can only see the public_html folder
  
• you may need to change the permissions on the file so that others can read it

Once you finish this challenge, go to (or create) your blog and write a short post on the experience. Make shure you mention:

• The name of your ftp client
• The URL you got it from
• any installation woes you encountered
• some comments on its ease of use
• $
• the platform(s) it works on
• the install file size

and any other interesting bits of information you came across

Create a basic document

Time to catch up with a few things...

For a path through the HTML/CSS maze, you could do worse than to try the following exercises and tutorials:

• An introduction to using CSS styles
  
• Adding html headings
• Using CSS for custom heading tags
• Add a bit of text
  

Once you get your head around this, create a new web page about yourself: index.html using the tricks you've just learnt.

Welcome to a new year of web development

For those of you just starting, a warm welcome to the 2007 web development course. And welcome back to those of you who are continuing their learning journey.

I haven't been idle over the break. Together with a teacher at Blue Mountains TAFE I've been helping to build some web development resources on the wikiversity. We've outlined the course onthe Cert IV Websites Qualification in Australia and will be building this into a complete course over the coming months. If you're just starting out, the page for ICAB4135A, Create a simple mark-up language document to specification could prove useful.

If you're just beginning, a visit to Tizag for some practice with their beginner tutorial might help. For those a little more comfortable with HTML, we'll be working through the Tizag HTML lessons over the next few weeks; with an emphasis on using CSS in place of attributes to change the look of our HTML.

If you're already using HTML try out some of the HTML challenges we've put together.

I'll be dropping by here regularly with more suggestions about picking a path through the study material, and talking to you all each week, but don't be shy about getting in contact - call me on 6338 2448 or email peter.shanks at tafensw.edu.au - another interesting option for you might be to start your own blog here on blogspot. Use it to keep a learning journal - jotting down notes, observations and questions after each study session. If you do, drop me a line with the url and I'll add it to the blogroll here.

All the best with your studies, this should be a fun year I think.

---

Image: 'Footprints'
by: Joshua Davis