HTML

the prof

For online references and tutorials, see the following. My quick guide is below, including things specific to this WordPress site.

When you do a page or post, you probably use the “Visual” tab, which presents an array of options for formatting text. It’s also possible to click on the “HTML” tab and manually insert code.

The system recognizes standard paragraphs automatically, and with the defaults I set up should format them as “justified’ and with 8pt of space before the next paragraph, and an initial drop-cap. I’ve also set up several other formats.

The general modifier is of the form <p class=”class name“> at the start of a paragraph and </p> at the end (though this is one of the few html tags that need not be paired).Note

Site-specific formats:

  • for your by-line (right alignment): <p class=”rt”>
  • for a double-indented paragraph (for a quote): <div class=”dblin”> [there is also a standard <blockquote></blockquote> tag and the visual interface may have a comparable menu item]
    And here’s a list of all my standard tweaks:

  • <div class=”dblin”> [requires a closing </div>] double indent for quotes
  • <div class=”callout”> – red-brown, bold, right-aligned
  • <div class=”calloutbox”> – in a box
  • <div class=”biblio”> – smaller plus hanging indent
  • <p class=”base”> – standard paragraph with an initial drop-cap. Now redundant – this is the default format
  • <p class=”plain”>to not have a drop-cap!
  • <p class=”rt”> – aligned right
  • <p class=”hang”> – hanging indent
  • <p class=”dblin”> – same as “div” dblin
  • <p class=”callout”> – same as “callout” dblin
  • <span class=”aside”> [requires a closing </span&>] – small green cursive font
  • <span class=”comment”> – just smaller than regular text, best for inside brackets
  • <sup class=”base”> [for superscript, eg to link to an endnote; requires a closing </sup>]
[this is “dblin”] You can also use options not shown. Here’s an example example that changes the font, the font size and the font color with the <span>text to change</span> tag pairing. Here the closing tag is mandatory. As an example, <span style=”font-size: 85%; color: green; font-family: cursive;”> gives this sort of text</span>. WordPress is picky, if you leave out the closing quote mark, strange things happen. I’ve formatted this paragraph with “dblin” so that you can see what happens. Note that I used a slightly smaller (to be specific, 90%) font size and more (1.5) line spacing. It requires the <div> tag, with a closing </div> tag.
Next, there’s a way to create a hanging indent, such as for a bibliography, but you have to open / close with the following tag set. I have used it to format this paragraph so that you can see what happens:
<div class=”biblio”> and close with </div>.

Finally there’s a way to put a “callout” quote that will appear on the right with a different color, font, size and weight. This is an example, done using <p class=”callout”>.

This is one final experiment with <div class=”calloutbox”> with the </div> tag at the end of the paragraph, with 600-weight bold, 110% font size and a Hobo font, plus colored border and padding and margins and line height and colored font. The code is: <div class=”calloutbox” style=”border-top: 5px solid #93f;border-right: 10px dashed #f33;border-bottom: 10px dotted #3e5;border-left: 5px solid #000″>
Let me know if you have any other formatting needs that aren’t available from the set of editing buttons available in the normal “new post” window and I’ll see whether I can add that funtionality.

Leave a Reply for Students & Prof