BlogHer '12: HTML Doesn't Have to Be a Four-Letter Word

769 views

Published on

HTML Doesn't Have to Be a Four-Letter Word at BlogHer '12.

Published in: Technology, Art & Photos
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
769
On SlideShare
0
From Embeds
0
Number of Embeds
12
Actions
Shares
0
Downloads
5
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

BlogHer '12: HTML Doesn't Have to Be a Four-Letter Word

  1. 1. The Technical Melanie Edwards ellamedia.com @ellamedia HTML Doesn’t Have to Be a Four-Letter Word Rajashree Karwa velvetaroma.com @velvetaroma Sarah Kimmel tech4moms.com @Tech4MomsWireless Network: BlogHer Session hashtag: #BH12HTMLPassword (case sensitive, one word): lifewellsaid Conference hashtag: #BlogHer12
  2. 2. "Design is not just what it looks like and feels like....Wireless Network: BlogHer Session hashtag: # BH12HTMLPassword (case sensitive, one word): lifewellsaid Conference hashtag: #BlogHer12
  3. 3. Design is how it works." - Steve JobsWireless Network: BlogHer Session hashtag: # BH12HTMLPassword (case sensitive, one word): lifewellsaid Conference hashtag: #BlogHer12
  4. 4. HTML Your Blogs Blueprint <html> <head> <title>My Blog Name</title> </head> <body> <h1>My Post Title</h1> <img src="http://myblog.com/cool.jpg" /> <p>This is my unique take on how things are.</p> </body> </html>Wireless Network: BlogHer Session hashtag: # BH12HTMLPassword (case sensitive, one word): lifewellsaid Conference hashtag: #BlogHer12
  5. 5. CSS Adding A Little Stylebody { 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 myunique take on how things are.</p>Wireless Network: BlogHer Session hashtag: # BH12HTMLPassword (case sensitive, one word): lifewellsaid Conference hashtag: #BlogHer12
  6. 6. Directions To The CodeWordpressAdmin -> Appearance -> Editor -> WidgetsPosts: HTML tab (instead of Visual) Blogger Dashboard -> More Options -> Template -> Edit HTML Posts: HTML button (instead of Compose)Wireless Network: BlogHer Session hashtag: # BH12HTMLPassword (case sensitive, one word): lifewellsaid Conference hashtag: #BlogHer12
  7. 7. Were Here To Help You With... 1. Sidebar Issues 2. Changing Colors/Background 3. Adding Nofollow 4. Image Optimization a. Size b. Title & Alt 5. Plus lots of extras!Wireless Network: BlogHer Session hashtag: # BH12HTMLPassword (case sensitive, one word): lifewellsaid Conference hashtag: #BlogHer12
  8. 8. Dont Be Caught With Your Fly Open Whats 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>Wireless Network: BlogHer Session hashtag: # BH12HTMLPassword (case sensitive, one word): lifewellsaid Conference hashtag: #BlogHer12
  9. 9. You Are What You WriteHeaders Paragraphs <p><h1>My Biggest Blogs often become more than a way to Heading!</h1> just communicate; they become a way to reflect on life...<h2>My Next Biggest </p> Heading</h2><h3>Things are getting Color smaller</h3> p { color: #E7E7E7; } h1 { color: red; } <p style="color: blue;">Inline Color Change</p>Wireless Network: BlogHer Session hashtag: # BH12HTMLPassword (case sensitive, one word): lifewellsaid Conference hashtag: #BlogHer12
  10. 10. Express Yourself Through Fonts h2 { font-family: Helvetica, Times New Roman, serif; font-style: italic; font-size: 40px; } NOT WEB SAFE WEB SAFEWireless Network: BlogHer Session hashtag: # BH12HTMLPassword (case sensitive, one word): lifewellsaid Conference hashtag: #BlogHer12
  11. 11. Change Your Background Color body { background: #f0f8f8; color: #888; } OR #container { width: 960px; background: #fff; }Wireless Network: BlogHer Session hashtag: # BH12HTMLPassword (case sensitive, one word): lifewellsaid Conference hashtag: #BlogHer12
  12. 12. Change Your Background Imagebody { 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 repeateddefault is to repeat both horizontally and verticallyTo have the image "stick" and not scrollbackground-attachment:fixed;Wireless Network: BlogHer Session hashtag: # BH12HTMLPassword (case sensitive, one word): lifewellsaid Conference hashtag: #BlogHer12
  13. 13. Size Really Does Matter What youre displaying isnt what is actually being downloaded. Stretch -- You dont want this to happen!<img src="url" style="width:400; height:400;" />Wireless Network: BlogHer Session hashtag: # BH12HTMLPassword (case sensitive, one word): lifewellsaid Conference hashtag: #BlogHer12
  14. 14. Imagination Has No Borders, Images Could Dotted Border <img src="url" style="border: dotted;" /> Drop Shadow img { -webkit-box-shadow:0px 5px 10px #AAAAAA;Solid Border -moz-box-shadow: 0 5px 10px #AAAAAA;<img src="url" box-shadow: 0 5px 10pxstyle="border: solid;" /> #AAAAAA; border: 1px solid #E7E7E7; }Wireless Network: BlogHer Session hashtag: # BH12HTMLPassword (case sensitive, one word): lifewellsaid Conference hashtag: #BlogHer12
  15. 15. Take Me AwayClickable Images<a href="http://myblog.com/about.html"> <img src="me.jpg" /></a>Clickable TextCheckout this awesome<ahref="http://anothersite.com/page.html">website</a>!Wireless Network: BlogHer Session hashtag: # BH12HTMLPassword (case sensitive, one word): lifewellsaid Conference hashtag: #BlogHer12
  16. 16. Search And They Will FindNofollow<ahref="http://www.anotherblog.com/" rel="nofollow">MyLink</a>Optimized Images<imgsrc="http://myblog.com/good-filename.jpg" alt="text"title="text" />Wireless Network: BlogHer Session hashtag: # BH12HTMLPassword (case sensitive, one word): lifewellsaid Conference hashtag: #BlogHer12
  17. 17. Check Your ListsOrdered List CSS ol { list-style-type: upper-roman;<ol> 1. Item 1 } <li>Item 1</li> ol { 2. Item 2 <li>Item 2</li> list-style-type: lower-alpha; 3. Item 3 <li>Item 3</li> }</ol>Unordered List ul { list-style-type: circle; }<ul> ul { <li>Item</li> <li>Item</li> • Item list-style-type: none; <li>Item</li> • Item }</ul> • Item Wireless Network: BlogHer Session hashtag: # BH12HTML Password (case sensitive, one word): lifewellsaid Conference hashtag: #BlogHer12
  18. 18. Browser Tools Safari Firefox Chrome Preferences -> Advanced -> Built in or Plugins: Built in Check Show Develop menu • Firebug in menu bar http://getfirebug.com/ Right click and select "Inspect Element"Wireless Network: BlogHer Session hashtag: # BH12HTMLPassword (case sensitive, one word): lifewellsaid Conference hashtag: #BlogHer12
  19. 19. A Few Tips!• Browsers are different• Backup before making big changes. o Should always backup regularly!• Keep track of what youre changing so you can "undo" or "redo"• If you are using a premium theme (Genesis/Thesis), try to use hooksWireless Network: BlogHer Session hashtag: # BH12HTMLPassword (case sensitive, one word): lifewellsaid Conference hashtag: #BlogHer12
  20. 20. 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/ Bloggers Guide to HTML (ebook) http://www.wambooli.com/help/bloggers/bloggers.pdfWireless Network: BlogHer Session hashtag: # BH12HTMLPassword (case sensitive, one word): lifewellsaid Conference hashtag: #BlogHer12
  21. 21. Questions? Melanie Edwards @EllaMedia www.ellamedia.com Sarah Kimmel @Tech4Moms www.BloggersHelpDesk.com Raj Karwa @VelvetAroma www.velvetaroma.comWireless Network: BlogHer Session hashtag: # BH12HTMLPassword (case sensitive, one word): lifewellsaid Conference hashtag: #BlogHer12
  22. 22. The Technical Melanie Edwards ellamedia.com @ellamedia HTML Doesn’t Have to Be a Four-Letter Word Rajashree Karwa velvetaroma.com @velvetaroma Sarah Kimmel tech4moms.com @Tech4MomsWireless Network: BlogHer Session hashtag: #BH12HTMLPassword (case sensitive, one word): lifewellsaid Conference hashtag: #BlogHer12

×