Upload
blogher
View
631
Download
0
Tags:
Embed Size (px)
DESCRIPTION
HTML Doesn't Have to Be a Four-Letter Word at BlogHer '12.
Citation preview
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
Wireless Network: BlogHerPassword (case sensitive, one word): lifewellsaid
Session hashtag: # BH12HTML Conference hashtag: #BlogHer12
"Design is not just what it looks like and feels like....
Wireless Network: BlogHerPassword (case sensitive, one word): lifewellsaid
Session hashtag: # BH12HTML Conference hashtag: #BlogHer12
Design is how it works." - Steve Jobs
Wireless Network: BlogHerPassword (case sensitive, one word): lifewellsaid
Session hashtag: # BH12HTML Conference hashtag: #BlogHer12
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>
Wireless Network: BlogHerPassword (case sensitive, one word): lifewellsaid
Session hashtag: # BH12HTML Conference hashtag: #BlogHer12
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>
Wireless Network: BlogHerPassword (case sensitive, one word): lifewellsaid
Session hashtag: # BH12HTML Conference hashtag: #BlogHer12
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)
Wireless Network: BlogHerPassword (case sensitive, one word): lifewellsaid
Session hashtag: # BH12HTML Conference hashtag: #BlogHer12
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!
Wireless Network: BlogHerPassword (case sensitive, one word): lifewellsaid
Session hashtag: # BH12HTML Conference hashtag: #BlogHer12
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>
Wireless Network: BlogHerPassword (case sensitive, one word): lifewellsaid
Session hashtag: # BH12HTML Conference hashtag: #BlogHer12
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>
Wireless Network: BlogHerPassword (case sensitive, one word): lifewellsaid
Session hashtag: # BH12HTML Conference hashtag: #BlogHer12
Express Yourself Through Fontsh2 { font-family: Helvetica, 'Times New Roman', serif; font-style: italic; font-size: 40px;}
NOT WEB SAFE
WEB SAFE
Wireless Network: BlogHerPassword (case sensitive, one word): lifewellsaid
Session hashtag: # BH12HTML Conference hashtag: #BlogHer12
Change Your Background
Color
body { background: #f0f8f8; color: #888; }
OR
#container { width: 960px; background: #fff;}
Wireless Network: BlogHerPassword (case sensitive, one word): lifewellsaid
Session hashtag: # BH12HTML Conference hashtag: #BlogHer12
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;
Wireless Network: BlogHerPassword (case sensitive, one word): lifewellsaid
Session hashtag: # BH12HTML Conference hashtag: #BlogHer12
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;" />
Wireless Network: BlogHerPassword (case sensitive, one word): lifewellsaid
Session hashtag: # BH12HTML Conference hashtag: #BlogHer12
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;}
Wireless Network: BlogHerPassword (case sensitive, one word): lifewellsaid
Session hashtag: # BH12HTML Conference hashtag: #BlogHer12
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>!
Wireless Network: BlogHerPassword (case sensitive, one word): lifewellsaid
Session hashtag: # BH12HTML Conference hashtag: #BlogHer12
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" />
Wireless Network: BlogHerPassword (case sensitive, one word): lifewellsaid
Session hashtag: # BH12HTML Conference hashtag: #BlogHer12
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;}
Wireless Network: BlogHerPassword (case sensitive, one word): lifewellsaid
Session hashtag: # BH12HTML Conference hashtag: #BlogHer12
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"
Wireless Network: BlogHerPassword (case sensitive, one word): lifewellsaid
Session hashtag: # BH12HTML Conference hashtag: #BlogHer12
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
Wireless Network: BlogHerPassword (case sensitive, one word): lifewellsaid
Session hashtag: # BH12HTML Conference hashtag: #BlogHer12
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
Wireless Network: BlogHerPassword (case sensitive, one word): lifewellsaid
Session hashtag: # BH12HTMLConference hashtag: #BlogHer12
Questions?
Melanie Edwards@EllaMedia
www.ellamedia.com
Sarah Kimmel@Tech4Moms
www.BloggersHelpDesk.com
Raj Karwa@VelvetAroma
www.velvetaroma.com
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