22. Using Paragraphs, Blockquotes, and List Markup in Your Posts  BEFORE YOU BEGIN
15 Creating a Post Using the Blogger Editor in Compose Mode 16 Creating a Post Using the Blogger Editor in Manual Mode
 SEE ALSO
31 Defining and Implementing Custom Styles
22. Using Paragraphs, Blockquotes, and List Markup in Your Posts   
When creating a post using the Blogger editor in Compose mode, you have access to numerous buttons that can be used to modify the text elements of your blog post. In addition, the Blogger editor can assist you with inserting hyperlinks and images into your post. Using Compose mode is helpful if you want to apply formatting to posts but do not have the HTML skills necessary to do so.  NOTE
When using Manual mode of the Blogger post editor in conjunction with block-level elements such as paragraphs, lists, and blockquotes, you might also want to ensure the Convert Line Breaks setting is set to No. You can find this setting on the Settings tab, Formatting navigation item, in your Blogger management interface. If Convert Line Breaks is set to Yes and you mark up your posts using block-level elements like those described in this topic, your post will contain extra line breaks around your content, which will result in a post with a great deal of extraneous whitespace.
The following steps show sample HTML code used to create the content within the posts you see in the figures. You can follow along by logging in to Blogger and clicking the New Post icon in the Blogs section of the Blogger Dashboard, and then selecting the Edit HTML tab to switch to Manual mode if that mode is not your default. TIP This topic refers to CSS styles and classes, which you can learn more about in Appendix B, "CSS Fundamentals." If you want to learn more about the HTML elements described in this topic, take a look at Appendix A, "HTML Fundamentals." If CSS styles and classes are unfamiliar to you, please glance at Appendix B before continuing in this topic.
1. | Surround Your Text with Paragraph Tags
In HTML, a paragraph is created using the <p></p> tag pair; these tags should surround the text that is your paragraph. For example:
<p>You can surround your text with paragraph tags.</p>
When using the <p></p> tag pair, a line break is automatically assumed by the browser both before the start tag and after the end tag. This means you do not have to insert a line break (<br/>) before or after the paragraph tags. If you create several paragraphs in your post, the act of using the <p></p> tag pair ensures the proper spacing.
| 2. | Apply a Style at the Paragraph Level
You can utilize the style attribute of an HTML tag to apply specific style elements to just one tag. For example, the following style attribute creates a paragraph with 36px text:
<p style="font-size: 36px;">Use style attributes at the p level.</p>
Because this particular style is attributed to only the text contained within its <p></p> tag pair, the paragraphs before it or after it will be in their normal style (or another specifically defined style). You can also replace the style attribute with a class attribute defined in your style sheet. For instance, if you defined a class called bigtext as font-size: 36px and applied the code like so
<p >Use style attributes at the p level.</p>
the resulting text would look exactly the same.
| 3. | Use Styles Within Your Paragraphs
The text contained within a paragraph does not have to be plain vanilla text. You can use <b></b> and <i></i> tags around various pieces of text within a paragraph or other block element to add bolding and italics, respectively. You can also create your own styles by surrounding text with <span></span> tags that use a specific style or class attribute. For instance, the following code displays as a paragraph in normal text, but with a very large font size for the word span.
<p>Markup elements within a p, using <span style="font-size: 36px;">span</span> tags.</p>
| 4. | Create an Unordered List
Although unordered is the technical term for this type of list, these are commonly known as bullet lists because the default item indicator is a small bullet. The HTML for the unordered list shown here is
<ul> <li>unordered list item 1</li> <li>unordered list item 2</li> </ul>
Unordered lists consist of individual list items surrounded by the <ul></ul> tag pair. Each list item is surrounded by the <li></li> tag pair.
| 5. | Change the List Style
You can change the item indicator on a per-item basis by adding a style attribute to the opening <li> tag. In the following example, you can see the style attribute used to display the circle instead of the default bullet:
<li style="list-style-type: circle;">unordered list item 1</li>
Other options for the list-style-type style, as it relates to unordered lists, are none, disc, and square. The none style does what you imagine it wouldit does not place an indicator before the item. The disc style is rendered as what we typically refer to as a bullet or filled circle. The square style uses a small filled square as the item indicator.
| 6. | Create an Ordered List
An ordered list follows the same structure as an unordered list, but the tag pair for an ordered list is <ol></ol> instead of <ul></ul>. The HTML for the ordered list shown here is
<ol> <li>ordered list</li> <li>next in the list</li> </ol>
No special list-style-type is used for these list items, so the default style (decimal) is used. Other options for ordered lists are decimal-leading-zero, lower-roman, upper-roman, lower-alpha, and upper-alpha. Using decimal-leading-zero would result in items numbered 01, 02, 03, and so on. The lower-roman and upper-roman styles would use Roman numerals as your item numbers, such as i, ii, iii if lowercase, and I, II, III if uppercase. The lower-alpha and upper-alpha styles would result in items numbered such as a, b, c if lowercase and A, B, C if uppercase. Using a combination of all of these styles, as well as nested lists, allows you to create a hierarchical outline such as those produced by word processing programs.
| 7. | Use a Custom Starting Number
To start your ordered list at a specific point, use the start attribute in the opening <ol> tag:
<ol start="5">
If no list style is specified, your list items will begin with the number five. If you specify a different type of list style, the fifth item of that type will be used. For instance, if you use the upper-alpha style, the fifth alphabetical letter is E; therefore the first item in this particular ordered list would be indicated with an E.
| 8. | Use Basic Blockquote Tags
The <blockquote></blockquote> tag pair is often used to surround long quotes included in your posts. Without any additional style definition, the standard blockquoted text will appear indented on both sides, relative to your other paragraphs.
| 9. | Stylize Your Blockquote
To really set your blockquoted text apart from your other paragraphs, you can add elements of style to it. The following code was used to produce the second example shown in the figure:
[View full width] <blockquote style="border: 1px dashed black; padding: 5px; background-color: grey;">Utwisi  enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nislut aliquip ex ea commodo consequat.</blockquote>
Think of the <blockquote></blockquote> tag pair as creating an invisible box around your content. You can make the box visible by attributing styles to the borders and background as well as padding to the text it contains. You can learn more about borders, colors, and padding of elements in Appendix B.
|
|
