Blogging Basics 101

What is CSS?

CSS stands for Cascading Style Sheets. CSS is used within an HTML document to determine how an entire page or web site looks (fonts, headings, background images, etc.). By changing the CSS on one page, you can change the look and feel of the entire site instead of changing the code on each page individually. HTML.net explains the differences between HTML and CSS and how you can use CSS to enhance your web site or blog. Essentially, HTML structures text and CSS structures the entire look and feel of the document. It may sound confusing at first, but I encourage you to become familiar with both HTML and CSS so you will have more control over how your blog looks. Information is power and confidence. You can do this.

Learn to use CSS:

• HTML.net: CSS Tutorial
• W3 Schools: CSS Tutorial

What is HTML?

HTML stands for HyperText Markup Language. It's a simple programming language that tells your internet browser how to read your text and display it. For example, if you'd like to make something bold and you are coding your HTML by hand you would type

<strong>make this bold</strong>

and you would see

make this bold

in your browser.

The opening tag, <strong>, tells the browser that everything after that tag should be bold. The ending tag, </strong>, tells the browser to stop reading the bold and everything after that tag should be normal. It's the / that tells the browser a command is ending. It is also necessary for the command to be enclosed in < >.

Some of the most common HTML for blog posts are

bold: <strong> </strong>

italics: <em> </em>

underline: <u> </u>

strike through: <del> </del>

link: <a href="title_of_file_to_show.html"> </a>

It's important to note that if you type HTML code into your Compose Post (or WYSIWYG) tab, the code will be treated as regular text and the HTML will not be read because the Compose Post/WYSIWYG tab assumes you want your readers to see what you're typing. (Remember, WYSIWYG means What You See Is What You Get.)

If you want your HTML to be read by the browser, switch to the Edit HTML tab and enter your HTML. I encourage you to play around with this. Hands-on experimentation with a test post is the best way to learn this.

HTML is not hard to learn and will only enhance your blogging experience. It will allow you to be more confident in personalizing your site and figuring out how to solve any problems that arise with your code.

W3 Schools provides tutorials for basic HTML and XHTML (which is just a stricter, cleaner version of HTML):

• W3 Schools: HTML Tutorial
• W3 Schools: XHTML Tutorial

What does SEO stand for?

