Visual Poetry: HTML Basics
Concrete Poetry is a literary movement where words, letters, typefaces and other content are used as a visual compositional tool. It can be thought of as a type of Visual Poetry. However, in Concrete Poetry, the typographical effect plays a central role in conveying design and meaning. Concrete poets experimented boldly with language, incorporating visual, verbal, kinetic, and even sonic elements.
HTML is a markup language typically used to structure content on a web page with tags that convey to the browser the type of content and how it should be presented. In this lesson, we are going to use HTML in a visual manner that takes into consideration graphic space, design and meaning.
HTML Basics
What is HTML?
HTML stands for HyperText Markup Language and was invented in 1989 by Sir Timothy Berners-Lee, a computer scientist. Every website you’ve ever visited is rendered in HTML. Your web browser parses the HTML then renders the results.
HyperText is text that contains links to other texts. Markup describes a system of describing or annotating text files. Just like any language, HTML has its own vocabulary, grammar and syntax.
Structural Markup
The fundamental building block of HTML is the element. Elements consist of an opening tag, closing tag and content (text, image, video) sandwiched in between. The content is what the user sees on the webpage. The tags tell the browser the type of content and how to present it.
- Headings
- Paragraphs
- Lists (nested elements)
- White Space (line break)
Tutorial 01
Instructions
Choose an existing poem and digitize an interactive version for the web. Ubuweb, Open Library, and Monoskop are good sources. The poem should be able to fit on approximately one printed page. Let’s focus on breaking up the text in various ways, as much as you can with these limited HTML elements. Take white space into consideration and delineate a clear hierarchy of information on the page. For this exercise:
- Only use HTML
- In addition to the required boilerplate HTML, use only the following elements:
<p>,<br>,
How does the poem usually look? What happens if you present it more spaced out? More condensed? In a specific shape or form? What happens to the poem when you have to scroll to read it all?
Starter code for this tutorial can be found in this Github repository.
Examples
- Peter Finch’s Moon, 1973
- Carl Andre’s Odes and Lyrics, 1965
- Georges Perec’s Species of Spaces and Other Pieces, 1974
Resources
- Visual Poetry, Wikipedia
- Concrete Poetry, Wikipedia
- Dada Poetry, Wikipedia
- Typewriter Poems
- The Struggle for Happiness, or what is American about Black Dada, by Adrienne Edwards. Walker Reader. Feb 1, 2018.
Codepen Solution
Open the pen below. Click the Fork button in the footer of the Pen. A fork is a complete copy of a Pen that you can save to your own account and modify. You can start editing the code first, then fork when you’re ready to save your changes or create a fork before making your changes.
Semantic Markup
Semantic elements tell browsers something about the contents of the element. They designed to communicate the meaning of the content to the browser, developer, reader, and any other technologies interpreting the document (e.g. voice assistants, search engine web crawler, browser translation tools, or assistive technologies such as screen readers).
There are approximately 100 semantic elements available. There are approximately 100 semantic elements available. The following is a list of commonly used ones:
Tutorial 02
Instructions
Choose another existing poem and digitize an interactive version for the web. For this exercise, let’s focus on presenting the text in different hierarchies and scales using the following HTML elements: <div> ,<span> ,<h1> to <h6> ,<strong> ,<em> ,<ol> ,<ul> ,<li> and <a href="#"> . Do not link to external sites, rather link to parts of your poem using an attribute to assign an id . In doing so, think about how you can use the anchor links to meaningfully translate movement to your content.
Starter code for this tutorial can be found in this Github repository.
Codepen Solution
Open the pen below. Click the Fork button in the footer of the Pen. A fork is a complete copy of a Pen that you can save to your own account and modify. You can start editing the code first, then fork when you’re ready to save your changes or create a fork before making your changes.
View Source
One of the great things about learning to build web pages is having the ability to view the source code of other people’s web pages. You can learn so much by seeing how someone else builds their web pages. There are a couple ways to view a web page’s source in Google Chrome:
Bring up a page in your browser. Position the cursor on the page and right-click or CTRL-click. You’ll see a context menu similar to the one in the screenshot. Select View Page Source and a new window displays the page’s markup.
In the browser menu bar, select View > Developer > View Source. Alternatively, you can use the keyboard shortcut, Option-Command-U
HTML Structure — Basic Requirements of a Web Page
HTML defines the structure and content of information on the page. All HTML pages have the same basic structure:
Page Structure
Nesting
Think of HTML tags as boxes that hold your content. That content can be text, images, or video. Sometimes, you need to place boxes inside of other boxes. Those “inner” boxes are nested inside of others. A perfect example of this is the bulleted list. The list items are nested inside of the unordered list tag.
Nesting HTML Tags: How to Nest HTML Tags Correctly, by Jennifer Kyrnin. Updated June 26, 2019
Relationships — HTML Hierarchy
We often use the same terms that we would use to describe the relationship between family members, to describe the relationship between HTML elements. Each element is related to another element in a parent-child-sibling relationship.
An element that is directly above another element in the hierarchy is called the parent of the element below it. The element below the parent is called the child. When two elements are equal in the hierarchy, they are known as siblings.
Document Object Model (DOM) Tree
In the DOM Tree, the opening and closing <html></html> elements form the foundation upon which the rest of the document is built.
- What is the Document Object Model, The World Wide Web Consortium (W3C)
- Understanding the DOM Tree and Nodes, Tania Rascia, November 7th, 2017
Indentation
While indentation has no bearing on how the page is rendered in the browser, it is especially important for readability of your code. Indented code is easier to read, easier to understand, easier to modify, and easier to maintain (e.g. is you forget to include a closing tag). Common practice is to indent one tab space for any tags that are nested inside other tags.
Whatever format you decide to use, just be consistent.
Block vs Inline Elements
Historically, elements could be classified as either: block-level elements or inline elements. Block-level elements have built-in line breaks, causing them to automatically stack vertically, while inline elements wrap within their containing elements.
Attributes
All HTML elements are able to support attributes. Attributes vary depending on their use, but always live within the opening tag of an HTML element. For example:
Here, href is the attribute and will always follow the attribute-name="value" convention.
Below is a list of extremely helpful attributes that allow you to add custom meta-information to your HTML elements. They become immensely helpful when targeting these elements with CSS and/or JavaScript .
- HTML Attribute Reference, MDN Documentation
- HTML Attribute, Wikipedia
Forms
The search box that sits in the middle of Google’s homepage is a simple form — specifically, an input field.
Forms are an important way to gather information from visitors to your site. We will use forms later in this course to create dynamic pages.
- Forms, MDN Documentation
- Basic Native Form Controls, MDN Documentation
Exercise— #01
Make three more variations of your poem, so now you have a total of five visual poems. Each variation will be a separate web page using HTML for both semantic and visual expression. For these variations, focus on changing the poems form through shifts in spacing, scale, hierarchy and typography. The creation of multiple variations means that no one representation of the poem is important than any of the others. This should allow you ample room for visual experimentation.
Starter code for this tutorial can be found in this Github repository.
Keep in mind the inherent behavior of block level vs inline HTML elements. This assignment borrows heavily from Laurel Schwulst’s exercise 25 Variations.
