gslis tech lab workshop: tor part 3 html intro welcome! gslis tech lab workshop: tor part 3 html...

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

[email protected]


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 (www.w3.org)

• Rules for how to build pages

• Consistency across browsers

• Validators to check your code


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


Tags: <head>

• <head> </head>• Structural tag• Document header• Contains general

information about the webpage– Style sheets– <meta> tags– Page title


Tags: <title>

• <title> </title>

• Content tag

• Part of the document <head>

• Page title that’s displayed at the very top of the browser


Tags: <body>

• <body> </body>• Structural tag• Holds all the visible

content of your webpage– Headings– Paragraphs– Lists– Images– Links– …and more


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.


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.


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


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


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.


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!


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


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


Practice Page: Add Structural Tags

<html>

<head>

</head>

<body>

</body>

</html>

• There are three tags to add.


Practice Page: Add a Page Title

• Where does the page title go?<html>

<head>

</head>

<body>

</body>

</html>

<title> My Practice Page </title>


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



<h1>History of Coffee</h1>

• That paragraph could use a section heading

• Let’s preview your page



<img src=“coffee_beans.jpg” />

• Let’s put in our image

• Preview your page to see if it worked



• 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>



• Maybe this list could use a section heading

<h3>Popular Coffee Beverages</h3>



• 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!



• 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…



<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>


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


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


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.).


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/



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.



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


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/

gslis tech lab workshop: tor part 3 html intro welcome! gslis tech lab workshop: tor part 3 html...

Documents