Skip to content

Editing HTML

In the background a blog post consists of a text file that has the content and lets you format how it's displayed and lets you add graphics, youtube videos, and so on. Formatting and links to graphics and other websites are specified with tags, an opening <tag> at the start and a closing </tag> one at the end of what you're formatting. We use WordPress, which provides an interface to facilitate editing and handles the code to display menus and links and comments and security.

You don't need to know anything about WordPress other than how to log in and add a post; the WYSIWYG menu is similar to that of word processors. However, a little knowledge of the underlying code helps tweak the appearance. In particular, the setup for the website includes pre-specified formatting that enables a consistent appearance to the blog. So back to tags.

The main one is the paragraph tag, where text is set off by <p> at the start and </p>. The power lies in the ability to specify paragraph formatting using <p class="class name"> where the "class" specifies font size, line height, justification and so on. Here are some of the preset classes for this web site. You have to be in "Text" editing mode to use these. Within a paragraph you can also use <span class="aside">...</span> to format a comment. There are other tags for setting up tables, controlling how images appear and on and on. You don't really need to know those, with the exception at the bottom.

Class Name What it does
"base" justified paragraph with initial "drop cap" and 1.6 line spacing
"callout" reddish, bold, right flush for a key phrase. provides visual break that I find makes reading text on screen easier
"biblio" or "hi" a hanging indent with slightly smaller font size for a bibliographic entry
"dblin" a double-indent with a slightly smaller font size for quotes
"plain" when you don't want an initial "drop cap"
"signature" smaller flush right for a signature
"topic" bold, different font, some spacing from previous paragraph


The one exception is how to embed a FRED graph in a blog post. If you copy the "embed" code from FRED it will have a format that WordPress doesn't handle. FRED gives you "iframe" code in angle brackes. WordPress requires square brackets. You will need to delete the initial opening "<" and the final "></iframe>" and replace those with opening and closing square brackets. If you want it to be on the right or left you can also insert class="alignright" or class="alignleft" as an additional parameter inside the brackets.

What FRED gives you is (spaces added):

< iframe src="//" scrolling="no" frameborder="0" style="overflow:hidden; width:670px; height:525px;" allowTransparency="true" > < /iframe >

What you need is:

[iframe src="//" scrolling="no" frameborder="0" style="overflow:hidden; width:670px; height:525px;" allowTransparency="true"]

You get the following graph: