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

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

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

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

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?

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

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 –

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 –

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

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:

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”