Using tables

Photo of a rustic table

As you’ve been working on your Persepolis projects, many of you have asked about how to get images to line up in specific ways, especially to get a pair of images to line up side-by-side on a page (like I’ve done with the covers of our three primary texts on this site’s splash page). One really good way to control the layout of your pages is with tables. WordPress uses the HTML code to create tables just fine, but the post editor does not by default include a simple button to insert tables, the way that MS Word or Google Docs do.

One way to create tables, then, is to just switch to the Text tab in the top right of your post or page editor (instead of the Visual tab) and insert the HTML code manually. Here’s the w3schols tutorial page on coding tables.

A much easier method for most users is to add a plugin that opens up the range of options available in the text editor boxes for WordPress. In the “getting started” with Domain help pages on plugins, I recommend that you start by installing a plugin called WP Edit. Since I wrote that page, I’ve found another plugin that I like even better called Easy Bootstrap Shortcode, and that’s the one that used to create the tables on the front page for this site (and the accordion folds in the resources page).

Screenshot of the buttons added in the WordPress text editor by Easy Bootstrap Shortcode

Screenshot of Easy Bootstrap Shortcode buttons. (Table button highlighted.)

If you install Easy Bootstrap Shortcode, it will add a third row of buttons to your text editor. Hover over each to see what it does.

Insert tables dialog box

Insert tables dialog box

If you click the button to insert table, you’ll get a dialog box, where you can choose how big the table should be, how many rows and columns it should have, and some other styling features.

Once you’ve set your options, click the Insert Table button and the plugin will insert shortcode to your post or page that generates the table on publication.

Shortcode for table

Shortcode to insert a table

Here’s what that initial shortcode looks like for a table with a header row plus two more rows and 4 columns: If you just publish that post as is, you’ll get a table that looks like this:

Sample table

Sample table

If I want to have two images side-by-side, the easiest thing to do is to insert a simple table with only one row and two columns and replace the text with the two images.

So this:

Sample table with images

Looks like this when it’s published:


"Conference Time" by Flickr user Christian Senger

Conference Time” by Flickr user Christian Senger

A cartoon diagram of the steps for jarring potatoes which looks like it's from the 1950s. There's a stereotypical pair of women in aprons, moving through the steps and a diagram of the necessary implements at the bottom.

Housekeeping” by Flickr user Fabian Mohr.

Or here’s another table:


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed iaculis nunc ligula, ac eleifend libero pellentesque nec. Integer at venenatis arcu. Quisque vel mattis purus. Aliquam erat volutpat.

A photo of a train schedule board.

Train Schedule” by Flickr user Q Family

Nulla in orci metus. Sed in ullamcorper velit. Nam ornare dapibus urna in eleifend. Quisque nec risus non leo viverra volutpat quis rhoncus est. Mauris congue risus ac nisi vestibulum viverra.

"Comments by Flickr user Judit Klein

Comments by Flickr user Judit Klein

Aliquam sodales efficitur est ut finibus. Nulla enim urna, dapibus bibendum tempor quis, condimentum eu magna. Sed ut aliquet dui, ut finibus ipsum.

A photograph of a book with post it flags stuck in its pages.

231 by Flickr user Jay Peg

"Long Tang Table" by Flickr user Jonas erian

Long Tang Table” by Flickr user Jonas erian

Nullam elementum vel ipsum quis aliquet. Vestibulum quis ultrices ipsum. Suspendisse mollis ultrices felis, eu tincidunt diam tincidunt id.

"Unclickable Link" by Flickr user quinnanya

Unclickable Link” by Flickr user quinnanya

Pellentesque ut suscipit odio, id mattis dui. Nullam congue neque finibus facilisis sodales. Nulla ultricies, purus eget efficitur iaculis, est lectus semper lectus, ullamcorper congue dolor mi molestie neque. Ut neque est, consequat scelerisque semper rhoncus, posuere eget turpis. Sed ante leo, sollicitudin eget blandit ut, molestie sed neque. Nunc euismod faucibus mi, at ullamcorper turpis laoreet pellentesque. Mauris vel erat egestas, auctor velit eget, pulvinar est. Sed congue, metus in pulvinar posuere, neque leo efficitur nisi, sed facilisis quam enim ut purus. 

 

