TC 310 The Computer in Technical Communication Dr. Jennifer Turns Week 4, Day 1 (4/21)

Day 5 By the end of class, students should be able to: –Identify lessons acquired from the Visio assignment, including a variety of strategies for creating a sitemap –Identify strategies for effectively (i.e., high grade) and efficiently (i.e., quickly) submitted the TC310 assignment (including the annotations) –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 for Assignment 4: Learning through Peer-Evaluation Goals –Identify strategies for effectively (i.e., high grade) and efficiently (i.e., quickly) submitted the TC310 assignment (including the annotations) –Gain practice at providing constructive, critical feedback Steps: –Prepare (your own work): Open your Visio sitemap solution, key features annotation, and design rationale on a computer. –Evaluate (peer’s work): Move to a peer’s computer. Explore their solution, their description of the solution’s key features, and their design rationale. Use the rubric to identify the appropriate grade and the justification for the grade. Jot the grades on a sheet of paper. –Share: Explain the grades and grade justifications to your peer. Listen to feedback on your own work. –Identify lessons: Think about what this experience taught you, or questions that it raised.

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 Monday (4/28) By class –Includes: Solution Key Features Design Rationale Learning Reflection Next Class –Web publishing –Debugging HTML –Gaining design ideas through “view source”