Posts Tagged ‘Blogging’
HTML for Bloggers Course – Lesson 2
Did you miss HTML for Bloggers Lesson 1? If so, go to Lesson 1 then come back for Lesson 2. C’mon, don’t cut corners.
In Lesson #1, we learned about the basics of Web pages and started learning about marking up documents, literally. The purpose of Lesson #1 is to give you a visual understanding of how HTML works. We’ll continue driving that point here in Lesson #2 then we’ll start learning about the key HTML tags.
HTML Tags
In Lesson #1, we marked up a little Web page. In that exercise you wrote on the page and described what was going on in the page. You may have circled things or used arrows as I did in my marked up version below.
Each of those instructions could be described using HTML tags. Tags are little instructions used by the HTML scripting language to describe page contents.
For example, the heading on the document could have been described as being “large”. That could have been described using the “font” tag.
Then, there is a photo of the Ventura coast. We could have described that in the HTML code by using the “img” tag which stands for “Image.” The “img” tag allows us to set properties on that tag. We would have set the “src” property to be the Web location of that Ventura coast image.
HTML Page Structure
Once again, think of HTML tags as sets of instructions. Each instruction starts with a beginning tag, such as < html > then ends with an end tag which begins with a ” < /", such as < /html >. The end tag gives the page the instruction that it can stop doing whatever it was previously doing.
This is the main tag structure of an HTML document (the Web page).
Another way to think about this start tag-end tag convention is the old Simon Says game. “Simon says, pat your belly.” In the game, you start patting your belly. In HTML, you start a new tag. “Simon says, rub your head.” In the game, you keep patting your belly then start rubbing your head. In HTML, you don’t end a tag just because you started a new one. That means that whatever HTML element you started is still in play and now you’re starting a new one.
Now that we learned about HTML tags and its basic structure, let’s create our own Web page from scratch. Follow along on the video.
If you watched the video and did the little “homework” then you should have created your own Web page. Did you? Prove it by uploading it to Flickr and adding a link in the comments.
The only way to know if you like this mini-course is by your comments and questions. Don’t be shy!
Design a Winning Header Image for Your Blog
There are so many blog templates and so little time. So it’s understandable why many bloggers stick with “out of the box” template designs.
But here are the top reasons you should have a well-designed custom header image.
A custom header image allows you to:
Establish Your Brand
Your customer header image should match your other Web site, print, and offline marketing designs. This consistency helps to reinforce your overall company and/or personal brand.
Mari Smith, Facebook and Twitter marketing expert, exemplifies this branding concept. Below, notice that her Twitter profile and “Why Facebook?” blog both use the same colors, background design, similar pictures, and both use her “blinged out” M logo.
Mari Smith’s Twitter profile also reinforces this same brand. Consistency FTW!
Tell visitors where they are
There are over 100 million blogs on the Internet so it is important that your blog visitors know where they are. The easiest way to do this is to put a big honkin blog title on your header image. Mari Smith’s blog is named “Why Facebook?” It’s clear, it’s obvious, and it eschews obfuscation (avoids confusion).
Search engine optimization tip: Make sure you have your blog title as text on other parts of your blog design. This will help search engines, like Google, index it as a crucial keyword phrase. That way, if someone searches over your title, it will have a great ranking and hopefully show up towards the top of the search results. This is less likely to happen if you only use the text on the image.
This blog is named “Build Your Fan Base”, so I make sure to have this show up as part of the standard blog template text at the top of the page to take advantage of this optimization.
Establish Identity
If you have several blogs, Web sites, and social networking presences (Twitter, LinkedIn, Facebook, Flickr, etc.), it is important to establish your identity early on. I distinguish between Brand and Identity because you could have a corporate brand for a blog (any many blogs) but a personal identity for the blogger.
How many times have you visited a blog, read through some of its great content then scanned the site only to realize there was no name attached to the blog? This is a huge lost opportunity.
To establish identity via your blog header, use a photograph of yourself and make sure your name is on the header. If you do have several Web presences, go the extra step and make sure your photograph matches the other sites. Having a similar expression and wearing similar color clothing help make things that much more consistent. I use the same image on my Twitter profile as I do on this blog to keep things easy and so I don’t have to shop for a dozen light grey shirts.
Summary
To maximize your blog, use a customer image header that reflects your brand, tells visitors immediately where they are, and also announces your name and mug to the world. If you use this trifecta of tips, you will surely be on your way to building a valuable and lasting fan base.



