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. |
Today, we're going to focus on adding code that will help you to arrange how items appear on your page. In addition to drawing viewers' attention to certain elements on the page, some common design features—text styles, headers, alignment, line spacing, and a variety of lists—help guide readers through your diary.
Lesson 5: Page Layout using HTML Tags
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. Ready to write some code?
Header Tags
If you want Sample Text to be a header, you could type either of these: <h1>Sample Text</h1> or <h2>Sample Text</h2> . Here's what the two headers will look like in your diary:
Sample Text
Sample Text
Each header automatically appears on its own separate line. If you play with these in your drafts, you will notice that the <h1> header is bigger and has more space around it, so it creates a more emphatic division as you move to a new section of your diary. The <h2> header is brown rather than black; you could make it larger by adding the <big> tags.
|
Center Tags
You may also recall that the <center> tags can be used to, well, center things on the page. You can center text, including headers of course, and also images as well as videos using the center tags.
|
Paragraph and Line Break Tags
Diaries at Daily Kos usually present text as single-spaced paragraphs, with one line space between paragraphs to clearly indicate where one paragraph ends and the next one begins. Typing paragraph tags (<p> and </p> ) around each paragraph is one way to tell the computer where you want each paragraph to begin and to end:
Type this: <p>This will be one paragraph.</p><p>This will be a separate paragraph.</p>
To get this:
This will be one paragraph.
This will be a separate paragraph.
|
You can also force text to break, then continue on the next line by using the line break tag:
Type this: <p>I want to force text to break<br />then continue on the next line</p>
To get this:
I want to force text to break
then continue on the next line
|
Unlike the other tags that we've looked at, this one isn't paired. Instead, it kind of combines an opening and closing tag with an empty space and a forward slash at the end: <br /> . One other thing to note is that there isn't a space before the opening "<" in the tag.
|
Orange Divider: And here's the code for the orange divider:
<p class="divider-doodle" />
. It automatically appears between the two boxes of text in a diary. You can insert this anywhere else in your diary, and it will automatically center itself.
Lesson 6: Creating Lists
Lists are easier to read when they are displayed item-by-item rather than integrated into your sentences or paragraphs. To emphasize each item, provide a bullet list. To indicate a sequence or series of steps to be performed, number your list. And to invite readers to select from options that you provide, provide a dropdown list.
As always, 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!
Bullet (unordered) List: Use the <ul>
(unordered list) tags at the beginning and end, and provide <li>
(list item) tags for each line in your list. (see below)
Here is a bullet list:
<ul>
<li>one thing</li>
<li>another thing</li>
<li>last thing</li>
</ul>
|
Here is a bullet list:
- one thing
- another thing
- last thing
|
Numbered (ordered) List: Use the <ol>
(ordered list) tags at the beginning and end, and provide <li>
(list item) tags for each line to list items or steps in order (hence <ol>
as opposed to <ul>
). (see below)
Here is a numbered list:
<ol>
<li>Do this 1st.</li>
<li>Do this 2nd.</li>
<li>Do this last.</li>
</ol>
|
Here is a numbered list:
- Do this 1st.
- Do this 2nd.
- Do this last.
|
Geek extra credit: You may have some odd reason to want to start a numbered list at a number other than 1. For instance, this diary is part 2 of a list of successful projects for its series and needed to start at #201. To do that, add your chosen start value to your <ol> tag like this: <ol start="201"> |
Dropdown List: Use <select>
tags at the beginning and end, and provide
<option value ="ITEM">ITEM</option>
tags for each ITEM to invite readers to select from your list. NOTE that it's not possible to make a dropdown list like this DO anything within a Daily Kos diary or comment—it's not like dropdown menus you may see in applications like online shopping. Someone choosing one of the options has no effect on anything. This kind of list is most often used to make a humorous or ironic statement, in much the same way people use strikethrough to indicate their true thoughts a more polite framing.
Here is a dropdown list:
<select>
<option value ="first item">first item</option>
<option value ="next item">next item</option>
<option value ="another item">another item</option>
<option value ="final item">final item</option>
</select>
|
Here is a dropdown list:
|
In general, formatting "tricks" that can be done in a diary can also be done in a comment. Practicing your skills in comments (in this diary, for instance!) is an easy and low-stakes way to know what you're doing before you work on a diary. So while these lessons focus on how to do things in comments, know 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.
|