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...
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....
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.
A few references:
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.