Section Links

Chapter 6 Sections

Chapter 06

Multimodality, Writing Studies, and Teaching HTML and CSS as Rhetorical Design

by
Dan Martin

Author Biography

In Writing in Digital Environments, I teach students how to use HTML and CSS so they can make a website that can serve as a resource for the course. The audiences for the website are students taking the course or prospective students, and anyone else interested in learning more about the important conversations involving digital writing environments, and the applicable theories, ideas, conversations, and questions associated with these spaces. For example, one of the sample student websites I examine in this case study is a resource that provides users with suggestions for improving their social media literacies and helps them identify fake news and misinformation. Below is a screenshot of the social media literacy website homepage that a group of five students created:

Social Media Literacy syllabus

I argue that having a rhetorical purpose and audience for the website assignment improves the teaching and learning of HTML and CSS. Students should understand that marking up documents and creating web projects is a rhetorical act that requires decisions that shape how audiences experience websites and multimedia content. Learning a language requires an understanding of how that language instantiates a certain reality for how it is used and applied in real contexts for real audiences. Teaching students how to use HTML and CSS without these elements eliminates an important linguistic and cognitive connection between the language and the experiences that ultimately shape how it is used to solve real problems [8].

Students work on the website project and learn HTML and CSS over sixteen weeks. They read three books: Krista Halverson’s Content Strategy, Howard Rheingold’s NetSmart, and Henry Jenkins et al.’s Spreadable Media. They take four quizzes on HTML and CSS based on four Code Academy tutorials and participate in four lectures/discussions on HTML and CSS before each quiz. The students also complete two formal web project outlines that identify coding approaches and content strategies. They also generate one set of workshop notes from a class group meeting, provide a wireframe for their website, and write a group reflection on the advantages and disadvantages of completing the website project.

Theoretical Frame for Teaching HTML

A web design assignment allows students to work with semiotic materials like image, sound, and text that take advantage of core learning principles. Implementing multimodal composing processes that require HTML and CSS improves how students learn coding languages as they work with a variety of modes to reinforce their learning. The website assignment is built on writing and rhetorical theoretical frames for teaching HTML and CSS, including writing-to-learn theory [5]; [2]. and multimodal and semiotic learning principles for design theory [8]; [12]; [1]; [6]; [10].

Writing-to-Learn

Writing-to-learn theory [5]; [2]. forms the foundation of my pedagogical approach for teaching students to use HTML and CSS. Writing studies research and scholarship tells us that students learn when they are asked to solve real problems with their writing projects and given chances to practice using language in a variety of ways. Students learn HTML and CSS when they use those languages to create something for a real objective and audience. To learn, students need as many opportunities as possible to play around with new language forms and ideas. WTL theory is crucial for providing students space and time for their ideas to incubate and grow. Gere [9] reiterates that WTL provides students an opportunity to use writing to work through their ideas. Theoretically, WTL is not about improving a student’s writing, although that is a byproduct we all can live with; WTL is about using writing to learn. Students learn when they use writing to work through their ideas and problems.

Multimodal Theory and Learning

I also use multimodal learning principles [8]; [13]; [1]; [6]; [10]. to suggest that students learn better with a variety of semiotic materials like sound, image, and text. Making a website with HTML and CSS allows students to learn how to rhetorically markup a variety of semiotic materials to solve a problem in a real context. Teaching students how semiotic materials interact on the screen is important. I ask students to examine the semiotic principle [8]. in relation to structure and form, and to consider how to structure different modes on their websites like images, sounds, and text in ways that audiences can form coherent meaning.

The Website Assignment Sequence and Outline

Teaching mark-up in groups provides students with more opportunities to help teach each other these languages through dialogue. Students are asked to generate a question about digital writing environments that the website will answer and then create content to design and build the website with HTML and CSS. I ask students to start by generating a question that the website will answer before designing the website.

The Website Design Assignment

We are going to build websites in this course using HTML and CSS. Every student will be assigned to a group, and each group is responsible for creating a website resource for the course. There will be five students in each group. It is extremely important that each of you work together to achieve the goals and objectives for the project. Determine who is best at what task, and then assign tasks and duties accordingly. In our overwhelming complex digital culture, working together is no longer an option—it is a certainty. Also, think about how and when the group will meet (virtually or F2F). Figure out a plan, but make sure that plan includes multiple points for interacting and communicating with each other throughout the semester.

How Will I Learn HTML and CSS?

