HTML Pointers

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. 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.

Site-specific formats (created by the prof):

  • for quotations (indented right and left): <p class=”cite”>
  • for hanging indents (bibliographies): <p class=”hi”>
  • for your by-line (right alignment): <p class=”rt”>
  • for a standard indented paragraph: <p class=”in”>
  • for a callout – larger, reddish, on right: <p class =”callout”>
  • for an aside (indented, blue-green, smaller cursive font): <p class=”aside”>
  • for an in-line comment (small cursive font) use <span class=”note”> …your text.. </span>. [put in brackets for better readability; unlike with a paragraph tag, with <span> the closing </span> tag is crucial!]
  • for a superscript note use <sup class=”note”> with a (mandatory) closing tag </sup>

You can also use options not shown. Here’s an example example that changes the font, the font size and the fong 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: #DF3A01; font-family: serif, ‘Times New Roman’;”> gives this sort of text</span>. WordPress is picky, if you leave out the closing quote mark, strange things happen.

I go HERE for help with a color palette and associated codes; for references on codes more generally I go to HTML Dog (more complete, though some code is not recognized in this WordPress theme) and more helpful for a learner HTML Code Tutorial (which emphasizes good practice in doing hard coding, useful for doing a simple tweak). Again, not everything works as these guides suggest in this WordPress implementation, because the theme sets parameters that you may not be able to [readily] override.

Examples: in the order of the list above

This is the text when you use the paragraph “cite” tag. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Here I use the “hi” hanging indent class. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

This is the “rt” class for signatures.

And the “in” for an indented paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

This is a “callout”.

And this one is an aside. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation

An inline note using the <span> “note” tag: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor

And to set up a note you can use the <sup> tagNote! with the mandatory closing </sup> at the end.

Leave a Comment!