HTML 2 - Resources
Listed below are some additional online resources for the course. Some are linked to from the weekly assignment pages, but most are additional resources for extra support or for going beyond the assignments.
Note: a few students from the last class requested that any links to pages outside the class web site open in a new window. That requires using Javascript, and I'm not going to go that far, but I will use the HTML target attribute to open outside links in a new browser tab. Let me know if this works for you or not. Sadly, the target attribute doesn't validate, so don't use it in your web pages!
General Resources
Listing of HTML 2 Lectures
File Management on the Student Server - handout
File Management on the Student Server - recording
Using SSH/FTP Software
Web Browsers
If you don't already have a couple of current Web browsers, download another from the sites listed below:
Internet Explorer (win)
Safari (mac)
Firefox/Mozilla (both)
Opera (both)
Google Chrome (win and Intel macs)XHTML Template
Remember that you should start all your web pages with a standard format. Below is code that you should copy and use as your template.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Place a title here</title> <link type="text/css" rel="stylesheet" href="yourcssfile.css" /> </head> <body> content, content, content ... <p> <a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a> <a href="http://jigsaw.w3.org/css-validator/check/referer"><img src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" height="31" width="88" /></a> </p> </body> </html>Validators
XHTML validator - http://validator.w3.org/
CSS validator - http://jigsaw.w3.org/css-validator/Note: You can use validator buttons that are either yellow or blue. The code for yellow buttons is in the template above. Below is the code for blue buttons.
<p> <a href="http://validator.w3.org/check?uri=referer"> <img src="http://www.w3.org/Icons/valid-xhtml10-blue" alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a> <a href="http://jigsaw.w3.org/css-validator/check/referer"> <img src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="Valid CSS!" /></a> </p>Validating Web Pages
How do you validate a web page? If you have uploaded it to a server, all you need to do is click on the validation button at the bottom of the page, and you will get the report. However, if you want to test your pages before you upload them to a server, you will need to do the following:
- Go to http://validator.w3.org/.
- You may either click on the button to "Validate by File Upload", or you can
- Copy your HTML code and paste it into the box labeled "Validate by Direct Input".
How do you fix problems reported by the validator? This isn't always easy, but you have enough experience by now to be able to interpret the report. First of all, don't be shattered if 27 (or more) errors are reported. There is probably one problem toward the top of the file that causes many subsequent problems. If you fix the one at the top, many, if not all, of the others will disappear.
The most common problems I saw in the A class were 1) forgetting to put an inline element within a block element and 2) including a block element within another block element (when it is illegal.) If you can't figure out the problem, go to validator.html and see if you can find your problem discussed there. If you can't figure it out, shoot me an email and we'll work on it.Considerations for a Good (or Bad) Web Site
I have put together some minimum requirements for a good web site. Let me know if you have any ideas to add to it.
Just as important as looking at what constitutes good web design, it would be helpful for you to a careful look at a web page that explains how to make a really bad web page.
Color Chart
Here is a good site to use to develop color combinations - http://www.visibone.com/colorlab
Resizing Images
Here is a site (suggested by a student)to help with resizing those thumbnail images - http://www.tutorialwiz.com/batch/
That same student also recommends a site with help on batch processing in Photoshop (again, think resizing) http://graphicssoft.about.com/od/digitalphotography/l/blps_batch.htm
Download Speed
Go to http://www.websiteoptimization.com/services/analyze/ to test your pages on how fast they will download. On image-heavy pages, you need to know how S L O W it will be for people with a dial-up connection! You may find that you need to do more work on optimizing your images.
Incredible Examples of CSS
What does your page look like in different browsers?
Browsershots makes screenshots of your web design in different browsers. It is a free open-source online service created by Johann C. Rocholl. When you submit your web address, it will be added to the job queue. A number of distributed computers will open your web page in their browser. Then they will make screenshots and upload them to the central server here.
Lesson 1 - getting started and HTML editors
HTML Editors (check them out before downloading anything!)
Use a search engine (search for "HTML editors") for many, many more listings of web sites reviewing and/or offering this kind of software.
Windows software:
HTML-Kit - free
Coffee Cup - 30 day free trial, then $49
Homesite 5.5 - 30 day free trial, then $99 (I also saw a web site that had the product for sale for $21, but I'm not sure why. I suspect it is because Adobe is no longer selling or supporting the software.
Mac software:
Taco - 30 day free trial, then $24.95
BBEdit - 30 day free trial, then $49 (look for educational pricing)
Coda - $99
Both platforms:
Arachnophilia - free
Amaya - free
Listings:
HTML editor reviews (and downloads)
Wikipedia HTML editor listing
HTML editors - free
HTML editors for the Mac
HTML editors at Yahoo!
Lesson 2 - box properties
The box model according to the W3C - http://www.w3.org/TR/REC-CSS2/box.html
Web Design Group Box Properties - http://htmlhelp.com/reference/css/box/
Lesson 3 - divs and spans
Divs and spans according to the W3C - http://www.w3.org/TR/html4/struct/global.html
Tutorial on divs and spans http://www.goer.org/HTML/intermediate/div_and_span/
Lesson 4 - layout and positioning
Head First favorite online resources for CSS design: http://headfirstlabs.com/books/hfhtml/chapter12/cssdesign.html
The visual formatting model according to the W3C (huge!) - http://www.w3.org/TR/REC-CSS2/visuren.html
Float tutorials - http://css.maxdesign.com.au/floatutorial/
Remember Browsershots! When you submit your web page address, it will be added to the job queue. A number of distributed computers will open your web page in their browser. Then they will make screenshots and upload them to the central server where you can view them.
Lesson 5 - tables and lists
A tutorial on flexible tables - very similar to liquid or even jello! http://www.dwfaq.com/tutorials/Tables/flexible_tables.asp
Get the code for a calendar! One student made a calendar and offers it to those who follow - calendar.html
List styling information: http://www.w3schools.com/Css/css_list.asp
Lesson 6 - forms
Here is the code for a list of states in a drop-down menu.
Go to Matt's Archive for more information on the formmail script - and many others!
If you don't want to take your users to a redirect page (clearly the better option, since it will take them back to your web site) you may tweak the default Thank you page. Here is a link to some suggestions for what you can do.
An alert student sent in this URL for some interesting tips on styling your forms: http://www.outfront.net/tutorials_02/adv_tech/funkyforms1.htm
Lesson 7 - server side includes
WebsiteTips.com - this site has links to many good resources on SSI. Beyond this resource, just google "server side includes" and you'll find a lot of information regarding SSI, but it quickly turns into pretty high level programming that is way beyond the scope of HTML. Take a Perl or ASP class if you want to learn more :-).
Here is a link to POSSIBLE working code for an SSI nav bar that will display the current page in plain text. No guarantees -- you really have to have a programming background to work effectively with this stuff! NOTE: I used a .txt file, but it renders as HTML in at least one browser! You may have to right click and View...Source to see and copy the code.
Here's an interesting article suggested by a classmate: Search Engine Optimization using SSI
Other Resources
More CSS Selectors - the authoritative w3 source
Frames - w3schools.com tutorial
Multimedia and Flash - how to include in web pages, many tutorials available
Tools for Creating Web Pages - the 10 best, according to one source
Client-side Scripting - Wikipedia overview
Server-side Scripting- Wikipedia overview
Search Engine Optimization (SEO) - Wikipedia overview, industry in itself
Stylesheets for Printing - the definitive guide, so it says
Pages for Mobile Devices - design tips
Blogs - Wikipedia overview