Code Academy is an excellent free resource we can use to learn HTML and CSS because it allows us to see our HTML on one page while looking at the live webpage simultaneously. All of the quizzes we take in this course, aside from the syllabus quiz, come directly from what you learn in the Code Academy tutorials. So work through them carefully. I will also provide video tutorials and additional help along the way as needed. Make sure to draft your webpage in Notepad or Notepad ++, and to save your work all the time. You can also draft in Code Academy so you can see the live webpage as you work, but make sure to cut and paste your work back into a Notepad document and to save it. There are many great website resources for HTML and CSS that we can use and refer to throughout the semester. You can also right click on any webpage and see the HTML code operating behind the scenes.

What Will Be on the Website?

It is important to consistently ask the following questions throughout the lifespan of this project so that the answers drive and sustain the content creation for the website: “What questions does the website engage?” “How will each page add something different and valuable and engage the group’s question?” Think of the answers to these questions as our “Guiding Light” (Halvorson and Rach, p. 95). Our course website will house valuable information about Digital Writing Environments that other students can use when they come through this course. That means that many other people will use your group’s website to better understand the course content. Take the public presentation of your work for this course seriously. We will publish our sites on a public server. Once your group figures out a topic and question to focus on for the website, start to consider the content you will make. Always remember to ask, ”What will users do with the content?” Below is a screenshot of a website that provides an example of useful content about privacy and authorship on social media:

Each Group Webpage Must Contain the Following:

  1. HTML Tags for:
    • Header
    • Title
    • Body
    • Paragraphs
    • Headings
    • Images
    • Lists
    • Colors
    • Links to other relevant course related resources.
    • A CSS page that stylizes your HTML. The CSS page should address all of your style choices: font styles, alignments, and sizes, and the color of fonts and backgrounds.
    • Content about something specific that students taking this course would benefit from knowing. A good question to keep in mind while the group works on the project: “Your content must help your audience do something—better, smarter, and with greater ease” (Halvorson and Rach, p. 19). As noted above, each group MUST create and add content to their webpage like infographics, videos, graphs, charts, and written text. Below is an example of a website and what students made for content:
      Data Visualization intro
    • A works cited page with at least four scholarly, peer-reviewed journal articles or books (or combination of) directly related to the group’s topic of interest.
    • A group reflection about what each of you learned from this project and the decisions and composing processes involved in creating the project. Turn this in as a separate word document attachment.

Rubric for Grading

25% of Final Grade

Assignment Total = 100%

  • Content 35%: How well does your “content engage your users, answer their questions, and motivate them to take action” (Halvorson and Rach, p. 19). What did you produce, and does it create value for your users?
  • HTML and CSS 20%: Coding should be organized, structured, and accurate. This involves what you actually do with your CSS pages. Font styles, sizes, color, etc. Did you use all the tags and generate a CSS page to style those elements?
  • Findablity 15%: How easy is it to find what we need on the page? What organizational theory are you working from?
  • Usability 15%: What can I do with your page? What kind of knowledge does it give me? How does it help me achieve something? What is that something?
  • Readability 10%: This goes without saying. Make sure your words are edited and articulate. Triple check.

Code Academy

Students use code academy tutorials and take HTML and CSS quizzes online based on those tutorials. There are four total HTML quizzes. The quizzes line up with the code academy tutorials to encourage completing the quizzes while completing each tutorial or immediately following the completion of the tutorial. One advantage of using Code Academy is that it provides dual screens for the users to see their HTML file page and what that file page looks like loaded in a browser window.

We also discuss HTML and CSS in class before each quiz, so there are four discussion/lectures that set up each quiz.

In-Class Group Workshops

Students meet in their website groups four to six times during class time for at least 50-60 minutes.

Website Outlines

Each web group turns in two formal web page outlines that detail their web project. Each group is also responsible for a hand-drawn wireframe in the second web outline. Students draft the website and get feedback from the class twice before completing the project.

The web page outline instructions are as follows:

Your Web Page Outline should include the following information and be about 2-3 pages:

  1. Tell me who is doing what and why? How have you delegated or split up responsibilities for the project?
  2. Now tell me more about what the group is doing. What are some of your ideas for content? What is the main objective of your contribution? What can/will you make? Videos? Visuals? What will they do, and why are you making them?

In the next website outline I ask each group to submit an updated version of their Web Page Outline to the collaborations page.

Web Page Outline #2 must include a wireframe. It should be about 2-3 pages and include the following information:

  1. What types of content have you created for the site? What will the group actually create for content? Videos? Visuals? Text? I want details.
  2. What scholarly, peer-reviewed research are you using to frame your ideas and the creation of your pages? How is the research negotiating your web page design and content? The research will essentially tell you what you should and should not do with the webpage. Make sure this section is really clear and detailed.
  3. What specifically have you done to move this project forward since the last outline?

