Embed Size (px)
DESCRIPTION
People who manage their own websites (especially bloggers and small business owners) really should know some basic HTML and CSS. In this interactive presentation, @TJList gives some tips on performing some basic tasks.
Citation preview
7/30 – 7/31/2011 #wcchicago
Back to BasicsEssential HTML and CSS
forBloggers and Business Owners
TJ ListThe Geek Who Speaks People
Twitter: @TJListhttp://maxim650.com
7/30 – 7/31/2011 #wcchicago
The Most Important Slide
Find this presentation at:http://maxim650.com/wcchi-2011
The demo sites are at:http://wcchi-before.maxim650.com/http://wcchi-after.maxim650.com/
7/30 – 7/31/2011 #wcchicago
I don’t need to learn code because…
“I use WordPress!”“It handles the code for me.”“My theme has all the controls I need.”
7/30 – 7/31/2011 #wcchicago
“I don’t need to learn to swim. I wear a life jacket when I go canoeing.”
7/30 – 7/31/2011 #wcchicago
WordPress is a Factory
7/30 – 7/31/2011 #wcchicago
WordPress is a FactoryInputs Processing Equipment Outputs
Blog Posts WordPress Software HTMLPages Theme CSS
Images Plugins JavaScriptLinks Images, videos, etc.
7/30 – 7/31/2011 #wcchicago
Tools
• I can’t get this stuff at Home Depot…
7/30 – 7/31/2011 #wcchicago
PluginsWordPress FAQ Manager Andrew Norcross / @norcrosshttp://wordpress.org/extend/plugins/wordpress-faq-manager/
WordPress.com Custom CSS Automattichttp://wordpress.org/extend/plugins/safecss/
Widget Classes aizattohttp://wordpress.org/extend/plugins/widget-classes/
TinyMCE Advanced Andrew Ozzhttp://wordpress.org/extend/plugins/tinymce-advanced/
7/30 – 7/31/2011 #wcchicago
Suggested Tools
• IDE (Integrated Development Environment)– Notepad++ (PC)– Coda or Textmate (Mac)
7/30 – 7/31/2011 #wcchicago
Essential Tools
• FireFox• Firebug extension• Patience• Attention to Detail• Sense of Humor
7/30 – 7/31/2011 #wcchicago
Resources
• W3 Schools (http://www.w3schools.com/)• http://css-tricks.com/• http://www.cssnewbie.com/• http://meyerweb.com/eric/tools/css/reset/• http://positioniseverything.net/index.php
7/30 – 7/31/2011 #wcchicago
Let’s get started…
• WordPress 3.2.1• Twenty-Eleven Theme• Plugins listed above
7/30 – 7/31/2011 #wcchicago
CSS Selectors by Precedence
1. Element-specific settings2. ID (indicated with # in a CSS file)3. Class (indicated with . in a CSS file)4. Browser Default
7/30 – 7/31/2011 #wcchicago
Semantic Markup
• HTML for Content– HyperText Markup Language– Tells browser what to display
• CSS for Appearance– Cascading Style Sheet– Tells browser how to display the HTML
7/30 – 7/31/2011 #wcchicago
Example 1
• Which element is the most important on this page?
• TinyMCE: Your Frenemy• Visual vs. HTML Editors
7/30 – 7/31/2011 #wcchicago
Example 2
• Typography Test• Making your theme make sense
7/30 – 7/31/2011 #wcchicago
Example 3
• Same content as example 1• Better markup
7/30 – 7/31/2011 #wcchicago
The Box Model This End Up
HTML/CSS
7/30 – 7/31/2011 #wcchicago
The Box Model*
*Image blatanty stolen from http://www.w3schools.com/css/css_boxmodel.aspbecause I was too lazy to make my own at 3:30 AM.
7/30 – 7/31/2011 #wcchicago
Example 4
• Judicious use of the <div> element• The Box Model• Background and Border properties• Padding and Margins
7/30 – 7/31/2011 #wcchicago
Distinctions Reduce
Confusion
7/30 – 7/31/2011 #wcchicago
Are your eyes crossed?
• Distinctions reduce confusion• Practice, practice, practice• White space!• Use your IDE
7/30 – 7/31/2011 #wcchicago
Example 5
• Widgets!– Goodbye, TinyMCE editor
• Float• Element-specific styles
7/30 – 7/31/2011 #wcchicago
Example 6
• Highlighting Rows of a list• Selecting specific elements by ID• Advanced selection techniques
7/30 – 7/31/2011 #wcchicago
Gotchas
• Pair tags properly• Be careful when nesting tags
7/30 – 7/31/2011 #wcchicago
“Do MORE of what WORKS.
Do less of what doesn’t.”
-Rebecca Jehorek
7/30 – 7/31/2011 #wcchicago
Thank you, WordCamp Chicago!Image Credits
Slide 4: Canoe by Khotzyhttp://www.flickr.com/photos/43334017@N00/2510410170/
Slide 5: Factory by harry_nlhttp://www.flickr.com/photos/23363966@N02/3030267182/
Slide 18: Cardboard Box by Ahhyeahhttp://www.flickr.com/photos/87622946@N00/454494396/
Slide 19: Box Model by W3Schoolshttp://www.w3schools.com/css/css_boxmodel.asp
Slide 21: Tying Shoes by nlnnethttp://www.flickr.com/photos/39727414@N00/1467545266/
Slide 26: Car Door Lock by ilmungohttp://www.flickr.com/photos/48094050@N00/155746502/
All images are Creative Commons (except the CSS Box Model on slide 19 )
TJ ListThe Geek Who Speaks People
http://maxim650.com