(image credit: “Long Tang Table” by Flickr user Jonas Merian)

Visual Notes from My Conference Session

Derek Bruff attended the panel where my colleagues and I presented about Domain of One’s Own at Educause Learning Initiative and posted these sketchnotes about the session to Twitter. As far as I can tell, he took them in real time while we spoke and he captured the essence of what we talked about. As you can see, there’s a fair amount of text still, but with just a little bit of doodling and diagramming, he’s sketched out relationships and concepts instead of writing out lots of words.

I retweeted the heck out of this image, to be honest. Being able to give people a sense of our entire panel in a single image is a real gift Derek offered to us by tweeting it out.

Announcing drop-in studio hour

Starting this week, the Domain team will be hosting a studio drop-in hour for students working on web projects.

When: Fridays, 10-11am (immediately after our class)

 

Where: Callaway N203 (immediately next door to our classroom)

The idea for this hour is not so much that you come in and ask questions instead of going to the Writing Center, but that you can stop in, use the computers in the room to work individually or collaboratively with your group, and there will be someone staffing that hour who can help out with questions as they come up.

At least one of the people staffing that hour will be me on most weeks.

Which means I’ll need to adjust my scheduled office hours. I think going forward, I’ll have office hours on Wednesdays instead of Fridays, but I’m not 100% certain of that time yet.

Looking ahead to week 2

I hope you had a happy Martin Luther King, Jr holiday!

Remember that your first short assignment is due by Tuesday. Once you’ve created your badge, upload it to your blog.

Come to class on Wednesday having read Persepolis pages 3-32 (“The Veil” through “Persepolis”) and bring your book with you.

On Friday, you’ll need to come to class having read the first chapter of Writer/Designer. We’ll spend the class session going over plans for your web sites and will discuss the reading.

When I was showing you the course site on the first day, I explained briefly the relationship between my primary domain and this subdomain that I’ve created for this course and I mentioned that you’d be creating your own subdomains too. The time for that is this week.

By Friday, I want you to create a course subdomain (you can call it what you like, but eng101.yourdomain.com is a sensible choice) and install WordPress again, this time into the subdomain. [N.B. The second time you install WordPress in Installatron, the location field will autofill directory as “blog.” Make sure to delete that line. If you leave “blog” there, then your site address will be eng101.yourdomain.com/blog/ instead of eng101.yourdomain.com.]

Repeat the process of configuring your WordPress on the subdomain, just like you did on the primary domain. Give your subdomain a title that is not “My blog.” Create a static front page and designate a posts page.

Create a menu on your subdomain and add a link in the menu back to your primary domain. Create a page on your primary domain called “Courses” and add a link to your subdomain for my class, either on the page itself, as a menu subpage, or both.

Most of the work that I explicitly assign you over the rest of the semester, starting on Friday, will go on your subdomain.

By Sunday, you’ll post your second Sunday Funnies assignment, as a blog post on your subdomain. Note that I’m switching around the order I was planning to do Sunday Funnies #2 and #3. Look for a blog post with the assignment to go up very soon.

(image credit: “Obscurae Gallery’s 2nd Annual Art Lottery” by Flickr user hrckyowian.)

Welcome to Experiments in Visual Writing

"Homework" by Flickr user Stephen Ransom

Homework” by Flickr user Stephen Ransom

Your homework to complete before we meet again on Friday:

  • Read over this website very carefully as it constitutes the syllabus for this course. Note that the Syllabus page includes 5 subpages, covering such topics as: how to contact me and course objectives; the texts you need to buy; attendance, participation, and other policies; how you will be graded; and how Domain of One’s Own will impact your experience in this class. There is also a calendar of reading and assignments (note that there will be some additional incidental readings and assignments added as we go); and pages describing the major assignments this semester (though as of this moment the final two don’t have much specifics included yet).
  • Add this site to your bookmarks. Make certain that you can find your way back here, because you’ll be spending a lot of time visiting these pages over the course of this semester.
  • Sign up for a domain of your own. (See this post for a note about choosing a domain name.) Install WordPress on your domain. Give your site a title that is not “My blog.” Configure the settings on your site, making the front page static instead of a posts page.
  • Come back to this post once you have signed up for your domain and leave a comment. Enter your name and email and the new domain address in the “website” line when on the comment. In the body of the comment, I encourage you to ask one question about the syllabus.

