Your SlideShare is downloading. ×
0
BlogHer '12: HTML Doesn't Have to Be a Four-Letter Word
BlogHer '12: HTML Doesn't Have to Be a Four-Letter Word
BlogHer '12: HTML Doesn't Have to Be a Four-Letter Word
BlogHer '12: HTML Doesn't Have to Be a Four-Letter Word
BlogHer '12: HTML Doesn't Have to Be a Four-Letter Word
BlogHer '12: HTML Doesn't Have to Be a Four-Letter Word
BlogHer '12: HTML Doesn't Have to Be a Four-Letter Word
BlogHer '12: HTML Doesn't Have to Be a Four-Letter Word
BlogHer '12: HTML Doesn't Have to Be a Four-Letter Word
BlogHer '12: HTML Doesn't Have to Be a Four-Letter Word
BlogHer '12: HTML Doesn't Have to Be a Four-Letter Word
BlogHer '12: HTML Doesn't Have to Be a Four-Letter Word
BlogHer '12: HTML Doesn't Have to Be a Four-Letter Word
BlogHer '12: HTML Doesn't Have to Be a Four-Letter Word
BlogHer '12: HTML Doesn't Have to Be a Four-Letter Word
BlogHer '12: HTML Doesn't Have to Be a Four-Letter Word
BlogHer '12: HTML Doesn't Have to Be a Four-Letter Word
BlogHer '12: HTML Doesn't Have to Be a Four-Letter Word
BlogHer '12: HTML Doesn't Have to Be a Four-Letter Word
BlogHer '12: HTML Doesn't Have to Be a Four-Letter Word
BlogHer '12: HTML Doesn't Have to Be a Four-Letter Word
BlogHer '12: HTML Doesn't Have to Be a Four-Letter Word
BlogHer '12: HTML Doesn't Have to Be a Four-Letter Word
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

642

Published on

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

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
642
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  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. "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. Design is how it works." - Steve JobsWireless Network: BlogHer Session hashtag: # BH12HTMLPassword (case sensitive, one word): lifewellsaid Conference hashtag: #BlogHer12
  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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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

×