Skip to content

Editing HTML

In the background a web site consists of a text file that has code for how it should be laid out and links to graphics, youtube videos, code for forms and so on. Features are specified with tags, an opening <tag> one at the start and a closing </tag> one at the end. Only a few, such as an image link, have no closing tag. At base WordPress consists of a large web page of such tags, which include links to a WordPress database where posts, comments, user ids and the like are stored. Unlike posts and so on, user IDs are shared by multiple WordPress sites, a source of problems – only ITS can see that part of WordPress.  A coding klutz such as myself is thus prevented from goofing up every web site on campus.

You don't need to know anything more about WordPress, but a little knowledge of the underlying code helps. In particular, the class website includes pre-specified formatting that gives 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, either via an opening <p style="... format stuff ..."> in which any modifications (font and font size, line height, justification) has to be specified, or <p class="class name"> where the class name has all that stuff already specified using CSS (cascading style sheets) that lie inside WordPress. Here are classes for paragraph tags. You have to be in "Text" editing mode to use these.

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 a hanging indent with slightly smaller font size for a bibliographic entry
hi the same
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

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.

One last item: you can embed a FRED graph in a blog post. If you copy it from FRED it will have an format. You need to delete the initial opening < and the final ></iframe> and replace those with opening and closing square brackets. (I inserted spaces to make it easy to see, you shouldn't.) 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. You can also reduce (both!) width and height numbers. So for example, what FRED gives you is:

< iframe src="//fred.stlouisfed.org/graph/graph-landing.php?g=eVpP&width=670&height=475" scrolling="no" frameborder="0" style="overflow:hidden; width:670px; height:525px;" allowTransparency="true" > < /iframe >

What you want is more likely:

[ iframe src="//fred.stlouisfed.org/graph/graph-landing.php?g=eVpP&width=536&height=380" class="alignright" scrolling="no" frameborder="0" style="overflow:hidden; width:536px; height:420px;" allowTransparency="true" ]