Suggestions & Conclusions

Using a writing and rhetoric pedagogical frame to teach students HTML and CSS provides them a way to learn and practice markup languages while designing web projects that answer important questions or address relevant problems. Rhetorically situating the assignments can enhance how students see the value and applicability of knowing and using mark up languages. Working in groups gives students more opportunities to learn HTML and CSS from their classmates, to ask each other questions about mark up languages, and to help each other answer those questions. One draw back to teaching web design in groups is making sure everyone has a chance to regularly work with the HTML and CSS. To overcome this concern, I require that all team members shape and inform the HTML and CSS for their website. Each team member must be able to speak to and identify all of the tags and mark up language used on their team's website that were required for the assignment.

Chapter 6 Citations

To cite this article:

MLA: Martin, Daniel. “Multimodality, Writing Studies, and Teaching HTML and CSS as Rhetorical Design.” Coding Pedagogy, edited by Jeremy Sarachan, 2019, ch. 6, http://codingpedagogy.net. Accessed 1 Apr. 2020. [update access date]

APA: Martin, D. (2019). “Multimodality, Writing Studies, and Teaching HTML and CSS as Rhetorical Design.” In J. Sarachan (Ed.), Coding Pedagogy, ch. 6. Retrieved from http://codingpedagogy.net.

Chicago: Martin, Daniel, “Multimodality, Writing Studies, and Teaching HTML and CSS as Rhetorical Design.” in Coding Pedagogy, ed. Jeremy Sarachan, ch. 6, Coding Pedagogy, 2019. http://codingpedagogy.net.

  1. Ball, Cheryl E (2004). “Show, not tell: The value of new media scholarship.” Computers and Composition, 21 (3), pp. 403–425. http://ceball.com/wp-content/uploads/2012/01/shownottell.pdf
  2. Bazerman, Charles (2008). Handbook of Research on Writing: History, Society, School, Individual, Text. Routledge.
  3. Bazerman, Charles and David R. Russell, Eds. (1994). Landmark Essays on Writing Across the Curriculum. Hermagoras Press.
  4. Bazerman, Charles and Paul Prior (2004). What Writing Does and How It Does It. Lawrence Erlbaum Associates.
  5. Bean, John C. (2011). Engaging Ideas: The Professor’s Guide to Integrating Writing, Critical Thinking, and Active Learning in the Classroom. 2nd Ed. Jossey-Bass. https://www.wiley.com/en-us/Engaging+Ideas%3A+The+Professor%27s+Guide+to+Integrating+Writing%2C+Critical+Thinking%2C+and+Active+Learning+in+the+Classroom%2C+2nd+Edition-p-9780470532904.
  6. Bezemer, Jeff and Gunther Kress (2008). “Writing in multimodal texts: a social semiotic account of designs for learning.” Written Communication, 25, pp. 166-95. https://journals.sagepub.com/doi/10.1177/0741088307313177.
  7. Bickmore, Lisa and Ron Christiansen (2010). ”Who will be the inventors? Why not us?’ Multimodal compositions in the two-year college classroom.” TEYYC, pp. 230-42.
  8. Gee, James Paul (2004). What Video Games Have to Teach Us about Learning and Literacy. Palgrave Macmillan.https://dl.acm.org/citation.cfm?id=983348.
  9. Gere, Anne Ruggles, Ed. (2011). Roots in the Sawdust: Writing to Learn Across the Disciplines. Originally Published in Print, 1985, by National Council of Teachers of English. https://wac.colostate.edu/books/landmarks/sawdust/.
  10. Kress, Gunther (2005). “Gains and losses: new forms of texts, knowledge, and learning.” Computers and Composition, 22, pp. 5-22. https://www.infona.pl/resource/bwmeta1.element.elsevier-a258bcf0-c1af-3ad1-b603-72f5c5583a0d.
  11. New London Group (1996). “A pedagogy of multiliteracies: designing social futures.” Harvard Review, 66, pp. 60-92. https://hepgjournals.org/doi/10.17763/haer.66.1.17370n67v22j160u.
  12. Selfe, Cynthia (2009). “The movement of air, the breath of meaning: aurality and multimodal composing.” College Composition and Communication, 60, pp. 616-63, https://www.jstor.org/stable/40593423?seq=1#page_scan_tab_contents.
  13. Shipka, Jodi (2005). “A multimodal task based framework for writing instruction.” College Composition and Communication, 57(2), pp. 277-306, https://eric.ed.gov/?id=EJ728801.

Comments

Last: Chapter 5