1. TC 310 The Computer in Technical Communication
Dr. Jennifer Turns
Week 5, Day 2 (10/30)

2. Why HTML? Understanding Alternative Strategies Debugging
Knowing about HTML removes some of the “magic” behind the web, and also the magic behind what tools like Dreamweaver provide.
Alternative Strategies
Alternative ways to create pages, even when using a tool like Dreamweaver
Can use HTML in tools such as Catalyst
Debugging
Understanding HTML is very important for debugging common problems associated with creating web pages and web sites.

3. Big Picture – Web Development
Design
Information architecture (site map)
Navigation design
Graphic design
Content design
Implementation
Coding HTML directly
Dreamweaver
Publishing:
FTP
Publishing from within a website development environment

4. Day 10 By the end of class, students should be able to:
Publish their HTML creations
Debug common HTML problems
Go beyond HTML basics
What we’ll do*…
Closing the loop: Discuss website “publishing”, students publish
Gaining power: Discuss file referencing, practice debugging
Expanding horizons: More HTML, Photoshop for HTML stuff.
Looking ahead: Discuss hints:
*For individuals who are already experienced in these areas, various options are available.

5. You’ll Need The page you created Tuesday
usability.html*
The graphics associated with the page
06-book.jpg
06-useit.bmp
* If you did not finish creating the page, you can download a version by (a) going to the software resources section of the course website, (b) finding the link “Introduction to Usability (Webpage for Tutorial 1”, (c) following the “Final” link to the sample version of the page, and then (d) saving the page to the desktop using the save as option “Web page, HTML Only.”

6. Part 1: Closing the Loop PUBLISHING

7. Publishing - Find a host for your website Publish website files
In other words, find a machine that is connected to the internet on which you can place your HTML files.
At UW –
You can publish pages on UW machines
To get website, you “activate web publishing”
Publish website files
Transfer them to the host computer
Done via FTP or within web publishing software (e.g., within Dreamweaver)

8. Activate UW Web Publishing
If you already have a “web space”, hold on…
Otherwise, activate web publishing – follow instructions at
What does this step do?

9. Publishing
What needs to be “published”? Which files need to be uploaded to your UW webspace?

10. Publishing – Via FTP
Publish the “usability.html” to “students.Washington.edu” using FTP
Open FTP Program: Start/Programs/Uwick Applications/SSH Secure FTP/Secure FTP
Log on to “server”
Click “Quick Connect”
Type “dante.u.washington.edu” in “Host Name”
Type your UW account in “User Name”
Press return
Enter your password
Upload HTML files to “public_html” folder
Double click on public_html folder
Select “Operation/Upload” from menus
Navigate to your local HTML file and select file/files to upload
Click on Upload button
Repeat as necessary for all required files

11. View your Live Webpage View the published page Open a browser
Enter URL: OR

12. Part 2: Gaining Power Concepts and Strategies for Debugging

13. Concept 1: File referencing
Two approaches to file references
Absolute: You provide the entire path to the file <A href=" Site</A>
Relative: You provide part of the path, the server resolves the rest <a href="00-syllabus.doc">syllabus</a> <a href=“./00-syllabus.doc">syllabus</a> <a href=“./myfiles/00-syllabus.doc">syllabus</a>
Questions:
How does the server resolve relative references?
Why such a big problem???

14. Concept 2: A < > a File references in HTML are case sensitive
Usability.htm <> usability.htm <> Usability.HTM …
Implication:
If a link/URL is not working, check that you have the right combination of upper and lowercase letters!

15. Common Debugging Opportunities
Broken images (images that do not show up)
Why might images not show up?
How can you debug “broken” images
Inactive links
Invisible updates
Why might the Internet version not reflect changes you made?
How can you debug such situations?

16. Debugging Practice
Check out the “broken” version of the “Introduction to Usability” page
(available from the software resources page).
WHY?
Why is the background not showing up?
Why is the embedded graphic not showing up?
Why is universal usability article link broken?

17. Another Example…
Situation: Say you wrote a link page, called links.html on your hard drive, saved as c:\homepage\links.html (on a Windows PC, or similarly on other operating systems). In creating your HTML, you link to this page with the <a href=“c:\homepage\links.html”>Links</a>. You test the page on your machine, and the link works fine. Then you upload it to the web, and get one of your friends to try. When they click the link, they will get an error saying "File Not Found"! Why?

18. Another Example…
Situation: Say you wrote a link page, called links.html on your hard drive, saved as c:\homepage\links.html (on a Windows PC, or similarly on other operating systems). In creating your HTML, you link to this page with the <a href=“c:\homepage\links.html”>Links</a>. You test the page on your machine, and the link works fine. Then you upload it to the web, and get one of your friends to try. When they click the link, they will get an error saying "File Not Found"! Why?
Implication:
When you're starting out, don't include directory information in your filenames. Rather, save both HTML and graphics in the same directory. If you are trying to link or load a file (discussed later) called taco.jpg, just use taco.jpg, not c:\homepage\taco.jpg or the like.
Your finished HTML file should never mention your hard drive's letter (or name).

19. Part 3: Expanding Horizons Other Useful Resources and Ideas

20. More about HTML - Guides
From the source – An NCSA guide
Explanations and lots of examples!
Yet another HTML tutorial

21. More about HTML - Attributes
Focusing on attributes
Most HTML commands have attributes for additional control
Example: <table border=“1”>…. </table>
A comprehensive index of attributes (and the associated HTML)
Exploring…
Which HTML tags use the ALIGN attribute?
Which HTML tags use the WIDTH attribute?
How would you set the background color of a TABLE?
What are attributes associated with the HTML “TABLE” tag? …
What area examples of HTML tags that you do not recognize?

22. Photoshop and Web Design
How can you use Photoshop to support your web design work?
A Task:
Use Photoshop to create a graphic for the usability.html page
Modify the page to include your graphic
Observe results

23. Part 4: Looking Ahead - HINTS
File references in HTML are case sensitive
If a link/URL is not working, check that you have the right combination of upper and lowercase letters!
Test (publish) early and often
Be successful early
Extend your successes

24. Other Resources

25. Looking Ahead Due Dates Next Class Assignment 5 Includes:
Monday (11/4)
By class
Includes:
Solution
Annotations requested in E-portfolio
Next Class
Debrief Assignment 5 …
Websites
Dreamweaver!