SEO is short for Search Engine Optimization. Search Engine Optimization refers to how you are ensuring that search engines can find your site. Search engines are based on text searches. They send out bots or spiders (not really a robot or spider--it's an algorithm) that crawl your pages and send back information based on the text it finds. To optimize the report from your blog, you need to have the most relevant text or search terms for a query.

We have several articles at Blogging Basics 101 that can help you with this:

• Writing Effective Links for Your Audience and SEO
• Ten SEO Tips
• Mighty Helpful Links: The SEO Edition

Mighty Helpful Links

• Using CSS to Thwart Content Theft via Plagiarism Today.

• Lazy Eyes: How We Read Online via Slate.

• You're Not Just a Writer, You're the Editor-In-Chief via DoshDosh.

• Simple Tools for Creating Screen Captures via Edublogger.

• The Basics of HTML for Blogging via The Writer's Technology Companion.

Is there a way for me to set-up my blog to do a print-friendly format for each post?

Setting up a printer-friendly option on your blog posts is an excellent idea, especially if you like to post a lot of recipes (not that that's the only use, but it is handy for that and I'm hungry right now). There are several ways to set this up.

1. Make a plain-jane .doc file or pdf and upload to Typepad or Blogger, then provide a link to that page.

2. The other options require CSS and other coding which is a little beyond the scope of "basic" that we're going for here. However, we won't leave you hanging. Try these links and their instructions if you want to learn.

• TechRepublic offers CSS instructions.
• ASP.NET Resources also tells you how to get your hands dirty with CSS.
• Microsoft's version of printer-friendly pages (although I'm not sure this is the one I'd use).
• Eggheadcafe also has some good instructions.

Frankly, I just Googled how do i make a printer friendly page and had many options for instructions. Depending on your comfort level with code, you can either try method one or two above. Good luck!

How can I keep people from taking my online images?

This is the eternal question. It's frustrating to know that anyone and everyone can simply right-click to save your photos to their own computer for their own use.

The short answer to the problem is nothing can prevent this action completely. Just about every work-around has a loophole. The good news, though, is that there are a few things that make the user think twice about just downloading your graphics and photos.

I found a very useful article at about.com called Protecting Your Online Images. The article outlines three ways to protect your images:

1. Watermarks Probably the easiest way to make sure everyone knows this is your graphic.
2. Disabling right-click Remember, this is a Windows platform fix; it doesn't work for Macs. This solution also has many hacks. In other words, people know how to get around it.
   
3. Shrink-wrapping your images This particular solution may be too advanced for some of our readers. You'll need to know how manipulate your code because the directions here are a little confusing.

Another extremely useful article is at James Huggins' Refrigerator Door. He explains how your computer works with your browser and why that matters when you're trying to protect your images. He also explains why disabling the right-click on your site is so easily hacked. In addition, he gives some other ideas on helping you protect your images. However, his suggestions are along the lines of Flash, Java, and streaming media (all of which are too technical for a site like Blogging BASICS 101).

The bottom line is this: The only way to make sure your images aren't stolen or used by someone else inappropriately is to not post them online. You can copyright your images and employ ways to make it harder for people to download your images, but you can't actually stop them from taking them if they are determined.

The Write Spot has recently discussed this problem with a few other bloggers.

This article was originally published August 13, 2007.

BlogOnExpo: Free Online Blogging Conference

BlogOnExpo is a free online blogging conference being held August 11-13, 2008. It was started last year because it can be costly to attend an off-line conference and many bloggers were missing out on great information. You can see what sessions are being offered and choose which ones you are interested in.

I am one of the virtual speakers and I submitted a video outlining the steps of beginning a blog. I discuss how to choose a blogging platform, what issues to consider before you blog, which design elements to include, and I explain RSS and feed readers. Unfortunately, I was having some issues with the video upload and it was horribly pixelated. However, the content is sound and worth a listen (if I do say so myself). You can see a clearer version of the video on my Facebook page or on Yahoo!

How do I make a make a link in a comment I’m leaving on a blog?

This can be tricky because it all depends on how the blog owner has her/his site set up. Some people have their comments set to accept limited HTML, some have them set to accept no HTML, and some have them set to automatically link URLs left in the comments. I believe Blogger automatically allows limited HTML and this can’t be changed. If you are using Typepad, go to Weblogs > Configure > Feedback > Comment Formatting (choose whether you want to Allow limited HTML or use Auto-link URLs).

To leave a link in most blog comments you must manually type in the HTML required to make a link. It will look like this:

<a href=”http://www.CHANGEURL.com”>Your text to link</a>
(you’ll obviously have to change the part that says CHANGEURL)

After you submit your comment you may receive a message that says something like, “This blog does not allow HTML comments.” In that case, instead of typing the HTML, simply type the URL and it will be made into a link automatically. So instead of typing

<a href=”http://www.CHANGEURL.com”>Your text to link</a>

You’ll type

http://www.CHANGEURL.com
(again, don't forget to change the CHANGEURL part)

then submit your comment.

As an aside, I noticed when I was testing this that some of my links didn’t appear as links once the comment was posted. However, when I received the e-mail confirmation of the comment, the links were all there and clickable.

This article was originally published on September 11, 2007.

How do I back up my blog template?

It's especially important to back up your template before you export your content or make changes to your design because once you make a change and save it, there's no going back (unless you know exactly what you did and can undo it).

Blogger

1. Log in to your account and click Layout.
2. On the Template tab, click Edit HTML.
3. Highlight and copy all of the HTML in the box.
4. Open your word processing program (e.g., Microsoft Word or Pages) and open a new file or document.
5. Paste the HTML into your new document.
6. Save. Remember to make a note of where you saved this information.

TypePad

1. Log in to your TypePad account and click on Design.
2. On the Design tab, click Saved Designs.
3. Click the box next to the design you want to back up (there should be a check in the box after you click it).
4. Click the button that says Duplicate.

You now have a copy of your design. I would suggest working on the duplicate instead of the one marked Current Design. This will allow you to make changes and preview them before going live.

WordPress.org provides a tutorial for backing up your database.

This article was originally published on January 31, 2008.

Mighty Helpful Links

• A Blogger's Life: Why & When Do You Stop Blogging? via Lorelle on WordPress.

• Boost Your Blogging Productivity with Post Templates via Daily Blog Tips.

• How to Encourage Your RSS Subscriber to Visit Your Blog via Blogger's Lab.

• Required Reading in Social Media via Regular Geek.

• NxE's Fifty Most Influential 'Female' Bloggers via North x East. (Why would they put the word female in quotes? Are we just pretending to be female? I don't get it.)