Welcome to our series on the basics of visually enhancing your diaries and comments! If you are joining us late, you can find links to the entire series at the top of the first diary in the series, New Diarists: Links & Blockquotes. We update that list as new diaries are added. ♥ Follow us above to see future installments in your stream. |
The simplest way to set something off in a box in a Daily Kos diary
is with a blockquote like this, which we learned earlier can be made using the Blockquote button in the diary or comment editor.
But we also see many boxes on Daily Kos that look different from the plain gray blockquote, such as the blue box that opens this diary. All of these are
tables. A table is formatted using HTML tags. It can be used for charts and the like, as you might expect of something called a table, but it can also be created with just one cell, as a container for text and images. Today we'll look at how to create such boxes, and the many choices for their appearance. (We'll discuss more elaborate tables next time.)
Review: As we discussed in Formatting Text with HTML Tags, one way to format text on Daily Kos is to write HTML tags using angle brackets (< >) to tell the computer how you want it to format what follows. Remember that most HTML tags come in pairs. The first tag, the angle brackets with a code inside, signals the beginning of the tag's action, and the second one, which adds a / inside the brackets before the code, signals the end. Whatever text is between the tags is what's acted on. Carefully type HTML tags exactly as they appear below, including lowercase and spacing (or not), and especially not forgetting the / in the closing tag. Computers can't guess what you mean the way human readers can! Ready to write some more code?
Lesson 9: Boxes
Let's begin with the most basic one-cell table. The three tags you need to learn today are:
<table>
,
<tr>
("table row"), and
<td>
("table data", that is, a cell or square in the table). The
table
tags must be presented in this order, with your text or image placed between the opening and closing
<td>
tags:
<table>
<tr>
<td>
TEXT</td>
</tr>
</table>
The table will look like this:
Not terribly exciting, is it? We can't even see where the table begins and ends, but that's easily fixed by adding a border. For our purposes today, all of the instructions that tell the computer how you want your box to look will be placed in the opening
<table>
tag:
<table border="1">
<tr>
<td>
TEXT</td>
</tr>
</table>
The table will look like this:
Borders are like the horizontal lines that
belinda ridgewood explained, in that you can make them thicker by increasing the number in the
border
coding:
<table border="4">
<tr>
<td>
TEXT</td>
</tr>
</table>
You can also
choose a color for your border--just add
bordercolor
coding:
<table border="1" bordercolor="#306EFF">
<tr>
<td>
TEXT</td>
</tr>
</table>
<table border="8" bordercolor="#306EFF">
<tr>
<td>
TEXT
</td>
</tr>
</table>
Note that the thicker borders may look like two-toned (double) lines. The exact appearance of the thicker borders varies by which browser the viewer of the border is using, so if you use a border like that, don't count on every reader seeing the exact two-tone effect you may be getting, just that the color you've chosen will be used.
You can also use color as a background for a table, giving a colorful blockquote effect, by adding bgcolor
(background color) coding:
<table bgcolor="#306EFF">
<tr>
<td>
TEXT</td>
</tr>
</table>
The table will look like this:
In Lesson 8 in our previous diary, we linked to some websites you can use to find the codes for various colors. Here again is one tool along with belinda ridgewood's explanation of how to use it:
drag the rainbow-color slider on the right to the general color you're interested in, and then move a little circle around in the large box to the left to pick a shade. There's a little box on the top right that shows the color your circle is on, and if you click, it freezes there so you can capture the code (click again to unfreeze). You'll see the code up above the big box. It's written in the color you've clicked, so it may be hard to read, but you can use copy and paste to grab it and put it in your diary after the #.
But, here's where we need to remember what belinda ridgewood emphasized:
Indeed, you need to err on the side of caution, because your readers are using many different browsers, monitors, and sets of eyeballs, and a color may look brighter or darker to others than it does to you. It's harder to sell a house with a purple living room, and it's harder to sell your ideas when you distract from them with color that's overwhelming, includes too many different hues in one diary, or does not show text (both black and the two orange link colors) clearly.
In this series, belinda ridgewood and I have been using colorful boxes to hold "boilerplate", or meta information about the series that stays the same in every diary. (That's one example of a use for such boxes.) The color code for the blue background in the boilerplate boxes is #C6DEFF. Note how much easier it is to read the text with that background than it would be to try to read text with the #306EFF background color used in the small table cell above. If you feel as though you need to boldface your type so that folks can read it against your background color, then it's probably best to switch to a lighter color.
If you love bold, colorful backgrounds, it is possible to use them to frame blockquoted text:
<table bgcolor="#306EFF">
<tr>
<td><blockquote>Now it's easy to see the text!</blockquote></td>
</tr>
</table>
Now it's easy to see the text!
|
Be aware that there are some people who find the use of color, especially vivid color, an unwelcome distraction; we hear from them periodically in the comment threads of any diary teaching the use of color. If you are trying to write a serious news diary, background color may not be the right tool for your purpose, although a plain box with a thin border might not be overkill for you. But if you are doing a different kind of story, there are many ways color can enhance your product.
Here are just a few examples of how others have used color:
◊ Early in DK4, the page was a very bright white. Gulf Watchers diaries pioneered the use of boxes in the subtle background color #F0F8FF, a very eye-friendly choice, to help their readers. That's the color of this box, and it is still a fine background for text.
◊ The weekly Inoculation Project diaries use color-with-nested-blockquote boxes, color-themed to their series masthead, to contain the school projects they seek donations for.
◊ This diary by rfall in the Overnight News Digest series sets off each brief news items from the next by alternating two relatively pale colors.
|
In general, formatting "tricks" that can be done in a diary can also be done in a comment. Practicing your skills in comments is an easy and low-stakes way to know what you're doing before you work on a diary. Please feel free to practice in comments here, knowing that the same tools will produce the same results in a diary. |
Preview Is Our Friend!
Preview is a lifesaver in TWO important ways! First, it shows us how our comment or diary will look when posted. That may NOT be the way you thought it was going to look when you composed it! Always take advantage of the ability to look at the preview and make sure everything works and looks exactly the way you planned. If it doesn't look right in Preview, your comment or diary will not magically improve after being posted!
Second, when writing a diary, Preview is also the way to SAVE your diary draft. If you're working on a diary, clicking Save & Preview periodically is a very good idea. Otherwise, if the site goes down, or your browser tab gets closed by mistake, you are back to the drawing board!
|
Additional Resources for Diarists
This diary is part of a series by nomandates and belinda ridgewood on the basics of enhancing diaries and comments at Daily Kos. All of them can be found at the New Diarists group page. Click the New Diarists' ♥ to follow the group and get all the diaries in your stream. Diaries in the series so far are:
If you have questions about any aspect of posting comments or diaries, feel free to post a comment and ask. These threads are for sharing, so more experienced Kossacks are welcome to both ask and answer questions, and to share advice and war stories.
We INTEND this thread as a place to practice, not just today's skills but anything you're working on with regard to posting on Daily Kos. Do not be afraid to write a comment and see if you've understood. We try to keep an eye on older diaries, but obviously, if you'd like coaching, the best place to practice is in the most recent diary. If you need advice after a diary has gotten quiet and no one's seeing your comment to help you, you may certainly send a private message (Kosmail) to one or both of us. (We don't advise a message to the group, because those don't let anyone know they're there!)
More resources: New Diarists: Resources for All provides links to 1) resource diaries for drafting, formatting, and mechanics of the site; 2) advice diaries re writing, interacting with commenters, and working with groups; and 3) a list of helpful groups and series for New Diarists. And Cranky Users: Our Story So Far lists how-to diaries published during DK4's first year.
|
New Diarists is a safe place to practice diary writing skills with a mentor's guiding hand. Experienced diarists are invited to join and buddy up with new diarists, and new diarists are welcome to join and to ask for help. The group's Publication Manager provides a space where we can collaborate on diaries and help with everything from revising to formatting to promoting your new diary.
How-to and Help diaries, such as smileycreek's New Diarists: How to Collaborate with Us on a Diary, are published to the New Diarists group. Visit our home page and click on the little ♥ to follow us.
Ready to play? Send a private message to nomandates for an invitation to join the group.
|