Learning a New Language: HTML Fall 2012 ITD Workshop

Learning a New Language: HTMLFall 2012 ITD Workshop

Workshop Instructors

• Steven Smidl– Experience with (X)HTML/CSS. Took

LIS590LW and LIS490TE• Nick Tippie

– Experience in Computer Science (HTML/CSS, Java, C++, PHP)

Why have this workshop?

• Basic concepts in coding– Terms– Useful tips

• Easier use for template pages– Google Sites, WordPress and other CMS

What Do We Need?

• A coding application

• For Mac– Aquamac– Text Wrangler– Tincta

• Windows– Notepad ++

• Duel Systems– <oXygen>– Seamonkey– Eclipse

What is HTML?

• (HTML)=Hyper Text Markup Language

• Mark up text by using “tags”• Tags describe the language

What is HTML?

• Tags are understood with “angel brackets”

< > </ >• No tags, no understood language• They always come in pairs!

Starting an HTML Document

• HTML document needs identity

MUST HAVE OR ELSE NOT HTML!

Starting an HTML Document

• All tags need to OPEN and CLOSE

MUST DO FOR EVERY TAG!

Starting an HTML Page

• Have all tags in lower case. Avoid capitalization.

Where all content goes

Starting an HTML Page

• Don’t pass the closing bracket

Don’t cross after closing!

Remember what Gandolf said…

Headings

• Different sizes• Can go from h1 (largest) to h6

(smallest)HTML Coding

Website Format

Headings

• What is wrong with this picture?

Headings

• All tags come in pairs!

Basic Tags

• Stresses text/content on webpages

Writing anchor tags/e-mail

• <a href….• mailto…

Adding Pictures

What about color, sizes, etc.?

• Use CSS, not HTML when wanting to style your page– Color schemes– Fonts– Lists/boxes/tables

• Much of this is deprecated with the introduction of HTML 5

How is HTML different than CSS?

XHTML Vs. HTML

• XHTML is XML and HTML• More strict in coding

– Everything is lowercase– All tags are closed/nested

XHTML format

HTML Format

CSS Tutorials and resources

• Check our future workshops in CSS• W3schools.com• Lynda Tutorials

– http://go.illinois.edu/lynda

Questions/Comments/Concerns?

• Contact GSLIS Help Desk– help@support.lis.illinois.edu

• Info on this presentation– smidl2@illinois.edu– tippie2@illinois.edu

• Feedback is always encouraged!– http://go.illinois.edu/itdfeedback