GSLIS Tech Lab Workshop: Mastering TOR Part 2 GSLIS Tech Lab Workshop: Mastering TOR Part 2 GSLIS Tech Lab Workshop: Mastering TOR Part 2

Size: px

Start display at page:

Download "GSLIS Tech Lab Workshop: Mastering TOR Part 2 GSLIS Tech Lab Workshop: Mastering TOR Part 2 GSLIS Tech Lab Workshop: Mastering TOR Part 2"

Shanon Hill
5 years ago
Views:

1 WELCOME! GSLIS TECH LAB WORKSHOP: MASTERING TOR PART 2 Presented by: GSLIS Tech Lab Staff gslislab@simmons.edu Today s Topics Basic HTML Text Graphics Links to webpages and documents Using FTP to put your page on the Internet First, Some Background HyperText Markup Language Now being combined with XML (extensible Markup Language) to create XHTML Stricter but more powerful than HTML There are standards created and maintained by the W3C ( Rules for how to build pages Consistency across browsers Validators to check your code 1

2 Tags: Intro Tags are the commands that comprise HTML Commands are encased in < > Every tag must open < > and close </ > Closing tag includes forward slash Tells the browser how to display what s in the middle: is this a paragraph? a link? a photo? Placement of tag (on the same line as content, on the line above & below) does not matter Tags: <html> <html> </html> Structural tag Tells browser what coding language you ve written the page in (html or xhtml) Encloses all of the rest of your code & content <html> Look at all this content on this fabulous webpage! </html> Tags: <head> <head> </head> Structural tag Document header Contains general information about the webpage Style sheets <meta> tags Page title <html> <head> </head> Look at all this content on this fabulous webpage! </html> 2

3 Tags: <title> <title> </title> Content tag Part of the document <head> Page title that s displayed at the very top of the browser <html> <head> <title>fab Page!</title> </head> </html> Tags: <body> <body> </body> Structural tag Holds all the visible content of your webpage <html> <head> </head> <body>look at all this content on this fabulous webpage!</body> </html> Tags: <h1> and friends <h1> </h1> Section headers there are six sizes <h1> through <h6> Don t get section headers confused with the document header (<head>) tag. <h1>twinkle twinkle</h1> <h2>little star</h2> <h3>how I wonder<h3> <h4>what you are</h4> <h5>up above the world so high</h5> <h6>like a diamond in the sky</h6> 3

4 Tags: <p> and friends <p> </p> Regular paragraph <strong> </strong> Bold <em> </em> Italics <p><strong><em> I really want to make this point! </em></strong></p> I really want to make this point! When nesting tags, the closing set should be in the reverse order of the opening set. Tags: <ul> and <li> <ul> </ul> Makes a bulleted list <li> </li> Indicates that the text is an item on the list <ol> </ol> Makes an automatically numbered list <ul> <li>milk</li> <li>bread</li> <li>oj</li> </ul> milk bread oj Tags: images <img src= filename.jpg /> Tells the browser to display an image One tag closing tag is tacked onto the end TECH LAB TIPS: 1. Filenames are case sensitive 2. Don t forget the extension 3. Spaces in filenames spell trouble rename your file 4

5 Tags: links <a href= > </a> Tells the browser the content is a link Can be a link to a webpage or to a document <p>simmons College <a href= >GSLIS</a> is in Boston, Mass.</p> Simmons College GSLIS is in Boston, Mass. Ready, Eddie? Those are all the tags you need to know in order to complete TOR Part but there are lots more if you keep learning X/HTML! Local vs. Server-Side Files Local files are on the computer you re using Server-side files have been uploaded (FTP d) to your web space To preview your webpage as we build it: Save your html document (File -> Save) Open your browser Select File -> Open Browse Select your html file 5

6 Practice Page: Get Started Find the N: (student data) drive folder called TOR HTML Workshop Or from remote.simmons.edu go to: \\MCBFS1\public\TOR HTML Workshop Drag and drop these files into your Y: drive: coffee_survey.pdf coffee_beans.jpg facts.doc Practice Page: Get Started Open a blank Notepad document Start -> All Programs -> Accessories -> Notepad Save it to your Y: drive with the name practice.html 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 TextWrangler HTML Editor Practice Page: Add Structural Tags There are three tags to add. <html> <head> </head> <body> </body> </html> 6

7 Practice Page: Add a Page Title Where does the page title go? <html> <head> <title> My Practice Page </title> </head> <body> </body> </html> Practice Page: Adding Content Let s add a paragraph of text. <p> Coffee use can be traced at least to as early as the ninth century, when it appeared in the highlands of Ethiopia. According to legend, Ethiopian shepherds were the first to observe the influence of the caffeine in coffee beans when the goats appeared to "dance" and to have an increased level of energy after consuming wild coffee berries. </p> Source: Practice Page: Adding Content That paragraph could use a section heading <h1>history of Coffee</h1> Let s preview your page 7

8 Practice Page: Adding Content Let s put in our image <img src= coffee_beans.jpg /> Preview your page to see if it worked Practice Page: Adding Content Time for the beverage list <ul> <li>espresso</li> <li>frappuccino</li> <li>macchiato</li> </ul> Preview your page, change to an ordered list, and preview again Practice Page: Adding Content Maybe this list could use a section header <h3>popular Coffee Beverages</h3> 8

9 Practice Page: Adding Content Let s link to our survey file next Give the link some context Procrastinate with a coffee survey! <p>procrastinate with a <a href= coffee_survey.pdf >coffee survey</a>!</p> Practice Page: Adding Content Now let s try linking to another website when it appeared in the highlands of Ethiopia. According when it appeared in the <a href= >highlands of Ethiopia</a>. According Practice Page: Adding Content Go back to the paragraph and make the words According to legend italic <p> Coffee use can be traced at least to as early as the ninth century, when it appeared in the highlands of Ethiopia. According to legend, Ethiopian shepherds were the first to observe the influence of the caffeine in coffee beans when the goats appeared to "dance" and to have an increased level of energy after consuming wild coffee berries.</p> What s the tag? <em> </em> 9

10 FTP: It s alive! File Transfer Protocol Use WinSCP FTP on the PC or Cyberduck on the Mac All files must go into the public_html folder Log into your web space with the same information you use to access your Simmons . Visit the Tech Lab Download Center for a handout in the Creating Web Pages section FTP: It s alive! Your Simmons web space is at this address: For example: To make everything on your page work properly, you must upload both your html document and any files you reference in your html document (photos, pdfs, etc.). FTP: It s alive! So where s my page now? Fill in the italicized text with the correct info: This is your username. The tilde is next to the 1 on your keyboard. This is the name of your html document be sure to include the extension. 10

11 Can I do this from home? Yes, you can! If you have a Windows machine you can download Crimson Editor for FREE from If you have a Macintosh machine you can download TextWrangler for FREE from What to do when things don t work Take a deep breath and a snack break. Then: Proofread your tags Check your file names (no spaces) Check what you uploaded (everything!) See where you uploaded it (public_html) Ask a Technology Reference Assistant for help! There is also plenty of helpful documentation on the Tech Lab Download Center try the Creating Web Pages section: How can I contact a TRA? You can stop by P-213 You can call us at You can us at gslislab@simmons.edu You can instant message us at gslislab. 11

12 This is fun. Tell me more! On-line tutorials: HTML Online Tutorial XHTML Online Tutorial Books: HTML for the World Wide Web, 5th Edition with XHTML and CSS: Visual QuickStart Guide by Elizabeth Castro Eric Meyer on CSS: Mastering the Language of Web Design by Eric A. Meyer Designing with Web Standards by Jeffrey Zeldman Don't Make Me Think: A Common Sense Approach to Web Usability by Steve Krug This is fun. Tell me more! Cascading Style Sheets (CSS) HTML or XHTML defines the structure of the page what s a paragraph, what s a section header, etc. CSS defines the look of the page paragraphs are in this font and this size, bullets in unordered lists are orange triangles, etc. CSS Zen Garden demonstrates this: 12

c122jan2714.notebook January 27, 2014

c122jan2714.notebook January 27, 2014 Internet Developer 1 Start here! 2 3 Right click on screen and select View page source if you are in Firefox tells the browser you are using html. Next we have the tag and at the