Variations on a song
Typeset, using HTML only, the lyrics to a song that you like.
Make two versions of the song using different HTML tags to change the typesetting, emphasis and meaning.
Upload all versions to your class site. Add links to each version to your class homepage.
- Download a text editor. I like Sublime text.
- Create a new file, and save it as index.html.
- Copy the following code into your file.
<!DOCTYPE html> <html> <head> <title>Song title goes here</title> </head> <body> <div>Song lyrics here!</div> </body> </html>
- Find the lyrics to a song and copy/paste them into your file.
- Save the file
- Open the file in your browser.
- Start marking up the lyrics to your song using HTML.
Use any HTML tags you want. Some to start with...
- Heading tags -
- List tags -
- Paragraph tags -
- Anchor tags (aka links) -
- Styling tags -
- Form elements -
- Media tags -
- Adding white space - use non-breaking spaces
or line break elements
Style your site
Use CSS to give your class website a visual style.
- Make a new file and save it as styles.css. This file should be in the same folder as your index.html file.
- Add a link to your stylesheet in the head of your index.html file like this:
<link rel="stylesheet" href="styles.css">
- Add some CSS styles to your stylesheet to change the visual appearance of your HTML. You can also change the html....
Use any CSS properties you like. Some references:
Loading a custom font with @font-face
CSS properties reference
CSS color values
Text styling in CSS
Setting height and width using CSS
An arrangement of pictures
Using only images, make a webpage that describes a physical space.
Use CSS box sizing (margin, padding, border, height and width) and positioning (position and display properties) to arrange the image elements.
Try using images from Yale Digital Collections.
You could choose any space, and the representation can be as literal, detailed, abstract, atmospheric or interpretive as you like. The idea is to experiment with sizing and positioning elements on the page, and to think about the edges of the screen.
A few to-dos for your Interview website
Add a title to your site.
- Titles appear in the tab of your browser.
- Add a title in the
<head>of your HTML document with a
- Example code
Add a favicon to your site
- A favicon is the small image that appears in the browser tab
- Add a favicon to the of your HTML document
- Example code
Using Media Queries, add at least one breakpoint to your site.
- Media Queries apply CSS styles conditionally based on screen size and format. They're what you use to change the layout of your site at different screen widths (for instance how to adjust the layout for mobile phones).
- Example media queries
Make a simple webpage that responds to typing.
Examples (just for inspiration, your site can be very simple):
Type a Tone
Bryce Wilner, Echo
Mengyi Qian, Typing Time
Pati Hill, Alphabet of Common Objects
A few references:
- Cyberfeminism Index
- Studio Fax
- Book Boy
- Type foundry previews: Lineto, OPS Type, Jung-Lee Type Foundry
Website as… Web design as… Surfing the web as… Programming as… Protocol as… Network as... Browser as… “Interactive” directory as….
Frank Chimero, The Web’s Grain, 2015
Laurel Schwulst, My website is a shifting house next to a river of knowledge. What could yours be?, 2018
Take a look at this website: www--arc.com
Then, spend some time writing your own version.
You could take one of the phrases above as a starting point for a metaphor of your own creation. Or start with one of the metaphors mentioned in the readings (website as room, website as shelf, website as garden, website as zine, web design as teaching a bear to ride a bicycle, internet as neighborhood, etc…).
Then… Make a simple html page with your text and style your response.
Since we’re working with metaphors, think of a visual reference for your text. What if you typeset it to look like a menu? Or a screenplay? Or a childrens’ book? Or a protest sign?
Experiment with any CSS properties, but you here's a list to start with:
top, right, bottom, left,
If you want to get into typesetting, here are some useful properties:
font-family lets you change the font of an element. Here's more on how to load your own font.
Make a simple bookmarklet that alters the viewing of a webpage.