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.
Getting started
- 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 -
<h1>,<h2>,<h3>, etc - List tags -
<ul>,<ol> - Paragraph tags -
<p> - Anchor tags (aka links) -
<a> - Styling tags -
<i>,<em>,<b> - Form elements -
<button>,<textarea>, etc - Media tags -
<img>,<video>,<audio> - Adding white space - use non-breaking spaces
or line break elements<br>
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.
Interview wrap-up
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<title>tag - 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
Keyboard instrument
Make a simple webpage that responds to typing.
Resources:
Examples (just for inspiration, your site can be very simple):
Type a Tone
Bryce Wilner, Echo
Mengyi Qian, Typing Time
Timestamp typeface
Pati Hill, Alphabet of Common Objects
Input-Output
Using an HTML input type (or select element) and JavaScript/jQuery, make a website that responds to user input.
Refer to:
A few references:
- Cyberfeminism Index
- Studio Fax
- Book Boy
- Type foundry previews: Lineto, OPS Type, Jung-Lee Type Foundry
Website as...
Website as…
Web design as…
Surfing the web as…
Programming as…
Protocol as…
Network as...
Browser as…
“Interactive” directory as….Inputs:
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:
padding, margin, border, position and top, right, bottom, left, display, height, width
If you want to get into typesetting, here are some useful properties:
font-style, font-weight, font-size, text-align, line-height, letter-spacing, text-transform
font-family lets you change the font of an element. Here's more on how to load your own font.
Bookmarklet
A bookmark normally takes you to a new web page. A bookmarklet is a bookmark that runs javascript on the current page instead of taking you to a new page. To declare that it is a bookmarklet, the "location" it points to starts with javascript:.
Make a simple bookmarklet that alters the viewing of a webpage.