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
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
No comments:
Post a Comment