gslis tech lab workshop: tor part 3 html intro welcome! gslis tech lab workshop: tor part 3 html...
Post on 21-Dec-2015
223 views
TRANSCRIPT
GSLIS Tech Lab Workshop: TOR Part 3 HTML Intro
WELCOME!GSLIS TECH LAB
WORKSHOP: TOR Part 3 HTML Intro
Presented by: GSLIS Tech Lab Staff
GSLIS Tech Lab Workshop: TOR Part 3 HTML Intro
Today’s Topics
• Basic HTML– Text– Graphics– Links to webpages and documents
• Using FTP to put your page on the Internet
GSLIS Tech Lab Workshop: TOR Part 3 HTML Intro
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 (www.w3.org)
• Rules for how to build pages
• Consistency across browsers
• Validators to check your code
GSLIS Tech Lab Workshop: TOR Part 3 HTML Intro
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
GSLIS Tech Lab Workshop: TOR Part 3 HTML Intro
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
GSLIS Tech Lab Workshop: TOR Part 3 HTML Intro
Tags: <head>
• <head> </head>• Structural tag• Document header• Contains general
information about the webpage– Style sheets– <meta> tags– Page title
GSLIS Tech Lab Workshop: TOR Part 3 HTML Intro
Tags: <title>
• <title> </title>
• Content tag
• Part of the document <head>
• Page title that’s displayed at the very top of the browser
GSLIS Tech Lab Workshop: TOR Part 3 HTML Intro
Tags: <body>
• <body> </body>• Structural tag• Holds all the visible
content of your webpage– Headings– Paragraphs– Lists– Images– Links– …and more
GSLIS Tech Lab Workshop: TOR Part 3 HTML Intro
Tags: Headings
• <h1> </h1>
• Section headings – there are six sizes
• <h1> through <h6>
<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>
TECH LAB TIP:
Don’t get section headings confused with the document header
(<head>) tag.
GSLIS Tech Lab Workshop: TOR Part 3 HTML Intro
Tags: Paragraphs
• <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!
TECH LAB TIP:
When nesting tags, the closing set should be in the reverse order of the
opening set.
GSLIS Tech Lab Workshop: TOR Part 3 HTML Intro
Tags: Lists
• <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
<ol>
<li>milk</li>
<li>bread</li>
<li>oj</li>
</ol>
1. milk
2. bread
3. oj
GSLIS Tech Lab Workshop: TOR Part 3 HTML Intro
Tags: Images
• <img src=“filename.jpg” />• Tells the browser to display an image• One tag (aka “self-contained”) – closing slash is included
TECH LAB TIPS:
1. Filenames are case sensitive
2. Don’t forget the extension
3. Spaces in filenames spell trouble – rename your file
GSLIS Tech Lab Workshop: TOR Part 3 HTML Intro
Tags: Links
<a href=“http://www.simmons.edu”> </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=“http://www.simmons.edu/gslis”>GSLIS</a> is in Boston, Mass.</p>
Simmons College GSLIS is in Boston, Mass.
GSLIS Tech Lab Workshop: TOR Part 3 HTML Intro
Ready, Eddie?
• Those are all the tags you need to know in order to complete TOR Part 3 . . .
• . . . but there are lots more if you keep learning X/HTML!
GSLIS Tech Lab Workshop: TOR Part 3 HTML Intro
Practice Page: Get Started
• Find the N: (student data) drive folder called “TOR HTML Workshop”
• Drag and drop these files into your Y: drive:– coffee_survey.pdf– coffee_beans.jpg– facts.doc
GSLIS Tech Lab Workshop: TOR Part 3 HTML Intro
Practice Page: Get Started
• Open a blank Crimson Editor document – Start -> All Programs -> Accessories -> Crimson
• Save it to your Y: drive with the name practice.html
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 TextWrangler HTML Editor
GSLIS Tech Lab Workshop: TOR Part 3 HTML Intro
Practice Page: Add Structural Tags
<html>
<head>
</head>
<body>
</body>
</html>
• There are three tags to add.
GSLIS Tech Lab Workshop: TOR Part 3 HTML Intro
Practice Page: Add a Page Title
• Where does the page title go?<html>
<head>
</head>
<body>
</body>
</html>
<title> My Practice Page </title>
GSLIS Tech Lab Workshop: TOR Part 3 HTML Intro
Practice Page: Adding Content
<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>
• Let’s add a paragraph of text.
Source: http://en.wikipedia.org/wiki/Coffee
GSLIS Tech Lab Workshop: TOR Part 3 HTML Intro
Practice Page: Adding Content
<h1>History of Coffee</h1>
• That paragraph could use a section heading
• Let’s preview your page
GSLIS Tech Lab Workshop: TOR Part 3 HTML Intro
Practice Page: Adding Content
<img src=“coffee_beans.jpg” />
• Let’s put in our image
• Preview your page to see if it worked
GSLIS Tech Lab Workshop: TOR Part 3 HTML Intro
Practice Page: Adding Content
• Time for the beverage list
<ul>
</ul>
• Preview your page, change to an ordered list, and preview again
<li>Espresso</li><li>Frappuccino</li><li>Macchiato</li>
GSLIS Tech Lab Workshop: TOR Part 3 HTML Intro
Practice Page: Adding Content
• Maybe this list could use a section heading
<h3>Popular Coffee Beverages</h3>
GSLIS Tech Lab Workshop: TOR Part 3 HTML Intro
Practice Page: Adding Content
• Let’s link to our survey file next• Give the link some context
<p>Procrastinate with a <a href=“coffee_survey.pdf”>coffee survey</a>!</p>
Procrastinate with a coffee survey!
GSLIS Tech Lab Workshop: TOR Part 3 HTML Intro
Practice Page: Adding Content
• Now let’s try linking to another website
…when it appeared in the
<a href=“http://en.wikipedia.org/wiki/Ethiopian_Highlands”>highlands
of Ethiopia</a>. According…
…when it appeared in the highlands of Ethiopia. According…
GSLIS Tech Lab Workshop: TOR Part 3 HTML Intro
Practice Page: Adding Content
<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>
• Go back to the paragraph and make the words “According to legend” italic
What’s the tag?
<em></em>
GSLIS Tech Lab Workshop: TOR Part 3 HTML Intro
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
GSLIS Tech Lab Workshop: TOR Part 3 HTML Intro
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
TECH LAB TIP:
Log into your web space with the same information
you use to access your Simmons e-mail.
• Visit the Tech Lab Download Center for a handout – in the Creating Web Pages section
• http://my.simmons.edu/gslis/techlab/howto-info.shtml
GSLIS Tech Lab Workshop: TOR Part 3 HTML Intro
FTP: It’s alive!
• Your Simmons web space is at this address:
http://web.simmons.edu/~username
• For example:
http://web.simmons.edu/~cody1
TECH LAB TIP:
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.).
GSLIS Tech Lab Workshop: TOR Part 3 HTML Intro
FTP: It’s alive!
• So where’s my page now?
• Fill in the italicized text with the correct info:http://web.simmons.edu/~username/filename.html
TECH LAB TIP:
This is the name of your html document – be sure to include the extension.
TECH LAB TIP:
This is your email username. The tilde is next to the 1 on your
keyboard.
Can I do this from home?
Yes, you can!
If you have a Windows machine you can download Crimson Editor for FREE from http://www.
crimsoneditor.com/
If you have a Macintosh machine you can download TextWrangler for FREE from
http://www.barebones.com/products/textwrangler/
GSLIS Tech Lab Workshop: TOR Part 3 HTML Intro
GSLIS Tech Lab Workshop: TOR Part 3 HTML Intro
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:
http://www.simmons.edu/gslis/library/downloads.php
How can I contact a TRA?
You can stop by P-213
You can call us at 617.521.2802
You can email us at [email protected]
You can instant message us at gslislab.
GSLIS Tech Lab Workshop: TOR Part 3 HTML Intro
GSLIS Tech Lab Workshop: TOR Part 3 HTML Intro
This is fun. Tell me more!
• On-line tutorials:– HTML Online Tutorialhttp://www.w3schools.com/HTML/default.asp– XHTML Online Tutorialhttp://www.w3schools.com/xHTML/default.asp
• 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
GSLIS Tech Lab Workshop: TOR Part 3 HTML Intro
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 heading, 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: http://www.csszengarden.com/