Published on

Published in: Education, Technology, Design
1 Like
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide


  1. 1. Tame TOR II <ul><li>GSLIS Toolkit: Basic HTML </li></ul><ul><ul><ul><ul><ul><li>Dixie Blake Foster </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>GSLIS West </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>September 23, 2007 </li></ul></ul></ul></ul></ul>
  2. 2. Today’s Topics <ul><li>Basic HTML </li></ul><ul><ul><li>Structure </li></ul></ul><ul><ul><li>Text </li></ul></ul><ul><ul><li>Graphics </li></ul></ul><ul><ul><li>Links to web pages and documents </li></ul></ul><ul><li>FTP </li></ul><ul><ul><li>Going “live” </li></ul></ul><ul><ul><li>But where is it? </li></ul></ul>
  3. 3. HTML <ul><li>HyperText Markup Language </li></ul><ul><ul><li>Broad standard that makes the Web possible </li></ul></ul><ul><ul><li>Standards define tags & rules for using them </li></ul></ul><ul><li>Migration to XHTML </li></ul><ul><ul><li>eXtensible HyperText Markup Language </li></ul></ul><ul><ul><li>Stricter but more powerful than HTML </li></ul></ul><ul><ul><li>Creates and maintains many web standards </li></ul></ul><ul><ul><li>Tim Berners-Lee </li></ul></ul>
  4. 4. The basics <ul><li>What is a tag and why do I care? </li></ul><ul><ul><li><tag optional attributes > content </tag> </li></ul></ul><ul><ul><li><tag optional attributes /> </li></ul></ul><ul><li>Every page has them </li></ul><ul><li>Big fish eat little fish (Huh?) </li></ul><ul><li>What makes my page “live?” </li></ul>
  5. 5. Structural tags <ul><ul><li><html> </li></ul></ul><ul><ul><li><head> </li></ul></ul><ul><ul><li> <title> Page Title </title> </li></ul></ul><ul><ul><li></head> </li></ul></ul><ul><ul><li><body> </li></ul></ul><ul><ul><li> <p> Page Content </p> </li></ul></ul><ul><ul><li></body> </li></ul></ul><ul><ul><li></html> </li></ul></ul>GSLIS West News Page
  6. 6. html tag <ul><ul><ul><li><html> </li></ul></ul></ul><ul><ul><ul><li></html > </li></ul></ul></ul>GSLIS West News Page <ul><li>The outer tag “defines” the page </li></ul><ul><li>Tells browser what coding is in use </li></ul><ul><li>All markup tags are inside </li></ul>
  7. 7. head <ul><ul><ul><li><html> </li></ul></ul></ul><ul><ul><ul><li><head> </li></ul></ul></ul><ul><ul><ul><li></head> </li></ul></ul></ul><ul><ul><ul><li></html> </li></ul></ul></ul>GSLIS West News Page Contains “administrative” info
  8. 8. title <ul><ul><ul><li><html> </li></ul></ul></ul><ul><ul><ul><li><head> </li></ul></ul></ul><ul><ul><ul><li> <title> Page Title </title> </li></ul></ul></ul><ul><ul><ul><li></head> </li></ul></ul></ul><ul><ul><ul><li></html> </li></ul></ul></ul>GSLIS West News Page <ul><li>“ Page Title” appears in title bar </li></ul><ul><li>Style sheets </li></ul><ul><li><meta> tags </li></ul>
  9. 9. body <ul><ul><ul><li><html> </li></ul></ul></ul><ul><ul><ul><li><head> </li></ul></ul></ul><ul><ul><ul><li> <title> Page Title </title> </li></ul></ul></ul><ul><ul><ul><li></head> </li></ul></ul></ul><ul><ul><ul><li><body> </li></ul></ul></ul><ul><ul><ul><li> </li></ul></ul></ul><ul><ul><ul><li></body> </li></ul></ul></ul><ul><ul><ul><li></html> </li></ul></ul></ul>GSLIS West News Page Contains page content
  10. 10. Content <ul><ul><ul><li><html> </li></ul></ul></ul><ul><ul><ul><li><head> </li></ul></ul></ul><ul><ul><ul><li> <title> Page Title </title> </li></ul></ul></ul><ul><ul><ul><li></head> </li></ul></ul></ul><ul><ul><ul><li><body> </li></ul></ul></ul><ul><ul><ul><li> <p> Page content </p> </li></ul></ul></ul><ul><ul><ul><li></body> </li></ul></ul></ul><ul><ul><ul><li></html> </li></ul></ul></ul>GSLIS West News Page User sees “Page content”
  11. 11. Structural tags <ul><ul><li><html> </li></ul></ul><ul><ul><li><head> </li></ul></ul><ul><ul><li> <title> Page Title </title> </li></ul></ul><ul><ul><li></head> </li></ul></ul><ul><ul><li><body> </li></ul></ul><ul><ul><li> <p> Page Content </p> </li></ul></ul><ul><ul><li></body> </li></ul></ul><ul><ul><li></html> </li></ul></ul>GSLIS West News Page
  12. 12. Fun with formatting <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><title> Fun with formatting </title> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><ul><li><h1> Twinkle twinkle </h1> </li></ul></ul><ul><ul><li><h2> little star </h2> </li></ul></ul><ul><ul><li><h3> how I wonder </h3> </li></ul></ul><ul><ul><li><h4> what you are </h4> </li></ul></ul><ul><ul><li><h5> up above the world so high </h5> </li></ul></ul><ul><ul><li><h6> like a diamond in the sky </h6> </li></ul></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>Tech Lab Tip: Don’t get section headers confused with the document header <head> tag.
  13. 13. Fun with Text <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><title> Fun with Text </title> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><h1> Formatting text </h1> </li></ul><ul><li><p> This is a paragraph of text. I may want </li></ul><ul><li>to make certain words <strong> strong </strong> </li></ul><ul><li>or <em> emphatic </em> . All I need to do is </li></ul><ul><li>add the tags! </li></ul><ul><li></p> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>Question How would you make words both strong and emphatic ?
  14. 14. Fish again <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><title> Fun with Text </title> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><h1>Big Fish eat Little Fish</h1> </li></ul><ul><li><p>This is <strong>strong</strong></p> </li></ul><ul><li><p>This is <em>emphatic</em></p> </li></ul><ul><li><p>This is <strong><em>strong and emphatic!</em></strong></p> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>Tech Lab Tip Tags must always be completely contained within the outer tag.
  15. 15. Watch where you close <strong><em>Wrong!</strong></em> <strong><em>Wrong!</strong></em>
  16. 16. This is correct <strong><em>Right!</em></strong>
  17. 17. Fun with Lists <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><title> Fun with Lists </title> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><h1> Ordered List </h1> </li></ul><ul><li><ol> </li></ul><ul><li><li> The first item </li> </li></ul><ul><li><li> The second item </li> </li></ul><ul><li><li> The third item </li> </li></ul><ul><li></ol> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  18. 18. Fun with Lists <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><title> Fun with Lists </title> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><h1> Unordered List </h1> </li></ul><ul><li><ul> </li></ul><ul><li><li>The first item</li> </li></ul><ul><li><li>The second item</li> </li></ul><ul><li><li>The third item</li> </li></ul><ul><li></ul> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  19. 19. Pretty pictures <ul><li><img src=“ relative-path/filename.jpg ” /> </li></ul><ul><ul><li>Tag name is img </li></ul></ul><ul><ul><li>src is an attribute of img </li></ul></ul><ul><ul><li>Tells browser where to find image </li></ul></ul><ul><li>Tells the browser to display an image </li></ul><ul><li>Self-closing tag – the “/>” is the giveaway. </li></ul><ul><li>Tech Lab Tips </li></ul><ul><li>Filenames on server are case sensitive </li></ul><ul><li>Don’t forget the extension </li></ul><ul><li>Spaces in filenames spell trouble – rename your files! </li></ul><ul><li>The path is relative – put your image in the folder with your .html </li></ul>
  20. 20. Manny Being Manny <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><title> Fun with Images </title> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><h1> Manny Being Manny </h1> </li></ul><ul><li><img src=&quot;manny.jpg&quot; /> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  21. 21. Live links <ul><li><a href=“ ”> Google </a> </li></ul><ul><li>Tag name is a for anchor tag </li></ul><ul><li>href is an attribute of a </li></ul><ul><li>Tells browser where to find object </li></ul><ul><ul><li>External web page </li></ul></ul><ul><ul><li>Local web page or file </li></ul></ul><ul><li>Text between open and close tags is clickable. </li></ul>
  22. 22. Live link in action <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><title> Link to GSLIS </title> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><h1> Latest GSLIS News </h1> </li></ul><ul><li><p> Go to the </li></ul><ul><li><a href=&quot;;> GSLIS Web page </a> </li></ul><ul><li>for the latest GSLIS news. </li></ul><ul><li></p> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  23. 23. It’s your turn! <ul><li>Those are all the tags you need to know in order to complete TOR Part 2 . . . </li></ul><ul><li>. . . but there are lots more if you keep learning [X]HTML! </li></ul><ul><li>But first . . . </li></ul>
  24. 24. Local machine vs. web server <ul><li>Local files are on the computer you’re using </li></ul><ul><li>Live Web pages must be uploaded to your web space </li></ul><ul><li>To preview your page locally as you build it: </li></ul><ul><ul><li>Save your .html document </li></ul></ul><ul><ul><li>Open your browser </li></ul></ul><ul><ul><li>Select File -> Open </li></ul></ul><ul><ul><li>Browse to your folder </li></ul></ul><ul><ul><li>Select your .html file </li></ul></ul>Tech Lab Tip To save your file from Notepad, chose File => Save As => “myfile.html” using double quotes.
  25. 25. Find practice files <ul><li>Enter in browser </li></ul><ul><li>Log in with your email name </li></ul><ul><li>Password may be your Simmons ID </li></ul><ul><li>Click on MCBFS1 link </li></ul><ul><li>Click on Public folder </li></ul><ul><li>Find “TOR HTML Workshop” folder & click </li></ul><ul><li>Click on “files for practice exercise” folder </li></ul>
  26. 26. Download practice files <ul><li>Find three files in the folder </li></ul><ul><ul><li>potterquiz.pdf </li></ul></ul><ul><ul><li>cover.jpg </li></ul></ul><ul><ul><li>summary.doc </li></ul></ul><ul><li>Create a folder on local machine </li></ul><ul><li>Right click each file to save locally </li></ul>
  27. 27. Practice Page: Get Started <ul><li>Open a blank Notepad document </li></ul><ul><ul><li>Start => All Programs => Accessories => Notepad </li></ul></ul><ul><li>Save it to your local folder as “practice.html” </li></ul>Tech Lab Tip Mac users: The pre-installed text editor on the Mac is called TextEdit, but it does not always handle HTML very well. You may want to download the free Taco HTML Editor. See the Tech Lab Download Center at for instructions
  28. 28. Practice Page: Structural Tags <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  29. 29. Practice Page: Page Title <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><title> Harry Potter </title> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  30. 30. Practice Page: Adding Content <ul><li>Let’s add a paragraph of text. </li></ul><ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><title> Harry Potter </title> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><p> ………. </li></ul><ul><li></p> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>Insert this text The long awaited, eagerly anticipated, Harry Potter and the Half Blood Prince has arrived. A magnificent spectacle more than worth the price of admission, Harry Potter and the Half Blood Prince will blow you away. However, given that so much has gone into protecting . . .
  31. 31. Practice Page: Adding Content <ul><li>That paragraph could use a section heading </li></ul><h1> Plot Summary </h1> Preview your page Tech Lab Tip Once your page is open in Internet Explorer or FireFox, just Refresh to see your changes.
  32. 32. Practice Page: Adding Content <ul><li>Let’s add an image </li></ul><img src=“cover.jpg” /> Preview your page to see if it worked
  33. 33. Practice Page: Adding Content <ul><li>Time for the reading list </li></ul><ul><li><ul> </li></ul><ul><ul><li><li> Harry Potter and the Prisoner of Azkaban </li> </li></ul></ul><ul><ul><li><li> Harry Potter and the Order of the Phoenix </li> </li></ul></ul><ul><ul><li><li> Harry Potter and the Philosopher’s Stone </li> </li></ul></ul><ul><li></ul> </li></ul>Preview your page, change to an ordered list, and preview again
  34. 34. Practice Page: Adding Content <ul><li>Maybe this list could use a section header </li></ul><h3> Reading List </h3>
  35. 35. Practice Page: Adding Content <ul><li>Let’s link to our quiz file next </li></ul><ul><li>Give the link some context </li></ul><p> Test your HPQ with a <a href=“potterquiz.pdf”> quiz </a> ! </p>
  36. 36. Practice Page: Adding Content <ul><li>Go back to the paragraph and make the title of the book bold . </li></ul><p> The long awaited, eagerly anticipated , <strong> Harry Potter and the Deathly Hallows </strong> has arrived. A magnificent spectacle more than worth the price of admission, Harry Potter and the Half Blood Prince will blow you away. However, given that so much has gone into protecting . . . </p> What’s the tag? <strong> </strong>
  37. 37. Ready to go live! <ul><li>Download FTP software if necessary </li></ul><ul><li>Windows use WinSCP </li></ul><ul><ul><li> </li></ul></ul><ul><li>Mac use Cyberduck </li></ul><ul><ul><li> </li></ul></ul>
  38. 38. Accessing your Web space <ul><li>Host name is </li></ul><ul><li> </li></ul><ul><li>Use your username and network password </li></ul><ul><li>Click Login </li></ul><ul><li>Save only on your own machine! </li></ul>
  39. 39. Understanding your Web space <ul><li>Left pane shows local computer </li></ul><ul><li>Active pane’s title bar is gray </li></ul><ul><li>Navigate to your local working folder </li></ul>
  40. 40. Understanding your Web space <ul><li>Right pane shows web space </li></ul><ul><li>All your web pages live in public_html </li></ul><ul><li>You can create subfolders </li></ul>
  41. 41. Upload your files <ul><li>Highlight the files you want to upload </li></ul><ul><li>Drag and drop into public_html </li></ul><ul><li>Click copy to confirm </li></ul>
  42. 42. You’re live! <ul><li>The URL for your Simmons web space is </li></ul><ul><li>Add the name of your file to the URL </li></ul><ul><li> lastname.html </li></ul><ul><li>In Web terms, the folder /public_html is a known as a virtual directory. It “maps” to your /~username folder </li></ul>Tech Lab Tip To make everything on your page work properly, you must upload ALL your files including your .html document and any files you reference in your .html document, images, .pdfs, etc.
  43. 43. Troubleshooting <ul><li>Don’t panic </li></ul><ul><li>Chocolate might be helpful </li></ul><ul><li>Then </li></ul><ul><ul><li>Check your public_html folder </li></ul></ul><ul><ul><li>Check your file names (spaces & capitalization) </li></ul></ul><ul><ul><li>Is everything there? Are you sure ? </li></ul></ul><ul><ul><li>Proofread your tags </li></ul></ul>There is also plenty of helpful documentation on the Tech Lab Download Center – try the “Creating Web Pages” section:
  44. 44. Want to know more? <ul><li>On-line tutorials: </li></ul><ul><ul><li>HTML Online Tutorial </li></ul></ul><ul><ul><li> </li></ul></ul><ul><ul><li>XHTML Online Tutorial </li></ul></ul><ul><ul><li> </li></ul></ul><ul><li>Books: </li></ul><ul><ul><li>HTML for the World Wide Web, 5th Edition with XHTML and CSS: Visual QuickStart Guide by Elizabeth Castro </li></ul></ul><ul><ul><li>Eric Meyer on CSS: Mastering the Language of Web Design by Eric A. Meyer </li></ul></ul><ul><ul><li>Designing with Web Standards by Jeffrey Zeldman </li></ul></ul><ul><ul><li>Don't Make Me Think: A Common Sense Approach to Web Usability by Steve Krug </li></ul></ul>
  45. 45. GSLIS Toolkit coming soon! <ul><li>XHTML </li></ul><ul><ul><li>Defines the structure of the page </li></ul></ul><ul><ul><li>Identifies paragraphs, images, etc. </li></ul></ul><ul><li>CSS </li></ul><ul><ul><li>Defines the look of the page </li></ul></ul><ul><ul><li>How should <strong> look? </li></ul></ul><ul><ul><li>What font and color should <h1> be? </li></ul></ul><ul><ul><li> </li></ul></ul>
  46. 46. Need more help? <ul><li>Contact Dixie </li></ul><ul><ul><li>Call 617.521.2828 </li></ul></ul><ul><ul><li>Email </li></ul></ul><ul><ul><li>Skype DixieAtSimmons </li></ul></ul><ul><li>Hours </li></ul><ul><ul><li>Sundays (not at MHC) Chat & Skype 1-4 PM </li></ul></ul><ul><ul><li>Monday Chat & Skype 9-11 PM </li></ul></ul><ul><ul><li>Monday-Thursday 8:30 AM-4:30 PM </li></ul></ul>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.