Formatting / styling your posts

Author:Author adminJon
Published: Posted on

We’ve tried to make sure you’ve got all of the formatting you’ll need to write your blog – below are a the formatting options to style your text.

Some options are available directly from the editor toolbar, others are available by adding basic HTML Markup to your posts in the text editor (choose Text from the right hand corner of your editor).  Visual and text editor buttons

Blockquotes

Highlight your chosen quote and click the blockquote button button in the toolbar.

People think focus means saying yes to the thing you’ve got to focus on. But that’s not what it means at all. It means saying no to the hundred other good ideas that there are. You have to pick carefully. I’m actually as proud of the things we haven’t done as the things I have done. Innovation is saying no to 1,000 things.

To create a cite reference – choose the text editor in the right hand corner Visual and text editor buttons and insert <cite>Steve Jobs</cite> around the text you wish to cite e.g.

Steve Jobs – Apple Worldwide Developers’ Conference, 1997

Tables

Please try to use tables for displaying data (and not for layouts).  Creating tables tutorial

Dog Breed Size
Great Dane Large German breed of domestic dog known for its giant size
Border Collie Medium Developed in the Anglo-Scottish border region for herding livestock
Pug Small Brought from China to Europe in the sixteenth century

Definition Lists

Creating definition lists tutorial

Definition List Title
Definition list division.
A University
A university (Latin: universitas, “a whole”) is an institution of higher (or tertiary) education and research
Research Institute
A research institute is an establishment endowed for doing research.

Unordered Lists (Nested)

Click the bullet button button   Unordered lists tutorial  (to create nested lists please see the Nested unordered lists tutorial)

  • List item one
    • List item one
      • List item one
      • List item two
      • List item three
      • List item four
    • List item two
    • List item three
    • List item four
  • List item two
  • List item three
  • List item four

Ordered List (Nested)

Click the orderedlist button. Ordered list tutorial

  1. List item one
    1. List item one
      1. List item one
      2. List item two
      3. List item three
      4. List item four
    2. List item two
    3. List item three
    4. List item four
  2. List item two
  3. List item three
  4. List item four

HTML Tags

These supported tags come from the WordPress.com code FAQ.

Address Tag
The <address> tag defines the contact information for the author/owner of a document or an article. Use Shift+Enter to create line breaks without a gap.  Address tag tutorial

University of Birmingham
Edgbaston
Birmingham
B15 2TT

Anchor Tag (aka. Link)
This is an example of a link to the University Website.
You can also use them to link to other areas of the same page using the id tag.

Remember: use descriptive links as screen readers and search engines can skip through links and ‘click here‘ will not explain where your link will take them.

Abbreviation Tag
The abbreviation srsly stands for “seriously”.  Abbr tag tutorial

Acronym Tag (deprecated in HTML5)
The acronym ftw stands for “for the win”.  Acronym tag tutorial

Cite Tag
“Code is poetry.” —Automattic.  Cite tag tutorial

Code Tag
Highlighting part of your text as code looks like this word-wrap: break-word; Code tag tutorial

Delete Tag
This tag will let you delete text,  you can also use it with the insert tag below. Click the delete text button button in the toolbar.

Emphasize Tag
The emphasize tag should italicize text and can be used by clicking the emphasis button or Ctrl+i .

Insert Tag
This tag should denote inserted text. Ins tag tutorial (please note, the deleted tag is now deprecated – please use Strikeout instead).

Keyboard Tag
This scarcely known tag emulates keyboard text, which is usually styled like the <code> tag.  It’s used to define keyboard input – Kbd tag tutorial

Preformatted Tag
This tag styles large blocks of code. To use it, select the text you’d like to highlight and choose Preformatted from the styles dropdown: styles dropdown button

.post-title {
	margin: 0 0 5px;
	font-weight: bold;
	font-size: 38px;
	line-height: 1.2;
	and here's a line of some really, really, really, really long text, just to see how the PRE tag handles it and to find out how it overflows;
}

Quote Tag
Developers, developers, developers… –Steve Ballmer.   Q tag tutorial

Strike Tag (deprecated in HTML5)
This tag shows strike-through text   Strike tag tutorial

Strong Tag
This tag shows bold text. Click the Bold button button or Ctrl+b.

Subscript Tag
H2O should push the 2 down.  Sub tag tutorial

Superscript Tag
E = MC2 should lift the 2 up. Sup tag tutorial

Teletype Tag (deprecated in HTML5)
This rarely used tag emulates teletype text, was largely used to define keyboard entries – but is not supported in HTML5. Consider using kbd or the variable tag below.

Variable Tag
This allows you to denote variables.  Var tag tutorial

Leave a Reply