learning a new language: html fall 2012 itd workshop
TRANSCRIPT
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– [email protected]
• Info on this presentation– [email protected]– [email protected]
• Feedback is always encouraged!– http://go.illinois.edu/itdfeedback