Magical Mark Up

In this project you will edit and design an essay, in HTML and CSS, that tells a story and develops an argument about the “magical” promise of your commodity in relation to the social and material reality of its production and use.

Content

Find two types of texts.

1 — Sentences that succinctly and poetically articulate the *promise* of your commodity. In the Raymond Williams essay, he explains how in the history of capitalist advertising, commodities come to appear no longer as simply use values that satisfy particular needs, but as promises of something more. He cites Samuel Johnson:

Advertisements are now so numerous that they are very negligently perused, and it is therefore become necessary to gain attention by magnificence of promises, and by eloquence sometimes sublime, sometimes pathetic. Promise, large promise, is the soul of an advertisement.

Williams links this promising speech of the commodity to what he calls the magical pattern of the commodity form. Find five sentences, from the texts you’ve researched, each of which expresses a promise (sublimely or pathetically) related to your commodity.

2 — Paragraphs that work to demystify or disenchant your magical pattern of your commodity. These can be texts that detail the social and material reality of the commodity’s production, or its actual use in the world. They could also be texts that theorize some salient aspect of the commodity form in general. This latter category of text could come from any of the readings we’ve made so far. The point of this text is to contrast the magical promise of the first type. It can do this dramatically or subtly (sublimely or pathetically), but think about how the two types of texts relate, how we might read each in the terms of the other.

Mark Up

Once you’ve found your texts — five sentences and five paragraphs — mark-up their structure in HTML. Develop two kinds of mark-up: one that is “objective” and one that is “subjective.” The first type of mark-up should identify a *real* structure of the text. A good example of this is grammatical structure (as we demonstrated in class): nouns, verbs, syntactic parts of speech, etc. It can be very simple. The second mark-up should reflect your own reading of the texts and should indicate themes and patterns of meaning your reading has shown you. This second mark-up is less about the objective structure of the text and more about your own interpretation of it. 

Typographic Form

Once you’ve marked up your texts, link the HTML to a CSS (cascading style sheet) document. In the CSS, declare a value for every possible property, for all the elements of your markup. Make all these stylistic declarations dramatically different for every class with which you’ve marked up your text. Start slowly and build the articulation of the structure. And then keep adding declarations. With all these properties activated, you will generate a profusion of forms. Go with it, in the same experimental spirit you channelled in the earlier software studies. Think about how to use this profusion of typographic form to visually articulate both the semantic structure (the structure which your markup reveals), *as well as* the hyper-magical and enigmatic formal dimension of your commodity!

Constraints

All the words in your sentence must be legible. Your design should be responsive/fluid. It should reflow and fit in any format. The best way to accomplish this is to use relative units of measurement, when specifying attributes in CSS. I recommend using *em* as your unit of measurement whenever possible.

Final Project

Assemble the five sentences and five paragraphs, along with the historical images you’ve found in an earlier phase of your research. Put them together in an order that makes editorial sense to you, that tells a story or makes a particular argument about your commodity. Think of this final assemblage as an essay or a book. Once have have all your content marked up and placed in a single HTML file, give thought to the overall composition of elements and the relations (of similarity and contrast) that you’re articulating between them, at levels of form and content.

Resources

code editor

CSS properties