1. Agenda – Week 5, Day 2 Complete RoboHelp Tutorial Transition to HTML Tutorial –Warm-up – Explore HTML –Page Design – Create a page –Publishing – Make your page publicly available

2. Robohelp Where we’ve been –Creating topics and books –Compiling and running –Adding graphics and formatting –Adding pop-ups and jumps The last thing to do –Keywords for the index, specifically –Adding a keyword to individual topics –Adding a keyword associated with multiple topics

3. HTML - Warm up View the page “Introduction to Usability” in a browser: –What elements do you see on the page? Look at the Source for “Introduction to Usability”: –What appears to be the basic structure of an HTML command? –What commands are associated with the elements you identified? Considering the images associated with the page: –What are the names of the two image files? –What do you know about where the files are?

4. HTML – Starting Points Basic Structure of a page: – : defines a page – : heading information – : title in browser bar – : body Useful Formatting –Page Break: –Emphasize text: …. –Headings: …, …

5. Creating Tables Basic Commands –Define the Table: … –Add a row … –Add a cell within a row: … Example: What would this look like? – – A B – C D –

6. Links! Basic Structure: – Link Text Examples: – Nielson's Site – syllabus –Question: What is the difference between the two examples?

7. Images Regular image –Code: –Examples: What is the difference Background –The background graphic image is added in the tag via an option, “Background = imageFile” –Example:

8. Publishing - Find a host for your website –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)

9. Activate UW Web Publishing If you already have a “web space”, go to step 3 (and use your information) Activate web publishing on “students.washington.edu” –Follow instructions at http://www.washington.edu/computing/web/publishing/students.html http://www.washington.edu/computing/web/publishing/students.html –For additional guidance, please see the screen shots located in the electronic version of the tutorial.

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

11. 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 –Press return 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

12. View your Live Webpage View the published pages –Open a browser –Enter URL: http://students/washington.edu/yourID/pageName.html

13. Wrap - up Today focused on HTML If you were developing complex website –You’d probably not program in HTML –You’d use a web site development tool – Frontpage, Dreamweaver Why HTML –Remove magic! –Alternative ways to create pages –Debug problems