agenda – week 5, day 2 complete robohelp tutorial transition to html tutorial –warm-up –...
TRANSCRIPT
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
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
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:– <html> </html>: defines a page– <head> </head>: heading information– <title> </title>: title in browser bar– <body> </body>: body
• Useful Formatting– Page Break: <p>– Emphasize text: <em>….</em>– Headings: <h1>…</h1>, <h2>…</h2>
Creating Tables
• Basic Commands– Define the Table: <table> … </table>– Add a row <tr>… </tr>– Add a cell within a row: <td>…</td>
• Example: What would this look like?– <table>– <tr><td>A</td><td>B</td></tr>– <tr><td>C</td><td>D</td></tr>– </table>
Links!
• Basic Structure:– <A href=“URL-name”> Link Text </A>
• Examples:– <A href="http://www.useit.com/">Nielson's Site</A>
– <a href="00-syllabus.doc">syllabus</a>
– Question: What is the difference between the two examples?
Images
• Regular image– Code: <IMG src=“image file" align=right/left> – Examples:
• <IMG src="06-useit.bmp" align=right> • <img src="/home/graphics/space.gif“>• What is the difference
• Background– The background graphic image is added in the <body>
tag via an option, “Background = imageFile”– Example: <body … background="book.jpg">
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)
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
– For additional guidance, please see the screen shots located in the electronic version of the tutorial.
Publishing
• What needs to be “published”? Which files need to be uploaded to your UW webspace?
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
View your Live Webpage
• View the published pages– Open a browser
– Enter URL: http://students/washington.edu/yourID/pageName.html
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