blogher '12: html doesn't have to be a four-letter word

Wireless Network: BlogHerPassword (case sensitive, one word): lifewellsaid

Session hashtag: #BH12HTMLConference hashtag: #BlogHer12

The Technical

HTML Doesn’t Have to Be a Four-Letter Word

Melanie Edwardsellamedia.com @ellamedia

Rajashree Karwavelvetaroma.com@velvetaroma

Sarah Kimmeltech4moms.com @Tech4Moms


Session hashtag: # BH12HTML Conference hashtag: #BlogHer12

"Design is not just what it looks like and feels like....



Design is how it works." - Steve Jobs



HTML Your Blog's Blueprint

<html> <head> <title>My Blog Name</title> </head>

<body>

<h1>My Post Title</h1>

<imgsrc="http://myblog.com/cool.jpg" />

<p>This is my unique take on how things are.</p>

</body></html>



CSSAdding A Little Style

body { background-color: #B1FB17;}

h1 { color: red; font-style: italic;}

img { border-style: dashed; border-width: 2px; border-color: black;}

<p style="color:#008000;">This is my unique take on how things are.</p>



Directions To The CodeWordpress

Admin -> Appearance -> Editor -> Widgets

Posts: HTML tab (instead of Visual)

Blogger

Dashboard -> More Options -> Template

-> Edit HTML

Posts: HTML button (instead of Compose)



We're Here To Help YouWith...1. Sidebar Issues

2. Changing Colors/Background

3. Adding Nofollow

4. Image Optimization

a. Size

b. Title & Alt

5. Plus lots of extras!



Don't Be Caught With Your Fly Open

What's the Problem: * Side bar is in the wrong place

* Side bar is too wide

How To Solve It:* Check if your tags are closed* Or closed without an opening tag

Ex:

<div>Check Out My Fancy Widget<div>Check Out My Fancy Widget </div></div>



You Are What You Write

Headers<h1>My Biggest Heading!</h1>

<h2>My Next Biggest Heading</h2>

<h3>Things are getting smaller</h3>

Paragraphs<p>Blogs often become more than a way to just communicate; they become a way to reflect on life...</p>

Colorp { color: #E7E7E7;}

h1 { color: red;}

<p style="color: blue;">Inline Color Change</p>



Express Yourself Through Fontsh2 { font-family: Helvetica, 'Times New Roman', serif; font-style: italic; font-size: 40px;}

NOT WEB SAFE

WEB SAFE



Change Your Background

Color

body { background: #f0f8f8; color: #888; }

OR

#container { width: 960px; background: #fff;}



Change Your BackgroundImage

body { background: #f0f8f8 url(images/background.png) repeat-x; color: #888; }

repeat-x: The background image will be repeated only horizontallyrepeat-y: The background image will be repeated only verticallyno-repeat: The background image will not be repeated

default is to repeat both horizontally and vertically

To have the image "stick" and not scrollbackground-attachment:fixed;



Size Really Does MatterWhat you're displaying isn't what is actually being downloaded.

Stretch -- You don't want this to happen!

<img src="url" style="width:400; height:400;" />



Imagination Has No Borders, Images Could

Dotted Border<img src="url" style="border: dotted;" />

Solid Border

<img src="url" style="border: solid;" />

Drop Shadowimg { -webkit-box-shadow:0px 5px 10px #AAAAAA; -moz-box-shadow: 0 5px 10px #AAAAAA; box-shadow: 0 5px 10px #AAAAAA; border: 1px solid #E7E7E7;}



Take Me AwayClickable Images

<a href="http://myblog.com/about.html"> <img src="me.jpg" /></a>

Clickable Text

Checkout this awesome <a href="http://anothersite.com/page.html"> website</a>!



Search And They Will Find

Nofollow

<a href="http://www.anotherblog.com/" rel="nofollow">My Link</a>

Optimized Images

<img src="http://myblog.com/good-filename.jpg" alt="text" title="text" />



Check Your ListsOrdered List

<ol> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li></ol>

Unordered List

<ul> <li>Item</li> <li>Item</li> <li>Item</li></ul>

• Item• Item• Item

1. Item 12. Item 23. Item 3

CSSol { list-style-type: upper-roman;}ol { list-style-type: lower-alpha;}

ul { list-style-type: circle;}ul { list-style-type: none;}



Browser ToolsFirefox Built in or Plugins: • Firebug

http://getfirebug.com/

Safari Preferences -> Advanced -> Check 'Show Develop menu in menu bar'

ChromeBuilt in

Right click and select "Inspect Element"



A Few Tips!

• Browsers are different

• Backup before making big changes. o Should always backup

regularly!

• Keep track of what you're changing so you can "undo" or "redo"

• If you are using a premium theme (Genesis/Thesis), try to use hooks



Resources

W3 Schools Tutorials• HTML: http://www.w3schools.com/html/

• CSS: http://www.w3schools.com/css/

Code Academy http://www.codecademy.com/

SEO Checklist http://www.ellamedia.com/blog/seo-blog-post-checklist/

Blogger's Guide to HTML (ebook)http://www.wambooli.com/help/bloggers/bloggers.pdf


Session hashtag: # BH12HTMLConference hashtag: #BlogHer12

Questions?

Melanie Edwards@EllaMedia

www.ellamedia.com

Sarah Kimmel@Tech4Moms

www.BloggersHelpDesk.com

Raj Karwa@VelvetAroma

www.velvetaroma.com


Session hashtag: #BH12HTMLConference hashtag: #BlogHer12

The Technical

HTML Doesn’t Have to Be a Four-Letter Word

Melanie Edwardsellamedia.com @ellamedia

Rajashree Karwavelvetaroma.com@velvetaroma

Sarah Kimmeltech4moms.com @Tech4Moms

blogher '12: html doesn't have to be a four-letter word

Technology

post title