HTML

Blogging

Read blogs to judge what works and what doesn’t. Too much prose and people may not read to the end. Graphics that are too large can obscure other content or be annoying. Sharp titles help. And take a stance, because the goal of our blog is to foster discussion.

Web pages

A web page is a text file. Your browser looks for opening and closing tags for the formatting of what lies in between, in the form of <tag> …content… </tag>. These are used to style text, load and place graphics and so on. WordPress provides a standard interface, and keeps track of users and posts and the “framing” of a page.

Most of the time you can make do with the WYSIWYG editing function within WordPress. However, tweaking the appearance – implementing consistent formatting, getting graphics in the right place – may require tweaking code. The one you’re must likely to use is the paragraph tags, <p> and </p>.

Notes on tweaking content format

To insert code you need to use the “text” rather than the “visual” tab in the editing screen. You will likely find it easiest to write a post using the “visual” editing screen and then tweak the code afterwards by switching to the “text” screen.

Note that you can insert graphics. Proper etiquette (consistent with copyright law) is to do so by referencing the url of the original graphic. You can also upload a graphic, but if so, cite your source. Again, you can use the “link” function to point back to a web site (eg, a newspaper story). The WYSIWYG editor lets you reduce the size and have text wrap around it.

In particular, I have set up several “classes” to provide a consistent appearance.

    • <p class=”base”> will produce a paragraph with justified text, spacing above and below, and an initial “drop cap”
    • <p class=”nocap”> as above but without the initial cap, which sometimes works poorly with the spacing of graphics or short paragraphs.
    • <p class=”bib”> gives the standard “hanging indent” for a bibliography or citation.
    • <p class=”dblin”> gives a smaller font, tighter spacing and indents on both sides, as standard for an extended quote
    • <p class=”topic”> lets you highlight a topic heading
    • <p class=”signature”> puts your name(s) on the right, use to start your blog.
    • <p class=”pquote”> this provides a “callout” box on the right, with larger font etc. it’s common to have a callout that repeats a sentence or phrase from the story in a magazine or newspaper article.

The “Visual” editing tab lets you put in bullet and number lists, change colors, make things bold and italic, and so on. Adding links is easy to do with the “Visual” editing tools. There’s little need to know the underlying code.

Embedding graphics is best done using the built-in tools, but adding YouTube clips and other less common tasks may not be straightforward given the way W&L set up WordPress. You can do simple tables, but formatting them (as with the course schedule) is tedious and may require learning html details. The <p> tab is for an entire paragraph. You need <span> for changing only part of a paragraph (the Visual editor handles that automatically for colors etc). The <div> tag is for changing material that may include multiple paragraphs. If you find you’re looking at these, you’re spending excess time on formatting!!

Examples

In order, I use the classes of “bib” “dblin” and “base”:

Anukriti, S., and Shatanjaya Dasgupta. 2017. Marriage Markets in Developing Countries. Institute for the Study of Labor (IZA). IZA Discussion Paper No. 10556.

Ipsem lorem and all that, this is merely a bit of prose long enough that it should wrap a time or two and illustrate the standard quotation format that is indented from both the right and the left margins so that it stands out.

This is a normal paragraph with an initial “drop cap”. However, that does not look good if you have extremely short paragraphs. However, in a long post it can make for a handsome layout. It can also be used with regular paragraphs to highlight the start of a section.

Resources

Here are 3 guides to codes. The first helped me learn the basics, the second is what I use now when I’ve forgotten something. The latter is … technical, that is, in jargon not English.