The second class of multimedia storytelling design is focused on what I call the simplicity of the web. My advancing age, almost 50, gives me the advantage of having witnessed the evolution of the web from a text-based browser to the apparent complexity of modern web sites. I encourage those learning the web to break down the complexity and focus first on the simple, foundational aspects.
For our text in this course we’re using Jon Duckett’s HTML & CSS: design and build websites. Written for beginners, this book presents the basics in an engaging manner (with beautiful page layouts). I did choose, however, not to assign all the chapters in the same order as in the book. For the first class, we’re focusing on chapters 1, 2, & 5. Throughout this class we’ll be using the example of NY Times Snow Fall. It’s a complex piece but useful for these (mostly) journalism students to know how it was constructed.
Here are some of the questions (and occasional commentary) guiding discussion in this two-hour class:
Structure
- What do we mean by structure?
- Why are we talking about documents?
- What are the structural elements on Snow Fall?
- How can you see those HTML elements in the browser? How do you turn off the styles?
- View Source
- Unusually, the view source for Snow Fall is the whole article and not just what is visible.
- What’s happening in the head and body?
- Chrome needs the web developer plugin to disable all styles. (What’s an extension for a browser?)
- In Firefox, it’s easier to view a page without styles
- Firefox – View – Page Style – No Style.
- A page without style: THAT is the simplicity of the web.
- In Firefox, show how you can hover over element with mouse and see the code view.
- Chrome – Inspect element. I prefer how Chrome hover highlights the full element.
- Do you see a hierarchy of information? Start with the <html> tag.
- What’s a title in HTML?
- What’s a header?
- What’s the body?
In the view source of Snow Fall, (finally) around line 827, you’ll find:
<h1>Snow <span>F</span>all</h1>
<h2>The Avalanche at Tunnel Creek</h2>
Let’s look at that first paragraph.
- What’s a heading?
- What’s an element? What are tags? Any difference between an element and a tag?
- What is markup and why is it used? What’s the purpose of elements and tags? Why is it necessary?
- The machine reads character by character. A simple concept. Maybe so obvious that it’s not clearly grasped. Very important to slow down and read a page as the machine, the software, reads the page. The angle brackets are signifiers to the machine. Literally, signs that give directions to the browser about what to do.
- What is plain text? What’s the difference between a plain text file and, say, a Microsoft Word file? Are there other types of markup languages?
- Mention the Scholarly Text Encoding course
- What are attributes of an elements?
- Can I just use any tag? What tags are possible and how do I know?
- Key HTML elements for beginners:
- <body>
- <head>
- What’s the difference between the <head> element and a heading?
- <title>
Text
Think about the separation of content from markup. Then think about the separation of content/markup from style/presentation.
Structural markup: show examples of each in Snow Fall.
Semantic markup: examples of each in Snow Fall.
Heading tags: choose based on structure and not appearance.
The all important paragraph <p> tag.
Why is Duckett even mentioning <b> and <i> and not <strong> and <em>?
White space collapses on a web page.
Line breaks <br/>, horizontal rules <hr/> and empty elements
Blockquote
Many semantic elements are not used very often
Editors: time to fire up Atom?
Images
Keeping your images in a folder. Remember that a web site is simply a folder, right?
<img>
Image formats
Resolution
Raster & vector images
Animated GIFs
Transparency
When examining Snow Fall, take a moment and talk about not over linking. What’s the difference between this article and a Wikipedia page filled with links? What impact does that have on readability? On keeping you engaged with the story? Or, possibly more importantly, on the site?
With Snow Fall, what’s the difference between reading just the text and viewing the site? Do you wonder how many people actually read the whole article? Would another format actually have done more justice to the writing? (That’s a strange phrase…”done more justice”….privileging the written word over other forms of storytelling?)
Leave a Reply