Tagged: html

December 9th, 2008

You Don’t Have to be a Programmer to Hand-Code Your Blog

Last week, in a fit of motivation, I submitted five continuing education class proposals to the local community college; three of the five proposals were for blogging classes. I haven’t heard a yea or nay on my classes yet, but when I looked at my tentative class outlines once more, I realized that I better get my butt in gear and actually think through some of my micro units, which is the impetus of today’s post.

Today I want to talk about XHTML, also known as eXtensible Hyper Text Markup Language. Long before I started seriously blogging, I learned XHTML and CSS (cascading style sheets) in a graduate technical writing/web development class. Now, when I say learned I mean that I learned how to hand-code an entire website without leaning on Dreamweaver or any other web development software. I’ve heard nightmares from web development teachers whose students say they want to learn how to code when they really want to learn how to use Dreamweaver. Not in the class I took. We hand-coded everything. And I loved it!

I can hear you asking, “Sarah, what does this have to do with blogging?” Well, let me ask you, Have you ever wanted to change something–anything–about your blog’s appearance or functionality but you were afraid you’d mess up your template? Here’s the thing: Knowing how to hand-code XHTML can give you greater control over your entire blog template and your individual blog posts, building your confidence as a blogger and as a web developer.

Let’s be clear: I’m not advocating building an entire blog template from scratch. I mean, you can if you want, but there are so many free templates to choose from, why not pick one that’s close and tweak it until it’s exactly what you want? Want that elusive third column? Need to increase the height of your header? Hoping your images will line up on the first try? Hand-code, people!

Hand-coding your XHTML has other benefits, too. When you use a WYSIWYG (what you see is what you get) editor in Blogger, Dreamweaver, etc., you’re likely to get “extra” code that is automatically generated. This code can slow down your blog, hinder site performance, and invalidate your blog with the W3C. By hand-coding your blog, your blog will more than likely load fast, perform better, and be search engine friendlier. And who doesn’t want those things?

If you’re ready to learn how to hand-code XHTML, so you can have tighter control over your blog’s appearance and functionality, check out the list of resources below to get you started:

Even with these resources, you’re not going to be whipping out mind-blowing site designs immediately; however, learning XHTML, its tags, and its rules is pretty simple. Concentrate on it during a long Saturday or with a series of evenings at a coffee house, and you’ll be a hand-coding expert! Happy coding!

Tags: , , , , ,
Posted in bloggersguide.net | No Comments »

June 2nd, 2008

Blogging with Lists, Part III: Nested & Definition Lists

We’ve been blogging with lists for the last few weeks, and we’ve already learned how to determine when it’s appropriate to use a list and how to write a list; we learned those week one. Last week, we learned how to use, code, and style ordered and unordered lists. This week, we’re discussing definition and nested lists.

Using a Nested List
We’re starting with nested lists for two reasons: they build on what we learned last week and are pretty simple to understand. Nested lists work best when you need sublists, when you’re creating an outline, and when you want to use paragraphs inside your list, and they can use any combination of ordered and unordered lists; you can use all unordered, all ordered, or a combination. Your nested list might look like this:

  1. Item 1
    • Sub-item 1
    • Sub-item 2
    • Sub-item 3
  2. Item 2
    • Sub-item 1
    • Sub-item 2
      • Sub-sub-item 1
      • Sub-sub-item 2
      • Sub-sub-item 3
    • Sub-item 3
  3. Item 3
    • Sub-item 1
    • Sub-item 2
    • Sub-item 3

Here’s what the list above looks like in HTML:

<ol>
<li>Item 1
<ul>
<li>Sub-item 1</li>
<li>Sub-item 2</li>
<li>Sub-item 2</li>
</ul>
</li>
<li>Item 2
<ul>
<li>Sub-item 1</li>
<li>Sub-item 2
<ul>
<li>Sub-sub-item 1</li>
<li>Sub-sub-item 2</li>
<li>Sub-sub-item 3</li>
</ul>
</li>
<li>Sub-item 3</li>
</ul>
</li>
<li>Item 3
<ul>
<li>Sub-item 1</li>
<li>Sub-item 2</li>
<li>Sub-item 3</li>
</ul>
</li>
</ol>

Just like Russian nesting dolls, nested lists are completely contained within a bigger element: a list item. List items always begin and end with <li></li> tags, but if you’re nesting a list within it, the list item doesn’t close until the nested list is complete. Let’s look at Item 2. Note that the Item 2 <li></li> tags completely enclose the lists (including their <ul></ul> tags) within it.

