Document a Story Cliché exercise

Version 1.1

For this exercise, you will make a storyboard that illustrates a storytelling cliché.

Background

Clichés--stereotypical characters, events, or plot devices--are the bane of storytellers and listeners alike. Their familiarity often masks how unlikely they would be in reality ("OMG the enemies became lovers!"), but they are often crutches that let writers be lazy rather than challenge expectations.

In addition to the Visual tab that previews your content, the WordPress Text tab lets you edit HTML directly. The following HTML tags will help you lay out your storyboard:

• <div> This "division" tag groups rectangular regions of the page.
• <div style="BLAH"> The style attribute lets you change the look of an HTML page with inline CSS.
• <img> The "image" tag displays a picture on the page.
• <p> The "paragraph" tag shows a paragraph of text. You won't need it if your text is enclosed in <div> tags.
• <h1>...<h5> Heading tags range from the biggest (h1) to smallest titles (h5) on the page.

This CSS style will help us make a storyboard:

• display: grid This makes a table of text and/or images.
• grid-template-columns: 1fr 1fr This tells the browser that the grid will have two columns with the same fractional width.
• gap: 20px This specifies how much of a space will be between adjacent cells of the grid, in pixels.
• <h1>...<h5> Heading tags range from the biggest (h1) to smallest titles (h5) on the page.

🎗 Remember that all HTML tags need to be closed in two ways: with an end angle > and with an end tag, eg </div>.

Process

1. Choose a cliché from a list of Console RPG clichés and pair it with a game, movie, book, or other story that leans on it.
2. At the class website, start a new post and entitle it Story cliché exercise.
3. At the top of the post, type the heading "Featured cliché:" and add the name of the cliché you chose and a description pasted from Console RPG clichés.
4. Under this, add a new heading with "Example:" and the name of the game, movie, or book.
5. In a paragraph, explain how the story you chose embodies the cliché.
6. Add a heading for "Related images"
7. Collect at least three images to represent different moments in or features of the story. You can download these from the Web or draw them as stick figures or cartoons.
8. Click on Add Media and upload these to the website. (Do not insert them into the post yet.)
9. Back in your post, choose the Text tab and paste the following HTML template at the bottom (continue the pattern to add more than three images):

		<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;">
			<div>Description</div>
			<div>[image]</div>
			<div>Description</div>
			<div>[image]</div>
			<div>Description</div>
			<div>[image]</div>
		</div>
		

10. Back in the Visual tab, select the word "image" only (not the brackets) and click Add Media.
11. After choosing an image, make sure Align Left and Medium or Large are selected, then Insert into Post.
12. Replace each of the descriptions with actual text.
13. Select and delete the brackets [] afterward. ⚠️ Be careful not to delete the image by accident. You may want to find and delete the brackets in the Text tab.
14. Publish your post to WordPress and paste the URL in #x-story-cliché.

❗️ Be sure to tag everyone in your team so they get credit, eg @mary @julio @michele.

⚠️ Paragraph tags don't show up in the Text tab; WordPress will add those automatically if you double-space your content.

🎩 You can also insert videos by copying a YouTube URL corresponding to the appropriate time and pasting that URL into WordPress.

💁‍♂️ Sample result: Sword fights as cliché