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

2. Day 9 By the end of class, students should be able to: –Identify lessons acquired from the Visio assignment –Identify the requirements for assignment 5 (HTML) –Use knowledge of HTML to create simple WebPages What we’ll do… –Explore site maps created for assignment 4 –Peer feedback on the assignment 4 annotations –Introduce Assignment 5 (HTML) –Introduction to HTML

3. Debriefing – Asgn 4 / Portfolio Design a Usability study for your sitemap –Common user tasks – Is it easy to use? –Overall tone, length of the site. –Are pages easy to locate in the map? Conduct the study Data collection and analysis Share your findings with class

4. Assignment 5 The “Technical Communication Resources” webpage Content Requirements –15+ resources associated with Technical Communication –Each resource described Technical Requirements –Published page (available through browser) –HTML features: heading, hypertext link, table, image, alt tag. Branding Requirements Implementation –Up to you, but encourage you to use NotePad

5. 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?

6. 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: …, …

7. HTML – Two Types of Lists Unordered Lists: – : defines that list – : Indicates a list item Example – – Item 1 – Item 2 – Ordered Lists: – : defines that list – : Indicates a list item Example – – Item 1 – Item 2 –

8. 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 –

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

10. 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:

11. Looking Ahead Due Dates –Assignment 5 Tuesday (11/4) By class –Includes: Solution Annotations in E- portfolio Next Class –Web publishing –Debugging HTML –Gaining design ideas through “view source”