Cert IV web: February 2006

Sunday, February 26, 2006

3755A - Lists

HTML lists come in 3 flavours: ordered, unordered and definition lists. Each can have attributes which affect how they display.

Read through the list tutorial on tizag and you'll see what is possible.

One thing the tizag tute neglects to mention is that lists can contain other lists within them. A list element can be a whole new list of its own. This is known as a nested list.

For example:

first list, first element
first list, second element (also contains a nested list)
1. second list, first element

Which is generated by using the following code:

<ol>

<li>first list, first element</li>

<li>first list, second element (also contains a nested list)

<ol>

<li>second list, first element</li>

</ol>

</li>

</ol>

See if you can reproduce the following page using nested lists:

"What about CSS?" I hear you ask. Have a look at the css list lesson on Web page design for designers. For the terminally curious, A List Apart has an in depth description of some serious CSS list tinkering. See if you can re-create their list "buttons" as a series of links from a home page to your own 3755A exercises.

Week 3 - Markup Language Revision

Try to reproduce the following picture of a web page using the HTML and CSS that we've learned so far:

Although you cannot see it here, the words: "Blue Flax Society" are a link to the web page: http://aggie-horticulture.tamu.edu/wildseed/21/21.1.html

What you see here is just a picture of the web page (so you can't copy the HTML), but when you create your own page, make it so that when you hover your mouse over the link "Blue Flax Society" an underline appears. What do you think of displaying links this way? Does it make the page more attractive? Does it make it easier or harder for visitor to the site to find more information? Post your ideas as a comment on this blog entry.

You can find a copy of the image at: http://bathurst-tafe.nsw.edu.au/~pshanks/3755A/03blueflax.jpg (internal link: http://192.168.201.2/~pshanks/3755A/03blueflax.jpg)

The text is bold type; "Trebuchet MS", "Helvetica", sans-serif with a hex colour value of #3366cc

For a merit point, put the CSS into a seperate file and make a relative link to it from your html page (hint - for people inside the firewall, use this link instead)

Tuesday, February 21, 2006

3755E â€“ Transfer Content to a Website

for those folks stuggling for traction with this module, here are a couple of links:

a general ftp tutorial
(including a good section on file permissions)
Zen and the art of ftp, a tutorial that focuses more on using WS_FTP

As usual, these links are on del.icio.us, tagged with the subject short code: 3755E. You can show them by visiting the following URL: http://del.icio.us/tag/3755E

Feel free to add to the list by using the 3755E tag for ftp related sites to your own del.icio.us entries.

Monday, February 20, 2006

Week 2 - Validation, using CSS, Images and Links

To kick off, we practiced last week's skills, recreating this simple page

Validation

After some work, we tried validating our results on the W3 validation site: http://validator.w3.org/ - learning along the way that the doctype and content-type were required for valid documents:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

needed to preceed the <html> tag, and:

<meta equiv="Content-Type" content="text/html; charset=iso-8859-1">

needed to be inserted into the <head> section.

We also discussed and looked at compatability with various browsers using anybrowser.com: http://www.anybrowser.com/siteviewer.html

and accessability checking using wave 3: http://www.wave.webaim.org/index.jsp

CSS

Spurning the use of tag attributes to describe how pages should be displayed, we looked into cascading style sheets (CSS).

A good tutorial exists on the web page design site: http://www.wpdfd.com/editorial/basics/index.html
running through step 1 to 6 here should give you a good insight into CSS, and with more detail than we had time to cover in class.

Images

We discussed how to find creative commons licensed images on flickr:
http://flickr.com/creativecommons
and openclipart.org:
http://openclipart.org/
how to save these by right clicking on them and selecting the 'save image as...' option, and how to attribute the orginal owner if needed.
Then we looked at how to place images on a web page with the <img \> tag, along with some attributes: alt, width, height, align, hspace and vspace (see http://www.tizag.com/htmlT/images.php for details)

Finaly, we practiced by downloading some images and re-creating a page to look something like this

Links

We finished the day with a discussion on the anchor tag. Looking at creating an anchor in a docmument and linking to it, and how to have a link open in a new window.

W3shools has a good page describing this: http://www.w3schools.com/HTML/html_links.asp

Tuesday, February 14, 2006

Assignment: 3755E – Transfer Content to a Website

3755E – Transfer Content to a Website
Assignment Due: 27th Feb 2006

Use the Internet to research the following FTP clients.
Create a blog entry (with links) listing their cost, type of licence (shareware, freeware or other) and major features.
• CuteFTP
• WS_FTP
• FTP Voyager
• SmartFTP
• FTP Explorer
• CoffeeCup Free FTP and
• FTP Commander
• Filezilla
Download two of these clients and install them on your removable drive. Set each of them up correctly and use one to connect to the bathurst-tafe.nsw.edu.au site.
Log in as user: pshanks
password: password
Change to the directory: /public_html/3755E and download the files: 3755assignment.htm and 8326.jpg
Log off as user pshanks, and connect to bathurst-tafe.nsw.edu.au using the other ftp client and your own userID and password.
• Change to your public-html directory
• upload the 3755assignment.htm HTML file to this directory
• set the permissions for the file to allow visitors to view it
• create an "images" folder
• set the permissions for this folder to allow visitors to view its contents
• upload the 8326.jpg image to the images directory
• set the permissions for the file to allow visitors to view it
• check that the files are there
Log out from the website and open the 3755assignment.htm file in a web browser to check that it works and that all image and other resource files are present. Update your blog entry with your impressions of each ftp client.

Monday, February 13, 2006

A short note on DNS

Some of you may have noticed that you cannot access the web server: bathurst-tafe.nsw.edu.au from the computer lab.

The router here hasn't been set up to recognise this web address, so when you're in the lab you'll need to type in the internal web address: 192.168.201.2

For example, my web address would be: http://192.168.201.2/~peter

From anywhere outside the lab use the domain name: bathurst-tafe.nsw.edu.au

Hello and welcome

This will be my spot for posting all things webby for the Cert IV course here at Bathurst TAFE

Coming soon - a copy of the assessment question for our 3755E course: Transfer Content to a Website.

Cert IV web