You can also nest paragraphs inside ordered and unordered lists. Make sure you completely contain your paragraph tags within your list-item tags. Your nested list with paragraphs might look like this:

  • Item 1
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis iaculis blandit est. Nulla facilisi. In dolor neque, tempus quis, adipiscing id, pretium non, arcu.
  • Item 2
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis iaculis blandit est. Nulla facilisi. In dolor neque, tempus quis, adipiscing id, pretium non, arcu.
  • Item 3
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis iaculis blandit est. Nulla facilisi. In dolor neque, tempus quis, adipiscing id, pretium non, arcu.

And it’s HTML would look like this:
<ul>
<li>Item 1
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis iaculis blandit est. Nulla facilisi. In dolor neque, tempus quis, adipiscing id, pretium non, arcu.</p>
</li>
<li>Item 2
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis iaculis blandit est. Nulla facilisi. In dolor neque, tempus quis, adipiscing id, pretium non, arcu.</p>
</li>
<li>Item 3
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis iaculis blandit est. Nulla facilisi. In dolor neque, tempus quis, adipiscing id, pretium non, arcu.</p>
</li>
</ul>

Easy, huh?

Using a Definition List
Definition lists are completely different from unordered, ordered, and nested lists, so file all that old information away for a few minutes. Definition lists pair terms with their descriptions or definitions and are useful for glossaries, questions/answers, and other bits of information that come in pairs. Your definition list might look like this:

Term 1
Term 1 definition A
Term 1 definition B
Term 2
Term 2 definition
Term 3
Term 3 definition

In HTML, this list looks like this:

<dl>
<dt>Term 1</dt>
<dd>Term 1’s definition A</dd>
<dd>Term 1’s definition B</dd>
<dt>Term 2</dt>
<dd>Term 2’s definition</dd>
<dt>Term 3</dt>
<dd>Term 3’s definition</dd>
</dl>

Note that the HTML of a definition list differs from that of unordered and ordered lists. While definition lists are similar to unordered and ordered lists by opening and closing with <dl></dl> tags (dl stands for definition list), the list items within them are not. Definition lists come in two parts: the defined term (<dt></dt>) and the term definition (<dd></dd>). These two parts are not nested but come one after the other, and just like a word in the dictionary can have multiple definitions, a defined term can have multiple definitions below it.

Yes, nested and definition lists are a bit more complicated than ordered and unordered lists, but the principles behind all of them are essentially the same. Using what we learned in the first post about when to use a list and how to write one, we are now fully equip to use unordered, ordered, definition, and nested lists in our writing. Happy listing!

Previous List Posts

—–
Image Source

Tags: , , , ,
Posted in bloggersguide.net | No Comments »

May 26th, 2008

Blogging With Lists, Part II: Ordered & Unordered Lists

Last week, we established that lists are a great tool for bloggers because they can make your content more readable by grouping related ideas and simplifying complex processes. We also learned when to use a list and how to write a list, but we didn’t cover the specifics of using the different kinds of lists. In this post, we’ll get to the nitty gritty of ordered and unordered lists, and next week, we’ll wrap up with definition and nested lists.

Writing ordered and unordered lists on the Web is a little different than writing them, say, in Microsoft Word because you can manipulate them with code. As a blogger, it helps to know what’s happening behind the scenes in the code, so if something goes wrong in your WYSIWYG editor, you’ll know how to fix it. I understand that code can be a little intimidating, but the HTML and CSS you use for structuring and styling lists is pretty simple. That said, let’s dig in.

Using Ordered Lists
If you’ve ever watched the Late Show with David Letterman, then you’re familiar with his top-ten lists, and if you were putting one of his lists (or your own) online, you would use an ordered list. Ordered lists work best in these situations:

  • When you want to emphasize the total number of items
  • When you need to complete items in a specific order
  • When you want to communicate priority

Behind the scenes, your HTML won’t look much like a numbered list, which is why it helps to know what all those brackets and letters mean. An ordered list in HTML begins and ends with the <ol></ol> tags—ol stands for ordered list. Clever, huh? Individual list items go between the <ol></ol> tags and begin and end with <li></li> tag (li stands for list item). Your HTML might look like the code below:

<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>

Just as long as your list items are nested in the <ol></ol> tags, they’ll be numbered or lettered; we’ll discuss defining those specs in a moment.