On choosing a domain name

"No Name" by Flickr user Patrick

No Name” by Flickr user Patrick

The preference is for your domain to be some version of your name (i.e., janestudent.net or davidmorgen.org or johndoe.com) but if you have a very common name you might have to be a little creative.

It is also perfectly acceptable for your domain name to be a short word or phrase that is easy to remember and spell, and which speaks to some interest of yours or an aspect of your character (i.e., my friend Audrey Watters publishes a site called hackeducation.com; Kin Lane spends his careers working with APIs and his domain is apievangelist.com; or one of my favorite art and design blogs is called thisiscolossal.com). If you’re going to choose a domain like this, make sure you think about it very carefully so you don’t show up on one of those lists of the most unfortunate domain names ever, like the design firm called Speed of Art that ended up with a domain name that sounds like it’s about flatulence in a swimsuit.

Do not include the word “emory” in your domain name. The university brand management office is quite emphatic about trying to keep domains including “emory” only for official university sites.

Do not include my class name or something specific about a course, or even your major, in your domain name.

How do I use HTML to format comments on this site (& others)?

"html tattoo" by Flickr user daniello

html tattoo” by Flickr user daniello

Different themes handle commenting differently, but many themes allow users to create links and other formatting while leaving comments, but only if they know how to do so manually with HTML code. There’s often no visual editor that lets you use HTML at the push of a button, the way there is when you’re in the dashboard composing posts and pages.

When you’re leaving a comment on a post on this site, there’s a line at the bottom that lists the most frequent types of HTML and formatting that you might want to use:

You may use these HTML tags and attributes: <a href=”” title=””> <abbr title=””> <acronym title=””> <blockquote cite=””> <cite> <code> <del datetime=””> <em> <i> <q cite=””> <strike> <strong>

For each of those codes, you just surround some text with the applicable HTML tags (i.e., you have an opening tag <em> (which adds emphasis), then the text you want to be emphasized, then you close the tag so that the browser knows when to stop emphasizing </em>).

Here are examples of how each of those codes work:

<a href=”http://eng101s15.davidmorgen.org “>course homepage</a>

<abbr title=”Hypertext Markup Language”>HTML</abbr>

<acronym title=”EWP”>Emory Writing Program</acronym>

<blockquote cite=”<cite><a href=”http://www.brainyquote.com/quotes/authors/l/ludwig_wittgenstein.html “> </cite> “>If people never did silly things nothing intelligent would ever get done.
Ludwig Wittgenstein<blockquote>

<cite><a href=”http://eng101s15.davidmorgen.org/ ” ;> </cite>

<code><a href=”” ;> </a> </code>

<del datetime=”YYYY-MM-DDThh:mm:ssTZD”>This text has been deleted from the comment and there’s a time stamp to indicate when, which is not visible but is available to screen readers.</del;>

<em>Emphatic!</em>

<i>Italics!</i>

<q cite=”http://eng101s15.davidmorgen.org/ “>The q cite tag allows you to provide a citation that does not show up visibly, but is available to screen readers behind the scene.</q>

<strike>This text has been struck through</strike>

<strong>Guiness for strength!</strong>

And here’s how each of those different effects will look on this site when the comment is published:

course homepage

HTML

Emory Writing Program

If people never did silly things nothing intelligent would ever get done.
Ludwig Wittgenstein

http://eng101s15.davidmorgen.org/

<a href=" "> </a>

This text has been deleted from the comment and there’s a time stamp to indicate when, which is not visible but is available to screen readers.

Emphatic!

Italics!

The q cite tag allows you to provide a citation that does not show up visibly, but is available to screen readers behind the scene.

This text has been struck through

Guiness for strength!

4: Domain of One’s Own

Comic representation of Domain of One's Own

By the end of this course, students will:

  • acquire, design, and administer a web presence using free or open-source tools.
  • conduct inquiry, research, critique, and publication in electronic environments.
  • explain and practice digital citizenship, which includes utilizing the concepts of intellectual property (such as fair use and copyright).
  • reflect on learning as part of a deliberately constructed digital identity.

(image credit: “Domain of One’s Own” by Flickr user Giulia Forsyth)