Using Unordered Lists
Think of unordered lists as the twin brother to ordered lists. Whereas ordered lists are perfect for emphasizing a number, an order, or a priority, unordered lists are perfect for emphasizing that which is unnumbered, unordered, or without priority. On the outside, they have their differences, but on the inside—in the code—they’re almost the same. An unordered list begins and ends with the <ul></ul> tags (ul stands for unordered list), but their list items—the <li></li> tags—are identical to an ordered list. The only difference is the opening and closing tags. An unordered list’s HTML code might look like this:

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

If you decide you need to switch your list type from one to the other in the middle of your writing, all you have to do is switch the opening and closing tags. How handy is that?

Styling Your Lists
Once you have your ordered and unordered lists written, you are free to style them. Now, I won’t go into the ins and outs of CSS or all of the style commands here, but I will discuss the CSS options for the unordered- and ordered-list types:

  • list-style-type (ordered list). Declares the marker system you want to use for your ordered list:
    • decimal
    • decimal-leading-zero
    • upper-alpha
    • lower-alpha
    • upper-roman
    • lower-roman
    • lower-greek
    • upper-latin
    • lower-latin
    • hebrew
    • armenian
    • georgian
    • cjk-ideographic
    • hiragana
    • katakana
    • hiragana-iroha
    • katakana-iroha
  • list-style-type (unordered list). Declares the marker system you want to use for your unordered list:
    • disc
    • circle
    • square
  • list-style-image. Specifies the image you want to use as your list marker. If you don’t want to use a number or a bullet from the options above, you can use a little icon instead.
  • list-style-position. Declares the position of your list marker. You might think of this as specifying whether or not you have a hanging indent. Outside = hanging indent; inside = no hanging indent.

Like I said before, writing ordered and unordered lists online is a bit different than writing them in your average word processor, but as long as you have a basic grasp on HTML and CSS, you’ll have no problems. Next week, we’ll wrap up this series of posts with definition and nested lists.

Previous List Posts

—–
Image Source

Tags: , , , , ,
Posted in bloggersguide.net | No Comments »

May 19th, 2008

Blogging with Lists, Part I: An Overview

Are you a list writer? Can you go a day without writing a list? If you’re like me, lists keep you sane by making life easier. To-do lists, grocery lists, packing lists, idea lists—you get the idea. Lists are a great tool in our everyday lives, but they can also be a great tool in your writing and on your blog, for they can make your writing more readable by grouping related ideas and simplifying complex processes. In the coming weeks, we’ll look at the basics of writing a list and how to write, style, and code the four kinds of lists HTML allows for: ordered, unordered, definition, and nested.

To List or Not to List
Before you begin to draft your list, decide whether you really need a list and plan your list(s) by answering these questions:

  1. Do I need a list? In general, most lists have at least three items, so if you have less than three or if your items are simple ideas, you’re probably safe to leave them in a paragraph.
  2. How many lists do I need? The complexity of your content will help you determine how many lists you should use, but be wary of using too many—your writing could start to look like an outline.
  3. How many items will go in my list? The human brain likes to consume information in chunks, and research suggests that seven plus or minus two is the magic number (in case you didn’t get that, that’s between five and nine items). If you have more than nine items for your list, consider breaking your list into two or adding sub-items.

Writing a Great List
I recently graduated, and at my commencement ceremony, the president of my university introduced the keynote speaker by telling the crowd all the speaker had done for the school. This accomplished two things: First, the crowd was informed why the keynote speaker was important, and second, the keynote speaker didn’t have to say all those nice things about herself. Now, think of your list as a keynote speaker. As the writer, it’s your job to introduce this list so your readers will know why the list is important. Use a complete sentence followed by a colon.

Once your list has been introduced, its free to speak for itself. (Mind you, a list is not a speech, so this is where my analogy breaks up.) The key to writing a great list is consistency. Every single piece of a list item must be consistent with every other list item:

  • Punctuation. Do your list items all end with the same punctuation mark? Do they end with periods, question marks, etc.?
  • First-letter case. Do your list items start with an uppercase letter or a lowercase letter?
  • Sentence structure. Do your list items have parallel sentence structures? Are they all questions, fragments, or complete sentences?
  • First word or phrase. Do your list items begin with a similar grammatical structure? Do they all begin with an action verb, an adjective + a noun, etc.?

That’s it. Other than the specific guidelines for specific kinds of lists, you now have a license to use lists in your writing. Next week, we’ll look at ordered and unordered lists.

Sources

Tags: , ,
Posted in bloggersguide.net | No Comments »

 

You need to log in to vote

The blog owner requires users to be logged in to be able to vote for this post.

Alternatively, if you do not have an account yet you can create one here.

Powered by Vote It Up